Jerky HTML5 Games

[PlaceOfM]

Hello,

 

currently I am working on a 2D side scrolling game. When I start it on my computer everything runs fine and smooth. IE is about 300 FPS. Firefox is about 100-110 FPS. So its a side scrolling game and there are some clouds in the sky, flooting from right to left.

 

I am rendering the game inside of a canvas element. But there is a problem in generell. When  I am just using a square like context.fillRect(800,200) an move it to the left it gets very jerky on low FPS. Sometimes it jumps. Sometimes its smooth. I cant explain why this happens.

 

Im working since three full days on this problem and try to fix it. Here is what i have done so far.

 

1. I tried a gameLoop that locks the FPS at 30.

  - Animations gets Jerky when they speed up.

 

2. I tried to set a maximum for delta time

  - I move the shapes based on the time since the last update call. I tryed to set a maximum for the gap between: no effect still jerky.

 

3. I tried animation based of the FPS

  - That is not what I want because the game behaves diferent on devices with better hardware. Nevermind: animations still choppy!

 

4. I read everthing I found googeling the keywords: "Choppy game, gameLoops in generel, Html5 Animation Jerky, etc.. "

 

5. I downloaded every game I could find in the app store where I think they are made with HTML5 and Canvas. Some are very Jerky and Choppy! But I found some running smooth.

 

6. I tryed pixijs to render my stuff : still choppy

 

7. I thought about buying impactjs: In the forum are some topics about stuttering 100Bugs maybe a bad buy if the problem is still there.

 

8. I thought about giving up an play WoW again.

 

9. I created an html5gamedevs account and hope someone can help me.

 

There must be a way to get this going. Even the SNES gets smooth animations.

 

Thanks!

[GBeebe]

Just some quick questions: Do you have drawing code (code that draws to the visible canvas) in your "main loop" or do you have separate logic loops and drawing loops?  Are you using requestAnimationFrame? Are you opposed to posting a dummied down version of your code that still produces the choppy results?

[PlaceOfM]

Hi,

 

the drawing code is inside the main loop. First i update the scene and than i draw it to the Canvas. I am using requestAnimationFrame. I also tried pixi.js. SO I dont have to care about the way the things a drawn in the canvas. Nearly every HTML5 game that runs below 40 FPS seems choppy to me. I will fillde a sample later, promise!

I think the problem is about loosing frames or skipping frames. But 30FPS should be enough for smooth animations.

 

BUT: If you have 30 FPS. And the velocity of an object is to big it will run choppy. I.e. it jumps 50px per frame an the object is only 20px. Do you understand what I mean? I think thats a problem in generell but i can´t emagine that there is no solution becouse my sega megadrive was able to pruduce smooth animations. To my mind videos show 24? FPS. And the movement seems fluid. So there must be something I can´t see right now.

 

Thanks !

[GBeebe]

Try separating your loop into 2 loops:

function mainLoop() {  // all of your game logic goes here, moving characters' positions, checking inputs, etc...  // I guess it's proper to put all drawing to "off screen" canvases here too.  ...  setTimeout(mainLoop, 1000 / desiredFPS);}function drawingLoop() {  //only drawing commands to the visible canvas goes here  ...  requestAnimationFrame(drawingLoop);}//when your assets are loaded you just simply make a call to each loop to get them started...mainLoop();drawingLoop();

The drawing loop needs to be as short as possible and should only deal with the actual drawing to the visible canvas.  It sounds like you're using requestAnimationFrame to call your main loop, which is bad.  But don't worry, we've all been there.

[PlaceOfM]

Hey,

 

thanks for your example! But it still seems choppy to me ! Here is the fiddle. I used your example code because I think this is best approach right now!

 

http://jsfiddle.net/re9KQ/

 

And here is the code:

 

HTML:

<canvas width="800px" height="480px" id="gameCanvas" class="layer" >ERROR!</canvas>

CSS:

canvas{    background-color: black;}

JS:

//Get the Contextvar canvas = document.getElementById('gameCanvas');context = canvas.getContext('2d');//Position of the squarevar xPosition = 10;var yPosition = 100;//Position increasevar xShift = 10;//Aimed FPSvar fps = 30;//MainLoopfunction mainLoop(){    //Let Square move!    xPosition = xPosition + xShift;    window.setTimeout(mainLoop, 1000 / fps);}//Draw The Scenefunction renderLoop(){    context.clearRect(0,0,800,480);    context.fillStyle = "white";    context.fillRect(xPosition, yPosition, 100,100);    window.requestAnimationFrame(renderLoop);}//Function callsmainLoop();renderLoop();

Thanks!

[PlaceOfM]

Hi its me again!

 

now i have a minimal sample running with pixi.js! I am using the same xShift value as in my sample code above. It semms like pixi.js locks 60 FPS. Everything is running very smooth now! Big thanks to mat groves for this awsome library! But i can´t explain why the code above doesn´t work. I would like to unerstand the problem. I will mark this post as solved now but I would be happy if someone could explain this.

 

Thanks!

[ericjbasti]

deleted

Edited March 16, 2014 by ericjbasti

[ericjbasti]

Try separating your loop into 2 loops:

function mainLoop() {  // all of your game logic goes here, moving characters' positions, checking inputs, etc...  // I guess it's proper to put all drawing to "off screen" canvases here too.  ...  setTimeout(mainLoop, 1000 / desiredFPS);}function drawingLoop() {  //only drawing commands to the visible canvas goes here  ...  requestAnimationFrame(drawingLoop);}//when your assets are loaded you just simply make a call to each loop to get them started...mainLoop();drawingLoop();

The drawing loop needs to be as short as possible and should only deal with the actual drawing to the visible canvas.  It sounds like you're using requestAnimationFrame to call your main loop, which is bad.  But don't worry, we've all been there.

Can you elaborate a bit. I've been reading up on this topic "the misuse of requestAnimationFrame" and while I'm not really experiencing a fps problem I would like to understand the rational. As I see it decoupling the 2 could result in either drawing the same frame twice (logic is slower than draw) or updating logic more than the user will ever see (drawing is slower than logic).

[spacejack]

I don't think that example illustrates why you'd decouple the logic & draw loops very well. Personally, I don't think you should unless you have a really good reason to. A couple of reasons come to mind:

 

1. Your logic update is very CPU intensive (eg. very complex AI, collision detection) and doesn't need to run every frame.

2. You need a fixed-step logic update (eg. every 20ms exactly) regardless of frame rate.

 

In those cases however, you probably want to do some interpolation during your draw loop to keep the animation looking smooth. Maybe only parts of your update need to be decoupled from the framerate.

 

Still, I'd probably keep everything running within the requestAnimationFrame loop, but set my updates on timers.

[GBeebe]

http://www.chandlerprall.com/2012/06/requestanimationframe-is-not-your-logics-friend/