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.
Canvas
canvas
is frequently compared to Flash. It can be abused, much like Flash.- Frameworks are starting to appear to aid developers (like CreateJS)
- The
canvas
context:var ctx = canvas.getContext('2d')
- You can draw
img
elements,canvas
elements, andvideo
elements to a context. - You can draw pixel-based and vector-based elements to a
canvas
Animation
- 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. requestAnimationFrame
performs much better. WithsetTimeout
your code is always trying to run at 60 times per second, for example. UsingrequestAnimationFrame
, the browser will fire events when it is ready and capable.
Collision
- 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.
Audio
- HTML5
audio
is easy-to-use. Its only downfall is seamless looping. - Supply multiply formats based on browser playback capabilities.
audio
elements 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
- greypants.github.io/blastEngine/
- When writing your game code:
- Be as organized as possible!
- Create, extend, and re-use classes.
- Always Be Refactoring
- Get code reviews!
- Klass: An expressive, cross platform JavaScript Class provider with a classical interface to prototypal inheritance.