How do I import tilemap data into a canvas?

1 favourites
  • 13 posts
From the Asset Store
Pixel Destruction like in "Worms" (Drawing Canvas based)
  • Hi. I'm making a tile-based game, and have a customizable level made up of tiles in a tilemap. I have a canvas object that I'd like to use as a minimap for the whole level, where 1 pixel = 1 tile.

    Below is a general idea of what I want to be happening:

    How would I go about this?

  • Here's a demo that converts your tilemap tiles to individual pixels in a drawing canvas. I've made it so the pixels are the same colour as the tiles but you could simplify that by just using a single tilecheck and placing all of the all of the tile numbers you have in that condition.

    1drv.ms/u/s!AkmrWgxeuxlKhIdu6wJRbN29n9a8MA

  • Here's a demo that converts your tilemap tiles to individual pixels in a drawing canvas. I've made it so the pixels are the same colour as the tiles but you could simplify that by just using a single tilecheck and placing all of the all of the tile numbers you have in that condition.

    https://1drv.ms/u/s!AkmrWgxeuxlKhIdu6wJRbN29n9a8MA?e=5wRQJO

    This works fine, but when it comes to bigger level sizes (say.. 500x500) and having to update each time a tile is placed or removed, it gets bad. Ideally, what I want to do is run your code once (initializing the whole world), and then only update each individual pixel when tiles get changed.

  • Just use that code at the start, then create another function that you call whenever you change a tile. Pass the TileX&Y position to the function and then use those variables, to replace the minimap section.

  • calminthenight

    Oh that's absolutly wonderful !!

    Do you think you could also do the opposite, ie coding tilemaps in an image ? That would allow to create many many levels from tiny bitmap images. And imagine if all these images could be stored in one spritesheet.

  • I've not done it, but it should work since both drawing canvas and tilemap use coordinate systems.

    You would probably need to load your drawing canvas image (with specific colour values used to represent specific tiles) and then use the:

    SnapshotRedAt(x, y)

    SnapshotGreenAt(x, y)

    SnapshotBlueAt(x, y)

    SnapshotAlphaAt(x, y)

    to get the values at each coordinate, if they meet the conditions you set then you place the appropriate tile at those coordinates.

    You could just use a single colour value to keep it simple, so you only have one condition to check.

  • I've not done it, but it should work since both drawing canvas and tilemap use coordinate systems.

    You would probably need to load your drawing canvas image (with specific colour values used to represent specific tiles) and then use the:

    SnapshotRedAt(x, y)

    SnapshotGreenAt(x, y)

    SnapshotBlueAt(x, y)

    SnapshotAlphaAt(x, y)

    to get the values at each coordinate, if they meet the conditions you set then you place the appropriate tile at those coordinates.

    You could just use a single colour value to keep it simple, so you only have one condition to check.

    I'm afraid I wouldn't know how and where to start. Any help would be greatly appreciated

  • It's essentially the same function as before (the draw and drawline loops), but swap the tilemap and drawingcanvas around.

    you can either draw in your canvas or paste a premade image into it, then take a snapshot of the canvas and do the comparison. (you need to set the dimensions of the canvas to something that translates to the dimesnions of the tilemap)

    Because the canvas alpha value is 0 when cleared I just did an alpha comparison to see if a tile needed to be placed.

    So:

    if drawingcanvas.snapshotAlphaAt(loopindex, drawY) = 100 then Set Tile at (loopindex, drawyY) to Tile0 (or whatever tile you want to use)

  • Hi calminthenight

    Thanks for all this !

    I tried to adapt the capx following your advice. I get everything looks fine except something doesn't look to work when testing opacity : every pixel returns 100 value so the whole tilemap is filed.

    Here is what I came up with :

    and here is the file : https://www.dropbox.com/s/p4my3kk4tcihbk2/MapFromPixelSprite.c3p?dl=0

  • Just checked your file and it looks like it is working :)

  • Just checked your file and it looks like it is working :)

    calminthenight

    Well, that's most surprising !!!

    This what I get. Tilemap was supposed to display a pattern similar to the little black and white sprite on screen, not a full square

    Actually, there seem to be a scale related problem. When I run in debug mode and change viewport scale, tile map adapts and displays the pattern in various ways :

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Ah yes, it seems that is one of the limitations. You either need to make sure that the viewport scale is close to original when you make the paste and snapshot, or that you manually adjust the scale of the canvas and image in opposition to any viewport scaling so that they are always at the original scale.

    i.e. if your image is 100px x 100px and your viewport has scaled it down, you need to return the image to it's original dimensions in relation to unscaled screen pixels.

    Personally I think this limitation makes it not worth it, and I'm interested in finding a way to pull pixel location and RGBA values directly from image data.

  • Ah yes, it seems that is one of the limitations. You either need to make sure that the viewport scale is close to original when you make the paste and snapshot, or that you manually adjust the scale of the canvas and image in opposition to any viewport scaling so that they are always at the original scale.

    i.e. if your image is 100px x 100px and your viewport has scaled it down, you need to return the image to it's original dimensions in relation to unscaled screen pixels.

    Personally I think this limitation makes it not worth it, and I'm interested in finding a way to pull pixel location and RGBA values directly from image data.

    Oh, I get It. I managed to do something but couldn't achieve it. I'll open new topic about this.

    Thabks anyway for your help so far

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)