Tag Archives: Flash

Tower Defense Game World Rounds Out Untold’s Game Portal Network

5 JULY 2011 – TORONTO

Tower Defense Game World

Untold Entertainment is excited to announce the latest addition to its network of free-to-play game collections with the release of Tower Defense Game World. Over 120 games are ready to play, with new additions posted every week. Tower Defense Game World is the newest member of Untold’s suite of free game networks, which currently includes Zombie Game World and Word Game World.

“Tower defense” is a game genre that has become immensely popular in the past five years. Most tower defense games have the player protecting a fortress or base from incoming “waves” of enemies. The player can purchase and place turrets that fend off the hordes of invaders. Through careful placement and upgrading, the player can emerge victorious with an unscathed fortress.

Tower Defense games have proven to be one of the most popular game genres available today, with varieties that appeal to casual gamers, core players, and everyone in between. Plants vs. Zombies by Popcap Games is one of the most well-known tower defense games. Tower Defense Game World offers a curated experience, bringing the best free Tower Defense games currently available into one website.

About Untold Entertainment

Untold Entertainment Inc. is a boutique game development studio in Toronto specializing in games and apps for kids, teens, tweens, and preschoolers. Untold developed Sissy’s Magical Ponycorn Adventure which was co-created by a five-year-old girl, and its upcoming post-apocalyptic puzzle adventure game Spellirium.

Heads

Our entry for TOJam 5 (the Toronto independent game jam) was Heads.

Heads by Untold Entertainment

The jam theme was “missing”. Heads is about a fellow who wakes up one morning missing … well, his head. The first puzzle in the game sees you constructing a makeshift head before you can leave the house. From there, we introduce a somewhat novel mechanic where you can switch heads with other characters to use their abilities. The game was the second title we created with UGAGS – the Untold Graphic Adventure Game System.

Worth 1000 Words

Heads was one of the games on Untold’s “Games to Build” wiki. The intended scope was much larger than what we ended up with, but the advantage of creating Heads at a weekend game jam is that we finished it and got the idea out to the world. The innovation we attempted with Heads came directly out of the first UGAGS game we created, Jinx 3: Escape from Area Fitty-Two. Jinx 3 had a LOT of character dialogue and was very wordy. Heads was a reaction to that; we tried to create a game with absolutely no character dialogue whatsoever.

The resulting challenge was that everything we needed to communicate to the player required a new animation. The unique Heads style required us to draw every frame 3 or 4 times to achieve a Squigglevision-style effect. This all added up to a very time-consuming process that tested the limits of what we were able to pull off in a single weekend.

Heads by Untold Entertainment

Most goals and challenges are communicated to the player by shrugging and thought bubbles.

Acclaim for Heads

Heads won “Best Use of Theme” at the public TOJam Arcade exhibition. It was featured in the START video game show at the Ontario College of Art and Design. You can play Heads for free on the Blackberry Playbook.

5-Year-Old Girl Makes Video Game

As planned, i took my five-year-old daughter Cassie to TOJam, the three-day Toronto independent game jam, to make a game with me. And here it is:

Cassie drew all the pictures, wrote all the titles, and recorded the voice of the main character. She also came up with the NPCs (including Mr. Turtle, the Mean Tiger, and the villainous Lemon), and designed some of the puzzles (including the one where you [SPOILER ALERT] have to read a sign to justify your need for a coconut to throw at the Lemon).

Cassie and Daddy

Cassie and Ryan [photo by Brendan Lynch]

Send Cassie to College?

i used Mochimedia’s ad service to inject ads into the game, which is fitting, because Mochi was a TOJam sponsor this year. i threw ads in there with the hope that the game might drum up a little bit of cash, which i will put toward the education fund that Cassie’s grandma started for her. Wouldn’t it be cool if Cassie’s game paid for college? (Sadly, it won’t happen. See the Pimp My Game series for more reasons why.) For kicks, i added a PayPal Donate button beneath the game.

Cassie tries ot eat with chopsticks

With your help, maybe we can send her to get some etiquette training? [Photo by Paul Hillier]

Alert Child Services

Dragging your kid to a weekend-long game jam, eh? Before you call Children’s Aid on me, please understand that i didn’t actually keep Cassie captive at TOJam all weekend long. She came in with me at 9:30 Saturday morning, and was the most excited i’ve ever seen her. We’d been preparing her for MONTHS so that she’d be emotionally ready for TOJam. After the organizers expressed concern that my rotten kid would be running around the place pestering people and making noise (an entirely likely scenario, if you’re familiar with my insane children and my lousy parenting style), i spent every evening coaching Cassie.

Me: Remember, you’re the first little girl who’s ever made a game at TOJam. And everyone’s worried you’re going to run around screaming and making noise and wrecking things.

Cassie: (shocked face) No i won’t!

Me: *i* know you won’t. (totally lying here – i was as nervous about it as anyone) But you have to prove to everyone that little girls can make video games too. If you’re very well behaved, then next year if another little girl wants to come and make a game, the TOJam people will say “the little girl who made a game last year was SO wonderful, we’d LOVE to see more little girls making games.”

Cassie: i’ll be have. i will!

Cassie bes have

Cassandra, “being have” [Photo by Paul Hillier]

Yes, Cassandra, There Is a Game Jam

The morning of TOJam was like Christmas for her. i’m not kidding. In the days leading up to the event, she told everyone she knew that she was going to TOJam. Naturally, they had no idea what she was talking about, but the strangers in the elevator and in the grocery store smiled and nodded politely all the same.

By the end of the day on Saturday, Cassie had spent 10 hours at TOJam, and was begging me to let her stay overnight. She had put in about 6 hours of actual colouring work, and sunk at least another hour into voice acting later that evening at home, where it was quieter. i tucked her into bed and returned to TOJam late Saturday evening, and then pulled an all-nighter scanning her crayon drawings and integrating them with the game logic using UGAGS (the Untold Graphic Adventure Game System).

Daddy working

[Photo by Paul Hillier]

Family Jam

Sunday morning after church, the whole family joined me at TOJam with a bunch of instruments in tow. My wife Cheryl and the two little girls sat together on the carpet down a quiet hallway. Cassie grabbed the harmonica, i took the drum, Cheryl took the ukulele, and little Isabel used the thumb harp and the Happy Apple. We recorded some music tracks together. The one that made it into the game intro is just Cassie and Izzy playing together. It was really nice to have everyone involved like that. Here’s the family track that didn’t quite make the cut:

[display_podcast]

Sunday evening, the family regrouped at TOJam. The game, while still unfinished, was set up in a hallway where Cassie excitedly ran up to any interested passers-by, snatched the mouse out of their hands, and said “I MADE THIS! LEMMIE SHOW YOU HOW TO PLAY!”

i think it was a really valuable life lesson for Cassie to see that all her hard work and effort went into making a product that brought smiles to the faces of her players. The next step is to brave the hairy Playbook process to get it on the device so that Cassie can bring it to school for Show & Tell.

Creighton family

[Photo by Paul Hillier]

Correcting History

i really hope you enjoy Sissy’s Magical Ponycorn Adventure. In all of this, our goal as parents is to give our kids the kind of childhood we would KILL to have had. i can’t imagine how different my life would have been if i had made a real working video game with my father at age 5. In fact, i can’t imagine how different my life would have been if he hadn’t left when i was eight months old.

But no matter. Some day, the ponycorns will get him.

Dear RIM Blackberry Playbook People: Please Put that Shit on a Button

Dear RIM Blackberry Playbook People,

Thank you for sending me a Playbook. i like it very much. i didn’t very much like the steps involved to put my work on the device, though. It was the most needlessly complicated thing i’ve had to do in all my life. i’d like to see the Playbook succeed, but you need to put more effort into helping your developers succeed first.

Here are a few of the issues i ran into while porting my game Heads to your platform:

  1. i had to download Many Things, and sign up for Many Accounts. Each Thing and each Account came with 15 pages of legalese with an “I Agree” button at the bottom. I Agree … that this stinks.
  2. One of the Many Things i had to download was Adobe AIR 2.5. i followed the link on your site to Adobe AIR 2.6, which i downloaded instead. When i tried to follow your workflow, i was told that only AIR 2.5 would work, so i had to cast about the Internatz to find the 2.5 download, which wasn’t made immediately and obviously available on the Adobe site. If i’m creating something for your platform, everything i do should ideally be immediate and obvious.

    Click here

  3. i downloaded VMWare and your VMWare Playbook profile so that i could run a virtual Playbook. But the emulator stalled at the startup screen for a very long time. i checked message boards, and found two possible solutions:
    1. Leave it overnight.
    2. Alternatingly restart your computer or VMWare multiple times (some reports said “six or seven”) until it works.

    i opted to restart VMWare and my computer multiple times until it worked. This was very frustrating. i’m not the only one who experienced this problem, as evidenced by this web comic by my Twitter pal @IQAndreas:

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

    Developing for the Playbook: Chapter 3

  4. In order to deploy my game to the virtual Playbook, i had to know its IP. To get that, i had to swipe the “development” option into the “on” position and punch in my password. i had to use the software keyboard to punch in my password, because my computer keyboard didn’t work. And worse than that, it took about 4-5 tries swiping the slider and punching in my password before the Developer hammer icon would appear on the home screen … for whatever reason, that slider kept undoing itself.

    Playbook Development Slider

    Somebody call Jerry O’Connell, cuz this slider be busted.

  5. When it came time to bundle my files together in a .bar file, i was dismayed to find that since i don’t use Flash Builder (but, rather, FlashDevelop), i would need to use the command line to continue. i hate the command line. HAATE it. i know that eggheads love it, and that you employ Many Eggheads at RIM, but you have to understand that even though the command line is useful and powerful and 1337 and everything, i absolutely can’t be arsed with it. Like, not at all. So knock it off.

    Here is what i had to type into the command line in order to bundle my project into a .bar file:

    C:\dev\BlackBerryTabletSDK\blackberry-tablet-sdk-0.9.3\bin\blackberry-airpackager -package MyGame.bar -installApp -launchApp MyGame-app.xml blackberry-tablet.xml MyGame.swf blackberry-tablet-icon.png -device 192.168.58.128 -password 123456

    This is not a fun thing to have to type. Know what i want to do? Click a button. Can you make it so that i just click a button? Buttons good, typing bad. It may not be 1337, but it also doesn’t eat up my entire afternoon.

  6. i am currently rocking three Blackberry accounts: one to develop my game, one to sell my game, and one to talk about my game on your forums. This is Too Many Accounts. Know how many there should be? One. Know why? Because it’s easier. Know what’s not easy? You.
  7. When i signed my application, i had to download a file that you sent to me two days after i emailed you and asked you for it. That’s Too Many Days. That’s because you also took two or three days to approve my vendor account. Why not do this in one step instead of two? Clearly, a vendor is always going to need the application signing file. See how you don’t make things easy, when you potentially could?
  8. Then i had to use the command line (which, as we’ve already established, is bad) to create a file that i could send to you so that my computer could sign files. At least i think that’s what i was doing. Here’s what the command looked like:

    blackberry-signer -csksetup -cskpass DesiredCSKPassword

    Then i had to use the command line (bad. BAD!) to send you my .csj file to receive permission to sign my other file. i think. i’m not quite sure what was going on, because it was tough to interpret the command, which looked like this:

    blackberry-signer -register -csjpin PinEnteredWhileRequestingCSJ -cskpass PasswordEnteredWhileGeneratingCSK client-RDK-XXXXXXXXXX.csj

    Next, i had to create a .p12 certificate using this command:

    blackberry-keytool -genkeypair -keystore DesiredCertificateName.p12 -storepass NewPassword -dname “cn=MyCompanyName” -alias author

    Then i had to get you to sign the file using this command:

    blackberry-signer -verbose -cskpass CSKPassword -keystore CertificateName.p12 -storepass StorePassword BarFileNameForRIMToSign.bar RDK

    Then i had to sign the file myself using this command:

    blackberry-signer -keystore CertificateName.p12 -storepass StorePassword RimSignedBarFile.bar author

  9. When i finally went to upload my file, in the web form you asked me for an additional icon in some bizarre size (243×717 or something like that). i went away and produced that icon, and by the time i returned, the web form had timed out. Know what would be easier? A checklist!

    YOU WILL NEED:

    • A swf
    • An xml file called whatever.xml – download it HERE!
    • A thumbnail icon – download a template HERE!
    • A second icon – download a template HERE!
    • A brief description of your application – max X words
    • A long-form description of your application – max Y words

    And HERE’S an image of how all this stuff looks when it’s in the Blackberry App World! We’ve LABELLED everything for you, so you know where the descriptions and icons appear and how they’ll look to the user.

    Really, though – how long does that kind of thing take to set up? An afternoon? Why does this not exist yet?

  10. To add insult to injury, my game was initially rejected because it did not contain the icon.png. i figured i must have forgotten to include the .png filename when i created the .bar file, so i went through all of those horrible steps again. For a second time, my game was rejected. Same reason.

    Know what the problem was? i hadn’t added this to the xml file:

    
        whatever.png
      
    

    N’awesome.

i didn’t enjoy doing this, and i don’t want to have to do it ever again. Know what i want? i want a big blank area where i can drag and drop my file, with a huge shiny juicy button that says “GO BITCH GO” which, when i click it, does all the bullshit i just described above. Please get your eggheads on that.

In addition to all of the brilliant software and hardware engineers you employ, you simply need to hire more people to evaluate this process. An egghead will tell you that using the command line is cool and awesome and that everyone loves doing it. A person will tell you the actual truth: using the command line blows, and you need to put that shit on a button.

Please let me know if and when you plan to put that shit on a button, and i’ll gladly continue developing for your device, because it’s pretty cool.

Sincerely,

Ryan Henson Creighton

President, Untold Entertainment Inc.

Cooking With Flash: Drawing Complex Images using Tweened Animation

Drawing repeating elements in Flash can be a real asspain. This tutorial will teach you a valuable trick with the timeline to help you draw things like starbursts, buzzsaws, clock faces, and repeating elements along a path.

sun

Check out this vector graphic of a sun. Sure, you can individually copy and rotate all those flames and then meticulously hand-position them, but life’s too short and you’ve got too much other awesome stuff to do. There’s a faster, easier way!

Step 1: Draw your graphics

To begin, I’ve just drawn a circle and a little flame graphic. I filled them both with a gradient so they look less junky.

sun

Step 2: Symbolize your graphics

Select the circle and press F8, or click Modify > Convert to Symbol. Enter a name for your symbol – anything you like – and make sure the Registration point is in the center. Press OK when you’re finished.

sun

Step 3: Create an Empty Movie Clip

Press CTRL+F8 or click Insert > New Symbol … to create an empty Movie Clip. Again, call it whatever you like and click OK. Then click the Scene 1 tab to jump back out to the main timeline.

sun

Press CTRL + L or click Window > Library to bring up the Library. Click and drag the empty Movie Clip you just created and drag it to the Stage. The empty Movie Clip looks like a white dot.

sun

Step 4: Align the two Movie Clips

Press CTRL + K or click Window > Align in the menus to bring up the Align panel. Click and drag to range-select both Movie Clips at once. Click the “Align horizontal center” and “Align vertical center” buttons (highlighted in red in the image) to align the center points of the two clips.

sun

Step 5: Cut and paste the repeated element into the empty Movie Clip.

Select the artwork for the repeated element and press CTRL+X or Edit > Cut in the menus to delete it and copy it to memory in the clipboard.

Now, double-click the empty Movie Clip (the white dot) to edit it. If you accidentally double-click the circle, click the Scene 1 button to jump back out to the main timeline and try again. Alternately, you can double-click the empty clip from the library to edit it.

Finally, press CTRL+V or Edit > Paste to paste the repeated element artwork from the clipboard into the empty Movie Clip. Position the artwork where you’d like it to appear; in the case of our sun graphic, we’ll move the little flame to the edge of the circle. Click the Scene 1 button to jump back out to the main timeline when you’re ready.

sun

Step 6: Prep the timeline.

Select the repeated element (in this case, the flame Movie Clip) and press CTRL+X or Edit > Cut to delete it and copy it to the clipboard.

Click the New Layer button at the bottom left of the Timeline window. Click on the first frame of the newly-added layer, and press CTRL+SHIFT+V to paste the repeated element in exactly the same place.

sun

Step 7: Spin the clip.

Click on frame 30 of the main timeline in the newly-added layer. Press F6 or click Insert > Timeline > Keyframe to drop a new Keyframe there. You’ll see a black dot on frame 30.

Click on Frame 1 of the new layer. Right-click and select Create Classic Tween. An arrow with a blue background appears to indicate that Flash will interpolate the position, rotation, scale and color effects of this Movie Clip across the frame range.

sun

Open the Properties panel (Windows > Properties or CTRL+F3). Select the repeated element Movie Clip. The context-sensitive Properties panel updates to show Movie Clip properties.

Under the Tweening heading, choose CW (clockwise) from the Rotate: dropdown. (You may need to click the little triangle to expand the Tweening section). This makes the repeated element rotate around its registration point for the duration of the animation span.

sun

Step 8: Adjust the animation with Onion-Skinning.

Click the Onion Skin button at the bottom of the Timeline window to turn on Onion Skinning. Click and drag the grey animation range gizmo at the top of the Timeline window to stretch across the entire animation range.

Now you can clearly see how your repeated element is distributed around its registration point. If the distribution is too sparse, click the pink rectangular Playhead at the top of the Timeline window and hold down the F5 key (or repeatedly click Insert > Timeline > Frame if you’re a sucker) until the distribution is to your likely. If the distribution is too dense, press SHIFT+F5 to delete frames until it looks good. If you’re deleting frames, make sure you either lock the lower layer, or move away from Frame 1, or else you’ll delete the lower layer artwork!

The following images show how differing frame range lengths can affect the distribution of your repeated elements:

sun

sun

sun

Step 9: Turn the interpolated frames into symbol instances.

Right now, those repeated elements may look exactly the way you want them, but they’re not “real”. What you’re seeing is just the motion trail of a single Movie Clip instance as it revolves through its animation.
To turn these phantoms into actual symbol instances, click and drag to select the entire range of animated frames, and press F6 to convert them all to keyframes. Now, each frame contains an actual “physical” instance of the Movie Clip.

sun

Step 10: Gather the elements together on one frame.

Click the Edit Multiple Frames button at the bottom of the Timeline window.

Click the dot beneath the Lock column on the lower layer, to keep from messing with the graphics on the lower frame.

sun

Press CTRL+A to select all of the (unlocked) repeated elements. The Edit Multiple Frames mode enables you to select all of the instances across the frame range.

Press CTRL+X or Edit > Cut to delete all of the repeated elements and copy them to the clipboard.
Uncheck the Edit Multiple Frames button. Click on the first frame, and press CTRL+SHIFT+V to paste the repeated elements in place.

Step 11: Tidy up.

Click and drag to select the animation range from frame 2 to the last frame. Press CTRL+F6 to delete all of the empty, blue animated keyframes. Press SHIFT+F5 to delete the frames so that your timeline is back to a single frame.

Click and drag the top layer below the bottom layer to swap their z-depth order. This put the repeated elements behind the circle. Looks pretty good!

sun

This trick works for more than just straight lathe effects. You can animate a MovieClip along a path and add scale effects to it before F6-ing the whole affair. Check out the tail scales on this super-realistic dinosaur:

sun