davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.06k stars 177 forks source link

Feature request: multiple viewports of the same scene/game objects #182

Open stevemarksd opened 4 years ago

stevemarksd commented 4 years ago

I have a strategy game and I need to be able to see 2 parts of the map at the same time. The map is the same. Do you know how can I do this? thank you

I saw you answered here https://github.com/davidfig/pixi-viewport/issues/67 but helps if the scene is different.

davidfig commented 4 years ago

Easiest way is to clone the scene. You'll end up having two of all your objects, but the objects are not particularly expensive to store, and if you duplicate any PIXI.Graphics geometries, your rendering speed should be fine. You'll have to do more upkeep to keep the scenes in sync, though.

Alternatively, you can call the renderer twice with different viewports. This will be expensive since you'll have two renderer passes, but since you're reusing textures/objects across both, it might not be too terrible. Something like this:

const renderer = new PIXI.Renderer({ clearBeforeRender: false, preserveDrawingBuffer: true ...})
const viewport1 = new Viewport()
const viewport2 = new Viewport()
const scene = new PIXI.Container()

function update() {
   viewport1.addChild(scene)
   renderer.render(viewport1)
   viewport2.addChild(scene)
   renderer.render(viewport2)
}

I haven't done this before, but if the viewports are set up properly it should work.