Jump to content

Stuck with creating tilemap


Recommended Posts

Hi guys,

For the last week I am trying to create a tilemap, see https://cdpn.io/thijmen-the-decoder/debug/mdOvwEB/mWMoNzYYEVpk


What I do is that I create the grid with Y and X and I put the Sprites on the canvas.

The problem that I am having now is that it uses a lot of CPU.

Now I am using pixi-tilemap, but I am having issues with clicking on tiles. That's something I can work around, but I wonder how I can change the `tint` of tiles on the map after it's rendered? 

I was hoping someone from here was able to give me a hint in the right direction. Any tips on how I can improve my codepen is also welcome.

Thanks in advance.

Link to comment
Share on other sites

That's something I can work around

yes, you have to check it manually.

how I can change the `tint`

You cant. When i have time (right now i dont, i have BIG queue of plugins right now), ill do both https://github.com/pixijs/tilemap/pull/88 and tint. and double-tint ( black-white). 

If you know how to do it in webgl, you can just modify pixi-tilemap sources of shader and add extra param "tint" everywhere

Link to comment
Share on other sites

In general, 

low-level algos - container+sprites , particleContainer+sprites, graphics, pixi-tilemap

high-level algos - whole map, window around camera, chunks

If pixi-tilemap is slow for you, that means your high-level part is bad. Here's stupid implementation for window: https://github.com/ivanpopelyshev/pixi-starfighter/blob/master/lesson1_5-tilemap/game.js#L307 , fill() method that only takes tiles that are inside window around camera, and updateView() that checks whether camera is outside window, therefore we have to move it and fill() again.

Link to comment
Share on other sites

@ivan.popelyshevOkay so what I did so far:

Cloned v5 version of pixi-tilemap, moved it in my project. Works!
Now I try to apply the tint colors from that MR. I copied the changes (methods) to my files, but I'm getting errors like:


display.es.js:1451 Uncaught TypeError: Cannot read property 'transform' of null
    at RectTileLayer.Container.updateTransform (display.es.js:1451)
    at CompositeRectTileLayer.Container.updateTransform (display.es.js:1457)
    at Container.updateTransform (display.es.js:1457)
    at Renderer.render (core.es.js:9863)
    at animate (index.ts:107)


I have zero experience with shaders or whatsoever. Can you give me a hint in the right direction?

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