Movies generally use 24 fps, but most games run at even more frames than that. You might see it as a motion, but you need more frames if you want to make it look smooth. Of course, a game running at 12 fps would be extremely choppy. Any more frames than that and you will perceive it as being a motion and that is what you want for your game. Humans can process 10 to 12 frames per second individually.

That's why professional gamers want to squeeze out every frame they can get and spend a lot on the best possible hardware. This gives you a possible advantage in game. Also, the delay between frames will become smaller, making the visible state of the game more up to date. And the higher your fps, the smoother your game will play. In general, the better your hardware the higher your fps will be. Each time you draw your game objects on the screen, counts as a frame.įps is the number of times per second you can draw your game on the screen. Moving the circle in small steps, one quickly after another, creates the effect of motion.Īs you might know, with games, people talk about how many fps they can reach with their gaming rig. The five frames resemble five iterations of your game loop logic. It shows five frames in a row, each with a slightly different position of the circle. You'll no longer be drawing a single static image, but many images will be drawn after each other, creating motion. It'll be the core of your game and trigger the drawing operations.

In the world of games, this loop is called a game loop. To achieve this, you'll need a loop to repeatedly execute your game logic. If you want make it appear as if the rectangle is moving, and eventually create an actual game, you need to draw more. This is super nice and all, but that drawing operation is only performed once. In the previous tutorial, you've created an application that draw's a rectangle on an HTML5 canvas. Request animation frames and have your own loop running by the end of this HTML5 game tutorial. Measure and display fps to see your loop in action. Create a proper game loop in JavaScript and learn about frame rates.

Planet coaster tutorial