Jump to content

Loading a slice of an enormous map?


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...