GilS Posted July 27, 2015 Share Posted July 27, 2015 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> Link to comment Share on other sites More sharing options...
rich Posted July 27, 2015 Share Posted July 27, 2015 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. Tilde 1 Link to comment Share on other sites More sharing options...
drhayes Posted July 27, 2015 Share Posted July 27, 2015 Just to second Rich's point: here's a Chromium bug related to vsync that's been open for almost a year. Link to comment Share on other sites More sharing options...
GilS Posted July 28, 2015 Author Share Posted July 28, 2015 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? Link to comment Share on other sites More sharing options...
mwatt Posted July 29, 2015 Share Posted July 29, 2015 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. Link to comment Share on other sites More sharing options...
Langerz82 Posted July 29, 2015 Share Posted July 29, 2015 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> Link to comment Share on other sites More sharing options...
drhayes Posted July 29, 2015 Share Posted July 29, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts