Animated tiles using s̶p̶a̶w̶n̶ ̶s̶p̶r̶i̶t̶e̶s̶ functions

0 favourites
From the Asset Store
With this template you will learn how to use the GooglePlay Games native plugin
  • I'd like to do a simple animated tile by creating a sprite at every placement of a particular tile across the tilemap, and destroying/hiding it to give the illusion of a simple animation, but the actual expression is a bit tricky for me, am I supposed to create the sprite (which contains the second frame) at the tiles coordinate? How can I let C2 figure out where each tile of a specific number is on the map?

  • Animations can be done by switching between frames on a single sprite, you don't need to destroy one sprite and create another to create the illusion of an animation. If you're talking about many sprites to a tile then I guess just animate them in X order across the map?

  • The Tilemap object.

    You have all those conditions/actions/expressions to adress and manipulate a certain tile.

    https://www.scirra.com/manual/172/tilemap

    So, adressing the tile should be easy, its has x/y coordinates.

    Also the source squares in the tilemap are numberd. Setting one as a tile should be easy. The numbers you find in de Tilemap editor.

    So far i understand the question. I dont understand the reference to 'sprites' in the question.

    Either you use sprites on a grid. Those sprites you can give frames, and those frames can loop automaticaly, creating an animation.

    Or you use the Tilemap. Now, i have not seen someone yet making animations into a Tilemap by swapping squares.

    Its is possible for sure. Its an idea that i will try, never thaught of it before. You just use 'set tile'. All frames have to be in the Tilemap.

    Third option. Interpreting the question a bit differend. You want to place a animated sprite above a certain tile in the tilemap. For that you have the Tilemap expressions:

    TileToPositionX(x)

    TileToPositionY(y)

    Convert a tile position to layout co-ordinates. For example, this can be used to position a Sprite object on top of a given tile.

    Hope i did't guess to much.

  • The Tilemap object.

    You have all those conditions/actions/expressions to adress and manipulate a certain tile.

    https://www.scirra.com/manual/172/tilemap

    So, adressing the tile should be easy, its has x/y coordinates.

    Also the source squares in the tilemap are numberd. Setting one as a tile should be easy. The numbers you find in de Tilemap editor.

    So far i understand the question. I dont understand the reference to 'sprites' in the question.

    Either you use sprites on a grid. Those sprites you can give frames, and those frames can loop automaticaly, creating an animation.

    Or you use the Tilemap. Now, i have not seen someone yet making animations into a Tilemap by swapping squares.

    Its is possible for sure. Its an idea that i will try, never thaught of it before. You just use 'set tile'. All frames have to be in the Tilemap.

    Third option. Interpreting the question a bit differend. You want to place a animated sprite above a certain tile in the tilemap. For that you have the Tilemap expressions:

    TileToPositionX(x)

    TileToPositionY(y)

    Convert a tile position to layout co-ordinates. For example, this can be used to position a Sprite object on top of a given tile.

    Hope i did't guess to much.

    Forget the "destroy" part, I really just need to create an animated sprite over each placement of a particular tile. This post: how-do-i-create-animated-tileset-tilemap_p756298?#p756298 mentions the how:

    Technically you can't, as a tile is an inanimate sprite. If you wanted to do so, you would need to spawn a sprite on each specific tilemap tile.

    For example,

    if tilemap tile = 0, spawn sprite1

    if tilemap tile = 1, spawn sprite2

    etc

    and each sprite would be what is animated.

    I just can't figure out the way of expressing how to create the objects over the tiles.

    For reference, the tile I need to "animate" is two tiles right one tile down.

  • If you know the tile, you know its X and Y coordinates.

    You can convert between tile positions (px,py) and layout co-ordinates (x,y) using the PositionToTileX/Y and TileToPositionX/Y expressions.

    There must be something that is specific for that tile. You have 'painted' it on the map.

    On the moment that you are 'painting' tiles, you see numbers in the tilemap bar. That is the ID of that tile (zero based). Once you painted a "square" on the map. I gets a position, in the form of numberd positions. (forgot if its zero based, i suppose so) Positions are like 4th sprite from the left, 2nd kolom. Or px=4, py = 2.

    The condition > Tilemap > Compare tile at px=4 py=2 will give you the ID of that tile. The ID refers to wich square you painted in there.

    If the ID matches the square that you want to pick. Translate its px,py to real layout x,y coordinates.

    You can ofcours loop true the tilemap with a px and py loop and compare them one by one.

    So far for the system you asked to explain. But in the end you dont seem to care that much.

    Your tile is at px=2, py=1.

    So if you place on object on the x,y of that tile you set position of that object to

    (for x) Tilemap.TileToPositionX(2)

    (for y) Tilemap.TileToPositionY(1)

    But, i told you that allready.

  • If you know the tile, you know its X and Y coordinates.

    But in the end you dont seem to care that much.

    But, i told you that allready.

    ???????

  • If you know the tile, you know its X and Y coordinates.

    You can convert between tile positions (px,py) and layout co-ordinates (x,y) using the PositionToTileX/Y and TileToPositionX/Y expressions.

    There must be something that is specific for that tile. You have 'painted' it on the map.

    On the moment that you are 'painting' tiles, you see numbers in the tilemap bar. That is the ID of that tile (zero based). Once you painted a "square" on the map. I gets a position, in the form of numberd positions. (forgot if its zero based, i suppose so) Positions are like 4th sprite from the left, 2nd kolom. Or px=4, py = 2.

    The condition > Tilemap > Compare tile at px=4 py=2 will give you the ID of that tile. The ID refers to wich square you painted in there.

    If the ID matches the square that you want to pick. Translate its px,py to real layout x,y coordinates.

    You can ofcours loop true the tilemap with a px and py loop and compare them one by one.

    So far for the system you asked to explain. But in the end you dont seem to care that much.

    Your tile is at px=2, py=1.

    So if you place on object on the x,y of that tile you set position of that object to

    (for x) Tilemap.TileToPositionX(2)

    (for y) Tilemap.TileToPositionY(1)

    But, i told you that allready.

    Okay, so I need to run a loop to create an animated sprite for each of the tiles of a specific ID? I'm not really sure how to go about doing this.

  • You can actually animate tiles themselves, but you need to get creative. Basically, you should ensure that all animated tile sprites are consecutive in the spritesheet, and then, using a for loop, you iterate through all visible tiles and normalize tile IDs that refer to animated tile to the tile ID they should actually show.

    Here's a small example.

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

  • You can actually animate tiles themselves, but you need to get creative. Basically, you should ensure that all animated tile sprites are consecutive in the spritesheet, and then, using a for loop, you iterate through all visible tiles and normalize tile IDs that refer to animated tile to the tile ID they should actually show.

    Here's a small example.

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

    Perfect, thankyou! Especially like the trick to only work on tiles in the viewport to save on resources, brilliant example!!

  • Especially like the trick to only work on tiles in the viewport to save on resources, brilliant example!!

    Yep, save CPU time whenever you can! Only one little cave-eat though is that if the screen is scrolling faster than the tilemap "animation speed", you'll end up with tiles that seem to "lag" behind. You can negate the problem by expanding the for loops so it process one or two more rows/columns of tiles around the viewport.

  • Okay, so I need to run a loop to create an animated sprite for each of the tiles of a specific ID? I'm not really sure how to go about doing this.

    So, do you like that x&y loop in that capx ?

  • >

    > Okay, so I need to run a loop to create an animated sprite for each of the tiles of a specific ID? I'm not really sure how to go about doing this.

    >

    So, do you like that x&y loop in that capx ?

    yes

    Perfect, thankyou! Especially like the trick to only work on tiles in the viewport to save on resources, brilliant example!!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • You can actually animate tiles themselves, but you need to get creative. Basically, you should ensure that all animated tile sprites are consecutive in the spritesheet, and then, using a for loop, you iterate through all visible tiles and normalize tile IDs that refer to animated tile to the tile ID they should actually show.

    Here's a small example.

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

    Magistross

    Just digging this old thread up, having a bit of trouble with this?

    Can't for the life of me see what's wrong with that?

  • If everything is like in my capx, I don't see why it wouldn't work. However, without your capx it's hard to really see what's going on.

  • Make animTick static.

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