Newsgame with HTML5 by Ben Chong, MarketJS

Goals of this lecture● visualize the newsgame dev cycle

● write a simple game design doc (GDD)

● determine a good way to start building a HTML5 game

Objective of a newsgame● deliver a message by the editorial

PS:

We are not re-creating the news!

We are creating an editorial perspective on the news

Games not necessary skill-based. Break free from conventional ideas.

Newsgame Dev Cycle

Newsgame Development Cycle

Brainstorming session

Game Design Document

Assets Creation

Programming

Testing

Release

Measure/Act

3 recent news events● ( International ) Powerball winner

● ( International ) Tiger Woods #1 again

● ( HK ) MTR fares to increase

Messages to deliver (eg) ● ( International ) Powerball winner + gambling is bad

● ( International ) Tiger Woods #1 again+ you can bounce back from a scandal

● ( HK ) MTR fares to increase+ increasing fares is bad

Let's choose a topic● ( International ) Powerball winner + gambling is bad

● ( International ) Tiger Woods #1 again+ you can bounce back from a scandal

● ( HK ) MTR fares to increase+ increasing fares is bad

Game idea #1News: Powerball winner

Message: gambling is bad

Game play: a game where you have to keep buying powerball tickets, because you see that the powerball prize is increasing. In order to keep playing, you have to get more money from family, friends, loan sharks, etc. The game is rigged so you always lose.

Game idea #2News: Powerball winner

Message: gambling is bad. Even winning doesn't guarantee happiness.

Game play: now you've won a lottery. News broke out. You have so many people knocking on your door, to get your money. Pressure everywhere.

Game idea #3News: Powerball winner

Message: gambling is bad. It's a bad role model for young kids

Game play: you are in a class room. Ask young kids what they want to do when they grow up. All of them answer -> "i just play the lottery (Mark 6) and be wealthy"

Which idea to pick?

What editorial wants

What's possible to build- timeframe- technology- team (art,engineering)

decide within 5 minutes. Speed is everything

Let's go for Idea #2

Where are we now?

Newsgame Development Cycle

Brainstorming session

Game Design Document

Assets Creation

Programming

Testing

Release

Measure/Act

Game Idea #2 Chosen

Game Design Document (GDD)

● game description ( game play )

● game mechanic

● game flow diagram

● concept art

● required tech

● required assets

any word/spreadsheet document containing the following

GDD - Game Description

You are the lottery winner, living in fear at home. Need to go out of the house for food, but can't face the crowd outside.

Your door bell rings. Choose to open door, or not.

There is chance that it's your mom, giving you food. Or it could be the paparazzi, ex spouse, banker, etc who want your money

GDD - Game MechanicTapping on the door to answer it. When a door opens, a head comes through the door, with a speech dialog.

If it's mom giving food, the food energy bar increases.

If it's an ex-spouse/paparazzi/banker, the money bar decreases because they take money away from you

Urgency element: the energy bar decreases over time because the user is hungry. Game over when food bar < 0, or money bar < 0

GDD - Game Flow Diagram

Start game Doorbell rings

Randomizer

Mother

Paparazzi

Banker

Ex spouse

Answer?

No

YesEffect on main

variables

next

Win/Lose condition

Brain

Main variables● Food● Money

Computers

GDD - Concept Art

Source: Google Images

Scene 1Scene 2

GDD - Required techTo build this game in HTML5 we need

● Animation renderer● Any sort of javascript framework● Tapping mechanism (user tap)● Mobile optimization (stretching/filling the mobile

screen, optimize canvas, etc )

GDD - Required assets

Animation sheets for● computers ( mom, ex-spouse, banker, papparazzi )● door (opening, closing)

Static images● dialog box ( preferrably empty )● food, money icons

Sounds● door opens, closes, computers, food delivered,

money lost

Project kickoff

Prototyping mechanic

Assets development

Testing, Debugging

Integrating more assets, features, addons, polish

Final review Launch

1 day ~ 1 week, depending on complexity of game

How to start building?

Option #1: Start entirely from scratch. Build your own rendering engine, sound engine, game state engine, plugins, etc

Option #2: Build on top of existing game frameworks

Let's do Option #2What good frameworks are out there?

PaidImpactJS - USD 99 /licenseUltimateJS - USD 50 /license

FreeenchantJS - open sourceLimeJS - open sourcemelonJS - open sourceFull list of current HTML5 game frameworks: https://github.com/bebraw/jswiki/wiki/Game-Engines

For learning, choose enchantJS● Open source● Lightweight● Cross-platform● Plugins available● Examples available

Post-easter holiday: design a simple HTML5 game in lab session, using enchantJS

Commercial games made with enchantJS● Dak Dak Buffet Challange

● Lucky 7 Stars

● Magic Pond Solitaire

● Puzzle Fantasy

Evaluating the game ideaEmotional

● Fun factor● Polish

Technical● Learning curve● Responsiveness● Loading time● Bug free

What HTML5 features to use? Mass market strategy: check the most widely supported set of techhttp://caniuse.com

Cutting edge strategy: go for very specific tech, specific to your browser on your devicehttp://html5test.com

Make 'em small, fast and fun

Q & A