HTML5 Denver Users Group – The Making of a Sidescroller
HTML5 Denver Users Group co-founder David Geary demonstrated how to build a full-featured video game that runs smoothly on desktop and tablet browsers. His sidescroller video game consisted of scrolling background, parallax, sprites, collision detection and explosions! Here are my notes from his presentation.
Considerations
- CSS3 is implemented with hardware acceleration making it fast
- When we don’t use hardware acceleration we’re hitting the CPU
- Can’t do full featured video games without hardware acceleration
- Auto-pause (When focus on a different window)
- Slow fps detection
- CSS3 transitions between lives
Things you need for a game
- First you need a story line
- Characters
- Level editor
- Animation
- Scrolling background parallax
- Physics: Running, jumping and falling
Programming Ingredients
- Drawings
- Animation
- Sprites
- Physics
- Collision Detection
Besides Programming
- Find artwork
- Edit artwork
- Find or create sounds and music
- Edit sounds (Audacity software)
- Use techniques that make games fun (hard to do)
- Polish (Spend a lot of time polishing graphics and game elements)
Free stuff
- Creative Commons License
- Sounds (www.freesound.org)
- Graphics an Sounds (www.funplosion.com)
- Sounds and music (www.soundclick.com)
- Replica Island (www.replicaisland.net)
Techniques
- Make things easy the first time
- Ramp up complexity and difficulty (Keep introducing new stuff)
- Fine-tune difficulty (in-game heuristics)
- Introduce new sprites and capabilities
- The habit loop: Cue/reward (i.e. sound when a reward is given)