Multiple Containers or Renderers?

[rockygi]

Hi All - I am brand new to the framework but am loving it already. Kudos to all the devs for the lengthy and complete documentation as well as all the great tutorials.

 

I'm just getting to grips with pixi.js v3 (my first experience with pixi) and I am using it to build another "library/framework" that can be used to display floor plans of buildings. These floor plans should be displayed on a canvas and be navigable as well as zoomable i.e. you can drag/pan up/down/left/right as well as zoom in/out. I have been extending the various PIXI objects with extra properties to achieve this and so far its working out great. I have just hit a design and implementation issue. I want to be able to show multiple floor plans on the same canvas. Think of having a single rectangle canvas. If I have 3 floor plans it will be divided into 3, 6 divided into 6 sub canvases and so on. Each subdivision should be separately navigable and zoomable - and this is my issue!

 

I have the following objects:

 

View - Basically an extension of PIXI.Container that also contains a PIXI.renderer to render itself.

Plan - An Extension of PIXI.Container again that represents a floor plan and contains the floor plan texture and miscellaneous other objects.

 

A plan contains a floor-plan texture and other miscellaneous objects. The view is basically the canvas and takes in a number of plans N and then renders each Plan in a subdivision of the View. I have a neat algorithm that divides the canvas so I can obtain the x,y,width,height of each compartment. Unfortunately though when I set each Plans width/height - everything within the Plan also scales horribly. As far as I can see from the documentation there is no way to adjust only the "viewport" of the container/plan.

 

So my question is should I have a separate renderer for each Plan or stick with my current implementation and have some sort of callback when the Plans resize that then adjusts their inner objects?

 

Any help on this would be greatly appreciated!

[xerver]

You can accomplish this all in one renderer. Use containers for each sub division and translate/scale/rotated them all separately.

 

Setting width/height of an object scales it to match the width/height that you set. You likely do not want to set the width/height manually. There shouldn't be a reason to do this anyway, just add objects to the plan and let the container size to the objects within it. If you place the objects in the right places it should just look right, no need to manually set sizes.

[rockygi]

I see now - the containers are just free flowing. They expand to their contents and their repositioning effects the objects. I do have one issue left though.

 

The floor plans themselves are large images that you can zoom in/out of and so in essence you can zoom in further than than the reaches of the canvas i.e. the image will overflow the canvas - but this will be hidden of course. That wouldn't be an issue if I was trying to only have a single floor plan but I actually desire to have multiple. Due to the containers themselves not having 'viewports' the floor plans will then end up overflowing each other. I am trying to achieve the following effect if that helps:

 

 

Each of those images are actually larger than what the subdivision shows but we can pan/zoom to see as much/little as we want.

[xerver]

The best way might be to have 3 render textures, one for each viewport. You can render each of the 3 scenes to their render texture and then actually only draw 3 sprites.