Stuck with creating tilemap

[Thijmen]

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.

[ivan.popelyshev]

> 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

[Thijmen]

Alright, thanks! Will look into that.

As for my codepen example - you have any idea how I can optimize it? In my application it will have all the tiles shown, so I cannot apply "only rendering what's visible" 

[ivan.popelyshev]

> This debug view expired.

Cant view it

[ivan.popelyshev]

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.

[Thijmen]

3 hours ago, ivan.popelyshev said:

> This debug view expired.

Cant view it

https://cdpn.io/thijmen-the-decoder/debug/mdOvwEB/PNrvYXyJnRBM updated.

I try to see if I can use that MR to adapt it to my own TileMap which extends from the TileMap plugin. 

[Thijmen]

@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?