indie html5

game development

lessons learned

by @krzysu

let's meet kris

frontend developer

he quits his job to follow his dream

html5 game development

basic terms

  • Canvas/WebGL
  • entities/sprites/animations
  • game loop
  • FPS
  • physics/collisions
  • tiles/tile map/level editor

html5 game development

basic terms (2)

  • inputs
  • sound/music
  • assets loader
  • pixel art
  • particles
  • and a few more

game engine


  • open source & free
  • necessary features
  • documentation & examples
  • maintained
  • community
  • code architecture
  • level editor integration
  • etc.

game engine

Kris choice

! Quintus !

as for September 2013

free game assets

great for prototyping

first game

short story

first prototype

  • one month time
  • simple "open-world" platformer
    with cowboy and zombies
  • tips:
  • start with something simple
  • timing is important for indies
  • be aware of performance
    on mobile devices

github game jam

  • one month challenge
  • web-based game loosely based
    on the theme "change"
  • no mobile support required!
  • something to keep motivation high

first real game

  • so let's change our zombies to humans
    and humans to zombies!
  • cooperation with a fellow graphic designer
  • one month of hard work
    (inc. level design, music, AI etc.)
Heal'em All. There's a cure for zombies.

play it!


  • something finally done
  • exposure
  • first feedback round
  • time to monetize!

monetization of html5 game (1)

web stores

monetization of html5 game (2)


monetization of html5 game (3)

social platforms

  • Facebook
  • kik -> smartphone messenger
    with a built-in browser

monetization of html5 game (4)

convert to native app

cross platform development

write once, publish anywhere

(not really, but close)

  • iOS, Android, BlackBerry 10
  • Steam, Windows, Mac, Linux
  • Nintendo Wii U
  • Smart TV & video game consoles
  • runs on every device
    which has browser build-in

example case study

back to Kris reality

  • Heal'em All:
  • not good enough performance on FirefoxOS
  • doesn't work with CocoonJS
  • publishers are interested in other kind of games
  • publishers offer 30-50% of ads revenue
  • and you need to integrate with publisher API

lessons learned

about development

  • game engine: use phaser or at least pixi.js
  • mobile is the default target for html5 games
  • think about performance on mobile, test early
  • think about cross platform development
  • make your game "juicy"

lessons learned

about monetization

  • it's hard but possible (and some folks are doing very well)
  • two strategies:
  • write one game a month, rather addictive than challenging (casual), after a year you should be fine (ads)
  • create a small team, spend more time on more challenging game, use html5 but target multiple platforms, you can use browser version as a demo (sale) i.e. Lost Decade Games

lessons learned

most important

! it's fun !

at first testing your game
and then watching people playing it

want more?


follow me @krzysu