Upload
catt-small
View
1.249
Download
2
Embed Size (px)
Citation preview
@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 [email protected]
Work with me: soundcloud.com/jobs