Jump to content

Fast Pixi Tilemap Renderer trying to fix


Recommended Posts

I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. 
I am using the pixi-tilemap library to  create a fast & simple renderer to render a dynamic tilemap.

The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function  .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added.
The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial 

Link to comment
Share on other sites

I will look at it today or tomorrow, but there's something i can mention right now

I'm working on new tutorial , https://github.com/ivanpopelyshev/pixi-starfighter , and it has a tilemap based on v5 graphics. You can use the same algorithm for pixi-tilemap. In fact im gonna use the same algo for pixi-tilemap v5 tutorial when I start it.

You already have something like that but I'm not sure that everything is correct. For example, im not sure about "tileset.position.set(startCol,startRow);" maybe you need *scale there

Link to comment
Share on other sites

Two more ideas not related:

requestAnimationFrame is the same as "app.ticker.add()" , and I recommend to read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop , it applies both to v4 and v5.

Here's your demo on pixi-playground: https://www.pixiplayground.com/#/edit/BWlwUnkwKmNnqV4we9ch5 
Please make it work so i can fix your bugs :)  You can take this tileset if you want:  http://ivanpopelyshev.github.io/bombermine-shuffle/img/tileset.png

Link to comment
Share on other sites

Hi Ivan, Thank you for your reply.
I was able to solve my issue almost. The bug was that drawn pixtures were not cleared.
Alan could add that at drawTiles() before drawing: tilemap.clear();

Still the renderer seems to jump every draw time. Somehow the PIXI playground seems not to save my code. That's why I opened a githubg page: 
I can't use a tileset.png as I don't know how to use that correctly. A Json file seems to be easier.

After that I will add a scale and a movement function to the tilemap renderer. Ill probably publish this renderer for others later that newbies won't have to waste too much time.

Link to comment
Share on other sites

21 hours ago, Christoph said:

Check this one, if all you need is static tiles. I did bench the "lookup" on very old devices some time ago (ipad2) and it was faster than batching tiles like you do.


I thought its very slow on old devices because of "mod" operation inside fragment shader.

Link to comment
Share on other sites

  • 2 weeks later...

The limit is 16384 because indices are 16-bit. We are working on the fix for that.

I'll look after vacation, im on ibiza now and I have a big queue of things to do in pixi plugins. I'll also send you invite to pixijs team when i'll be ready to talk about that thing :) Currently i'm trying to make https://github.com/pixijs/pixi.js/pull/5706 , it should help with porting pixi-projection and some other plugins.

Link to comment
Share on other sites

ok, i looked at your demo, and that's a very big zoom. 500k tiles in geometry is a very heavy scene. However im working on pixi-tilemap improvements and maybe i'll add support of 500k tiles.

Thank you, I will use this demo for debug! Though I cant estimate the time, im currently under very heavy load.

Link to comment
Share on other sites

  • 2 weeks later...

I found a new bug in PIXI-Tilemap, which is probably correlating to the tiles limitation of 16384 tiles.

This time, I am adding a feature that objects will be shown as one big image instead of seperate layed together tiles like in:https://github.com/Alan01252/pixi-tilemap-tutorial

I would like to add pictures to illustrate the problem, however this website won`t let me ? So I will briefly explain my assumption.

The problem is that not all trees are displayed, altough the renderer perceives all trees which need to be rendered.
Simply, a few trees of a dozen are displayed.
Furthermore, when moving, these trees disappear at a certain point in the middle of the screen and other trees appear in the middle of the screen. Moving forward and back, this certain point for every particular tree is unchanging.

When delaying rendering trees trough collecting all needed trees in an array and then executing rendering, more trees are displayed, but not all trees.

This brings me to the conlcusion that the limitation of the plugin PIXI-tilemap is the cause of the problem.

Link to comment
Share on other sites

Pixi-tilemap has limit on number of baseTextures. I've modified the README: https://github.com/pixijs/pixi-tilemap#pixi-tilemap . It doesn't do batching, so if there are 17 textures with a limit of 16 it can do weird stuff.

Its general rule that plugins that do good performance or quality have certain limitations. Removing those limitations takes time.

Link to comment
Share on other sites

Well, since our last talk i've added an option to use separate textures and not united ones ;) No, pixi-tilemap for v5 is still not ready. As for performance, your case is really heavy, i have some ideas, but your ZOOM kills everything ) Need extra time to think on that, its not the only plugin im managing.

Link to comment
Share on other sites

I propose changing the way the renderer draws, as the renderer wont be able to draw more than 16k tiles per second.

My renderer draws the visible part of the map when moving which means moving every tile forward, the renderer must draw the whole map again.

I think a pc wont be able to draw all 500k tiles at once. Instead we can predraw a couple of chunks (32tilesx32tiles) sourrinding the visible part of the map. Like this ,the map appears smooth and big when moving, while the renderer works and predraws chunks at the area where the player goes to. And when zooming out, all chunks are scaled and simply moved and not drawn.

What you would need to do is

  • to put the limitation way higher or completly remove it,
  • make a seperate function to prepare tile/ object images (json) for universal .addFrame.
  • and introduce a function for the creation and deletion of tilemaps (chunks) in which .addFrame() is used

I imagine functions like this

chunk[a] = new Pixi.tilemap();
// I know these three functions already exist
// when created or a tile in this chunk changes
// when it is to far away from viewport

This is just a suggestion. Maybe you already have this idea.

Link to comment
Share on other sites

This is just a suggestion. Maybe you already have this idea.

Well, that's how I teach other people. Its not possible to do everything right from beginning, so evolution looks like that:

0. draw everything

1. Re-fill tilemap in whole window when camera touches the edge if "visible" zone.

2. Chunks.

3. Chunks with prefetch like in multiplayer, different distance for "NEED DRAW IT NOW" . "PUT IT IN QUEUE" and "TOO FAR, DELETE".

Congratulations for reaching chunks! My job with pixi-tilemap is to give basic element that can be used in any tilemap technique. Limitations also exist that way people try to balance low-level tilemap optimization and high-level algorithms instead of fully relying on some piece of code that I wrote :)

Link to comment
Share on other sites

Thank you for showing me up. 

Look, I am just trying to meet you halfway. Nowhere in your github posts were chunks mentioned, neither looks like your plugin Pixi-tilemap ready for chunks, neither is the chunks method new which you already exhibited.

As you have said, you are facing problems when zooming out which is why, I am just trying to meet you halfway.?

I would like to do a "high-level algorithms" renderer, however
et I dont think that Pixi-Tilemap is ready for chunks, as there is an "overall 16k tiles limitation" (how should it be then possible to go beyond) and creating a tilemap can be simplified without bounding texture to it.

tileset = new PIXI.tilemap.CompositeRectTileLayer(0, PIXI.loader.resources['atlas'].texture,true);

Link to comment
Share on other sites

well yeah, i mention it almost every tilemap thread here. Just not that one, because im not infallible ;)

Actually you dont need texture for a tilelayer, you can specify empty array there, it will automatically get texture from the frames you specify there: https://github.com/pixijs/pixi-tilemap/blob/master/src/CompositeRectTileLayer.ts#L69 https://github.com/pixijs/pixi-tilemap/blob/master/src/CompositeRectTileLayer.ts#L24 . I recommend to use that setting i specified in README for your case, it turns off strange "temp renderTexture" logic.

As overall 16k - its per one tilemap. You dont need big chunks, right? 16x16 or 32x32 or even 64x64 tiles in one chunk is fine

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...