Archive for the ‘OneTwenty’ Category.

Global Game Jam 2013

Last weekend I took part in the Global Game Jam 2013, a 48-hour game development event. The Perth jam was organised by Lets Make Games and held at ECU Mt. Lawley. This year’s theme was an MP3 file of a series of heartbeats.

I teamed up with Minh and Nick to build a game called “O Deer”. The player takes the role of a deer in a forest. The title screen is disturbed by a gun shot and the deer begins to run. The player then controls the deer by either running further or coming to a stop. While the seer is running, its heart rate increases and it is in danger of exhaustion, while the deer is stationary it can observe more of the surroundings but is in danger of being shot by hunters.

Here are a few thoughts:

Good bits:
- I love working on stuff with Nick and Minh, they are fun to be around.
- We decided to develop the game in HTML5/Javascript and use the Three.js 3D library.
- We used git on bitbucket for version control, which went very well.
- We were less hard-core about finishing the game on Sunday, which made for a less stressful day.
- Presentations were great as always.

Less good bits:
- I barely got a chance to go around and meet people or check out the progress on games.
- We started a Trello board, but didn’t use it much.
- Nick was unwell with a cough and wasn’t at full strength for much of the jam. Minh was the organiser of the Perth jam and was very busy leading up to and during the event. I had some family commitments on Sunday too, so we were pretty short of time.
- We fell short with some of the features. The main mechanics of the game were not complete.
- Late Sunday when we should have been getting the game ready to submit, we were all busy, so we didn’t get a game submitted.
- Three.js is easy to use and it impressed me enough to want to use it again in the future. We had two problems however: Our initial attempts to use the scene exporter from blender resulted in file format version mismatches, which were frustrating. I’m not sure how we solved this in the end. Secondly, when it came time to export the animation from blender into the three.js format, it produced very large files that wouldn’t load in three.js.
- It has been a while since I have done 3D programming, I’m getting rusty with those concepts, which is very sad.

It was a great event though, I’m always happy to help out with the game jam in a few small ways. I can’t wait for next year.

Trouble with HTML5 video

I’ve been playing with the HTML 5 video tag. I’m trying to get an accurate reading of the frame that the movie is on when it is paused. I’d also like to play the movie until it reaches a certain frame, then pause it.

It seems like both of these tasks are hard using HTML 5 video. You can only ever get the “currentTime” of the movie, which gives you progress in seconds, not frames. With about an hour of experimentation, it proved difficult to translate the time into a frame number in a robust and repeatable fashion.

Also, there is a event fired by the video object called “ontimeupdate”, which I thought I could use to measure if the video had progressed past a certain point, and if so pause the video. It turns out the event is only fired every 0.250 – 0.350 seconds on my testing machine (i7 iMac). This is too infrequent to be very helpful for stopping at a specified frame. I guess you need about 1/(2*frame_rate) seconds between events to be frame-accurate.

For all the things that the web does well, I think audio and video are still fairly new tech. New audio and video APIs are required.

Has anyone got any experience with precisely controlling web video? Can you suggest another approach?

Global Game Jam 2012

Last weekend was Global Game Jam. Let’s Make Games organised the local party, held at ECU Mt. Lawley. GGJ is a 48-hour event where the aim is to build a game from scratch using a theme as inspiration. This year’s theme was an image of the Ouroboros.

Brave jammers attempt to spend as much of the 48 hours awake and working as possible, I was limited to 8pm-4am on Friday, 12noon-1:30am Sat and 11am-6pm Sun, about 28.5 hours. I joined up with Liza, Minh, Ben and Brock to make a game called “The Crooked Spiral“.

Liza and I had a fairly quick brainstorming session where we came up with the initial idea: The player would decend a spiral dungeon where the end looped back to the beginning. Player would be stuck in the loop until they learned the “trick” to jump out of it.

Here are a few thoughts about my first game jam. I apologise that it is a little programmer-centric.

Good bits:

  • Two artists in the group meant that the programming was the slowest bit of the team.
  • Final Cut Pro was used to create intro movie. This saved us heaps of time, we could play a movie rather than code timings for swapping between static images.
  • We used HTML/Javascript for everything, including “video” tags for the videos. I much prefer to work from scratch than to use a game engine or libraries, but it occurs to be that this may be selfish programmer behaviour, since the end product will be far more limited.
  • We used JQuery .fadeIn() and .fadeOut() to show and hide bits of game (intro movie, control screen, hud, game canvas). We did very little management of the “mode” the game was in, we just showed/hid different “div”s and bound different key handlers as required. This ad-hoc code caused zero problems, rather surprisingly, though it is irksome to look at.
  • We used two different animation methods. One method used canvas 2d drawImage() to draw the correct sprite from a sprite sheet. The other method used css webkit/moz extensions to animate the image. Ideally we would have used one method for this, but by using two methods, each programmer could use the method with which they were most familiar, allowing faster progress.
  • We kept task cards using Trello, it was great for tracking the TODO list.
  • Cool group dynamic. Lots of re-imagining and re-designing. Great camaraderie. Group members were patient with my slow coding!
  • Our game has a splash screen, intro movie, controls screen, gameplay, 4 endings, GUI, Music and SFX. It is broadly complete, even though the gameplay is SUPER simple.
  • I think this is the first game I’ve written with an event loop since ZyberFlux. Not that I wrote the event loop for that either.
  • Friday night everything was in one file (main.js). On Saturday morning I spent a little while breaking it up into many files. It wasn’t a task on the board, but was a good thing.

Less good bits:

  • Rendering was done two different ways. One way maintained a game-state model using data structures and drew images to a canvas 2d. The other half used the DOM to maintain game state in “div” and “img” positions, moved “div”s around using jQuery.
  • My initial choice for the way to store coin positions made collision detection with the player (seem) difficult. I started trying to do collision detection properly on Sat afternoon, but kept running in to troubles that my tired brain decided to avoid. It took a day of adding other simpler features, two discussions with Minh and an A4 sheet of failed trigonometry to figure out the maths.
  • Ate crummy food for 48 hours but didn’t feel too bad afterwards. Thanks to the organisers (Minh) for supplying fruit and water.
  • We were super-conscious of how we’d have to cut back the idea. Two members of the group were the Chief Organiser and a Videographer, so the end product is very simple.
  • The release .zip file is huge (90mb). All we did was zip up the whole game directory that contains Final Cut projects, Illustrator files etc. At some stage I’ll remove all the unnecesary files and produce a smaller release file.
  • I remember being pretty grumpy at several points. Luckily my team mates were understanding rather than confrontational :)
  • We didn’t use version control, just a shared Dropbox directory. Good stuff: very quick startup, easy for artists. Bad stuff: One person editing any file at a time, manual coordination. No backups. Dropbox got flakey for 10-20 mins Saturday night.

At times it was challenging, at times I wondered what was so fun about it. But all-up, it was a great experience.

Real-time Prewitt

I’ve added the Prewitt edge detection code to my libfreenect test application. The results are interesting.

Real-time Prewitt

The image above shows (clockwise from top left): Colourised depth map, image map, prewitt edge detection, greyscale depth map.

The black borders to the left of everything in the depth map really screw the edge detection up. The glossy surface of my desk and the side of my computer react poorly, but differently, to the depth sensor.

I have to create the greyscale image to use as input to the Prewitt edge detection algorithm. I’m using a sub-optimal method of generating the greyscale image, creating it from the colourised depth map rather than from the raw depth values. There is more to converting to greyscale than I thought!

Minh suggested cleaning up the depth map using some morphological operations. I might try this next.


I’ve been working on some code today and yesterday. Hopefully I’ll have something to show for it next week. Anyway, I have been using PHP, MySQL and HaXe as well as learning some basic CSS.

It’s good to work with the OneTwenty guys again on a fun project.

New blog

Is nice.