html5 - Best practices on separating Update and Draw on game loop

I've been working on my first HTML5 prototype and I found a good model that uses the regular Update and Draw loop we see in game dev. My question is, where does one end and the other begins?

The question popped when I wanted to rotate and draw an Image, and I kept wondering if the work of changing the tranformation matrix (that I presume would be a bit expensive since it works on the whole pixel array of an image) and calculating the right position do draw it would characterize drawing work, or maybe not, since after that I may need to check for collision or something similar.

Thinkig of it, seems like a silly question, but I would like some advice from more experienced developers. Where does does update ends and draw starts?

Thanks in advance.

Answer

In your case you'd move around game objects based on their velocity, do collision detection and handling, and only then you'd render the game objects with their new positions and rotations.

• During the update phase you change your game state, amongst others calculating new positions and rotations for your game objects based on user input, gameplay rules and physics.


• The draw phase should only be about creating a view (like a snapshot) of your current game state. In this phase the game state shouldn't be modified anymore so as to create a consistent image.

Side note: The transformation matrix should be separate from your sprite's pixels. Updating it with a 2D-translation can be as cheap as 2 additions. If this doesn't make sense read up a little more or even ask a new question about it.