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

[HauntedSmores]

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.

[ivan.popelyshev]

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.

 

[jinzo7]

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.

document.body.appendChild(app.view);

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.beginFIll(0x00ff00);

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

app.stage.addChild(a).

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.

[ivan.popelyshev]

@jinzo7 I'll point other users to your post in the future

[jinzo7]

5 minutes ago, ivan.popelyshev said:

@jinzo7 I'll point other users to your post in the future

I appreciate it. I will make topic with example of PIXI and mvc soon(the weekend maybe). This is good tech and we can share it by simplicity.

[ivan.popelyshev]

@jinzoy7

We actually need custom implementations for Application, because right now we are deciding on new v5 application API.

https://github.com/pixijs/pixi.js/pull/4861

Wanna join the discussion?

[HauntedSmores]

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!

[ivan.popelyshev]

Good!

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.