Pixel-by-pixel destructible terrain?[Yup, why not]

  • newt Indeed, I've been thinking of a separate editor for the last hour or so:) Maybe even like a simple raster editor.. MSPaint via tilemaps, huh?:)

    But I would still like to know, if the method I've described is possible ^_^

    Ofcourse, this way of generation will take a while.

    And I don't really mind it:) I mean, we'll need to do it just once per generated level, inside a level editor.. Then we save tilemap to a file and simply use that file in our game. So, in this case, does it really matter how long it takes to generate?

    Well, not speaking about 4096x4096 sprites xD

    Let's say, we have a level built of 100 MaskSprites, 64x32 each.

    To generate this one, we'll need to run 100 loops, 2048 iterations each.. That doesn't really sound like eternity to me;))

  • That's completely doable, just take a look at the Canvas object's Canvas.rgbaAt(), or Canvas.alphaAt().

    Personally I would just fill a layer with tiles, and erase those not needed by using the mouse, and layer scale.

  • newt Thanks! :D I will definitely look into Canvas plugin:) Haven't tried it yet <img src="smileys/smiley9.gif" border="0" align="middle" />

    Personally I would just fill a layer with tiles, and erase those not needed by using the mouse, and layer scale.

    Yeah that'd be easy for simple shapes.. But if we want some complex scenery?:)

    Anyways, thanks for help again:D

    I'm now working on a tilemap editor, and I'll try both methods to compare them:)

    (Tho using Canvas object is a brillinat idea, question about pixelalpha(x,y) as a regular expresson is still up :P)

    Hopefully I'll get it running in a couple of hours ^_^

  • Btw, take a look at tilemap+physics :)

    link

  • :o thats pretty sexy *assimilates*

  • JJList

    This reply is a bit late but as for the original clearing I couldn't get it any faster by not using sqrt.

    As for using the pixels from the canvas object here's an example:

    https://dl.dropboxusercontent.com/u/5426011/examples21/canvasWithTileMap.capx

    It is very slow, for me the whole bit takes about 5 seconds to transfer the canvas to the tilemap.

    So on a whim I also did a test with a snapshot and straight javascript using the browser object since I didn't want to make a plugin.

    https://dl.dropboxusercontent.com/u/5426011/examples21/snapshot2tilemap.capx

    For me it takes about 3 seconds. After looking at the times I think it can be made faster by bypassing the array and just converting the pixels to a format the tilemap can load. But that isn't a simple task as the format is pretty complicated.

  • Bravo for getting that to work form the browser object!

    The only problem is snapshot only gets the view port.

  • Well you don't have to use the snapshot, it can also load images in the files folder.

    So as in the title "why not", I updated this further. It now converts an image directly that can be loaded into the tilemap object. Right now it just does tile/no tile based on the alpha of the pixels, but it can be tweaked to use different tiles based on color.

    https://www.dropbox.com/s/vsq1xdlyvr7od ... .capx?dl=0

    Also on the plus side it's much faster. For me it works in just under a second for a 1280x1024 image.

  • replying to bookmark this for later reading....

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Never would have thought of loading an image. That's the k.i.s.s. method at its finest.

  • R0J0hound That is brilliant! <img src="smileys/smiley32.gif" border="0" align="middle"> Exactly what I expected to see!:D

    Tile/No tile works perfect if we want to use generated tilemap as a collision mask;)

    As for colored tiles.. Well, that might be a bit harder, but still possible :D Well, at least for 8bit color palette ^_^ 256 tiles, not too hard:)

    Here is a little demo of a 1pix TileEditor that I'm trying to create.. Not sure if it's useful:P But anyways, it's a nice chunk of experience for me:)

    I thought I'd have a bit more time to work on this one, so it is now at a very early state:(

    Right now you can only draw/erase tiles by hand, using simple brushes and 4 colors.

    Should've done it faster, but when it comes to drawing and setting up GUI interactions, I'm just too slow and pedantic <img src="smileys/smiley29.gif" border="0" align="middle">

    Works a bit slow in browser.. But it's pretty fast in node-webkit preview.

    I'm totaly going to include image-to-tilemap generation and save/load/export functions in later versions:)

    Also I'll try to implement zooming/scrolling and setting canvas(our entire tilemap) size.

    Plz let me know if you find any bugs! And also I'd appreciate any ideas on what functions should I add <img src="smileys/smiley9.gif" border="0" align="middle">

  • R0J0hound awesome! I guess Pixel Press team will be mad at you.

    http://projectpixelpress.com/

    JJList Nice editor, it reminds me some Amiga software, it's still awesome, the biggest problem C2 lacks RGB color feature to apply brush color.

  • JJList

    This reply is a bit late but as for the original clearing I couldn't get it any faster by not using sqrt.

    As for using the pixels from the canvas object here's an example:

    https://dl.dropboxusercontent.com/u/542 ... leMap.capx

    It is very slow, for me the whole bit takes about 5 seconds to transfer the canvas to the tilemap.

    So on a whim I also did a test with a snapshot and straight javascript using the browser object since I didn't want to make a plugin.

    https://dl.dropboxusercontent.com/u/542 ... lemap.capx

    For me it takes about 3 seconds. After looking at the times I think it can be made faster by bypassing the array and just converting the pixels to a format the tilemap can load. But that isn't a simple task as the format is pretty complicated.

    I was wondering, using a 16*16 tilemap (256 colored pixels), could we potentially have a way to load an 256 color image and choose one particular value that would count as transparent if we could read the different color identifiers of the image (like the top left pixel would be the transparent one) without too much trouble performance wise?

    Because I think this is a good concept, but I don't know how much time it would take to perform identification process.

  • JJList, hi friend, can you reupload the Mask generation example again?

  • Well you don't have to use the snapshot, it can also load images in the files folder.

    So as in the title "why not", I updated this further. It now converts an image directly that can be loaded into the tilemap object. Right now it just does tile/no tile based on the alpha of the pixels, but it can be tweaked to use different tiles based on color.

    https://dl.dropboxusercontent.com/u/542 ... pJSON.capx

    Also on the plus side it's much faster. For me it works in just under a second for a 1280x1024 image.

    R0J0hound Hey friend, its me again, can you reupload this example again? thanks in advance.

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