[PIXI Newbie] Tiled map loading - Pixi best practices?

[PsycTheWalrus]

Hey guys, I've hit some major performance walls using traditional 2d canvas rendering and I've made the decision to switch to PIXI because, well... it's just my style of library and it works like a charm. Before I get going porting my game, I'd like to ask for some advice about how to build up my scene.

The way my game currently works, I load in a Tiled map that represents the level - they're about 4096x4096 in pixels. They also contain several layers - "Base", "Obstacle", and "Top". I go through these layers and build 3 separate images the same size as the map. So I've got 3 4096x4096 images in memory.

When rendering the scene, I also have a Character layer. My render loop looks like this:

preRenderCharacters(); // Builds character sprites from worn equipment data

renderLevelBase(); // Draws a piece of the "Base" layer image, determined by the camera rect

sortCharacters(); // Sort characters by their Y coordinate
for(i in characters)
    drawObstacleLayerToCharacter(); // Draw the obstacle image from cameraRect.y (or last character.y) to character.y
    drawCharacter(characters[i]); // Draw the actual character

drawLevelTop(); // Draw the top image on top of everything

So I've ultimately got a lot of canvases floating around my code right now.

The approach I'd take with PIXI is to continue using the number of off-screen canvases I'm currently using, and just associate them with Sprite objects instead of calling drawImage() on them all the time.

Am I crazy? Is there a better way to do this with PIXI? I appreciate any assistance you guys can provide :-)

[WombatTurkey]

Not really sure what  the problem is here, but I recommend using the Phaser-Tiled plugin that is on Github alongside Phaser. Your maps can exceed 5000x5000 easily with no lag as the plugin dynamically updates the render area based upon the camera's width/height. (So performance is really never an issue)

[d13]

You could also use TileUtilities:

https://github.com/kittykatattack/tileUtilities

Although it may not give you as much low-level control as you might need.

You can find working examples of how to use it here:

https://github.com/kittykatattack/hexi/blob/master/examples/src/tiledEditorSupport.js

and here:

https://github.com/kittykatattack/hexi/blob/master/examples/src/tiledEditorSupport.js

(Those examples are implemented in the Hexi engine, but the API for using the TileUtilities functions are the same for straight Pixi code.)

 

Also, a word of warning about those off-screen canvas rendering tricks and premature optimization.

Pixi does a crazy amount of insane optimization for you under-the-hood, so it's better just to trust it and not assume that you'll have de-facto bad performance, like you would if you were building your own rendering engine.

It's doing all sorts of tricks for you already.

I would just let Pixi do it's thing, and if you really hit a performance wall, then start asking more questions.