GilS

Animation Smoothness Problems

Recommended Posts

Hi

 

 

I'm trying a super simple animation test.

http://betterdeveloperway.com/tests/phaser/

 

I'm using a strong PC with Core i7 CPU and 4GB RAM. It got very good HTML5 benchmark results.

I've tested on Firefox and Chrome and even though it could hardly get any simpler, the smoothness is disappointing. I expected absoultey no stutter and no lag but every few seconds there's a tiny pause.

 

I've also tested on two other strong machines. It's never 100% smooth. Switching between WebGL and Canvas doesn't matter much.

 

The test is intended for a very high profile project, so the tolerance is absolutely zero.

 

Am I missing something, or are my expectations too high for HTML5?

 

Attached below is the code (PNG is 0.3K and very small).

 

Thank you!

Gil

<!doctype html><html>    <head>        <meta charset="UTF-8" />        <title>hello phaser!</title>        <script src="js/phaser.min.js"></script>    </head>    <body>    <script type="text/javascript">    window.onload = function() {        var game = new Phaser.Game(400, 300, Phaser.AUTO, '', { preload: preload, create: create, update: update });        var rect;                function preload () {                        game.load.image('rect', 'assets/rect.png');        }        function create () {            rect = game.add.sprite(game.world.centerX, game.world.centerY, 'rect');            rect.y = game.height;        }                function update() {            rect.y -= 1;                        rect.y = (game.height + rect.y) % game.height;        }    };    </script>    </body></html>

Share this post


Link to post
Share on other sites

Three things:

 

1) Browsers do a truckload of internal compiling and optimising when the game starts up (even one as simple as this). This absolutely impacts performance for a few seconds (CPU depending). Mostly it's easy to hide if you've a preloader kicking off, but in simple tests it fluctuates all over the place as things settle down.

 

2) There's no delta timers or interpolation in Phaser when you move objects by just changing their position values each frame, so it will literally try and move -1px every update loop, which if the CPU takes a hit will stutter because it is playing frame catch-up and moved -2px for one render cycle (or none at all).

 

3) Browsers are currently atrocious at dealing with monitor vsync properly. You can have an absolute bare minimum test case (not using Phaser at all, just a plain canvas, raf and sprite moving) and it can often still stutter or tear, even if the FPS rate never dips at all. I see this all the time on my MacBook Pro, but to a lesser extent on my PC. Thinking about it Flash suffered the exact same problem actually. You'd think Google etc would have solved it by now, but they haven't yet.

 

BTW your example run perfectly smoothly for me in Canary just now (Windows 7 64-bit). I guarantee it won't for everyone.

Share this post


Link to post
Share on other sites

Hi rich

 

Thank you for the detailed explanation. For once I have tested on all major browsers with more or less the same results.

So from what you're saying I shouldn't expect much using Chormium?

Share this post


Link to post
Share on other sites

In my game, I get "jitter" using Chrome.  I get almost no "jitter" using Canary.

 

My expectation is that whatever they have done in Canary to fix the vsync problem will make it to Chrome eventually.  I admit though, they seem to be taking their sweet time about it.

Share this post


Link to post
Share on other sites

Isn't using modulous kind of expensive when determining movement?

 

I found this to be smoother, could be just me:

 

edit:

Nevermind there is no performance gain I'm daydreaming. ^-^

<!doctype html><html>    <head>        <meta charset="UTF-8" />        <title>hello phaser!</title>        <script src="_site/phaser/phaser.min.js"></script>    </head>    <body>    <script type="text/javascript">    window.onload = function() {        var game = new Phaser.Game(400, 300, Phaser.AUTO, '', { preload: preload, create: create, update: update });        var rect;                function preload () {                        game.load.image('rect', 'assets/sprites/rect.png');        }        function create () {            rect = game.add.sprite(game.world.centerX, game.world.centerY, 'rect');            rect.y = game.height;        }                function update() {            //--rect.y;            //rect.y = (game.height + rect.y) % (game.height);                        if (--rect.y < 0)                rect.reset(game.world.centerX, game.height + rect.height);        }    };    </script>    </body></html>

Share this post


Link to post
Share on other sites

In my game, I get "jitter" using Chrome.  I get almost no "jitter" using Canary.

 

My expectation is that whatever they have done in Canary to fix the vsync problem will make it to Chrome eventually.  I admit though, they seem to be taking their sweet time about it.

 

Same here. I'm testing in Canary because of how noticeable it is. My game's probably not gonna be done for a year or so, so I don't feel so bad using Canary.

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

  • Recently Browsing   0 members

    No registered users viewing this page.