Download as PDF, PPTX
Uploaded byCatt Small
Making Native Browser Games in The Modern Age
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.
More Related Content
Similar to Making Native Browser Games in The Modern Age
Making Native Browser Games in The Modern Age
- 1. @cattsmall@cattsmall Making Native Browser Gamesin 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 Ilike 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.
- 5.
- 6.
- 7. @cattsmall@cattsmall Game making utilizes similarabilities to web development
- 8. @cattsmall@cattsmall Use of skillsetchanges drawing narrative sound animation systems interaction code UI
- 9.
- 10. @cattsmall@cattsmall The State ofMaking Games for Web
- 11. @cattsmall@cattsmall Before 2010, Flash ruledthe internet.
- 12.
- 13.
- 14.
- 15.
- 16. @cattsmall@cattsmall HTML5 + JSgame engines Construct 2 ImpactJS CreateJS GameMaker
- 17.
- 18.
- 19.
- 20. @cattsmall@cattsmall 0 0THE FREENITEDSTATES 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 tochoose from html5gameengine.com
- 22.
- 23. @cattsmall@cattsmall Many export options Desktop& mobile browsers Phone & tablet apps ConsolesPC, Mac, & Linux apps
- 24.
- 25.
- 26. @cattsmall@cattsmall Not native toall, hard to export PhoneGap Intel XDK CocoonJS NW.js
- 27.
- 28.
- 29. @cattsmall@cattsmall For game devs,by game devs © Photon Storm
- 30. @cattsmall@cattsmall Easy to learn& use phaser.io/examples
- 31.
- 32.
- 33. @cattsmall@cattsmall Works with otherplugins www.pubnub.com/blog/motion-controlled-servos-with-leap-motion-raspberry-pi
- 34.
- 35. @cattsmall@cattsmall Turn on webserver 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 tophaser.io. Download the most recent JS file to your folder. myfolder index.html phaser.min.js
- 38. @cattsmall@cattsmall Create a gamefile 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.
- 41.
- 42. @cattsmall@cattsmall JavaScript You’ll be rightat home using Phaser since it relies on variables, objects, and functions.
- 43. @cattsmall@cattsmall Game An object thatcontains properties related to gameplay including window width, window height, and graphic rendering settings. var game = new Phaser.Game(...);
- 44. @cattsmall@cattsmall Preloading Phaser needs toknow 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 typesof images can be preloaded: ● “image” - static, no animation ● “spritesheet” - sprite with animation ● “tilemap” - environmental objects
- 46. @cattsmall@cattsmall Creating the Game Thecreate() function lets you set up variables, objects, and the game’s layout. function create() { myGame.score = 0; }
- 47. @cattsmall@cattsmall Updating the Game Unlikepreload 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 3types of physics. ● Arcade: Phaser.Physics.ARCADE ● Ninja: Phaser.Physics.NINJA ● P2: Phaser.Physics.P2JS Arcade Ninja P2
- 49.
- 50. @cattsmall@cattsmall Intel XDK Packages HTML5games & 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 totest and package HTML5 games & apps for both Android and iOS.
- 53. @cattsmall@cattsmall NW.js (node-webkit) Packages HTML5games & apps for Windows, OSX, and Linux.
- 54.
- 55. @cattsmall@cattsmall Other notable gameengines ● 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! Twitterhashtags: ● #screenshotsaturday ● #gamedev Websites: ● forums.tigsource.com ● makega.me
- 57.
- 58.
- 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 toweb + 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 withgood 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 atphaser.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 XDKfor 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 ofquestions later? Tweet @cattsmall Email catt@cattsmall.com Work with me: soundcloud.com/jobs