Jump to content

Issues with tile based game and render texture


Recommended Posts

Hi there,

I'm working on a tile based game using PIXI but as it is a commercial project I can't share the code. I was hoping if I explained what I'm doing someone more experienced may be able to give me some input if it is something you have come across already? 

Initially had some issues with lines between tiles when moving the container that holds them, but this was resolved in a number of ways such as not using texture packer, PIXI.SCALE_MODES.NEAREST and making sure to round off the x, y values so they are always integers, simple enough to fix.

Then having noticed was getting a poor fps on mobile I decided was time to optimise.  Initially I tried culling tiles not in view, but I didn't notice a huge performance difference with this.  So I decide I should use a render texture, and render the entire map container to the texture each frame.  This gave me a huge boost when testing on mobile, I'm a happy man :) but then... the lines between tiles are back when moving the container...

There are quite a few dynamic tiles such a platforms that move etc, hence why rendering the entire container.  So my next step is to try and be smart and split it into two containers, static and dynamic, refresh the dynamic container and only update the static one when I need to (preferably just once at the beginning).  Now I'm wondering if this would even work, as when I move the map container to move the player the static tiles, although they don't move individually, will still need updating every frame to get smooth movement. 

I want to stick with render textures as I feel this is the correct way to go about it, and that perfomance boost :) But wonder am I missing something here.  The Tilingsprite class for instance is not one I understand well, I think perhaps I could use it here? 

Thanks and apologies for a long post without a specific question.




Link to comment
Share on other sites

This should work for mobiles, yes.

But there's also lib https://github.com/pixijs/pixi-tilemap for static tiles. It even allows to use some animations. The idea is to draw big chunk of tiles in tilemap, and when camera moves to the edge of it, clear it and draw big chunk centered on current camera position. Its not using extra renderTextures, except that it compiles multiple 1024x1024 textures into one to satisfy requreiments of RPGMaker.

Link to comment
Share on other sites

I solved it in the end, it turned out I wasn't actually rounding the values I meant to, that was causing lines when I moved the container when it was on non int coords. 

I was aware of the lib but it was this limitation that put me off. Thinking next time I might use your lib, save myself some stress!

If it helps anyone else make sure you double check your rounding your container, and PIXI.SCALE_MODES.NEAREST on your tiles base texture is a good idea too.

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