HTML5 DevConf 2014 - Workflow when Making HTML5 Games

https://academy.zenva.com

M2 – WORKFLOW AND DISTRIBUTION


Workflow overview

Game scope Technology selection

Game development• Code• Assets• Content

Distribution


Unreasonable scope = Your worst enemy!


Pareto principle

-20% of the input yields 80% of the output

-Be smart in what you focus on, and you can get quick results


Brainstorm

Reduce

Implement / MVP

Test


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 and game mechanics


Your First MVP

• Only essential features• 1 Level• 1 Type of enemy, item, powerup• No custom artwork use rectangles or free

images• No animations• No cloud integration• No social integration• Nothing too complex


Technology selection

• Platforms• Devices• Select framework• Other requirements (cloud, social, payments)


Development• Coding

– Code editor– Web browser– Web server– Version control (GIT)

• Game assets– Images– Audio– Animations

• Game content– Levels– Story


Code editor• Simple code editors:

– Sublime Text– Geany– Notepad++

• Full IDE solutions:– Netbeans– Eclipse– Visual Studio– Komodo Edit

• HTML5-oriented– Intel XDK– Adobe Brackets


Browser + Code Editor


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!


Game Assets

• Create your own

• Find free assets– Licensing!

• Buy assets

• Pay someone to make assets for you


Finding free assets

• Graphic– OpenGameArt.org– OpenClipArt.org– PixaBay.com

• Audio– Freesound.org


Asset marketplaces

• Graphics– Graphicriver.net– GameArtPartners.com– EatCreatures.com– GameArtMarket.com– marketplace.yoyogames.com

• Audio– Audiojungle.net– marketplace.yoyogames.com


Distribution

• Web– Access via URL

• Mobile platforms– App stores


Wrappers

HTML5

Nativewrapper


Cordova vs Phonegap

Cordova Extra services by Adobe Phonegap+ =


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 version


Building with Cordova

Create project

Develop

HTML5

Build to test

Build

for deployment

(sign)

Deploy

Certificates*


Building in the Cloud

• Phonegap Build• Intel XDK

• Another option: CocoonJS by Ludei


Building in the Cloud

Create project

Develop

HTML5

Build to test

Build

for deployment

(sign)

Deploy

Certificates*


Intel XDK


Submission

• Icons• Splash screen• Description• Keywords• Category• Price


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 Guidelines

https://developer.apple.com/


Android Specifics

• Android Developer Program ($25/year)– http://developer.android.com/

• Any computer

• APK file

• No review process. Updates in ~2-4 hours

http://developer.android.com/

http://developer.android.com/


Quick summary

• Game dev is an iterative process• MVP• Where to distribute• Wrapping a HTML5 game


Break time!

ZENVA.com

HTML5 DevConf 2014 - Workflow when Making HTML5 Games

Software

Transcript of HTML5 DevConf 2014 - Workflow when Making HTML5 Games