Jerorx

Draw only a part of a tilemap

Recommended Posts

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?

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.