Making Native Browser Games in The Modern Age

@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 LikeMaking Games


I can make ANYTHING?!

Whoa.

Creative freedom!


UsefulnessValue for time spent


Game making utilizessimilar abilitiesto 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 MakingHTML5 Games


Native to web

<canvas> <canvas>

<canvas>


0 0

00

THE FREENITED STATES OF FREEMERICA

NAN NAN0000000000

0000000000

0 0

00


NAN NAN0000000000

0000000000

0 0

00


NAN NAN0000000000

0000000000

0 0

00


NAN NAN0000000000

0000000000

0 0

00


NAN NAN0000000000

0000000000

Free (or affordable)

0 0

00


NAN NAN0000000000

0000000000

0 0

00


NaN NaN0000000000

0000000000


Many engines to choose from

html5gameengine.com


Supports collaboration


Many export options

Desktop & mobilebrowsers

Phone & tablet apps

ConsolesPC, Mac, & Linux apps


Cons of MakingHTML5 Games


Too many engines


Not native to all, hard to export

PhoneGap Intel XDK CocoonJS NW.js


My favoritegame 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 serverPhaser requires a server to run properly.


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

myfolder

index.html


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

myfolder

index.html phaser.min.js


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

myfolder

index.html phaser.min.js game.js


Include script filesAdd <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


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


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

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


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

function preload() {}


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


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

function create() {myGame.score = 0;

}


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

function update() {}


PhysicsPhaser 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 XDKPackages HTML5 games & apps for Android, iOS, Windows, OSX, and Linux.


PhoneGapPackages HTML5 games & apps for many mobile operating systems.


CocoonJSAllows 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 onthe 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● #gamedevWebsites:● forums.tigsource.com● makega.me


Attend games events


Recap!


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


Get out there & make games!


Thanks! Questions?Think of questions later?

Tweet @cattsmallEmail [email protected]

Work with me: soundcloud.com/jobs

Making Native Browser Games in The Modern Age

Technology