Jump to content

When do I need to call renderer.render(stage)?


Recommended Posts

It seems like if you simply update a sprite or primitives properties directly, either with setTimeout or requestAnimationFrame or some other tweening library, the objects will move. Is this new with using PIXI.Application? Older docs or forum posts show needing to rerender the stage constantly.

I would just expect simply moving the properties by just changing x, y, scale, etc. wouldnt work but it does.

Link to comment
Share on other sites

Its a general gamedev knowledge: to make something, you need a GAMELOOP. Whether its yours or you are using someone's, you have to understand how exactly does it work.

Please study the application class: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js  . Its a mashup: for big projects people write their own version of it.

render() method is called in requestAnimationFrame.

You can either use default Application implementation, either make your own by using "renderer" and "ticker" or even by calling "requestAnimationFrame" directly.


Link to comment
Share on other sites

Hello !

In PIXI v4, you dont need to call requestAnimationFrame().It is called internally and the renderer renders app.stage (PIXI.Container) instance.

1. Create PIXI.Application instance :

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});

2. Append the  view of PIXI... app.view is your HTMLCanvas (canvas2d or webgl renderer). So you need it in your DOM.


3. Use the stage(app.stage). Its PIXI.Container type. And Its your root container to add other containers(PIXI.Container) or sprites(PIXI.Sprite) and etc.

var bigRect = new PIXI.Graphics();


bigRect.drawRect(0,0,500, 500);


Or follow the first example: http://pixijs.io/examples/#/basics/basic.js .

And after this create other containers,graphics,sprites and add them to the stage or make composition.

In PIXI v3, you have to call manually requestAnimationFrame()  and tell PIXI.renderer to render some container. And no random but your root container(PIXI.Container). The renderer renders the root container and all its children in order.

The same is in flash,pixi and every child-based rendering.

If you are new to PIXI - use v4. Anyway v4 is good to be used for learning or commercial products.

Link to comment
Share on other sites

Thanks to both of you guys, @jinzo7 and @ivan.popelyshev! The answer I was getting at was that, yes - the renderer is rerendered appropriately at 60fps internally by PIXI.Application in v4 as opposed to older implementations where I had remembered needing to call that yourself.

Here's what I've got going as a demo with new v4 syntax: https://codesandbox.io/s/yw2vox5479?module=%2Fsrc%2Fcomponents%2FCanvas.vue
(Just click around)

Maybe you can tell me if this follows general best practices.

Again, thanks for the helpful answers!

Link to comment
Share on other sites


Just remember that Sprites + tint will be faster, because it'll be batched. Each particle as Graphics eats one drawcall. Also removeChild() in a cycle is O(n^2), beware of slight lag if you have 10000 of them, might want your own remove function that just deletes first N particles from children. Also, ParticleContainer in case there really are 10000 particles.

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