Loading a slice of an enormous map?

[litehacker]

Hello, I'm just starting to learn pixi.js

I want to make a game where the main character is in the middle of the screen all the time, while the map moves behind the character as it is walking.

The problem is, the map is going to be extremely large. I'm going to be zoomed in on a very small portion of it.

The easiest way for me to load the map, is to simply load that whole thing onto the screen. Since the whole map obviously won't fit on the screen, it'll just show a small portion. Then I can just change the x, y coordinates of the map, to make it move.

But, unless pixijs is doing some good memory management I am unaware of, doing it this way will overload the memory.

I'd need to be able to smoothly walk through the whole map without interruptions to load another portion of the map.

Anyone try and do something like this before? What do you do to try and optimize it?

[ivan.popelyshev]

Most people forgot that there's simple way that works almost on every engine/renderer/whatever:

Maintain a window that's 2x or 3x times larger than camera. When camera hits the bounds, move the "window",  re-calculate all the background objectts inside the "window" and put them in Graphics/tilemap/mesh/whatever_you_use_for_the_map.

If that way fails due to huge "refill" that takes more than a one fram time, then you have to implement chunks and all that stuff you are afraid of.

[unagii]

 

I'm currently working on a similar problem. it depends on the type of map you want. I think the fastest way is to use tiling sprites and masks. like here mapDemo. I used only 5 tiling sprites and 5 masks. Any other suggestions?

[ivan.popelyshev]

1 hour ago, unagii said:

 

I'm currently working on a similar problem. it depends on the type of map you want. I think the fastest way is to use tiling sprites and masks. like here mapDemo. I used only 5 tiling sprites and 5 masks. Any other suggestions?

Intel HD Graphics will die, you are drawing 10 times each pixel.