Newsgame with HTML5 - Lecture 1

822 views

Published on

How to quickly build a newsgame with HTML5 - Part 1. Viewer learns more about the high level concepts of a news-themed game

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
822
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Newsgame with HTML5 - Lecture 1

  1. 1. Newsgame with HTML5 by Ben Chong, MarketJS
  2. 2. 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
  3. 3. Objective of a newsgame ● deliver a message by the editorial
  4. 4. 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.
  5. 5. Newsgame Dev Cycle Assets Creation Brainstorming session Testing Game Design Document Programming Release Measure/Act Newsgame Development Cycle
  6. 6. 3 recent news events ● ( International ) Powerball winner ● ( International ) Tiger Woods #1 again ● ( HK ) MTR fares to increase
  7. 7. 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
  8. 8. 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
  9. 9. Game idea #1 News: 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.
  10. 10. Game idea #2 News: 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.
  11. 11. Game idea #3 News: 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"
  12. 12. Which idea to pick? What's possible to build - timeframe - technology - team (art,engineering) What editorial wants decide within 5 minutes. Speed is everything
  13. 13. Let's go for Idea #2
  14. 14. Where are we now? Assets Creation Brainstorming session Game Idea #2 Chosen Testing Game Design Document Programming Release Measure/Act Newsgame Development Cycle
  15. 15. Game Design Document (GDD) any word/spreadsheet document containing the following ● game description ( game play ) ● game mechanic ● game flow diagram ● concept art ● required tech ● required assets
  16. 16. 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
  17. 17. GDD - Game Mechanic Tapping 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
  18. 18. GDD - Game Flow Diagram Mother Banker Paparazzi Ex spouse Randomizer Computers Start game Brain Doorbell rings Win/Lose condition Main variables ● Food ● Money No Answer? Yes Effect on main variables next
  19. 19. GDD - Concept Art Scene 1 Scene 2 Source: Google Images
  20. 20. GDD - Required tech To 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 )
  21. 21. 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
  22. 22. Project kickoff Assets development Prototyping mechanic Integrating more assets, features, addons, polish Testing, Debugging Final review 1 day ~ 1 week, depending on complexity of game Launch
  23. 23. 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
  24. 24. Let's do Option #2 What good frameworks are out there? Paid ImpactJS - USD 99 /license UltimateJS - USD 50 /license Free enchantJS - open source LimeJS - open source melonJS - open source Full list of current HTML5 game frameworks: https://github.com/bebraw/jswiki/wiki/Game-Engines
  25. 25. 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
  26. 26. Commercial games made with enchantJS ● Dak Dak Buffet Challange ● Lucky 7 Stars ● Magic Pond Solitaire ● Puzzle Fantasy
  27. 27. Evaluating the game idea Emotional ● Fun factor ● Polish Technical ● Learning curve ● Responsiveness ● Loading time ● Bug free
  28. 28. What HTML5 features to use? Mass market strategy: check the most widely supported set of tech http://caniuse.com Cutting edge strategy: go for very specific tech, specific to your browser on your device http://html5test.com
  29. 29. Make 'em small, fast and fun
  30. 30. Q&A

×