Making Native Browser Games in HTML5

@cattsmall@cattsmall
Making Native Browser
Games in the Modern Age
Web Unleashed Toronto 2015 – Catt Small

● Product Designer, SoundCloud
● Game developer, Brooklyn Gamery
● Co-founder, Code Liberation
I’m Catt Small!

● Why I like making games
● The state of making games for web
● Pros & cons of HTML5 game-making
● My favorite HTML5 game framework
● Tools for packaging HTML5 games as apps
Today we’ll talk about:

Why I Like
Making Games

I can make
ANYTHING?!
Whoa.
Creative freedom!

Usefulness
Value for time spent

Game making utilizes
similar abilities
to web development

Use of skillset changes
drawing narrative sound
animation systems interaction
code
UI

Reuse processes
Ideate
PrototypeTest
Learn

The State of Making
Games for Web

Before 2010,
Flash ruled the internet.

All Flash everything

Apple rejected Flash

The canvas element
Kirby, © Nintendo

HTML5 + JS game engines
Construct 2 ImpactJS CreateJS GameMaker

Here we are.

Pros of Making
HTML5 Games

Native to web
<canvas>
<canvas>
<canvas>

0 0THE FREENITED STATES OF FREEMERICA
NAN NAN
0000000000
0 0THE FREENITED STATES OF FREEMERICA
NAN NAN
0000000000
0000000000
0 0
00
THE FREENITED STATES OF FREEMERICA
NAN NAN
0000000000
0000000000
0 0
00
NAN NAN
0000000000
0000000000
0 0
00
NAN NAN
0000000000
0000000000
Free (or affordable)
0 0
00
NAN NAN
0000000000
0000000000
0 0
00
NaN NaN
0000000000
0000000000

Many engines to choose from
html5gameengine.com

Supports collaboration

Many export options
Desktop & mobile
browsers
Phone &
tablet
apps
ConsolesPC, Mac, &
Linux apps

Cons of Making
HTML5 Games

Too many engines

Not native to all, hard to export
PhoneGap Intel XDK CocoonJS NW.js

My favorite
game engine

For game devs, by game devs
© Photon Storm

Easy to learn & use
phaser.io/examples

Responsive
Droplet, © Photon Storm

Touch & controller support

Works with other plugins
www.pubnub.com/blog/motion-controlled-servos-with-leap-motion-raspberry-pi

Setting up Phaser

Turn on web server
Phaser requires a server to run properly.

Create folder & HTML file
Set up a folder and create index.html in it.
Set up the basic HTML structure.
myfolder
index.html

Download Phaser
Go to phaser.io. Download the most recent JS
file to your folder.
myfolder
index.html phaser.min.js

Create a game file
Save a new file called game.js. Game code
will go here.
myfolder
index.html phaser.min.js game.js

Include script files
Add <script> tags to your HTML file. Include
phaser.min.js, then game.js.
index.html
phaser.min.js
game.js

Start making your game!

Concepts of Phaser

JavaScript
You’ll be right at home using Phaser since it
relies on variables, objects, and functions.

Game
An object that contains properties related to
gameplay including window width, window
height, and graphic rendering settings.
var game = new Phaser.Game(...);

Preloading
Phaser needs to know what files to prepare
before the game can be displayed. This phase
is called the preload() function.
function preload() {}

Loading Images
Several types of images can be preloaded:
● “image” - static, no animation
● “spritesheet” - sprite with animation
● “tilemap” - environmental objects

Creating the Game
The create() function lets you set up
variables, objects, and the game’s layout.
function create() {
myGame.score = 0;
}

Updating the Game
Unlike preload and create, which only run
once each, the update() function is running
constantly until the game stops.
function update() {}

Physics
Phaser has 3 types of physics.
● Arcade: Phaser.Physics.ARCADE
● Ninja: Phaser.Physics.NINJA
● P2: Phaser.Physics.P2JS
Arcade Ninja P2

JavaScript Games
Beyond the Web

Intel XDK
Packages HTML5 games & apps for Android,
iOS, Windows, OSX, and Linux.

PhoneGap
Packages HTML5 games & apps for many
mobile operating systems.

CocoonJS
Allows you to test and package HTML5 games
& apps for both Android and iOS.

NW.js (node-webkit)
Packages HTML5 games & apps for Windows,
OSX, and Linux.

Continuing on
the path

Other notable game engines
● ImpactJS: impactjs.com
● MelonJS: melonjs.org
● Game Closure: gameclosure.com
● Construct 2: scirra.com
● Game Maker: yoyogames.com/studio

Share your creations!
Twitter hashtags:
● #screenshotsaturday
● #gamedev
Websites:
● forums.tigsource.com
● makega.me

Attend games events

● Creative freedom
● Practicing skills you already know
● Learning skills you don’t know
● Familiar methodologies & processes
Making games

+ Native to web
+ Free or affordable
+ Many engines to choose from
+ Supports collaboration & version control
+ Export options for various OSes exist
- Too many engines, varying quality
- Browser-native, not usually OS-native
HTML5 game dev + & -’s

● Well-supported with good documentation
● Easy to learn & use
● Fluid, allows for responsive & fullscreen
● More inputs than keyboard & mouse
● Friendly with other plugins & frameworks
Phaser - why it’s good

● Available at phaser.io
● Download & include it in your folder like
any other JavaScript framework
Resources:
● github.com/cattsmall/Phaser-game
● codeliberation.github.io/CLF-slides
Phaser - try it out!

● Intel XDK for mobile & computer OSes
software.intel.com/en-us/intel-xdk
● PhoneGap for mobile OSes
phonegap.com
● CocoonJS for iOS & Android
ludei.com/cocoonjs
● NW.js for Windows, OSX, & Linux
nwjs.io
HTML5 to native

Get out there & make games!

Thanks! Questions?
Think of questions later?
Tweet @cattsmall
Email catt@cattsmall.com
Work with me: soundcloud.com/jobs

Making Native Browser Games in HTML5

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (12)

Similaire à Making Native Browser Games in HTML5

Similaire à Making Native Browser Games in HTML5 (20)

Plus de Catt Small

Plus de Catt Small (14)

Dernier

Dernier (20)

Making Native Browser Games in HTML5