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.

don't think you can redraw regions if you want the canvas to scroll... which has been 100% of my game programming experience, not that that was ever an issue. browsers are a whole different story. yea, i really have nothing of value to offer here. you can use kd-trees to make querying for "units" faster.
–
MarkSep 28 '10 at 1:31

Yeah that's true. Although in my implementation the scrolling occurs when the player reaches a quarter of the screen. Mix of player moving and world scrolling.
–
LouisSep 28 '10 at 1:36

"Terrain Generation, Lighting in 2D, Maps, quick server communication [...] physics or important maths"... these are MASSIVE topics, and vary wildly from game to game with absolutely no standards or rules. You either need to be more specific in each case, or you need to go and buy some game programming books and read through them. Either way, I'd suggest www.gamedev.net/community/forums or gamedev.stackexchange.com are more suited for game-specific questions than here.
–
KylotanSep 28 '10 at 11:28

Yeah exactly. That's why I'm looking for some good links on those topics. Need a crash course.
–
LouisSep 29 '10 at 0:04

1 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.

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)

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.