Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
@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 Ca...
@cattsmall@cattsmall
● Why I like making games
● The state of making games for web
● Pros & cons of HTML5 game-making
● My...
@cattsmall@cattsmall
Why I Like
Making Games
@cattsmall@cattsmall
I can make
ANYTHING?!
Whoa.
Creative freedom!
@cattsmall@cattsmall
Usefulness
Value for time spent
@cattsmall@cattsmall
Game making utilizes
similar abilities
to 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 Making
HTML5 Games
@cattsmall@cattsmall
Native to web
<canvas>
<canvas>
<canvas>
@cattsmall@cattsmall
0 0THE FREENITED STATES OF FREEMERICA
NAN NAN
0000000000
0 0THE FREENITED STATES OF FREEMERICA
NAN NA...
@cattsmall@cattsmall
Many engines to choose from
html5gameengine.com
@cattsmall@cattsmall
Supports collaboration
@cattsmall@cattsmall
Many export options
Desktop & mobile
browsers
Phone &
tablet
apps
ConsolesPC, Mac, &
Linux apps
@cattsmall@cattsmall
Cons of Making
HTML5 Games
@cattsmall@cattsmall
Too many engines
@cattsmall@cattsmall
Not native to all, hard to export
PhoneGap Intel XDK CocoonJS NW.js
@cattsmall@cattsmall
My favorite
game 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 server
Phaser requires a server to run properly.
@cattsmall@cattsmall
Create folder & HTML file
Set up a folder and create index.html in it.
Set up the basic HTML structur...
@cattsmall@cattsmall
Download Phaser
Go to phaser.io. Download the most recent JS
file to your folder.
myfolder
index.html...
@cattsmall@cattsmall
Create a game file
Save a new file called game.js. Game code
will go here.
myfolder
index.html phaser...
@cattsmall@cattsmall
Include script files
Add <script> tags to your HTML file. Include
phaser.min.js, then game.js.
index....
@cattsmall@cattsmall
Start making your game!
@cattsmall@cattsmall
Concepts of Phaser
@cattsmall@cattsmall
JavaScript
You’ll be right at home using Phaser since it
relies on variables, objects, and functions.
@cattsmall@cattsmall
Game
An object that contains properties related to
gameplay including window width, window
height, an...
@cattsmall@cattsmall
Preloading
Phaser needs to know what files to prepare
before the game can be displayed. This phase
is...
@cattsmall@cattsmall
Loading Images
Several types of images can be preloaded:
● “image” - static, no animation
● “spritesh...
@cattsmall@cattsmall
Creating the Game
The create() function lets you set up
variables, objects, and the game’s layout.
fu...
@cattsmall@cattsmall
Updating the Game
Unlike preload and create, which only run
once each, the update() function is runni...
@cattsmall@cattsmall
Physics
Phaser has 3 types of physics.
● Arcade: Phaser.Physics.ARCADE
● Ninja: Phaser.Physics.NINJA
...
@cattsmall@cattsmall
JavaScript Games
Beyond the Web
@cattsmall@cattsmall
Intel XDK
Packages HTML5 games & apps for Android,
iOS, Windows, OSX, and Linux.
@cattsmall@cattsmall
PhoneGap
Packages HTML5 games & apps for many
mobile operating systems.
@cattsmall@cattsmall
CocoonJS
Allows 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 on
the path
@cattsmall@cattsmall
Other notable game engines
● ImpactJS: impactjs.com
● MelonJS: melonjs.org
● Game Closure: gameclosur...
@cattsmall@cattsmall
Share your creations!
Twitter hashtags:
● #screenshotsaturday
● #gamedev
Websites:
● forums.tigsource...
@cattsmall@cattsmall
Attend games events
@cattsmall@cattsmall
Recap!
@cattsmall@cattsmall
● Creative freedom
● Practicing skills you already know
● Learning skills you don’t know
● Familiar m...
@cattsmall@cattsmall
+ Native to web
+ Free or affordable
+ Many engines to choose from
+ Supports collaboration & version...
@cattsmall@cattsmall
● Well-supported with good documentation
● Easy to learn & use
● Fluid, allows for responsive & fulls...
@cattsmall@cattsmall
● Available at phaser.io
● Download & include it in your folder like
any other JavaScript framework
R...
@cattsmall@cattsmall
● Intel XDK for mobile & computer OSes
software.intel.com/en-us/intel-xdk
● PhoneGap for mobile OSes
...
@cattsmall@cattsmall
Get out there & make games!
@cattsmall@cattsmall
Thanks! Questions?
Think of questions later?
Tweet @cattsmall
Email catt@cattsmall.com
Work with me: ...
Prochain SlideShare
Chargement dans…5
×

Making Native Browser Games in The Modern Age

1 428 vues

Publié le

When Flash fell out of popularity due to lack of mobile support, it left small game makers with a big question – use outdated technology and miss out on the shift to mobile, or make mobile-only games and forget the browser? Gladly, thanks to JavaScript game development frameworks like Phaser, we no longer have to choose. In this talk, I discussed the pros and cons of making games using JavaScript, the basic concepts behind Phaser (my tool of choice), as well as how to go beyond the browser and package JavaScript games for other platforms.

Publié dans : Technologie
  • Soyez le premier à commenter

Making Native Browser Games in The Modern Age

  1. 1. @cattsmall@cattsmall Making Native Browser Games in the Modern Age Web Unleashed Toronto 2015 – Catt Small
  2. 2. @cattsmall@cattsmall ● Product Designer, SoundCloud ● Game developer, Brooklyn Gamery ● Co-founder, Code Liberation I’m Catt Small!
  3. 3. @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:
  4. 4. @cattsmall@cattsmall Why I Like Making Games
  5. 5. @cattsmall@cattsmall I can make ANYTHING?! Whoa. Creative freedom!
  6. 6. @cattsmall@cattsmall Usefulness Value for time spent
  7. 7. @cattsmall@cattsmall Game making utilizes similar abilities to web development
  8. 8. @cattsmall@cattsmall Use of skillset changes drawing narrative sound animation systems interaction code UI
  9. 9. @cattsmall@cattsmall Reuse processes Ideate PrototypeTest Learn
  10. 10. @cattsmall@cattsmall The State of Making Games for Web
  11. 11. @cattsmall@cattsmall Before 2010, Flash ruled the internet.
  12. 12. @cattsmall@cattsmall All Flash everything
  13. 13. @cattsmall@cattsmall Apple rejected Flash
  14. 14. @cattsmall@cattsmall
  15. 15. @cattsmall@cattsmall The canvas element Kirby, © Nintendo
  16. 16. @cattsmall@cattsmall HTML5 + JS game engines Construct 2 ImpactJS CreateJS GameMaker
  17. 17. @cattsmall@cattsmall Here we are.
  18. 18. @cattsmall@cattsmall Pros of Making HTML5 Games
  19. 19. @cattsmall@cattsmall Native to web <canvas> <canvas> <canvas>
  20. 20. @cattsmall@cattsmall 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 THE FREENITED STATES OF FREEMERICA NAN NAN 0000000000 0000000000 0 0 00 THE FREENITED STATES OF FREEMERICA NAN NAN 0000000000 0000000000 Free (or affordable) 0 0 00 THE FREENITED STATES OF FREEMERICA NAN NAN 0000000000 0000000000 0 0 00 THE FREENITED STATES OF FREEMERICA NaN NaN 0000000000 0000000000
  21. 21. @cattsmall@cattsmall Many engines to choose from html5gameengine.com
  22. 22. @cattsmall@cattsmall Supports collaboration
  23. 23. @cattsmall@cattsmall Many export options Desktop & mobile browsers Phone & tablet apps ConsolesPC, Mac, & Linux apps
  24. 24. @cattsmall@cattsmall Cons of Making HTML5 Games
  25. 25. @cattsmall@cattsmall Too many engines
  26. 26. @cattsmall@cattsmall Not native to all, hard to export PhoneGap Intel XDK CocoonJS NW.js
  27. 27. @cattsmall@cattsmall My favorite game engine
  28. 28. @cattsmall@cattsmall
  29. 29. @cattsmall@cattsmall For game devs, by game devs © Photon Storm
  30. 30. @cattsmall@cattsmall Easy to learn & use phaser.io/examples
  31. 31. @cattsmall@cattsmall Responsive Droplet, © Photon Storm
  32. 32. @cattsmall@cattsmall Touch & controller support
  33. 33. @cattsmall@cattsmall Works with other plugins www.pubnub.com/blog/motion-controlled-servos-with-leap-motion-raspberry-pi
  34. 34. @cattsmall@cattsmall Setting up Phaser
  35. 35. @cattsmall@cattsmall Turn on web server Phaser requires a server to run properly.
  36. 36. @cattsmall@cattsmall Create folder & HTML file Set up a folder and create index.html in it. Set up the basic HTML structure. myfolder index.html
  37. 37. @cattsmall@cattsmall Download Phaser Go to phaser.io. Download the most recent JS file to your folder. myfolder index.html phaser.min.js
  38. 38. @cattsmall@cattsmall Create a game file Save a new file called game.js. Game code will go here. myfolder index.html phaser.min.js game.js
  39. 39. @cattsmall@cattsmall Include script files Add <script> tags to your HTML file. Include phaser.min.js, then game.js. index.html phaser.min.js game.js
  40. 40. @cattsmall@cattsmall Start making your game!
  41. 41. @cattsmall@cattsmall Concepts of Phaser
  42. 42. @cattsmall@cattsmall JavaScript You’ll be right at home using Phaser since it relies on variables, objects, and functions.
  43. 43. @cattsmall@cattsmall Game An object that contains properties related to gameplay including window width, window height, and graphic rendering settings. var game = new Phaser.Game(...);
  44. 44. @cattsmall@cattsmall Preloading Phaser needs to know what files to prepare before the game can be displayed. This phase is called the preload() function. function preload() {}
  45. 45. @cattsmall@cattsmall Loading Images Several types of images can be preloaded: ● “image” - static, no animation ● “spritesheet” - sprite with animation ● “tilemap” - environmental objects
  46. 46. @cattsmall@cattsmall Creating the Game The create() function lets you set up variables, objects, and the game’s layout. function create() { myGame.score = 0; }
  47. 47. @cattsmall@cattsmall Updating the Game Unlike preload and create, which only run once each, the update() function is running constantly until the game stops. function update() {}
  48. 48. @cattsmall@cattsmall Physics Phaser has 3 types of physics. ● Arcade: Phaser.Physics.ARCADE ● Ninja: Phaser.Physics.NINJA ● P2: Phaser.Physics.P2JS Arcade Ninja P2
  49. 49. @cattsmall@cattsmall JavaScript Games Beyond the Web
  50. 50. @cattsmall@cattsmall Intel XDK Packages HTML5 games & apps for Android, iOS, Windows, OSX, and Linux.
  51. 51. @cattsmall@cattsmall PhoneGap Packages HTML5 games & apps for many mobile operating systems.
  52. 52. @cattsmall@cattsmall CocoonJS Allows you to test and package HTML5 games & apps for both Android and iOS.
  53. 53. @cattsmall@cattsmall NW.js (node-webkit) Packages HTML5 games & apps for Windows, OSX, and Linux.
  54. 54. @cattsmall@cattsmall Continuing on the path
  55. 55. @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
  56. 56. @cattsmall@cattsmall Share your creations! Twitter hashtags: ● #screenshotsaturday ● #gamedev Websites: ● forums.tigsource.com ● makega.me
  57. 57. @cattsmall@cattsmall Attend games events
  58. 58. @cattsmall@cattsmall Recap!
  59. 59. @cattsmall@cattsmall ● Creative freedom ● Practicing skills you already know ● Learning skills you don’t know ● Familiar methodologies & processes Making games
  60. 60. @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
  61. 61. @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
  62. 62. @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!
  63. 63. @cattsmall@cattsmall ● 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
  64. 64. @cattsmall@cattsmall Get out there & make games!
  65. 65. @cattsmall@cattsmall Thanks! Questions? Think of questions later? Tweet @cattsmall Email catt@cattsmall.com Work with me: soundcloud.com/jobs

×