Game loop and Animation question

[HauntedSmores]

Hey everyone,

So Im new to game development, although Im a full stack JS dev for general sites and apps. I started getting into canvas animation and now Im here trying to learn some game animation stuff. My question is this:

Do you generally do just about all animation in the game loop with requestAnimationFrame()? Or can you simply have renderer.render(stage) called in the game loop while outside of it you use GSAP or some other tweening mechanic to change the positioning props on objects/sprites? Iv tried it and it works, I just would like to know if its dumb or nonperformant. I also tried using my regular js tweening library to call `renderer.render(stage);` in its update callback and it looks the same (im just doing a simple animation generating snow-like particles that float down).

I know that the supported game loop in PIXI has stuff for velocity and whatever but I really like my animation library's (http://animejs.com/) easing and elasticity options. Will calling renderer.render(stage) in the game loop while tweening outside the loop still be 60FPS? Or do I need to be updating in the game loop? If I have to do it in the game loop, does anyone have any tips/references for easing and all of that? Because I dont want to have to write my own easing functions to update in the game loop (and I suspect most people arent), and rather use an animation API for that. Im also brand new to PIXI and maybe it has its own easing and whatever that works inside the game loop.

 

Cheers

[ivan.popelyshev]

1) There's PIXI.Application class that helps a lot by providing very easy scaffold: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

Its used in all examples

2) There are priorities for stuff you add to game loop, i dont remember, look at docs about Ticker

PIXI doesn't have its easing, so i recommend to add your library's handler in pixi gameloop. Or use pixi-tween handler: https://github.com/Nazariglez/pixi-tween IT doesnt know about pixi ticker, but you can add its handler easily )

[ivan.popelyshev]

Oh yeah, just released :https://greensock.com/1-20-0