HTML5 Game Development

Watch short videos of HTML5 Game Development and RSVP for discussion meeting at

Discussion Meeting
Discussion Summary
Discussion Agenda
July 9, 2013
  • The format was each of us asked questions and the team answered the questions.
  • Those who watched video lectures praised the concise and interactive class. It has all the elements to develop a game.
  • The group may develop a game collaboratively. We talked about three possible choices: 1) Ultum. It is a role play, tile-based, 2D game. A player will be one of the four characters (wolf, dragon...) and go out of the city, explore the forest, desert. This game can be easily expanded to other adventure games with new characters, such as pony, space alien. 2) a basketball shooting game. 3) a public speaking game. The basketball shooting game or public speaking game require leader boards (back end programming). We should start with something as simple as possible.
  • Our game will be probably 90% JavaScript, a little bit HTML5, a little bit CSS, lots of graphics. The art work can be done in Illustrator or photoshop. We can use the webp format.
  • We talked about Cloud9 IDE
  • We talked about the multi-task (multi-touch) game "catch the falling fruits" that some of us saw at the Maker Fair.
  • We talked about: JavaScript: the good parts It is a bit outdated but has good coding convention.
  • We talked about A star algorithm (the best way to reach two nodes in a terrain) and how to make enemies a bit intelligent.
  • We talked about broadcast (send a message to all my children); CSS3 (3D transition, like rotating a dice; notify that I need 0.5 second to do all the changes); Use canvas for individual icons and let CSS do the drawing; 30 frames a second - 30 separate bitmaps (built in memory, ready to go); promise interface (handler on success and handler on failure); use json file (terrain_001, terrain_002, no need for database, just static file); work on a pipeline, constantly check for different events "is that guy in that tile?" "is the player still alive", play music for stages, intersections, new world. Call back as fast as your video cards allow.
  • We'll watch "canvas" and "atlases" before coming to next Tuesday's session. We'll start a google group to stay connected.
  • We served specialty cafe's sandwiches, orange juice, organic grapes, pita chips (sandwiches and drinks are sponsored by Google)
  • 7 people joined discussion.
  • Round table introduction (background; what game are you interested in developing)
  • Questions about unit 1
  • For the game you're developing, Do you have any question?
  • After questions are answered, we'll work on our games.
July 16
  • Sean from Udacity joined this discussion (Kudos to Sean for answering so many questions in a fun way)!
  • Mario demonstrated his game based on canvas and atlases - a spaceship moves on a canvas. Then the group looked at the source code, the atlases (spaceships in different orientation). This is very helpful for people who don't have a lot of game development experiences! We discussed:
    • canvas vs. CSS.
    • Draw with transparency. Compose the entire background image. Draw one canvas on another canvas. Slightly large tile.
    • tools (such as Texture Packer mentioned in the course) to group small pictures into a large image.
    • Use off shelf database. Don't re-create tools.
    • What games we like to play, what games we want to develop (path finding).
    • Create a Google group for discussions during the week (done; the group is called html5gamedev).
    • Multiple player games. Various ways to reduce latency. Predict. Put players into different zones. Matchmaking algorithm - connect people according to geography, time & space. Whether there are 2 players or 16 players, they all communicate with one server.
  • We talked about
    • AngularJS framework
    • Unreal game engine
    • Unity Game Engine
    • PageSpeed performance tool. Avoid jQuerry because of its overhead. Ask them to upgrade to something newer. Don't let everyone else pays. Compatibility tables:
    • Laptop vs. tablet. Don't assume there is a mouse. SwiftKey (typing for phones and tablets). The possibility of removing keys and programming visually.
  • We praised Udacity - unique and engaging content that can't be found elsewhere. Many big fans for Udacity! Sean asked for suggestion for further enhancement.
    • Have an option - in unit quizzes pause for five seconds then continue (for a group to watch the videos together; for students to review the content second time).
    • For "HTML5 Game Development", provide extra practice questions, link quizzes to the actual test.
    • We also briefly talked about other courses: Introduction to Parallel Programming, Interactive 3D graphics
  • We served specialty cafe's sandwiches, salads, orange juice, watermelon wedges, pita chips (sandwiches, salads, and drinks are sponsored by Google)
  • 9 people joined discussion.
  • Canvas, atlases.
  • Questions about unit 2
  • For the game you're developing, Do you have any question?
  • After questions are answered, we'll work on our games.
July 23
  • We talked about how to simplify speaking game, racing game, spacecraft game.
    • speaking game: two buttons: start, stop. What "start" is pressed, it begins to count time. It displays green, yellow, red at 5, 6, 7 minutes. When "stop" is pressed, it displays total time elapsed and applauds for 10 seconds.
    • racing game: a simple track. an object moves forward and backward on the track. Records total time to reach the destination. Later on, add turns, obstacles.
    • spacecraft game: 2-dimensional. 2 players (telling each other coordinates). Collision detection.
  • We talked about other items related to our app ideas.
  • We served specialty cafe's sandwiches, salads, orange juice, organic grapes (sandwiches, salads, and drinks are sponsored by Google)
  • 3 people joined discussion.
July 30
  • 3 people joined discussion.
August 6
  • 10 people joined discussion.
August 13
  • 12 people joined discussion.
August 20
  • 7 people joined discussion.
Asset Loading
August 26
  • Presentation by Colt, Q&A with Colt & Peter, game demos, raffle prizes.
  • 20 people joined discussion.