Jump to content

Nested interactive DisplayObjectContainers to an image


Recommended Posts



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.




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);
Link to comment
Share on other sites


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




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

is equivalent

Edited by mrBRC
Link to comment
Share on other sites

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


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?  



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...