Making Native Browser Games in The Modern Age
1 like1,776 views
Catt Small discusses the creative freedom and usefulness of making native browser games using HTML5 and various game frameworks, emphasizing the shift from Flash to HTML5 after 2010. The document outlines the pros and cons of HTML5 game development, highlights preferred tools like Phaser, and offers a guide for setting up a game. Additionally, it covers exporting games to multiple platforms and encourages collaboration and sharing within the gaming community.
Making Native Browser Games in The Modern Age
- 1. @cattsmall@cattsmall Making Native Browser Games in the Modern Age Web Unleashed Toronto 2015 – Catt Small
- 2. @cattsmall@cattsmall ● Product Designer, SoundCloud ● Game developer, Brooklyn Gamery ● Co-founder, Code Liberation I’m Catt Small!
- 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:
- 7. @cattsmall@cattsmall Game making utilizes similar abilities to web development
- 8. @cattsmall@cattsmall Use of skillset changes drawing narrative sound animation systems interaction code UI
- 10. @cattsmall@cattsmall The State of Making Games for Web
- 11. @cattsmall@cattsmall Before 2010, Flash ruled the internet.
- 15. @cattsmall@cattsmall The canvas element Kirby, © Nintendo
- 16. @cattsmall@cattsmall HTML5 + JS game engines Construct 2 ImpactJS CreateJS GameMaker
- 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. @cattsmall@cattsmall Many engines to choose from html5gameengine.com
- 23. @cattsmall@cattsmall Many export options Desktop & mobile browsers Phone & tablet apps ConsolesPC, Mac, & Linux apps
- 26. @cattsmall@cattsmall Not native to all, hard to export PhoneGap Intel XDK CocoonJS NW.js
- 29. @cattsmall@cattsmall For game devs, by game devs © Photon Storm
- 30. @cattsmall@cattsmall Easy to learn & use phaser.io/examples
- 32. @cattsmall@cattsmall Touch & controller support
- 33. @cattsmall@cattsmall Works with other plugins www.pubnub.com/blog/motion-controlled-servos-with-leap-motion-raspberry-pi
- 35. @cattsmall@cattsmall Turn on web server Phaser requires a server to run properly.
- 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. @cattsmall@cattsmall Download Phaser Go to phaser.io. Download the most recent JS file to your folder. myfolder index.html phaser.min.js
- 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. @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. @cattsmall@cattsmall Start making your game!
- 42. @cattsmall@cattsmall JavaScript You’ll be right at home using Phaser since it relies on variables, objects, and functions.
- 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. @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. @cattsmall@cattsmall Loading Images Several types of images can be preloaded: ● “image” - static, no animation ● “spritesheet” - sprite with animation ● “tilemap” - environmental objects
- 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. @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. @cattsmall@cattsmall Physics Phaser has 3 types of physics. ● Arcade: Phaser.Physics.ARCADE ● Ninja: Phaser.Physics.NINJA ● P2: Phaser.Physics.P2JS Arcade Ninja P2
- 50. @cattsmall@cattsmall Intel XDK Packages HTML5 games & apps for Android, iOS, Windows, OSX, and Linux.
- 51. @cattsmall@cattsmall PhoneGap Packages HTML5 games & apps for many mobile operating systems.
- 52. @cattsmall@cattsmall CocoonJS Allows you to test and package HTML5 games & apps for both Android and iOS.
- 53. @cattsmall@cattsmall NW.js (node-webkit) Packages HTML5 games & apps for Windows, OSX, and Linux.
- 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. @cattsmall@cattsmall Share your creations! Twitter hashtags: ● #screenshotsaturday ● #gamedev Websites: ● forums.tigsource.com ● makega.me
- 59. @cattsmall@cattsmall ● Creative freedom ● Practicing skills you already know ● Learning skills you don’t know ● Familiar methodologies & processes Making games
- 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. @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. @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. @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. @cattsmall@cattsmall Get out there & make games!
- 65. @cattsmall@cattsmall Thanks! Questions? Think of questions later? Tweet @cattsmall Email catt@cattsmall.com Work with me: soundcloud.com/jobs