Coding Your First HTML5 Game Randy Hoyt @randyhoyt - PowerPoint PPT Presentation

Coding Your First HTML5 Game Randy Hoyt @randyhoyt

randyhoyt.com/launchgame @randyhoyt

Overview • Code • HTML5 • Games @randyhoyt

Overview • Games • HTML5 • Code @randyhoyt

Games

Games • Games are fun ! s e m a g e v o l I @randyhoyt

A Theory of Fun (2004), by Ralph Koster

Games • Games are fun • Games are everywhere ! s e m a g e v o l I @randyhoyt

Homo Ludens (1938), by Johan Huizinga

Games • Games are fun • Games are everywhere • Games exercise the brain ! s e m a g e v o l I @randyhoyt

Play engages the prefrontal cortex, responsible for your highest-level cognitive functions – including self- knowledge, memory, mental imagery, and incentive and reward processing. Brain Workout , Life Optimizer, http://trhou.se/WHkaR7

Brain Workout , Life Optimizer, http://trhou.se/WHkaR7

Games • Games are fun • Games are everywhere • Games exercise the brain • Games are practice for ! the real world s e m a g e v o l I @randyhoyt

7 TED Talks on Gaming , http://trhou.se/gamesTED

Games And Me @randyhoyt

HTML5

! t r e l A d r o w z z u B

HTML5 and Related Technologies • Canvas @randyhoyt

HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL @randyhoyt

HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL • WebSocket http://trhou.se/introwebsockets @randyhoyt

HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL • WebSocket http://trhou.se/introwebsockets • SVG @randyhoyt

HTML5 Games

It’s official: with HTML5 today the browser has become a full- fledged gaming platform. HTML5 Gaming , http://html5rocks.com/gaming

Behind the Scenes , http://www.cuttherope.ie/dev/

HTML5 Games • Top 10 HTML5 games of 2012 http://trhou.se/gamesin2012 • Goko • Game Closure Devkit • Famo.us - http://tcrn.ch/ZfCuNh @randyhoyt

Code

Project Structure JavaScript HTML CSS @randyhoyt

Project Structure JavaScript HTML CSS @randyhoyt

Project Structure JavaScript HTML CSS @randyhoyt

Project Structure JavaScript HTML CSS @randyhoyt

HTML

CSS

Canvas Preview

Canvas and Context

Image in JavaScript

requestAnimationFrame

update function

update function

Game Logic: Init (Once), Update (Loop) init update

fillRect

One wall in the browser

fillRect

Five walls in the browser

drawImage

Frog variables

Frog in the browser

Five walls in the browser

clearRect

clearRect

Game Logic: Init (Once), Update (Loop) init update

Game Logic: Move update init

Game Logic: Update, Render, Loop update init render

Game Logic • Init - Place Frog - Place Obstacles • Update - Move • Render @randyhoyt

Game Logic: Bind Events • Init - Bind Events - Place Frog - Place Obstacles • Update - Move • Render @randyhoyt

Game Logic: Place Badges • Init - Bind Events - Place Frog - Place Obstacles - Place Badges • Update ... @randyhoyt

Game Logic: Update ... • Update - Check for Movement - Check for Obstacles - Move - Check for Badges • Render @randyhoyt

Game Logic: Check for Victory ... • Update ... ... • Render • Check for Victory @randyhoyt

Game Preview

HTML5 Game Frameworks • Impact • LimeJS • Crafty • GameClosure ! e r o m y • CocoonJS n a m d n a . . . @randyhoyt

HTML5 Game Frameworks • Impact • LimeJS • Crafty • GameClosure • CocoonJS Game Engine Comparison , http://trhou.se/gamecompare @randyhoyt

LimeJS • Free and Open Source • Uses DOM or Canvas • Built on Google Closure • Requires Python • Incompatible with CocoonJS @randyhoyt

> bin/lime.py create treehouse

HTML

Starting JavaScript File

Create Director

Director Settings

Scene

Blank Canvas

Comments

Game Background Sprite

appendChild

Create Analog Stick Sprite

Preview Game

Preview Game With Inspector

Preview Game With Console

Add Four Button Sprites

Frog Constructor

Frog Properties

Require Frog

> bin/lime.py update

Constants

appendChild Frog

Game Logic: Init, Render init render

Create Walls and Badges

appendChild: Walls and Badges

Game Preview

Add Event for UP Button

Frog: startMovement

Game Logic: Schedule Manager init update render

Schedule Manager

Game Logic: Check Movement update init ? render

Add Events to All Buttons

checkMovement

Game Logic: Check Movement update init ? render

Game Logic: Check Movement update init ? render