HTML5 DevConf 2014 - Workflow when Making HTML5 Games

  • View
    915

  • Download
    1

Embed Size (px)

Text of HTML5 DevConf 2014 - Workflow when Making HTML5 Games

  1. 1. M2 WORKFLOW AND DISTRIBUTIONhttps://academy.zenva.com
  2. 2. Workflow overviewGame scopeTechnologyselectionGamedevelopment Code Assets ContentDistributionhttps://academy.zenva.com
  3. 3. Unreasonable scope = Your worst enemy!https://academy.zenva.com
  4. 4. Pareto principle-20% of the input yields 80% of the output-Be smart in what you focus on, and you can getquick resultshttps://academy.zenva.com
  5. 5. BrainstormReduceImplement/ MVPTesthttps://academy.zenva.com
  6. 6. One pager A brief description of the game What functionality it will need: Internet connection Local storage Cloud storage Camera? GPS? Single vs Multiplayer Social integration Stick figure sketches of the main screens andgame mechanicshttps://academy.zenva.com
  7. 7. Your First MVP Only essential features 1 Level 1 Type of enemy, item, powerup No custom artwork use rectangles or freeimages No animations No cloud integration No social integration Nothing too complexhttps://academy.zenva.com
  8. 8. Technology selection Platforms Devices Select framework Other requirements (cloud, social, payments)https://academy.zenva.com
  9. 9. Development Coding Code editor Web browser Web server Version control (GIT) Game assets Images Audio Animations Game content Levels Storyhttps://academy.zenva.com
  10. 10. Code editor Simple code editors: Sublime Text Geany Notepad++ Full IDE solutions: Netbeans Eclipse Visual Studio Komodo Edit HTML5-oriented Intel XDK Adobe Bracketshttps://academy.zenva.com
  11. 11. Browser + Code Editorhttps://academy.zenva.com
  12. 12. Web Server Apache (WAMP, MAMP) Python Simple HTTP Server Node.js http-server Chrome extension: Web Server for Chrome Sublime Text plugin Intel XDK and Brackets!https://academy.zenva.com
  13. 13. Game Assets Create your own Find free assets Licensing! Buy assets Pay someone to make assets for youhttps://academy.zenva.com
  14. 14. Finding free assets Graphic OpenGameArt.org OpenClipArt.org PixaBay.com Audio Freesound.orghttps://academy.zenva.com
  15. 15. Asset marketplaces Graphics Graphicriver.net GameArtPartners.com EatCreatures.com GameArtMarket.com marketplace.yoyogames.com Audio Audiojungle.net marketplace.yoyogames.comhttps://academy.zenva.com
  16. 16. Distribution Web Access via URL Mobile platforms App storeshttps://academy.zenva.com
  17. 17. https://academy.zenva.com
  18. 18. WrappersNativewrapperHTML5https://academy.zenva.com
  19. 19. Cordova vs PhonegapCordovaExtra servicesby Adobe+ = Phonegaphttps://academy.zenva.com
  20. 20. Building with Cordova You need the platform SDK Android SDK iOS SDK Using command line: Create project Develop HTML5 Test on devices and emulators Prepare deployment versionhttps://academy.zenva.com
  21. 21. Building with CordovaCreateprojectDevelopHTML5Build to testBuild fordeployment(sign)DeployCertificates*https://academy.zenva.com
  22. 22. Building in the Cloud Phonegap Build Intel XDK Another option: CocoonJS by Ludeihttps://academy.zenva.com
  23. 23. Building in the CloudCreateprojectDevelopHTML5Build to testBuild fordeployment(sign)DeployCertificates*https://academy.zenva.com
  24. 24. https://academy.zenva.com
  25. 25. Intel XDKhttps://academy.zenva.com
  26. 26. https://academy.zenva.com
  27. 27. Submission Icons Splash screen Description Keywords Category Pricehttps://academy.zenva.com
  28. 28. iOS Specifics Apple Developer Program ($99/year) https://developer.apple.com Need a Mac computer IPA File Store review process is very strict iOS Human Interface Guidelineshttps://academy.zenva.com
  29. 29. Android Specifics Android Developer Program ($25/year) http://developer.android.com/ Any computer APK file No review process. Updates in ~2-4 hourshttps://academy.zenva.com
  30. 30. Quick summary Game dev is an iterative process MVP Where to distribute Wrapping a HTML5 gamehttps://academy.zenva.com
  31. 31. Break time!ZENVA.comhttps://academy.zenva.com