Presented by Dan Tello.
- During the 2012 Olympics, PUMA had to remove references to Usain Bolt as they weren’t an official sponsor of the Olympics.
canvasis frequently compared to Flash. It can be abused, much like Flash.
- Frameworks are starting to appear to aid developers (like CreateJS)
var ctx = canvas.getContext('2d')
- You can draw
videoelements to a context.
- You can draw pixel-based and vector-based elements to a
- Game development is based around a central timing loop.
- When animating, the entire canvas needs to be erased before drawing a new frame. Somewhat counter-intuitive if you’re familiar with DOM-based animation.
- Time-based Animation: It’s an easy mistake to use
setTimeout(pixels-per-frame). Instead, look for pixels-per-second.
requestAnimationFrameperforms much better. With
setTimeoutyour code is always trying to run at 60 times per second, for example. Using
requestAnimationFrame, the browser will fire events when it is ready and capable.
- Simplest method is to draw boxes around your objects and detect if there is intersection in their coordinates.
- Similarly, detect touch and mouse event coordinates and compare to game element positions.
audiois easy-to-use. Its only downfall is seamless looping.
- Supply multiply formats based on browser playback capabilities.
audioelements can be created on the fly and appended to your page as needed.
- Run, PUMA, Run sound effects were created in GarageBand.
Putting it all together
- When writing your game code:
- Be as organized as possible!
- Create, extend, and re-use classes.
- Always Be Refactoring
- Get code reviews!