I have been working in the game engine for about 6 days in a row, returning everything I learned from making games in the old days of DOS. However, there was double buffering at the time, and you could just redraw everything at an incredibly fast speed. Alas, HTML5 is another story.
So far, my engine has had “layers”, which are canvases placed one above the other at a 0.0 location, and I draw their context one above the other at a screen coordinate of 0.0. This means that you draw a layer, and the layer is drawn at the visualization stage (if it, of course, fulfills several conditions).
I managed to make a routine to draw a pleated map on canvas, and using → this <- an article that I controlled to make it scroll by redrawing on each frame. Everything works fine and dandy when you use 320x240, but when I increase it to 640x480 and double the number of tiles, it slows down like hell.
So, I came up with this idea (only horizontal scrolling for this example) using a slightly larger canvas:
- Draw a canvas with all the tiles and move its position x to camera X pos.
- If the camera position (relative to the first tile drawn)> tile_width
- Redraw the entire canvas by increasing 1 to the initial X-tile AND
- Reset canvas position X to zero
That way, I would only redraw the canvas every time the scroll happens, and with some optimization, I could even redraw only the boundary tiles, not the entire canvas (in any case, this is an idea).
So my question is: how would this be done in code ?! maybe I'm tired of working on this engine for six days in a row, but I just don't see it. Besides, what puzzles me even more: how to draw the edges of the tile without affecting the rest of the canvas ?: (
, , jsfiddle, . , , . , - ( ), , . , , xD.
!
- DARKGuy