pixi-tilemap cannot get CompositeRectTileLayer() to load textures from multiple tilesets/resources (SOLVED)

[autemox]

(edit: solved, see ivan's comments)

Hello,

I have come across a problem with pixi-tilemap.  I created a small application to show this problem off and see if anyone can help me.  It can be viewed on github HERE (edit: or fiddle here) or seen below:

export class Game {

    app: PIXI.Application;                               // declare the pixi application

    constructor() {

        this.app = new PIXI.Application({backgroundColor: 0x1099bb});     // create the pixi application
        PIXI.loader.add([                                                 // load assets
            'assets/images/terrian-01.json',                              // asset list
            'assets/images/benjiro-01.json'
        ])
            .load(this.loaded.bind(this));                                // loaded() runs after assets are loaded
    }

   loaded() {

        const tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, []);  // can pass textures to this array in second argument, if I do, it does not help anything, but similar results: whichever texture is passed first will appear.  the other texture will not.

        tilemap.addFrame(PIXI.loader.resources['assets/images/terrian-01.json'].textures['terrian-01-287.png'], 64, 0); // a large sign.             will load because it is the first spritesheet to be called with addFrame()
        tilemap.addFrame(PIXI.loader.resources['assets/images/benjiro-01.json'].textures['benjiro-01-181.png'], 0, 0);  // a log with an axe in it.  will not load unless you put this line up one line higher
        tilemap.addFrame(PIXI.loader.resources['assets/images/terrian-01.json'].textures['terrian-01-286.png'], 128, 0); // a small sign.            will load because it is on the same spritesheet as the large sign and it was the first spritesheet to be called

        this.app.stage.addChild(tilemap);
   }
}

I was unable to find any documentation for pixi-tilemap or communities specifically for it so hopefully this is the best place to post for help.

To create a tilemap, I used CompositeRectTileLayer() then addFrame() to add each tile.  I attempted to add 3 tiles to the screen.  First is terrian-01-287 from the terrian-01 spritesheet.  This would be placed at (64, 0).  This successfully places.  The second is benjiro-01-181 from the benjiro-01 spritesheet.  This would be placed at (0, 0), to the left of the first sprite.  It does not appear, but there is no error, the texture is successfully passed to addFrame().  Finally, I add another tile, terrian-01-286, and it succesfully adds.  The result looks like this:

This above picture shows that the texture from terrian-01.json both successfully added to tilemap but the texture from benjiro-01 did not.

In fact if you move the line of code that says addFrame(...benjiro-01...) to be the first to run, you will get this:

In this case, since benjiro-01.json was the first to be sent to addFrame(), it appears.  Neither textures from terrian-01 appear.

It is worth noting that I carefully checked the validity of the textures being passed to addFrame() and found nothing unusual.  Also if I pass the textures in to the second argument when cost tilemap is declared, which ever texture is passed in will load and the other will not (so same problem).

I want to be able to load tiles from multiple resources into the same CompositeRectTileLayer.

Alternatively, I can create a CompositeRectTileLayer for each resource, but it doesn't seem like the ideal solution to the problem.

Am I doing something wrong here?  This doesnt seem to make any sense!  Thank you.  Any help would be great!

[ivan.popelyshev]

Hi! It should work. Please make a fiddle and I'll fix it.

 

Also, there's limitation about 16 textures of 1024x1024 , they will be copied in 4 textures of 2048x2048, so if your log is far-far away after 1024 pixel it wil be a problem. Parameters can be changed. This optimization exists for RpgMakerMV

[ivan.popelyshev]

That's what happens with your textures:

https://github.com/pixijs/pixi-tilemap/blob/master/src/Constant.ts

https://github.com/pixijs/pixi-tilemap/blob/master/src/TileRenderer.ts#L96

If your texture sizes are bigger than 2048, change the values to 2048-4096

"PIXI.tilemap.Contant.xxx = yyy"

[autemox]

12 hours ago, ivan.popelyshev said:

Hi! It should work. Please make a fiddle and I'll fix it.

Also, there's limitation about 16 textures of 1024x1024 , they will be copied in 4 textures of 2048x2048, so if your log is far-far away after 1024 pixel it wil be a problem. Parameters can be changed. This optimization exists for RpgMakerMV

Thank you for looking at my fiddle: https://jsfiddle.net/autemox/5x6c3h4s/76/

I tried doubling, tripling, and even x 100 the PIXI.tilemap.Constant.xxx values but none of it had an affect.

[ivan.popelyshev]

Yep, the problem is that those Constants should be entered before the Application creation, because textures are initialized when pixi-tilemap plugin instance is created for an app.

Those lines before app creation help.

PIXI.tilemap.Constant.boundSize = 2048;
PIXI.tilemap.Constant.bufferSize = 4096;

Yeah, its all because I had to rush things with RpgMaker MV long time ago and somehow fit their 16 1024x1024 textures into 4 texture units. Your "terrain" is 1600 pixels width.

[autemox]

ITS A MIRACLE!

Thank you Ivan!