Jump to content

Pixi V3 RenderTexture


Recommended Posts

Can I make a Rendertexture from a PIXI.Container with several PIXI.Container's in it? So, a texture from a Container of Containers?


I'm trying it, but I cant get any results to show up.
I've got 



In my animation loop I have

islandShape = new PIXI.RenderTexture(islandStage, islandStage.width, islandStage.height);cloudShadowSprite.texture = islandShape;

But when I throw cloudShadowSprite to the outer container (which we call "stage", not to be confused with the older versions of PIXI's stage container), There's nothing that I can see...


The resulting render texture it supposed to be quite large (over 1000 in both width and height).


There are no errors in the code.


Eventually, I want to turn cloudShadowSprite into a mask of another container all together. 

Then, large "cloud shadows" will roll over through this new container. Since the new container will have a mask made from shape if whatever is going on in islandStage's sub containers, the "cloud shadows" should only appear on the appropriate images (and not the background which would be too "far away" or off in the horizon to get a shadow).


Can anyone tell me what I'm doing wrong? I haven't seen a PIXI v3 RenderTexture example. 



Link to comment
Share on other sites

You have to render the texture, by calling `.render()` on your texture object.


When I do a 


I get the following error:

Uncaught TypeError: Cannot read property 'worldTransform' of undefinedRenderTexture.renderCanvas @ pixi.js:17908

did I do something wrong?



Link to comment
Share on other sites

Also, I wonder if I might be able to achieve the same effect by some other method really...

I just feel that I'm going about this in a convoluted way that could have an easier solution.

I have a cloud shadow image (just a big almost transparent grey blob really) that should be floating by every once in a while. This is a simulate the effect of clouds passing overhead.

My main game playable area is a "floating island", so the big grey shadow should only be cast on it and not the "sky" in the background. 

Since my islands overall shape isn't static (due to bouncy clouds surrounding its edges), I thought I would use RenderTexture to make a new sprite to be used as a mask for the big grey cloud shadows.


Could I perhaps achieve this effect simply with blending modes?


I'm pretty sure I could do this with RenderTexture (once we work the kinks out), but I have to generate a whole new texture every frame (because the shape changes). And I just think that might hurt performance (though, I may be wrong, I don't really know).



Link to comment
Share on other sites

You have to pass to the render function what you want to renderer, just like you do to the renderer. Also you passed the stage as the first param to the constructor, but it wants the renderer.

Take a second to read through the docs:


It will effect performance, I would try it out before you go searching for another method.

Link to comment
Share on other sites

Thank you Xerver!

I had a fundamental misunderstanding that you helped me clear up :)


For posterity, here's the solution I have now:


islandShape = new PIXI.RenderTexture(renderer, islandStage.width, islandStage.height);islandShape.render(islandStage);cloudShadowSprite.texture = islandShape;

where islandStage is a container of containers.


It kills performance so much that Chrome crashes to have this in the animations loop though. 
So, I tried "every 60 frames" which relieves the strain, but leaves a visible "Tracer" on my game... So, I'll have to come up with another solution to that. 

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...