TileMap on a scrolling world

Haxe
#1

I have a question about TileMap, that I have not been able to find any good answers on after much searching.

Lets say you have a huge scrolling world made of tiles: 1000x1000 tiles just as an example. Then we have a viewport that is 1024x768, and each tile is 64x64 pixels. TileMap is a little inconveniant in this case as it needs to update the x and y of each visible tile individually (if I have not misunderstood totally).
What would be the best approach (and I’m interested in performance above all else).

  1. Each tick, remove all tiles from the tilemap and re-add them again with correct id, x, y
  2. Each tick, try to figure out only which tiles changed and remove or replace/reuse them. On all the tiles that stayed the same: only update x & y.
  3. Add the tilemap as a child to a sprite, move the sprite, only update tiles when needed.
  4. Something else? Add all the tiles and add the tilemap as a child to a sprite that you move around instead? Sounds crazy but have to ask =)

Oh, and lets complicate the question with the fact that it is actually parallax scrolling with several layers as well.

#2

Oh, I see now that TileMap actually extends DisplayObject, meaning I can move it directly with x and y and don’t need to add it as a child to another sprite to be able to move it around.

#3

So it’s kind of inefficient to render an entire 1000x1000 world when only a tiny portion of that is in view. Ideally, you’d only render the tiles you need.

Here is one example of how this might work. This demo creates exactly 256 tiles, and then it moves them around and changes their colors to give the illusion that the camera is scrolling past a much greater number of tiles.

For the record, you don’t have to remove and re-add tiles to change their id or coordinates. Just change those values and they’ll automatically update.

#4

Interesting. Thanks for the demo player_03!

Do you have any idea if it would benefit - performance wise - to move the x and y of the tilemap inside a scrollrect (while moving the sub-tile distances 0-64 px), or to modify the x&y of each tile on each tick?

If no, I guess the only way to find out is to test it myself…

#5

Since you’re dealing with such a small number of tiles and scrollRects, I wouldn’t expect it to make much difference either way.

#6

The small numbers were only to have a simple example. My use case is unfortunately a bit more complex. But my biggest hurdle has been that I found the API to be very unclear on how it’s supposed to be used… however, you’ve given me a very valuable clue by telling me to just change the id of the specific tile! In the documentation the id property is marked as read only, which is acutally incorrect!

http://api.openfl.org/openfl/display/Tile.html#id

I also noted that the property tileset is also incorrectly marked as read only!

http://api.openfl.org/openfl/display/Tile.html#tileset

This means that I can just create the exact number of tiles I need in the tilemap (number of tiles that fit across + 1) and can then update the x, y and id. Really simple!

1 Like