Thoughts on optimizing a very large board

[chriscauley]

I'm working on a roguelike which is going to have multiple levels active at once with each level being very large. Think several 64x64 chessboards with only a 8x8 area of one level visible at once. All the demos I've seen are more like a traditional chess game where there's only one level visible and you can see the entire board at once. Ideally, pixi.js would only render ~8x8 area visible, tracking which sprites and animations are active. My approach is as follows:

1. Create a single pixi app with a stage and a view visible to the user.

2. Create a container for each of the boards and containers for each of the pieces (to build composite sprites).

3. Attach the currently visible board container to the main app.stage and change the x, y of the board container to stay centered on the player, eg: app.stage.appendChild(board_container)

4. When the player changes levels remove the old board container and add the new board container.

If every piece (probably hundreds) have update functions connected via piece.container.ticker.add(), will pixi be redrawing the pieces off screen or pieces on board containers that are not attached to the main app? Should I be keeping track of which pieces are visible and adding and removing listeners while showing and hiding sprites when I think they are soon to be on screen? I ask because it seems that pixi.js is extremely well optimized and doing things the pixi.js way will surely give me better results than me unbinding and rebinding things by hand.

A link to a pre-existing app that does something similar would be great. I'm pretty handy at reverse engineering other people's code. Thank you in advance.