2D Game Design and Optimization tips and tricks

Question

I can see how this might not be a good enough question but I have just embarked on a journey to build the first decent Game Engine for HTML5 canvas that is cross browser and most of all fast. The only problem is I am very new to game design and don't know many tricks of the trade that will help me.

The game I am currently implementing for which the engine will be taken out of is a tile based 2D platformer with MANY tiles (around 3500). I'll start with some tips that I've thus far learnt.

• Redraw Regions - only redraw areas that change
• Avoid unnecessary function calls (Firefox does not like too many of them)
• Use the DOM if you can
• Chunk tiles together for quicker access

Other things I am looking for are things like Terrain Generation, Lighting in 2D, Maps, quick server communication. If this is too vague, I will try and close it. Just want to know game design better.

Links/resources would be good. Especially for physics or important maths.

Answer 1

Only draw stuff that's visible, that means only draw the tiles etc. that are currently on the screen. For tiles that's fairly easy, if you got lots of entities you may either want to use a sliding window to keep a list of screen local objects or use such a thing like a quadtree.

Since there's no easy/fast way to copy one canvas to another, redrawing regions is really complicated, since you can't keep a buffered state of (for example) the background if it hasn't changed. So keeping a list of "dirty rectangles" will be a computational overhead for sure.

The whole topic is very broad, even handling the FPS rate can be quite difficult, this question contains some good links and answers on that topic:
http://gamedev.stackexchange.com/questions/1589/fixed-time-step-vs-variable-time-step

You've also mentioned server communication, if you want to do some multiplayer you'll have to care about even more stuff, you can't trust the client, need to worry about bandwidth, synchronization issues, interpolation on the client etc.

I've done some rather simple 2D games in the past, most of them are not in JavaScript but they should give you some hints:
http://github.com/BonsaiDen/Norum
(Platformer engine demo in C, camera zones, moving platforms)

http://github.com/BonsaiDen/Tuff
(2D Platformer in Java, got never finished, powerups and some cool stuff)

http://github.com/BonsaiDen/NodeGame-Shooter
(2D multiplayer space shooter written in JS, using Node.js for the server and WebSockets for communication)

For some final words I'd say that you should start small, like for example just do a scrolling tile map first, then add a player, then rewrite the whole thing. You want write the perfect engine just from scratch it will take many iterations until you find out all the quirks and tricks.

If you want more precise answers you should open questions on the single components you run into troubles with.