Nested interactive DisplayObjectContainers to an image

[moleboy]

Hi,

 

I'm building a webapp where you can create your own storage tower out of different components.  A visualisation of this is shown on an HTML canvas (using PIXI).  Each of the components can be clicked on and colours altered etc.  So I'm using a lot of seperate DOC's that are then added to a larger DOC.  All working fine.

 

I want to grab the image of the parent DOC with all it's child DOC's and map it to a cube face created in Three.js.  I'm having a torrid time trying to export the parent DOC out as an image.  Are there any issues with using renderTexture on nested DOC's that I should be aware of?  Three.js also allows you to use a canvas directly on the cubefaces but I had no luck either with using the canvas - it just showed up blank.

 

I saw this post and have reproduced the code, initially just trying to add a new Sprite, but I'm not seeing the Sprite being added.

 

http://www.html5gamedevs.com/topic/6507-display-object-container-to-an-imagesprite/

 

Here's my code,  thanks for your help

var renderTexture = new PIXI.RenderTexture(towerStageContainer.getBounds().width,towerStageContainer.getBounds().height);renderTexture.render(towerStageContainer);var newSprite = new PIXI.Sprite(renderTexture);stage.addChild(newSprite);renderer.render(stage);

[mrBRC]

hmm...

var bounds = towerStageContainer.getLocalBounds();var renderTexture = new PIXI.RenderTexture(bounds.width, bounds.height, PIXI.defaultRenderer);renderTexture.render(towerStageContainer, new PIXI.Point(-bounds.x,-bounds.y));var mySprite = new PIXI.Sprite(renderTexture);stage.addChild(mySprite);function animate() {   requestAnimFrame(animate);   renderer.render(stage);}requestAnimFrame(animate);

this code is essentially the same as PIXI.DisplayObject.prototype.generateTexture

 

 

thus...

var mySprite = new PIXI.Sprite(towerStageContainer.generateTexture());stage.addChild(mySprite);function animate() {   requestAnimFrame(animate);   renderer.render(stage);}requestAnimFrame(animate);

is equivalent

Edited July 9, 2014 by mrBRC

[moleboy]

Thanks for the reply.  I've got it working as you suggested using 

towerStageContainer.generateTexture();

however on mapping this texture to a cube using three.js and testing it on a 2nd gen iPad the canvas renderer is resulting in playback speeds of < 2fps so it's looking like it's back to the drawing board on that.  I'm thinking of now having a go at using CSS transforms instead.

 

On a side note.  Is it possible to use Pixi to draw to multiple canvases off-screen and then dump images from each of these.  Would there be any performance hit from this in terms of displaying sprites on the canvas that is on-screen?  

 

Thanks