Category Archives: Blog

Giv’er on the River

Last week, i was invited by New Brunswick Community College in Miramichi to speak at their Jalloo animation and gaming festival. i was a last-minute replacement, which was expected … i’ve only ever been asked to speak at one other event, as a late-breaking replacement on a panel at a local Toronto conference. i’m the guy you get when the guy no one’s ever heard of can’t make it.

Ryan Henson Creighton and Andy Moore at Jalloo

Andy Moore of Fantastic Contraption and i deliver a panel on the State of the Flash Game Industry. Photo by Brian McGee.

Because i’d really like to do more speaking, i jumped at the opportunity to share my accumulated nuggets of wisdom with the attendees. i actually agreed to come out before even looking for Miramichi on the map: it was quite far from the bustling metropolis of Moncton. i clicked “What’s nearby?” and Google Maps said “you’re kidding, right?”

Moncton to Miramichi

Ugh … seriously?

The conference attendees were mostly students. The title of my talk was “I Know Kung Fu: 10 Years of Gaming in 45 Minutes”. The presentation had three sections: Tips for Students, Tips on Game Design, and Tips for Bidness. The bidness section was the weakest – i’m still figuring that stuff out myself.

The Tips for Students started out irrelevantly … since NBCC’s game dev program has been hammered out over 13 years, it doesn’t have many of the problems that the nascent Ontario programs seem to have. i found myself wondering why the Ontario colleges didn’t just visit Miramichi and do a straight lift of their entire program. Isn’t that preferable to letting batch after batch of students flounder through your half-baked program while you figure it out?

Here are a few of the game design tips i shared:

  1. Mouse control trumps keyboard control for casual web games (source: Chris Hughes from Flash Game License)
  2. Click and carry beats click and drag, especially for young players (click and carry is where you click once, and the thing sticks to your mouse until you click again to release it)
  3. Control = fun.
  4. Game jams perfectly simulate the Internatz. Big room full of games to try … if you don’t hook people in the first five seconds, they flit off to the next station. Just like on the weeb.
  5. Inconsistent escalation increases player. Instead of making your game get progressively more impossible, every few levels you should ease up on the difficulty. This encourages the player to keep trying; if he blows a gasket beating level 5, he may think “to Hell with level 6″. But if you throw in easy levels to give the playe a break every once in a while, he’s more likely to keep at it. Final Fight used this concept very early on with its car-smashing bonus level.

Final Fight car smash

Take that, CAR!

i’m Also On a Boat

The Jalloo folks organized a boat ride across the mighty Miramichi to a banquet hall where they fed their guests from enormous buckets of crab.

I'm on a boat

This is a picture of me watching I’m On a Boat while i’m on a boat.

River Jam

The conference ended with a 2-day game jam. You know me – i can’t resist a game jam. So with one hour to go before i had to leave for the airport, i coded up a very quick game structure and pulled out one of my game ideas from the backlog. The guys on the team took it and ran with it, and worked the next two days producing an absolutely demented little gem called Toes:

Toes

This was my fifth game jam, and it was the only one where i worked with other people – three talented graduating students, and their instructor, who actually invited me out to the conference to begin with. i met Martin Copp at the flawed Vortex Game Design Competition, which just goes to show that return on investment from certain events can really surprise you, even many months after the fact. So get out there and don’t stop networking! (tip #5 in the “Tips for Students” section of my presentation ;)

The plan is to take Toes further and polish it up, and then put it up for licensing closer to Hallowe’en. Answer the quick survey and let us know what you think! We’re looking for suggestions to take it from a quick, playable concept to something a little more … meaty.

It Oughta Be in Pictures

Last Friday, i took a tour of the Bell Lightbox with a few other folks from the indie games scene. The Lightbox is a building in downtown Toronto where the industry screenings of the Toronto International Film Festival will be held. Since the place is still under construction, we donned our orange hardhats and startlingly heavy work boots to see how it was all coming together.

TIFF Toronto International Film Festival Bell Lightbox

Artist’s rendering. The area does not actually contain a gigantic car-less piazza, and Phantom left town over a decade ago.

TIFF Toronto International Film Festival Bell Lightbox

The building is basically every film fan’s fantasy. The upper floors are comprised of luxury condo suites that TIFF does not own, but the bottom few floors are a tech and film freak’s idea of a good time.

TIFF Toronto International Film Festival Bell Lightbox tour leader Markus

Our tour guide Markus was the only one among us important enough to get actual steel-toed shoes. The rest of us signed waivers and minded our piggies. That’s Shawn from ][ steeling himself for a girder to land on his foot, while Miguel from Spooky Squid Games adjusts his safety glasses in preparation for a barrage of nail gun ammo aimed directly at his face.

TIFF Toronto International Film Festival Bell Lightbox crazy machine

We were all enthused about getting a picture with this thing, because it looks like a mid-level boss from Half-Life. That’s Paul from Forest Games preparing to rip its junk out with his bare hands. Relax! i have a feeling it just smooths concrete.

TIFF Toronto International Film Festival Bell Lightbox exhibits space

This is the exhibit hall, where they’ll be displaying props and posters from movies in installations like the Tim Burton show currently at MoMA. One of the earliest events the space will hold is a sort of “best-of” festival, where the festival will screen the best and most talked-about films from years past. In the foreground, Rob from Get Set Games treads lightly.

TIFF Toronto International Film Festival Bell Lightbox tour large theatre

We were ushered (ha!) into the largest of five theatres. The variably-sized theatres are equipped to handle different film stocks, like 70mm. Our host Nick, second from the right, reminded me that Lawrence of Arabia was shot on 70mm. i nodded confidently, pretending i knew that. A short time later, i asked a Porky’s question.

One of the theatres is equipped with a roll-out piano so that live soundtracks to silent films can be performed. “Neat!” i exclaimed noiselessly, and waited for a title card to pop up telling everyone what i just said.

All of the theatres are equipped to handle digital showings. A master control centre, which we didn’t get to see because they worried our copious drooling would short the electrical equipment, can simulcast content into all five theatres at once. Master control also handles the numerous cameras embedded strategically throughout the building, which can capture star galas and other important events. There were no cameras eagerly eyeing our indie game dev tour, which i found depressingly appropriate.

TIFF Toronto International Film Festival Bell Lightbox Tessa

Tessa eyes a pile of construction ouchies in the middle of the computer lab, wondering if she can MacGuyver it into something awesome. The Lightbox will host school groups for different activities. In the room down the hall, students will be able to film and screen their own movies; the lab will have machines running editing software so that visitors can splice them together.

TIFF Toronto International Film Festival Bell Lightbox office space

i wondered if this place was the putting green, but it turns out this area will be used for offices. It’s right next to the scholars center, which will include viewing pods for screening films, and the TIFF’s collection of reels from over the years. This area was supposed to be a giant hole to let the lower-level atrium extend four floors, but cooler heads prevailed and claimed the space in favour of functionality over awesome emptiness.

TIFF Toronto International Film Festival Bell Lightbox balcony

Miguel and Paul grit their teeth, wondering what insulting caption i’m going to add to this pic once it’s published. (Uh … nice helmets, nerds? i got nothin’.) This open-air balcony has a great view of the CN Tower and the red-trimmed CBC headquarters. Nick points out that the building across the street hosts one of the event spy-cams like the others found throughout the Lightbox, to pull off some voyeur action on the roof. i wonder how the condo people feel about that?

TIFF Toronto International Film Festival Bell Lightbox screening risers

i turned right from the last picture and grabbed this shot of these risers, where guests will sit and enjoy open-air screenings of movies during summer events. (And, presumably, where guests will NOT enjoy screenings of movies during winter events, because it’s hard to enjoy yourself in -30 degree weather sitting on a slab of concrete.) In the background, the Hyatt tries to sneak in free advertising.

So why was a gaggle of game nerds invited to tour the space? TIFF is looking for ways to involve related cultural groups in the goings-on at the Lightbox, and that includes the Toronto indie game scene. Nick has been astonishingly receptive to our suggestions. If half of what’s been discussed comes to fruition, the Lightbox is going to be an absolutely incredible boon to the little guys in the game industry.

Principals.

Last week, we talked about the world of Spellirium – an apocalypse-ravaged time called The Now, where modern civilization has been buried beneath a mile of earth.

Today, i want to introduce you to the two main characters in the game: Brother Todd and Lorms.

Brother Todd is the youngest member of the secret society of Runekeepers. He pairs up with the hulking Lorms, who has been changed into a big blue tunk against his will. Together, they set out on a quest to find the other Runekeepers, after one of the Runekeepers returns to the cottages and promptly dies.

Word.

Sign up for the Spellirium Newsletter to go even deeper into the creative process behind the game. The newsletter contains a first look at exclusive artwork and juicy details about Spellirium that you won’t find anywhere else!

Cooking with Flash: Learning the Timeline

Prerequisites:

Begin

Flash wasn’t always this difficult to get your head around. Before it was hijacked by codemonkeys, the software was a very capable animation program. The focal point of Flash animation is the Timeline, and all the wonderful things it can do. This lesson is a primer on how to move around the timeline and to figure out how it works. In a future lesson, we’ll delve into different animation styles you can pull off using the Timeline.

Start a project as described in Basic Flash Project Setup, or continue from an existing project. Make sure that you can see the Timeline in your screen setup. In the menus, click Window > Timeline.

1. Time moves from left to right.

Flash timeline

This is an obvious point if you’ve used any other timeline-based software like Premiere, Audacity, or Director. Those numbers stretching off into the distance are frame numbers. A frame is a single picture in your movie. Play the pictures one after another quickly enough, and our persistence of vision creates the illusion of motion.

Flipbook

Flipbooks use sequential images to trick the eye into seeing motion. The Flash Timeline is an elaborate flipbook.

2. FPS Determines how fast your frames play.

Your default .fla file makes frames whizz by at 30 frames per second.

Flash Properties frames per second setting

To change the frame rate of your Flash movie, type a different number into the FPS: field in the Properties panel (Window > Properties).

note: The Properties panel is context-sensitive, which means that it shows different options depending on what you’ve selected. To see the FPS setting, click on any blank area of the stage.

30 FPS is standard for most video. Classical animators used to work at 24 frames per second for feature films, and 12 frames per second for television and lower-quality animation. 12 fps is sometimes called working “on twos”, because the camera man would photograph each drawing twice to bring it up to 24 fps. The fewer the drawings you use in your animation, the choppier your animation will look.

3. Understanding keyframes

The word “keyframe” is inherited from animation. A common technique for animating a scene – especially involving a character – is to draw the key frames in the action. If you’re animating a bouncing ball, you might have three key frames: the ball at the top of its drop, the ball at the bottom as it squishes against the ground, and the ball at the top again. Keys are the most crucial drawings in the action. A person should be able to completely understand what’s going on just by looking at the keys.

Animation key frames

Once you’ve drawn the keys – the most important drawings – you draw the in-betweens. Without these drawings, we can’t create the illusion of motion. They are the pictures that “move” us from one key to the next.

Computer animation packages like Flash enable us to set up key frames, and to draw our own in-betweens. Flash can also draw in-betweens for us using a process called interpolation. We’ll look at interpolation, or tweening, in another tutorial.

4. Understanding frame symbols

There are important symbols that appear on frames. Understanding them is the key to understanding the Timeline, like learning to read music.

  1. Blank keyframe

    Flash blank keyframe

    An empty circle indicates a blank keyframe. There is nothing on the stage on this layer on this frame.

  2. Keyframe

    Flash keyframe

    A black circle with a grey background indicates a filled keyframe. There is something on the stage on this layer on this frame.

  3. Empty frame

    A blank white frame means that our animation will play to at least this point. The animation continues to play until it reaches the latest keyframe, blank keyframe, blank frame or filled frame in the Timeline.

    Flash blank frame

    Even though the stage is empty, this animation will play past frame 30 because the blank frames stretch at least that far.

  4. Filled frame

    A frame with a grey background means that the contents of the preceding keyframe appear on stage to at least this point.

    Flash filled frame

    The contents of frame 1 stay on stage well past frame 30.

  5. Terminal frame

    This white rectangle marks the point after which the contents of the preceding keyframe stop appearing on-stage.

    Flash filled frame

    The contents of frame 1 persist on stage from frame 1 to frame 20. After frame 20, they stop showing up.

5. The function keys insert frames.

The F5, F6 and F7 keyboard keys are crucial when using the Timeline. Used on their own, they insert various frame types. Hold down the SHIFT key and press one of these function keys to delete that frame type.

F5 – Add a frame. They will be either blank or filled depending on whether they’re preceded by a blank or filled keyframe.
SHIFT+F5 – Delete a frame.

F6 – Add a keyframe. note: If you add a keyframe to a blank range of frames, you’ll drop in a blank keyframe.
SHIFT+F6 – Remove a keyframe.

F7 – Add a blank keyframe.
SHIFT+F7 – Remove a blank keyframe.

Sample usage: If you have something on stage, and you want it to disappear at frame 25, add a blank keyframe to frame 25.

You can click and drag to range-select a chunk of frames to delete them, or to convert them to empty or filled keyframes.

note: If you insert frames, they don’t overwrite your existing frames. Rather, the end of your Timeline on that layer gets pushed out farther.

6. The Playhead controls frames on all layers.

If you want to add or remove different frame types through all layers of the timeline simultaneously, first click on the pink rectangular Playhead. Then when you add or remove frames, they’ll be added to or removed from all layers at once.

7. Scrub or play your animation.

Click and hold the mouse button on a frame and move the mouse around to preview your animation. This is called “timeline scrubbing”.

To scrub the Timeline without fear of moving your keyframes around, click and drag the pink Playhead back and forth.

To play your animation within the Flash IDE, press the ENTER key on your keyboard.

To compile your movie to a swf, hold CTRL and press ENTER (Command+Enter on the Mac). Notice that Flash automatically loops when the Playhead reaches the end of the timeline.

note: In order to drag your empty and filled keyframes around, first click on the keyframe to select it, then click and drag to move it around.

Finish

This basic Timeline lays the foundation for the actual animation exercises we’ll be doing. We’ll learn how to do “straight-ahead” or “frame-by-frame” animation, as well as how to get Flash to draw the in-betweens for us.

TOJam Arcade and the Best Day Evar

They say you can’t win ‘em all. That’s usually true, except in the case of my insane day at the TOJam Arcade when i, in point of fact, actually did win ‘em all.

This is me, trying to blast off. Photo by the unstoppable Brendan Lynch. Click for the full TOJam 5 Participants Gallery.

TOJam, you may know, is the Toronto Indie Game Jam, where sweaty nerds spend a weekend building games. The fifth anniversary of the event was my fourth time attending. If i could go back in time, i’d definitely attend the first one. i’d also give Hitler a purple nurple.

A month or so after TOJam, the organizers put together a public exhibition of the games called the TOJam Arcade. The game creators can use that time to fix whatever didn’t work by the end of the original weekend (which is usually everything.)

Beer.

This year’s arcade was held last Saturday night at the Imperial Pub near Yonge and Dundas Square. We succeeded in putting out the older barflies, who were pissed at not being able to watch their horse races, and the inebriated college crowd, who came precariously close to sloshing house draft on the data projectors.

Prizes.

At the end of the evening, they held a raffle with prizes comped by Big Blue Bubble, and some guy named Andy. They called my ticket number, and i was stunned to find i’d won the big prize of the evening – an Xbox 360 Elite bundle with Halo ODST, Forza 3, and a copy of Assassin’s Creed and Prince of Persia. It’s been over a decade since i’ve won something in a raffle, so it was a nice surprise. Thanks, Big Blue Bubble!

Soon after, they announced the People’s Choice Awards. Our game Heads was voted “Best Use of Theme”. The TOJam 5 theme was “missing”, and Heads is about a guy who wakes up to find that he’s literally lost his head. It was a really nice and unexpected win, but i think some other teams came up with far more subtle and clever uses of the theme. (Don’t get me wrong, though – i’m not complaining!)

Heads, coming soon to the web and Android.

After struggling to balance the Xbox home on my bike through rain-slicked streets, i went to lock up in the bike room and found a ten dollar bill on the floor. True. That actually happened. It all made me feel bad for kicking that kitten in the face earlier in the day.

Other Non-Me Winners

The top three Peoples Choice games included Nom Nom Nom Nom (a Hungry Hungry Hippos clone with three cats and a goat), MonoClimb, the black-and-white co-operative platformer by prize-donating Andy and friends (i mentioned it in my last TOJam article), and Last Hadron Collider, a two-player simultaneous obstacle race with randomly-generated levels and great-looking character sprites. You’ll be able to play all these games and more at the TOJam site once everything is uploaded.

Once the games are up, i’ll write another post listing my own People’s Choice picks with some undiscovered gems. In the meantime, i’ll try not to let our productivity on Spellirium take too much of a hit, now that we can finally put those extra Rock Band instruments to use at the office.

How are we doing on that next milestone, fellas?