Syllabus for 2016/2017 school year
Meetings will happen after school in the computer lab on Mondays, starting at around 3:30 (giving you some time to decompress after the school day) and lasting until roughly 5:30. If you need to leave earlier, because a parent comes early, or you’re worn out from a long day, or just have mounds of homework, that’s perfectly fine.
At each meeting, we’ll start with a new programming concept, and an old-school video game that uses it. I’ll show you how to use the week’s concept in JavaScript, then we’ll take a short break before splitting into small groups. Groups can start to implement the feature into our game (two groups working on the same thing is fine), or do related gamework such as making artwork for characters and cut scenes, or writing storylines and dialog.
At the end of each meeting, we’ll discuss the work on the game so far, including any new ideas or direction for the game that you have. Lastly, I’ll send myself any new code or art changes that need to be merged into the project, and then finish with a “Geek of the week” pop-culture trinket that can be anything from a reference to a 1970s anime show, video game bugs, or maybe something from classic hacker lore.
Here is a (currently incomplete) general outline for each meeting, followed by more detailed descriptions:
| Date | Topic | Description |
|---|---|---|
| Every meeting | Art, story, plot | Talk about your vision for the game, draw stuff, write plot, dialog, character backstories |
| November 7 | DOM, canvas, JavaScript | Intro to HTML5 canvases and animation concepts, decide what type of game we want, learn about Github |
| November 14 | Codeanywhere, namestorm | Create project space for each student, learn basic Javascript image handling |
| November 21 | Name that tune | Guest speaker Joseph Moorer on basic sound engineering |
| November 28 | Pong to Breakout | requestAnimationFrame, collision detection, event handling |
| December 5 | Prince of Persia | Rotoscoping! Discuss turning filmed actions into character graphics |
| December 12 | Tetris | Context transforms, color, random numbers |
| December 19 | Winter Break | Throughout winter break, I’ll be keeping |
| December 26 | Winter Break | in touch through email, and looking over |
| January 2 | Winter Break | any new code, art, or story submissions. |
| January 9 | Asteroids to Flappy Bird | Physics!, irregular shapes and random levels, discuss speaking at Stir Trek |
| January 16 | Martin Luther King Jr. Day | |
| January 23 | Pacman revisited | AI players, nearest neighbor, goals, sprites, function prototypes |
| January 30 | Zork, The Choosatron | Inventory, saving game state, database concepts |
| February 6 | Chatroom | Client/server, websockets, Node.js |
| February 13 | Chess | Multiplayer! Using websockets for game actions |
| February 20 | Presidents Day | |
| February 27 | ??? | I’ll add more as we go. |
| March 6 | ||
| March 13 | ||
| March 20 | ||
| March 27 | Record Day | |
| April 3 | ||
| April 10 | ||
| April 17 | Spring Break | |
| April 24 | ||
| May 1 | ||
| May 8 | Final plans | Finish project, schedule demo for all of CA, discuss speaking at Code Mash in January |
Week 1, November 7
The first week I’ll demo some of what’s possible with programming in JavaScript. I’ll draw and animate a Pacman character using no other tool than a web browser. I’ll go very fast, because there is a lot to show, but you don’t need to worry about memorizing anything just yet. This will be an introduction to the types of things that are possible with programming in JavaScript. As we progress through building the game, you’ll learn one piece at a time in more detail.
We’ll also discuss what type of game we want to build. You will lead designing the game, and I will help you learn to program so you can build it. You will decide the plot, the type (I suggest a 2D sidescroller or old-school Zelda-like adventure game, because those should be achievable in one school year, and they both line up fairly well with the concepts I plan to teach.)
- Geek of the week: The Pacman ghost pass-through bug
Week 2, November 14
This week we’ll look at the Finite Automata game “Life”, designed by the mathematician John Conway, and an implementation of it in JavaScript. The game shows the birth and death of square “cells” based on how many live cells surrounded it on the previous turn.
Implementing Life teaches us how to handle objects, how to draw a basic shape, and how to pass variables to a generic “function” that will draw a given shape where we want it on the screen. It will also teach us about handling lists of things, such as the two dimensional “array” that we’ll need to check to see what cells are on or off.
Post-op: We covered some of Game of Life in week 1, but we need to return to array handling. This week we set up code repositories for all the students on the Codeanywhere site, and did some basic image manipulation.
Week 3, November 21
This week we’ll work on some basic sound engineering, with the goal of adding a sountrack and sound effects into the game. Since this is not my area of expertise, I’ve asked a long-time friend of the family, Joseph Moorer, DJ and R&B singer with the local group The Conspiracy Band, to join us, and introduce the group to some sound mixing software.
After this, any group member who wants to work with sound can do so in the second half of each meeting, and in a later week I’ll cover pulling sounds into the game with HTML5 audio.
- Geek of the week: The Konami Code, and ID Software’s IDCLIP
Week 4, November 28
This week we’ll learn the history of rotoscoping from the 1989 Apple // game “Prince of Persia”, the first game to use live video of a person as the basis for animations. Their technique was weird, because of the limited tools available, and modern tools make the process much simpler now.
- Geek of the week: 7 Zark 7
Week 5, December 5
This week we will learn from the old school games Pong and Breakout how to react to user actions such as moving the mouse or pressing keys (arrow keys, in this case) by using event listeners. We will also learn some early methods of controlling how many game “frames” are painted each second, and the better modern approach using “animation frames”.
We’ll also start deciding who is going to be our camera operator, what types of human actions we want in the game, ask for volunteers to be actors, and get parents to signoff on the process. The technical process will involve filming an action, for example running and changing direction, identify where all the limbs are in each frame of the action, and join the limb information with character art. The final in-game result will be slightly more detailed than Mario, but actions will appear more natural and fluid… because they were natural and fluid motions made by humans.
If we end up speaking about the project at a local convention, I’d like to show some of this process, which would include raw video clips of the pre-rotoscoped actions, and possibly even a “meta” clip where a second camera is watching the whole process… hence I’m being especially sensitive to whether club members know everything involved, have volunteered, and that there aren’t any misgivings about the process from parents or school staff.
- Geek of the week: The Enigma Machine
Week 6, December 12
This week we will learn from Asteroids, Joust, and Flappy Bird how to incorporate simple physics into our game. In Asteroids, your ship has inertia, so it slowly speeds up as you apply thrust, continues in the same direction until force (from an impact, or from thrust in a different direction) changes its vector. In Joust and Flappy Bird, gravity pulls us down, and flapping wings applies force to overcome gravity. We’ll talk about various ways to implement those effects in-game.
- Geek of the week: Simon/Merlin
Week 7, January 9
This week we will learn from the game Tetris how to use “affine transformations” to draw a fixed shape at different positions, rotations, and sizes. We will talk about handling color, from different colorspaces, to transparency and mixing colors, and we’ll crack open the drawing tablet and the Sketchbook program, and see if drawing that way clicks with anyone.
The December/January timeframe is when the local tech convention “Stir Trek” starts taking submissions for talks, and the conference itself happens sometime in April or May. If we feel by this time that we’ll have a semi-functional game by April, I’d like for us to consider registering to give a talk at the conference about the club, learning to program, and the game itself. If we do that, the talk would consist of me giving a brief overview of my vision for the club, and then hand the mic off to one of you to give the main body of the presentation, while I run the computer showing our presentation slides, or whatever our media is. We will present the project to the school at some point close to the end of the year, which could function as a dress rehearsal for speaking at a conference.
If any of the club members have public speaking chops, or would like to try it out, we can practice with some AV equipment throughout the year at a suitable location. As with the Rotoscoping video permissions above, I want to make very sure at this point that the school and the parents of any volunteers are on board with this before making a formal submission to Stir Trek’s call for speakers.