game loop Application.start() vs.ticker.add()

[Majirefy]

As PixiJS introduced Application class, I find there is a function start():

Quote

start()

core/Application.js, line 144

Convenience method for starting the render.

In PixiJS examples, the game loop always starts like:

// Animate the rotation
app.ticker.add(function() {
    anim.rotation += 0.01;
});

But some examples use app.start().

So what is the best way for game loop? requestAnimateFrame? app.ticker.add? app.start?

[Taz]

The constructor for Application calls this.start() so you don't need to manually call start() unless you call stop()

For example maybe you want to wait to start rendering until all of your resources are done loading and all of your sprites are on the stage. So you can create the Application and call stop(), then create and add-to-stage your sprites as the resources become available, then call start() when everything's done loading.

[ivan.popelyshev]

That's the application:

https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

As you see, there is no magic (ctrl+f magic = 0 found)

[Majirefy]

5 hours ago, Jinz said:

The constructor for Application calls this.start() so you don't need to manually call start() unless you call stop()

For example maybe you want to wait to start rendering until all of your resources are done loading and all of your sprites are on the stage. So you can create the Application and call stop(), then create and add-to-stage your sprites as the resources become available, then call start() when everything's done loading.

So it's better to use app.ticker.add to make game loop? Or just use requestAnimateFrame?

[Taz]

1 hour ago, Majirefy said:

So it's better to use app.ticker.add to make game loop? Or just use requestAnimateFrame?

Application takes care of lot for you but if you want to do it yourself then you can create the renderer and stage and call requestAnimationFrame() and render() and calculate delta for animations all yourself, instead of creating the Application and adding your animation function to it's ticker. So I'd just use the Application class unless there's a need to handle these things differently than it does...

[Majirefy]

@JinzThanks! I will try ticker first.

[mikeattah]

Hello, I am having trouble starting and stopping the ticker. For instance:

app.ticker.add(() => {
  sprite.rotation += 0.2;
});

Can I do this to stop the ticker:

app.ticker.stop();

Also if this works, please how do I restart the ticker?