Stephan_H

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 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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: https://github.com/StephanHQ/PIXI-Tilemap-Renderer
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.

Share this post


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

https://codepen.io/goodboydigital/pen/vdvEmE

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

Share this post


Link to post
Share on other sites

Is there a way of changing the drawn tile size with tilemap.addFrame(png,x*size,y*size)?
For example, instead of drawing 32px*32px tiles, the t.addFrame should draw 16px*16px tiles of the original 32px*32px tiles.

Share this post


Link to post
Share on other sites

no, there's no such feature per tile, however something can be done with hacks for the whole tilemap, like, set its scale to 0.5. Why? Because I traded rotations and scale for faster buffer upload. I think when I port it to v5 i'll add scale and rotations back or at least make them optional.

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.