Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Native Browser Games in The Modern Age

1,445 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

×