How do I store tilemap information into a bitmap sprite ?

0 favourites
  • 14 posts
From the Asset Store
Enchanted Forest & Cave 16x16 Tilemap with Environment Sprites
  • Hello

    I try to create an engine that will allow me to build tilemaps from a bitmap. I think it will be an easy and memory friendly system to store tilemaps.

    Thanks to calminthenight, I managed to adapt this little engine that works this way :

    - create a bitmap on transparent background where every pixel represents a tile in the tilemap

    - paste bitmap in canvas object, take a snapshot

    - scan the snapshot line after line ans check certain color (in the current example, I scan only for red pixels, i.e. where DrawingCanvas.SnapshotRedAt = 62)

    - create related tile at same coordinate in the tilemap

    The system logic is ok but it seems there is a viewport scale issue, i.e. when my original bitmap is 10x10 pixels, its size changes according to viewport scale when layout is displayed. So the created snapshot could be bigger, a 1x1 pixel could become a 2x2 pixel and the tilemap is not correctly created. Here is the original file : https://www.dropbox.com/s/p4my3kk4tcihbk2/MapFromPixelSprite.c3p?dl=0

    Following are two screencap showing how thinks show on screen at different viewport sizes and the image of the original sprite.

    Tagged:

  • Yes, the snapshot size will be different, depending on the window size. You can use SnapshotWidth and SnapshotHeight expressions to convert from image to snapshot coordinates.

    I'm afraid on some screens SnapshotWidth and SnapshotHeight may be smaller than the image size, and you will lose some pixel information.

    So this may not be the most reliable method. I would use an array instead.

    .

    There are probably ways to read pixel data from image without the drawing canvas. See this comment:

    construct.net/en/forum/construct-2/how-do-i-18/simple-scorched-earth-worms-129595/page-2

  • construct.net/en/forum/construct-2/how-do-i-18/simple-scorched-earth-worms-129595/page-2

    Unfortunately that method doesn't work in C3

  • > construct.net/en/forum/construct-2/how-do-i-18/simple-scorched-earth-worms-129595/page-2

    Unfortunately that method doesn't work in C3

    Damn ! We're doomed...

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Nah just need someone with some C3 JS knowledge to show me how to modify it for C3. Or I'll get there eventually through blind luck.

  • You can use "pick by point". Its a bit weird as far as setting up goes but it works.

  • You can use "pick by point". Its a bit weird as far as setting up goes but it works.

    I'll be happy to see this in action

  • Laurent Check this out:

    https://www.dropbox.com/s/u59b4ogf0vwo4lm/BitmapToTilemap.c3p?dl=0

    Thanks dop2000 !

    That's most impressive, I see the logic behind.

    Unfortunately, it's still seems to work erraticly. Most of the time, the design is perfectly transcribes, but it stills displays two rows vertically when the bitmap has only one.

    I never thought it would be so difficult to sort out. I guess I will rely on some sort of array.

    My goal was to create solid tilemaps to display invisible above a map drawing in order to code obstacles for pathfinding.

  • When DrawingCanvas.PixelScale is >1, there may be some data loss. Should be fixed now, please re-download the file.

  • When DrawingCanvas.PixelScale is >1, there may be some data loss. Should be fixed now, please re-download the file.

    Wow ! That's absolutly beautiful ! Thank you very much.

    I'll then try to adapt it to allow more than two colors. I was surprised to see that the red component for pixel was nowhere to be find in the different ways to code color. I think I'll use a bitmap with many colors and use SanpshotRed/Green/Blue at to se what values are return in these pixels.

  • I was wondering what I missed here, I couldn't see any link that you posted dop. Turns out I can't see either your post with the link or Laurent's reply until i go to make a reply post and it appears in the thread history below.

    That's a new forum bug for me.

  • That solution seems to work perfectly :) Laurent You can remove the else condition and clone the first event twice, swapping out the snapshotRed for green and blue.

  • That solution seems to work perfectly :) Laurent You can remove the else condition and clone the first event twice, swapping out the snapshotRed for green and blue.

    Thanks I'll do that way. I still find strange this red value seems to come out of nowhere.

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