The crew at Flash Game License has been doing some research on the importance of the thumbnail image. It’s that little picture that tempts you to play the game.

Before seeing the results of the research, I believed that a descriptive image would be the best bet – show people what the game looks like.

The research that Flash Game License had done showed that games with a better quality thumbnail image regularly received more money from sponsors, received better editor reviews and were visited much more frequently. The research also showed that ’screenshot’ thumbnails didn’t perform as well as a dedicated original thumbnail image.

With PJ’s advice and the research from Flash Game License in mind, I set off to redo Ray Ardent’s thumbnail image.

Before

After

I’m really happy with how the reworked thumbnail worked out – I somehow managed to capture the retro/pulp feel that I’m going for with Ray.

Looking at these now, it’s almost silly that I thought that a screenshot would be sufficient. It’s the little things that matter people.

On Dec 1st, 2009, I hadn’t written a line of code since high school, way back in 1992. High School computer programming was done in BASIC and was taught by the drama instructor. It wasn’t exactly a solid programming foundation.

I knew that 2010 was the year I would go full time with Ninja Robot Dinosaur, making Flash games on my own. But without the ability to program, there wasn’t a lot I could do.

I needed to learn how to program Flash games – and fast.

Not only did I need to learn how to make them, I wanted to learn the right way. No mad hacks weak-sauce AS2 code that runs through some miracle of weirdness – I wanted to learn to write proper OOP code.

Dec 2009 was not going to be an easy month. I was in the middle of moving from the east coast of Canada to the west coast (Canada is really big), I was also working over-time, finaling Gundead Defense for iPhone and getting a milestone ready for a Wii game I was working on at Longtail Studios. For most people, relocating a family while crunching at work would be enough – but I thought ‘What the hell, I’m going to learn to program ActionScript 3 too.’

I set a sizable goal for myself – complete one AS3 Flash tutorial a day for 30 days.

I knew it wasn’t going to be easy.

This isn’t called ‘Boot Camp’ for nothing. It isn’t easy. Expect to spend 2-5 hours per tutorial (depending on the scale of the tutorial, your own experience and debugging ability).

Learning to program is like learning to speak a new language. There will be late nights, very late nights and a few early mornings.

Step 1: Get your Software.

Download Flash and Flash Builder. Both have free trials and many tutorials are written so that you need one or the other.

If you are on a PC, you can get FlashDevelop for free. FlashDevelop is a suitable replacement for Flash Builder and many developers prefer it over Flash Builder.

Step 2: Beginner Tutorials

The AS3 101 Tutorials by Dru Kepple are a great way to get your feet wet with the fundamentals of programming.

Tutorial Tip: Sometimes, when doing tutorials, there are typos. If you have completed everything and it’s still not working, don’t be afraid to download the demo code and compare it to your code.

Each tutorial covers a fundamental aspect of programming and gives you a project to complete based on the lesson.

AS3 101 – Variables
AS3 101 – Functions
AS3 101 – Branching
AS3 101 – Arrays
AS3 101 – Loops
AS3 101 – The Display List
Optional – AS3 101 – XML

The AS3 101 Tutorials will help you get oriented with coding in Flash and will give you a basic understanding of the building blocks of programming.

Tutorials – 6

Tutorial Tip: Cutting and pasting the code doesn’t teach you anything. It’s best to type in the code yourself. Not only will this force you to read every line of code, it will help you in finding typos – a handy skill to have when it comes to debugging your own original code.

Step 3. Get your book on.

Even with all of the awesome tutorials available online for free, I still recommend working with a book or two. Online tutorials frequently have typos that can have you bashing your head against the wall (this comes from experience), while most books from reputable tech publishers are thoroughly proof-read and tested. This can save you a lot of agony.

These are the books that I found most helpful:

Get it on Amazon.ca

An easy read and a fantastic starting point for people who have no idea what they are doing when it comes to programming games. It has very little to do with ‘Design’ and really focuses on getting you up and running writing AS3 code and understanding the basics.

Tutorials – 5

Get it on Amazon.ca

A fantastic reference book, handy for looking up information. Not game focused, but very thorough, easy to read and infinitely useful.

If you order these books right away, chances are they’ll be on your doorstep after you’ve finished the AS3 101 tutorials in Step 2.

Step 4: Beginner Game Tutorials

FlashGameTuts is both a blessing and a curse.

On the plus side, you get to build the basics of some core games – breakout, shooter, platformer and tower defense. On the downside, the code isn’t the cleanest, the comments aren’t the best, there are frequent typo’s and some functions don’t have any tutorial elements.

note: Some links to source files are broken on FlashGameTuts – but the correct links can be found on the creators homepage: http://www.mrsunstudios.com/tutorials/

Flash Game Tuts – Breakout
Flash Game Tuts – Winter Bells
Flash Game Tuts – Rhythm Game
Flash Game Tuts – Vertical Shooter
Flash Game Tuts – Platfomer
Flash Game Tuts – Tower Defence

Tutorials – 6

Doing these tutorials was a huge turning point in learning to program. Not only was I finally making games, the errors in the tutorials forced me to pay more attention to what I was doing and taught me how to debug. Prepare for frustration, but it’s definitely worth the effort.

Step 5 – Let’s Meet Emanuele

Emanuele Feronato is a wonderful human being and his contributions to the Flash game scene cannot be understated. One day, I will meet him and buy him many beer.

Emanuele’s blog has many year’s worth of tutorials on making Flash games, both AS2 and AS3. He is especially adept at taking a popular game and building a prototype of that game with his own code.

Most of Emanuele’s tutorials are not thoroughly commented, but they give you a great idea of how to tackle tons of different game mechanics in Flash. The tutorials are also great for learning how to read code.

Tutorial Tip: I like to print out tutorials and read them the night before I do them. This helps me wrap my head around the whole tutorial. At the very least, I recommend reading the whole tutorial and making sure you understand the intent of the tutorial before opening Flash and building the game.

We’re going to go through 10 of Emanuele’s Tutorials. Here are the ones I did, but feel free to search the site and see if there are tutorials of games that are more interesting to you. Just make sure to do the AS3 version of the tutorial.

Make a Game Like Cirplosion
Build a Game Like Sproing
Create a Game Like Snowflakes
Chronotron Prototype
How to Use a Flash Tutorial to Make Your Own Game

Emanuel’s site is also a fantastic source for anyone looking at working with Box2D and Flash. (Box 2D is a physics engine for Flash). Here is a great starting point with Box2D:

Box 2D for Absolute Beginners Pt 1
Box 2D for Absolute Beginners Pt 2
Creation of a Flash Artillery Game with Box2D
Box2D Rope
Platform Game Basics Using Box2D

Tutorials – 10

The last group of tutorials focuses on the excellent set of game libraries from Adam Atomic called Flixel.

As I said in Flash Tactic’s post, I’m a big believer in using libraries like Flixel or Box2D to get your game up and running quickly.

Flixel for Absolute Beginners
Seifer Tim’s Flixel Tutorial
Multiple Rooms in Flixel

note: Flixel is a frequently updated library – and as such, the tutorials run the risk of being outdated. In this case, either check the Flixel forums for help (the Flixel community is nothing short of awesome) or, go through the excellent Flixel Documentation and see if you can solve the problem on your own.

While the BootCamp method is no replacement for an actual education in computer science, it did take me from a ‘White Belt’, not knowing anything about code to a ‘Yellow Belt’, able to read other people’s code and having a general idea of how to make things happen in a Flash game with code in a month.

It exposed me to multiple methods of programming and syntax so that I could figure out which ones worked best for me.

Best of luck in your Boot Camp. If you find any other additional tutorials are helpful links, please put them below in the comments and if you make it throught the boot camp, it’d be awesome if you could let me know.

Good luck!

A solid brand will give your game an established identity. That identity will help your players relate to the game. That relationship will give your game legs and make it easier for players to spread the word about your game. As a result your game will have more players and have a greater chance of becoming a franchise upon which other games can be built.

Many will say that you can’t have a successful piece of entertainment without effective branding.

While everyone can recognize that branding is important in the traditional gaming world, branding in the Flash world is not so black and white. The primary reason for this is that in most cases, the only tools you have to sell your game are a thumbnail image and the game’s name.

To stand out from on the crowded landing/search pages on Flash portals, a Flash game needs solid branding.

How do we go about building a brand when the limitations of the portals are considered?

A brand needs to communicate a lot of things to the player:

What is the genre? What does the player do? Is it familiar to other games I may have played?

What is the setting? When and where does the game take place? Is it sci-fi, zombie apocalypse or swords and sorcery fantasy?

What is the tone? Is it gritty or funny? Is a game for adults or kids?

That is a HECK of a lot of information to get across with nothing more than a name and a thumbnail.

I believe that this is why so many successful Flash games take the “literal” titles route. Crush The Castle, This is the Only Level, Epic Fantasy Battle 2 and Warfare 1944 are just a few of the games that have received incredible success by putting a ‘literal title’ on their game.

These games are successful because they make the most of the communication opportunities that the portals offer them. People know that they are going to crush castles in Crush The Castle, play on one level in This is the Only Level, have fantasy RPG combat in Epic Fantasy Battle 2 and play a WWII strategy game in Warfare 1944.

The risk these games take with literal titles is twofold:

First, it’s easy for the player to forget the title, or confuse it with another game. Most people I know who have played Crush the Castle or This Is the Only Level will call them ‘The castle physics game’ and ‘the elephant puzzle game’. This ‘brand confusion’ is considered a huge problem in the traditional world of marketing. Consumers find it difficult to differentiate between brands and are less likely to return to your brand.

The second concern is the ability to defend your copyright. If someone comes out with ‘Smash The Castle’, ‘No Other Level’, ‘Legendary Fantasy Fight 2′ and ‘Warfare 1943′, it will be difficult for you to defend yourself. Without a distinct brand, you must rely on the scruples of the industry to stand by the original game and ignore clones (good luck!)

If going with a literal title is so risky, why not go with a unique branded identity? This is how the traditional entertainment industry does it, but they have a few advantages over Flash games:
- A great trailer/promotional network make informative brand-building trailers and PR junkets are established and reach the target markets, wherever they may be.
- Marketing budgets that put the brand in front of the target market (Remember seeing Assassin’s Creed in the middle of the Octagon in UFC fights a couple of years ago?)
- Shelf space, large posters and larger images in the digital distribution networks.

A few pixels can make a big difference

It’s very hard to build a brand off of that little thumbnail with little or no marketing budget to increase awareness.

Developers have successfully crossed this line and come out with a unique brand that successfully communicates what their game is about. SteamBirds is a recent and fantastic example of building a successful brand.

Through the color scheme of military green and the airplane imagery, you can guess it’s a war game where you pilot a plane. From the name itself and font choice in the logo, you can guess it takes place in a steampunk setting.

Cool – SteamBirds is a steampunk airplane war game. It could have just as easily been called “Airplane War” but SteamBirds gives the game an identity. (It was actually called ‘SexyPlane’ early in development)

Many other games have achieved success with a brand built for the Flash portal market. Morningstar, the Bloons franchise, Stormwinds, and The Siege of Theldale all have informative and unique brands well suited for the Flash Portal Market.

Then you also have games like Sonny and Balloon in a Wasteland – both of which have ambiguous titles and images that don’t do the best job describing their gameplay (RPG and defense respectively). These games have brands that are similar to traditional entertainment brands. Yet, without a big marketing budget, both have achieved a tremendous level of success.

The images for these games are unique and probably contributed to pulling players in, but the other element that is much more important than branding is quality, especially in the Flash portal market.

Every great portal has an effective and well-used method for rating, reviewing and recommending games (recommendation still has a LONG way to go, but it’s getting better).

I believe that both Sonny and Balloons in a Wasteland achieved their success based on the quality of the games and the brand is the wrapper for a great game. I also believe that both games would have been even more successful with a little bit of extra effort on the branding side.

Branding in the world of Flash Portals (and social networks) is different from almost all other entertainment mediums and the rules are still being defined and refined on a daily basis.

When you launch your next Flash game, spend a little bit of time thinking about how people will discover your game on the portals and hopefully you will have the next SteamBirds and not the next “Roboshooter”, “StickSniper” or “________ the ________” game.

Flash Tactics #1 – The Most Accessible Gaming Platform in the World
Flash Tactics #2 – Making Money From a Free Flash Game

If inspiration strikes, I’d rather be prepared than count on myself to ‘remember it for later’.

My Moleskine is a riddled mess of notes, sketches, sticky notes and random ideas. It is held together with duct tape because my pen also needs to be with me at all times. (no point in having a notebook without a pen…)

4 Year's of Moleskine

I have lost two Moleskine’s in the past 4 years. Both were tragic events. One was left on a plane as the family was flying from Vancouver to PEI. By the time I realized it was gone, the plane had been cleaned. On the inside page of each of my Moleskines, I offer a reward of $100.00 if it is found. It still infuriates me to this day that the damn cleaners couldn’t bother to look inside the front page of that book.

I love my Moleskine.

This morning, while checking out Raincoast Book’s Blog, I stumbled across something that has the potential to replace my beloved Moleskine:

I present to you, the Designers Notebook:

Designer’s Notebook (Amazon.ca)

This book looks absolutely incredible! Wonderful bits of inspiration, handy visualization tools and more.

One question – if someone were to make this the ‘Game Designers Notebook’ and included notes and reference points from consoles, handy frequently used LUA and AS3 commands or other things along those lines, would people interested in something like that? What do you think? Leave a comment.

Vancouver Skyline - Stolen from my friend Allie @ Vancityallie.com

Well, after two years on the east coast, the Neville family is going to be moving back to Vancouver in a couple of months.

I will dearly miss beautiful Prince Edward Island – two of the best summers of my life have been spent on the empty and endless beaches of the island and my work with Longtail has incredibly rewarding.

But the bulk of our family lives on the west coast and, as a result, that is where we are going.

For me, I’m going to focus on family and NRD as well as doing some consulting and teaching. There is a book idea in there too.

It’s been over seven years since I have worked at home and with Cassandra running around being awesome all day, I look forward to being a bigger part of her life and not being the first person out of the house every morning.

The next year with NRD is going to be about experimenting with story and games in Flash. There will be more comics, comic/game experiments, game hybrid pieces – lots of stuff. Most of it will be short form and a good chunk of it will be weird.

So that’s the news. We are both going to be busy moving, house hunting (If you know of a 3-4 bedroom in Vancouver (Main, Cambie, Kits, Dunbar) available in Dec or Jan – hit me back), etc over the next couple of months, but I’ve got a month and a half of Petra’s Call in the can, so things should keep ticking along like normal here.

People have been into every aspect of the episode – the art, coloring, pacing, dialog, backgrounds – I’ve gotten great feedback on every side of the episode.

Below is a collection of ‘pages’ from Petra’s Call.

On the left are images from Episode 9, on the right are three of my favorite images from the earlier episodes. Even with a quick glance anyone can see there’s a big difference in the style, consistency, composition and overall feel of the pages.

Taking my time - and the work gets better.

While my process is always changing and I’m always trying new things, the biggest contributor to the improvements in Episode 9 is that I made one simple and major change:

I took my time.

Up until Episode 9, I had been working with tight schedules and was always pushing myself for the deadline.

“I have to get all of the pages inked in the next 2 hours – and then it’s done.”
“I have 2 mornings to get the whole issue penciled, if it isn’t done in time, it doesn’t matter, I’m going to inks.”

I needed to take more time and give myself more perspective on the work. This let me do a few key things that weren’t part of my process before.

A) Editorial feedback from my wife. I gave my wife 5 drafts through script to final art. She gave me a lot of dialog and pacing feedback that made a big difference.

B) Redrawing and redrawing some more. From thumbs to final inks, I spent a lot more time sweating the details. It took a lot longer, but it was worth it.

C) Taking a breather. Stepping away from the work to work on something else and coming back with fresh eyes. A big step here was doing the old ‘horizontal flip’ trick, where you flip the art 180 degrees horizontally, which exposes mistakes you wouldn’t have caught otherwise.

D) Putting in the extra time. Making a fully colored comic, plus setting up the site, Flash browser and everything else (you know – day job making video games, wife and kid, etc) takes a lot of time. I had set aside two hours every morning to work on Petra’s Call – and that was it. Now I am spending more evenings and weekends working on the comic as well.

All of these have helped me ‘Level up’ with my work on Petra’s Call and I am at a point where I’m a lot happier with the work I’m producing.

Now – back to the drawing.

Too Many Bots!

I need your help. This morning I sat down and jammed out a bunch of different bot silhoettes as the first step in designing the first bot that shows up in Petra’s Call.

The bot is going to be about 8 feet tall, expect it to kick a lot of ass and take very few names along the way.

There are things in each design that I like, so before fleshing out a design, I have decided to put it to a vote. Choose your favorite design (or two) and vote in the comments below.

It would be awesome if you could give me your favorite elements of the design too, so that if you like the big chunky fingers, I don’t change them in next step.

ex: “Dude – E is awesome. He’s got a big knife for an arm! Slice and dice baby!” (or, you know… something like that…)

Voting ends on Friday Sept 4th. Thanks in advance – much appreciated!

I wasn’t entirely happy with the old message board set up – mainly, I had to link to the message boards separately and in order to keep everything in sync, I needed to turn off comments on the actual blog posts.

Enter BB-Press. Now you can use one login to both comment and chat on the forums. Every blog post automatically gets a forum post, and anything you post on comments is synced up with the forum (and visa-versa) It’s actually very, very cool. (and only moderately difficult to set up)

I am sorry, but anyone who had an account with the old Ansible will have to create a new account – but, unless the Internet breaks, this should be the last major switcheroo.

If you want to check out the new message boards, click on Forums up at the top of the page, or go here.

Please let me know if you have any problems.

Thanks!
Shane

Writing, drawing, coloring and ‘flashing up’ each episode takes me 15-20 hours, and even with waking up every morning at 5AM (weekends too!) I can barely get them done. Factor in travel for work and it’s a slippery slope. A 1 week schedule also doesn’t leave a lot of time for the experimentation side of Petra’s Call and NRD.

Hopefully this change will improve the quality of the art, better features (the long awaited and much requested ‘jump to episode’ feature) and more experimentations in the whole experience, but it means that Petra’s Adventures will only be broadcast every other week.

A BIG part of my processes for Petra’s Call is speed. Every step needs to be fast. I have about 14 hours a week to write, draw, color and “Flash-up” each episode, which is roughly equal to 2-3 comic pages.

This is the process for doing the mountains, but the same principals apply for the trees, mid-ground and foreground and can also be applied to interiors.

Step 1 – The Mountain Shape.
- Start with a blank image
- Select the whole image (Command/Ctrl – A)
- Fill it with the color of the sky using the Bucket Tool (G) – Name this layer ‘Sky’
- Create a New Layer – label it ‘Mountains’
- Select the lasso tool (L) and with the whole image still selected, cut out the shapes of the mountain. This will be one line going across your whole image.
If you are unfamiliar with the shapes of mountains, look at reference and have it open when you are cutting. Mountains are not all the same, so some reference will help your mountains keep consistent. (the mountains in Petra’s Call are based on the Rocky Mountains)
- Once you have the shape of the mountain selected, fill it with the Bucket Tool (G).
Note: it’s important to have anti-aliasing off with this process to allow for clean selections and editing later on.
For a background color, I will take a color from my palette (I use my own preset palettes) and reduce the saturation and increase the lightness. (Color adjustment set to HSB Sliders)
As objects go into the distance, they loose saturation and contrast – even with a basic image like this, desaturating the color for things in the distance helps push them back in the image.

Now you have your basic shape of the mountain.

Mountain Flats

In this particular instance, I wanted the reader to feel surrounded and trapped by the mountains, so I didn’t put them on the horizon, I cupped them across the top of the frame to show that the Oleksyn Valley is surrounded by mountains.

Step 2 – Shadows
- Select the Mountains using the Magic Wand (W).
- With the Mountains selected, you want to cut away EVERY place that is going to have contact with the Sun. This can mess with your mind a bit, but the idea is that you aren’t adding shadows, you are taking away the areas that DON’T have shadows.
The benefit of cutting away is that you don’t have to worry about shadows that are on the edge of the mountain, which saves the time of meticulously lassoing something, or struggling with the magnetic lasso.
- Note: You can hold down the Option Key to continually subtract from the selection.
- Ultimately, you will have a bunch of areas selected.

Shadows Selected

- Create and select a new layer – label it ‘Shadows’
- Select a dark color – generally you shadows to be contrasting the primary light source in your piece. In this case, a very bright mid-day yellow is contrasted by a dark purple. I already have a dark purple my pallet, so I use that.
- Select the Paint Bucket (G) and set the Opacity to 15-20% – personal preference.
- Hit ‘H’ to hide the selection
- Click with the Paint Bucket – this will drop the shadows onto that layer.
- At this point you might want to undo the Paint Bucket to go back and make some adjustments to your selection. Do the shadows look wonky? Are they balanced?
- Once you are confident in the shapes of the shadows you can click to your hearts content to find the right darkness of the shadows.

Mountain with Shadows

Step 3 – Trees on the mountainside

The shadows seemed a little lonely on the mountain, so I decided to add some trees.

- Select the lasso tool yet again (L)
- Select areas where you want trees, holding down shift to keep adding to the selection.
- Create a new layer – Call it ‘Trees on the Mountain’
- Select a color – I grabbed a green I was planning on using for trees and desaturated and lightened it.
- Use the Paint Bucket (G) at 20% and click to add the trees. You’ll probably have to click a few times, but you don’t want them to be opaque. By keeping them transclucent, you help reduce contrast, which, in-turn helps push the objects into the distance in the image.

At this point, you can repeat the same process for each major layer of depth in the image, increasing saturation and contrast as you get to the front of the image.

Final Background

It took me a bit of trial and error to feel comfortable with this process, but right now, a background like this can be done in a little over an hour.