HTML5 DevConf 2014 - Workflow when Making HTML5 Games

https://academy.zenva.com

M2 – WORKFLOW AND DISTRIBUTION

https://academy.zenva.com

Workflow overview

Game scope Technology selection

Game development• Code• Assets• Content

Distribution

https://academy.zenva.com

Unreasonable scope = Your worst enemy!

https://academy.zenva.com

Pareto principle

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

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

https://academy.zenva.com

Brainstorm

Reduce

Implement / MVP

Test

https://academy.zenva.com

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

https://academy.zenva.com

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

https://academy.zenva.com

Technology selection

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

https://academy.zenva.com

Development• Coding

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

• Game assets– Images– Audio– Animations

• Game content– Levels– Story

https://academy.zenva.com

Code editor• Simple code editors:

– Sublime Text– Geany– Notepad++

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

• HTML5-oriented– Intel XDK– Adobe Brackets

https://academy.zenva.com

Browser + Code Editor

https://academy.zenva.com

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

Game Assets

• Create your own

• Find free assets– Licensing!

• Buy assets

• Pay someone to make assets for you

https://academy.zenva.com

Finding free assets

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

• Audio– Freesound.org

https://academy.zenva.com

Asset marketplaces

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

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

https://academy.zenva.com

Distribution

• Web– Access via URL

• Mobile platforms– App stores

https://academy.zenva.com

https://academy.zenva.com

Wrappers

HTML5

Nativewrapper

https://academy.zenva.com

Cordova vs Phonegap

Cordova Extra services by Adobe Phonegap+ =

https://academy.zenva.com

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

https://academy.zenva.com

Building with Cordova

Create project

Develop

HTML5

Build to test

Build

for deployment

(sign)

Deploy

Certificates*

https://academy.zenva.com

Building in the Cloud

• Phonegap Build• Intel XDK

• Another option: CocoonJS by Ludei

https://academy.zenva.com

Building in the Cloud

Create project

Develop

HTML5

Build to test

Build

for deployment

(sign)

Deploy

Certificates*

https://academy.zenva.com

https://academy.zenva.com

Intel XDK

https://academy.zenva.com

https://academy.zenva.com

Submission

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

https://academy.zenva.com

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://academy.zenva.com

Android Specifics

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

• Any computer

• APK file

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

https://academy.zenva.com

Quick summary

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

https://academy.zenva.com

Break time!

ZENVA.com