Sign in to follow this  
HauntedSmores

Game loop and Animation question

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 )

Share this post


Link to post
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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.