Draw only a part of a tilemap

[Jerorx]

Hi,

I'm creating a tilemap from a map made in Tiled. When I import it and create a layer in Phaser, the whole layer is created. I'm dealing with a medium-sized map, but I guess on huge maps, this might become costly, performance-wise? Isn't there a way to create a small part of the layer, for example the region around the player, and to create other parts as the player explores the map, in order not to ever create the full map, or only in the rare cases when the player explores it all?

 

[phreaknation]

Break the tilemap into smaller chunks and display those parts. You could also load the map data and just render parts. I have done that with the Isometric plugin

[The_dude8080]

1 hour ago, phreaknation said:

Break the tilemap into smaller chunks and display those parts. You could also load the map data and just render parts. I have done that with the Isometric plugin

Did you load an entire map and then select what to render? Is is like a map array?

[phreaknation]

at the time I was using perlin noise but you can use this with a map array. I grabbed some point in the array based on XY, and then I created a rotation array which was a simple 8 direction array and then rendered the sprite at the initial position and then walked around the rotation to the next positions, drawing and rendering them. I made a video where I am slowing things down for the rendering. I had to add in a timeout to even get things to not render instantly. I made another video showcasing it in action with a smaller render size. I will be bottling this code up soon as a plugin for phaser and the isometric plugin after I finish the plugins I am working on currently. I wouldnt expect it till at least next weekend at the EARLIEST though.

[phreaknation]

Ohh and to note I added a nifty function to check to see if x and y are within the camera screen and if they were it was renderable. I would recommend doing the same if you dont want to use my plugin

[jimanji]

1 hour ago, phreaknation said:

at the time I was using perlin noise but you can use this with a map array. I grabbed some point in the array based on XY, and then I created a rotation array which was a simple 8 direction array and then rendered the sprite at the initial position and then walked around the rotation to the next positions, drawing and rendering them. I made a video where I am slowing things down for the rendering. I had to add in a timeout to even get things to not render instantly. I made another video showcasing it in action with a smaller render size. I will be bottling this code up soon as a plugin for phaser and the isometric plugin after I finish the plugins I am working on currently. I wouldnt expect it till at least next weekend at the EARLIEST though.

are you using physics and world bounds? i watched the video and it is exactly what i want to do but im not sure how to implement my idea because if i dont use world bounds my physics mess up and my character flies off the screen. if i do use world bounds it limits me to having to know the size of the map up front, but i want it to be dynamic so i wont know the initial size. thank you.

[phreaknation]

I did not use world bounds because my code was to be, in the end, map data pulled from google maps. Which I am still working towards. I forgot if I used physics or not . I believe I did. I will have to look back in the code.

[Jerorx]

Ok I made some progresses based on what was mentioned here, but here is where I'm stuck now.

The end goal is to be able to offer to the players very, very big maps, and to do so efficiently. That's why I try to draw only the relevant parts of the maps (or "chunks" in the procedural terminology). The big problem about performance are the layers; very big layers, even with no tiles, will make the game extremely slow. Therefore, it is NOT an option to start with a huge layer and draw to it (using putTile() for example) as the game goes. I have to start with a small layer, and then expand it gradually.

But I don't seem to find any way to change the size of the render area of a layer after creation. If I create a layer of size 20 tiles * 20 tiles, I can putTile() wherever in that area; but if I try to putTile() outside of these coordinates (at 21,21 for example), it obviously doesn't work, no matter how I mess with the layer properties (I tried resize(), I tried to change the dimensions of the layer.data object which holds the tiles, etc. but to no avail).

(NB: I would also need to do the opposite, that is shrink the layer to remove the parts that the player has visited and left, in order to keep as small layer size at all time. I guess if you can do one you can do both.)

I may not be doing it the right way, and I suspect I would need to dig into the underlying Pixi stuff, but I'm not familiar with this at all so any hints would be appreciated.

[msickle]

I am working on a game where I want to change the tiles dynamically, but have a similar issue.

What I am doing is just importing a blank or one tile map from tiled, to associate the spritesheet and use for display.

Then I manage my own map, in my own objects and simply update the index value of tiles in the display map to match as needed.

[phreaknation]

why render large parts. I would keep everything to what you see on the screen and just offset things. There are ways to do this and just move the on screen tiles and keep the player centered in the screen. Just grab the data that is needed.

[jimanji]

i debugged my issue and found out that setting gravity while using the isometric plugin and not being bound to the world is what causes it to fly off the screen. The gravity causes the z velocity to be set. So I should be back on track for my project. I would love to checkout your plugin though when it's made because it does exactly what I am wanting to do.