Sunday, July 25, 2010

Excellent color cycling article!

Hey all, right now I'm currently in the process of writing my next post on movement in my HTML5 project, life gets busy sometimes though and will inadvertently throw me off course. I've got two issues to deal with at the moment:
  • Keypresses in OS: I hooked document.onkeydown and document.onkeyup to custom functions that modify the sprite's x/y coordinates on each draw cycle. Originally I was only using onkeydown and moving the character when that specific key is down. However, this method is inaccurate because different browsers interpret key-repeat functionality differently. In Firefox, holding down the right arrow key results in one move, followed by a pause and then a repeat of the key being pressed. Safari and Chrome don't seem to do this. Solution: I'm going to create flags on the sprites for up/down/left/right movement that are set on the first keypress, and unset when that key is released. The Sprite class will handle movement for these flags in the draw() function.
  • Double-buffering: In order to prevent flickering, the normal technique is to create two drawing fields, one active and one hidden. During each frame, you draw to the hidden field (a canvas in this case), and then flip the two when the hidden one is complete. I'm not sure if this can be gracefully done with HTML5 canvases, I really hope it can somehow. 

In the meantime, I just found this incredible article about color cycling with an HTML5 canvas, and it looks like the author has tackled a lot of the issues I will eventually run into with animation. I've got a business trip to take on Tuesday, and sitting in the airport should give me plenty of time to tackle the two above issues and write an article about the progress. Stay tuned!

1 comment:

  1. If you do all your drawing in one call (i.e. not multiple functions triggered with setTimeout or setInterval, but just one), the "swap buffer" is implicitly done by the browser, after your timeout/interval is finished. There's no need to implement is yourself.

    ReplyDelete