pixi.js v5 support

[SET001]

should I use this with pixi.js v5? Should it work there? I'm using it as npm module and after switching to v5 I'm getting error

index.js:41879 Uncaught ReferenceError: PIXI is not defined
    at pixi_tilemap (index.js:41879)
    at Object.101 (index.js:41880)
    at o (index.js:1)
    at index.js:1
    at Object.43.../components (index.js:1846)
    at o (index.js:1)
    at index.js:1
    at Object.33.../../systems (index.js:1101)
    at o (index.js:1)
    at index.js:1

in this line PIXI.CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer)

Obviously I have imported PIXI in my bundle with import * as PIXI from 'pixi.js' but seems like this library require PIXI to be in global scope...

Another question is should I use TilingSprite instead of this TileMap. What cons and pros here?

[ivanpopelyshev]

No, i didnt convert it for v5 yet.

v5 has better Graphics implementation, you can just use beginTextureFill and drawRect to get it working with tiles. Its still has lower performance than this plugin but its much better than collection of sprites.

This plugin is basically highly optimized version of Graphics for tiles :)

[ivanpopelyshev]

As for using it as npm with v4, PIXI has to be global or pixi-tilemap cant hack it. Or pixi-tilemap has to be included after pixi. I dont use webpack. Its true for all my pixi-plugins.

[SET001]

also I tried to hack this problem like this

import * as PIXI from 'pixi.js'
(window as any).PIXI = PIXI

but then the problem is

Uncaught TypeError: Cannot read property 'registerPlugin' of undefined
    at pixi_tilemap (index.js:41881)
    at Object.101 (index.js:41882)
    at o (index.js:1)
    at index.js:1
    at Object.43.../components (index.js:1848)
    at o (index.js:1)
    at index.js:1
    at Object.33.../../systems (index.js:1103)
    at o (index.js:1)
    at index.js:1

in same line of code PIXI.CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer);

how it should be registered in v5? or this would not work any way?

[SET001]

you can just use beginTextureFill and drawRect to get it working with tiles

so TilingSprite is not the best way to go with tile-maps?

[ivanpopelyshev]

Its shader is half-way to the shader tojicode published for tilemaps, but no, adding "mod" in fragment shader is a bad idea.

Use TilingSprite if you know how it works and you are sure it fits for your background. You cant change tiles inside TilingSprite, it has only one tile.

[SET001]

found also this https://codepen.io/goodboydigital/pen/vdvEmE. Is this approach similar to what is used in this library?

[ivanpopelyshev]

Thankfully, no :) That thing has slow fragment shader, its adaptation of old tojicode's demo to pixi. The demo i already mentioned. TilingSprite also uses mod operation but only for one tile, that's why I dont recommend to use it unless you know what are you doing.

pixi-tilemap builds static geometry buffer. Graphics does that too. pixi-tilemap doesn't store any objects for tiles, graphics spams them, but its not as heavy as PIXI.Sprite.

[ivanpopelyshev]

The idea is, if you understand that paragraph, you can build tilemap on ANYTHING: Graphics, pixi-tilemap, even sprites.

Maintain a window around the camera, like 2x of it. If camera hits the side, move the window and refill the tilemap.

If you dont understand, do anything, try anything, after several fails you'll get enough experience to understand the algo. I dont provide code of that algo to people because im lazy. ITs just pair of IF's and two FOR's , honestly!

[SET001]

thanx, I'll experiment with solution based on Graphics

[ivanpopelyshev]

Just last thing: Graphics wasn't that good in v4, it had a shader switch between Graphics and Sprite and it didnt have texturing inside. If you see my old posts that Graphics is horrible - ignore them.

[ivanpopelyshev]

Here: https://github.com/pixijs/pixi-tilemap/tree/v5

[andreabertin]

I had the same issue using it with webpack. In order to solve it:

1. follow pixijs 5 migration guide (the part for 3rd parties plugin with webpack)
2. use the branch v5, with npm you could declare the dependency as follow: "pixi-tilemap": "git+https://github.com/pixijs/pixi-tilemap#v5"
3. add import statement to the file where you'll use tilemap: import 'pixi-tilemap'

I'm using pixi.js v5.1.2 with pixi-tilemap v1.2.6.. @ivanpopelyshev could you upload it (1.2.6) on npm? could help with new projects dependencies setup..

by the way, the 'exception' was thrown by PIXI.CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer); this piece doesn't work even now but in v5 branch (https://github.com/pixijs/pixi-tilemap/commit/b3f128842e7e4a93f74a392952f02b230fd3f445) a check against its availability was added

[ivanpopelyshev]

use the branch v5,

its already in master. I thought i uploaded it as npm 2.0.0.. well, i forgot, gonna upload both v4 and v5.

Done : v4 1.2.6, v5 is 2.0.0

I forgot to upload it before ;) It was ready for weeks

[andreabertin]

Great! My sample works just fine with v2.0.0 from npm, still I need to follow the 3 steps above

[ivanpopelyshev]

For now, there's a universal way to add any of my plugins in pixijs:

import * as PIXI from 'pixi.js'
window.PIXI = PIXI
import 'pixi-tilemap'; //or require('pixi.js')

And that has to be in one of first files in your imports.

I dont know what to do with it all, because from certain point of view word "import" guarantees for user that everything will be OK, but for lib developer its a huge pain to cover all corner cases. Initialization order problems wont go away just because someone smart declared that "oh, lets just use imports, that word is magic"

[andreabertin]

Unfortunately you're right..

I prefer using webpack itself for PIXI import since it allows me to skip the PIXI import part, can see it here (https://github.com/andreabertin/pixijs-v5-examples) its still a work in progress so not so clean yet.

Currently I am playing with pixijs (and plugins) to see how well it comes with my needs, I'll let you know for any issue/bug that will arise

[JoseExposito]

Hi,

First at all, thank you very much for your work in this project @ivanpopelyshev. It is a great plugin and you've done an amazing work so far.

I'd like to ask if there are plans to migrate this plugin to PIXI v5 any time soon.

If not, would you recommend us to use beginTextureFill and a couple of for loops in the meanwhile? I'm afraid about performance in low end devices...

Thank you very much in advance!

[ivanpopelyshev]

pixi-tilemap works with v5 :)

[JoseExposito]

Hi @ivanpopelyshev ,

Thank you very much for you quick answer.

I'm having the problems described in this issue trying to integrate pixi-tilemap in my webpack project:

Uncaught ReferenceError: PIXI is not defined. window.PIXI = PIXI doesn't seem to do the trick.

I'm using create-react-app (https://github.com/facebook/create-react-app) as a boilerplate and PIXI in some bits of my web. I guess it is probably a problem with my webpack configuration...

[ivanpopelyshev]

I did not put it in this plugin however this soilution exists in all plugins: you have to ensure that pixi-tilemap is loaded after PIXI is in window.

import * as PIXI from "pixi.js";
window.PIXI = PIXI;
require("pixi-tilemap")

Alternative: make special webpack config that provides pixi as global thing. I lost the example.