Call "renderer" only when needed

[borisc]

Hello pixi developers,

 

I am learning about html5 games development. I choose pixi, because it is lightweight and fast. My first app is simple. One sprite with three callbacks - "click", "mouseover" and  "mouseout".

//create an new instance of a pixi stage.var interactive = true;var stage = new PIXI.Stage(0x66FF99, interactive);// create a renderer instance.var renderer = PIXI.autoDetectRenderer(800, 500);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);// create interactive spritevar spriteT = PIXI.Texture.fromImage("iapple2.png");var sprite = new PIXI.Sprite(spriteT);sprite.setInteractive(true);stage.addChild(sprite);// callbackssprite.click = function(d) {    console.log("clicked");};sprite.mouseover = function(d) {    this.scale.x = 1.1;    this.scale.y = 1.1;    };sprite.mouseout = function(d) {    this.scale.x = 1;    this.scale.y = 1;};requestAnimFrame(animate);function animate() {    requestAnimFrame(animate);        // render the stage    renderer.render(stage);};

As you can see, screen is static unless you click or move mouse over sprite, but main animation loop constantly consumes CPU resources. Is there a way to avoid this? For example, render only when mouse callbacks occurs.

[ragnarok]

I haven't tried Pixi itself, but from a programming point of view: What about, requesting the animation not every time, but in the sprite-functions click, mouseover, mouseout? (Cut "requestAnimFrame(animate);" from "animate" and put it into said functions).

sprite.mouseout = function(d) {    this.scale.x = 1;    this.scale.y = 1;    requestAnimFrame(animate);    };requestAnimFrame(animate);function animate() {    // render the stage    renderer.render(stage);};

But this might lead to getting called animate more than once per cycle (let's say mouse over and click at the same time). I think it's better to add a variable "var something_changed=false;", put "something_changed=true" into the sprite functions and ask for that variable in the function animate:

var something_changed=false;sprite.click = function(d) {    console.log("clicked");    something_changed=true;};sprite.mouseover = function(d) {    this.scale.x = 1.1;    this.scale.y = 1.1;        something_changed=true;};sprite.mouseout = function(d) {    this.scale.x = 1;    this.scale.y = 1;    something_changed=true;};requestAnimFrame(animate);function animate() {    requestAnimFrame(animate);        // render the stage    if (something_changed) {       renderer.render(stage);       something_changed=false;  }};

[borisc]

Thanks for answer ragnarok. I was trying to do something similar but without result. Let's use your first example and simplify code. Now sprite should randomly change it's dimensions on click.

var interactive = true;var stage = new PIXI.Stage(0x66FF99, interactive);// create a renderer instance.var renderer = PIXI.autoDetectRenderer(800, 500);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);// create interactive spritevar spriteT = PIXI.Texture.fromImage("iapple2.png");var sprite = new PIXI.Sprite(spriteT);sprite.setInteractive(true);stage.addChild(sprite); // callbackssprite.click = function(d) {    this.scale.x = Math.random()+2;    this.scale.y = Math.random()+2;        requestAnimFrame(animate);   };requestAnimFrame(animate);function animate() {    // render the stage    renderer.render(stage);};

Result: sprite did not show up at all. Only stage. I think that when renderer starts, scene with sprite is not ready. Sprite show up when i wait 5 seconds before calling "animate" function

setTimeout(function(){	requestAnimFrame(animate);}, 5000);

[xerver]

There is currently a bug where you need to render twice for everything to work correctly, render twice initially and it should work (you don't need to call requestAnimFrame for the initial render either, just call animate() twice).

[spaceman]

This is actually a more serious issue than it seems.  I spent a week  and a half researching before settling finally on Pixi as a core technology for a large project we are starting to undertake for a big government client, but am a little disheartened as I wade in to get started. 

 

The excellent parallax demo linked-to off of the PixiJS site fails straightaway in the very first section involving the renderer in Tutorial 1 of 4.  I lost half a night here trying to diagnose what's going on to cause renderer.render(stage); not to work following those instructions.  I knew animation worked based on doing the other basic tutorials. 

 

I will sleep soundly only because I realize that ultimately Pixi is really for animation, obviously, but still not good when a renderer does not prove capable of rendering a static image as detailed in-depth on a prominent tutorial from the source website:  in the latest checkout from Github, no, I repeat no, number of renderer.render(stage) calls sufficed to permit the rendering of a static image in chrome.  Again, following the tutorial step-for-step.

 

I took the time to make a login and write this because I really, really want to see Pixi succeed!  I hope this subtle but important bug gets fixed so that Pixi continues to get the attention and acceptance it is due as a viable medium for artistic expression in the same way as Fl*sh.  I believe whatever is the bug, things like this need to be ironed out because the Adobe-integrated "alternative" looks to be getting ready it looks like to let loose WebGL.  Again, I inisted on going the Pixi route instead b/c I am a longtime developer and big believer in projects like this.  Here's hoping MG et al can sort it out. -wish I could help with that and related matters but utterly buried in project work at the moment.

[mattdesl]

We've used Pixi for a number of large projects. As with any library, you will occasionally find some bugs. If that's the case, open a ticket on github or submit a PR. The small hassle of fixing a bug is worth it in comparison to spending another few months re-writing Pixi.

Also be sure to test with the dev branch as there have been some recent fixes.

[Mat Groves]

Hey peeps!

 

This is definitely an issue on my todo list. Whilst it is true that I did not really think that people would ever need to use pixi to create a single static render, I can totally see how useful that can be for certain projects! I will make sure that render func will only have to be called once to draw a scene as twice is definitely a little weird!  

 

Its worth mentioning that one of the main issues about rendering once is that often (as in the example codes above) the images are not yet loaded so cannot be rendered straight away. The best thing to do if you need a single render is to make sure that all the textures you will require have been preloaded before rendering. 

 

cheers all!