Best way to do “cutscenes” [closed]

I'm curious about the best way to display cutscenes in canvas. When I say cutscene I mean something like a static image fading from one to the other. Would it be best to use a timeout for a certain amount of seconds then go to the next image? Alternatively, would it be better to somehow use the main loop and increment a counter? If anyone has a method they use, post an answer! :D

closed as primarily opinion-based by Sean Middleditch, Seth Battin, bummzack, MichaelHouse♦Nov 7 '13 at 21:40

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

• Do you mean 2D? If so, this is probably a dupe of: gamedev.stackexchange.com/questions/31694/… – ashes999 Oct 31 '13 at 20:54
• "Best" is really subjective. If it works, it works. Code something up and see if you run into concrete problems. – Sean Middleditch Oct 31 '13 at 21:17
• Whatever you do, don't use window.setTimeout. Instead, use requestAnimationFrame. – Micah Bolen Nov 2 '13 at 15:01

Don't use setInterval() or so on for animating canvas. There is a requestAnimationFrame() (MDN) function for this. It has better performance and more usefull in general.

Here is a good article about it: http://html5hub.com/request-animation-frame-for-better-performance

Use setTimeout() instead of setInterval(), because setTimeout() will only run after a successful call, while setInterval() would just stack many unhandled calls in case one of the calls takes more time to complete before another call is made. Combine it with requestAnimationFrame() for even better performance plus not trying to render while the browser window is not even being shown.

This is what a standard JavaScript game loop usually looks like:

function getTime() {
return new Date().getTime();
}

function loop() {
var startTime = getTime();
screen.update();
var elapsedTime = getTime() - startTime;
var interval = FRAME_DURATION - elapsedTime;
setTimeout(onTimeout, interval);

function onTimeout() {
requestAnimationFrame(loop);
}
}

function main() {
loop();
}

main();


You have to issue the first call to loop() from main() (or whatever your main function is called) and then it will keep calling itself indefinitely. In the snippet above, screen.update() is the method for your animation. And yes, you can have a ++tick there to increment whatever property of your animation is required to make the transition.