@cattsmall@cattsmall

Making Native Browser Games in the Modern Age

Web Unleashed Toronto 2015 – Catt Small

@cattsmall@cattsmall

● Product Designer, SoundCloud

● Game developer, Brooklyn Gamery

● Co-founder, Code Liberation

I’m Catt Small!

@cattsmall@cattsmall

● 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:

@cattsmall@cattsmall

Why I LikeMaking Games

@cattsmall@cattsmall

I can make ANYTHING?!

Whoa.

Creative freedom!

@cattsmall@cattsmall

UsefulnessValue for time spent

@cattsmall@cattsmall

Game making utilizessimilar abilitiesto web development

@cattsmall@cattsmall

Use of skillset changes

drawing narrative sound

animation systems interaction

code

UI

@cattsmall@cattsmall

Reuse processes

Ideate

PrototypeTest

Learn

@cattsmall@cattsmall

The State of Making Games for Web

@cattsmall@cattsmall

Before 2010,Flash ruled the internet.

@cattsmall@cattsmall

All Flash everything

@cattsmall@cattsmall

Apple rejected Flash

@cattsmall@cattsmall

@cattsmall@cattsmall

The canvas element

Kirby, © Nintendo

@cattsmall@cattsmall

HTML5 + JS game engines

Construct 2 ImpactJS CreateJS GameMaker

@cattsmall@cattsmall

Here we are.

@cattsmall@cattsmall

Pros of MakingHTML5 Games

@cattsmall@cattsmall

Native to web

<canvas> <canvas>

<canvas>

@cattsmall@cattsmall

0 0

00

THE FREENITED STATES OF FREEMERICA

NAN NAN0000000000

0000000000

0 0

00

THE FREENITED STATES OF FREEMERICA

NAN NAN0000000000

0000000000

0 0

00

THE FREENITED STATES OF FREEMERICA

NAN NAN0000000000

0000000000

0 0

00

THE FREENITED STATES OF FREEMERICA

NAN NAN0000000000

0000000000

0 0

00

THE FREENITED STATES OF FREEMERICA

NAN NAN0000000000

0000000000

Free (or affordable)

0 0

00

THE FREENITED STATES OF FREEMERICA

NAN NAN0000000000

0000000000

0 0

00

THE FREENITED STATES OF FREEMERICA

NaN NaN0000000000

0000000000

@cattsmall@cattsmall

Many engines to choose from

html5gameengine.com

@cattsmall@cattsmall

Supports collaboration

@cattsmall@cattsmall

Many export options

Desktop & mobilebrowsers

Phone & tablet apps

ConsolesPC, Mac, & Linux apps

@cattsmall@cattsmall

Cons of MakingHTML5 Games

@cattsmall@cattsmall

Too many engines

@cattsmall@cattsmall

Not native to all, hard to export

PhoneGap Intel XDK CocoonJS NW.js

@cattsmall@cattsmall

My favoritegame engine

@cattsmall@cattsmall

@cattsmall@cattsmall

For game devs, by game devs

© Photon Storm

@cattsmall@cattsmall

Easy to learn & use

phaser.io/examples

@cattsmall@cattsmall

Responsive

Droplet, © Photon Storm

@cattsmall@cattsmall

Touch & controller support

@cattsmall@cattsmall

Works with other plugins

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

@cattsmall@cattsmall

Setting up Phaser

@cattsmall@cattsmall

Turn on web serverPhaser requires a server to run properly.

@cattsmall@cattsmall

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

myfolder

index.html

@cattsmall@cattsmall

Download PhaserGo to phaser.io. Download the most recent JS file to your folder.

myfolder

index.html phaser.min.js

@cattsmall@cattsmall

Create a game fileSave a new file called game.js. Game code will go here.

myfolder

index.html phaser.min.js game.js

@cattsmall@cattsmall

Include script filesAdd <script> tags to your HTML file. Include phaser.min.js, then game.js.

index.html

phaser.min.js

game.js

@cattsmall@cattsmall

Start making your game!

@cattsmall@cattsmall

Concepts of Phaser

@cattsmall@cattsmall

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

@cattsmall@cattsmall

GameAn object that contains properties related to gameplay including window width, window height, and graphic rendering settings.

var game = new Phaser.Game(...);

@cattsmall@cattsmall

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

function preload() {}

@cattsmall@cattsmall

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

@cattsmall@cattsmall

Creating the GameThe create() function lets you set up variables, objects, and the game’s layout.

function create() {myGame.score = 0;

}

@cattsmall@cattsmall

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

function update() {}

@cattsmall@cattsmall

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

Arcade Ninja P2

@cattsmall@cattsmall

JavaScript Games Beyond the Web

@cattsmall@cattsmall

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

@cattsmall@cattsmall

PhoneGapPackages HTML5 games & apps for many mobile operating systems.

@cattsmall@cattsmall

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

@cattsmall@cattsmall

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

@cattsmall@cattsmall

Continuing onthe path

@cattsmall@cattsmall

Other notable game engines● ImpactJS: impactjs.com

● MelonJS: melonjs.org

● Game Closure: gameclosure.com

● Construct 2: scirra.com

● Game Maker: yoyogames.com/studio

@cattsmall@cattsmall

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

@cattsmall@cattsmall

Attend games events

@cattsmall@cattsmall

Recap!

@cattsmall@cattsmall

● Creative freedom

● Practicing skills you already know

● Learning skills you don’t know

● Familiar methodologies & processes

Making games

@cattsmall@cattsmall

+ 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

@cattsmall@cattsmall

● 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

@cattsmall@cattsmall

● 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!

@cattsmall@cattsmall

● Intel XDK for mobile & computer OSessoftware.intel.com/en-us/intel-xdk

● PhoneGap for mobile OSesphonegap.com

● CocoonJS for iOS & Androidludei.com/cocoonjs

● NW.js for Windows, OSX, & Linuxnwjs.io

HTML5 to native

@cattsmall@cattsmall

Get out there & make games!

@cattsmall@cattsmall

Thanks! Questions?Think of questions later?

Tweet @cattsmallEmail catt@cattsmall.com

Work with me: soundcloud.com/jobs