Tom-as3-gotchi (Flash Game Tutorial) Part 1

05/19/2010

Welcome to my first tutorial of many.  As I mentioned in an earlier post, I believe game programming to be a great way of learning any language, since it can force you to think a little more than a simple form-based application.  For this series, I want to create a variation of the traditional Tamagotchi virtual pet, which will allow me to cover a few different topics and programs in the process.  I've playfully named this a "Tom-as3-gotchi," which should be obvious to most (for the rest, consider it a free riddle).

Game Concept

Before writing a single line of code, I want to have a solid concept to design my game around.  The Tamagotchi page on Wikipedia, which was surprisingly sparse on information, states the core functions.  I'll be using those as a reference, specifically the functions for:

• Feeding the Tom-as3-gotchi a piece of food or a snack.
• Playing games with the Tom-as3-gotchi.
• Cleaning up a Tom-as3-gotchi's waste.
• Checking Tom-as3-gotchi's age, discipline, hunger, happiness and other statistics.

I've omitted the ability to connect with friends for now, but may decide to introduce that later down the line.

At this point, it's tempting to just open up the Flash IDE (or my preference, FlashDevelop) and get started, but we're still not half way there.  As I see it, there are 3 main components to the entire game. First, the actual character, Tom (Tom-as3-gotchi), which has basic needs (needs to be fed, entertained and kept in shape). We also need a world for Tom to live in - for the scope of this game, his "World" is a room. Within that world exist many objects (food, computer, bed, toilet, etc.), each of which represent the third component, "Object." I'm a visual person (what game programmer isn't?) so after I know the general direction I want to go in, sketching it out on paper can help me focus.  After spending 15-20 minutes, I came up with this simple list of components and functions:

Again, this could all change in the near future, but at least the concept is beginning to take shape.  Since "Tom" is the main component to all of this, I will focus on him first.  Next step, we can almost get into some as3 coding!

Project Structure

Another important factor in game design and programming in general is your workflow.  I typically structure my projects by using folders and naming conventions.  For starters, I almost always start with 3 main folders: assets, deploy and src.

assets

This folder will contain "non-deliverables" meaning all reference materials like .psd (photoshop), .ai (illustrator), .pdf, .txt, .doc, uncompressed videos (.mov, .avi, etc.) and just about anything else that won't need to be uploaded when everything is done.  Any images or other assets that are embedded into your app at compile-time will also go in here (like .wav, .jpg, .png and .gif files).

deploy

The deploy folder will include all of your deliverables, or the files that are "delivered" to the end-user.  This usually includes .html, .css, .php, .swf, .mp3, .jpg, .png, .flv, .xml and any other assets that are loaded in dynamically at run-time.  This is also where you will set Flash (or FlashDevelop) to publish your SWF files into.

src

If you haven't figured it out already, src is short for source.  Not that it really needs to be shortened, but this is a naming convention that I've picked up over time.  The source folder is where you will store all of your source code.  This includes .fla, .as, .mxml and a few others.

Source Control

You may also notice a folder named ".git" on the left panel in the screenshot above, and if you are really paying attention to details, you will also see that all of the folders have little green checkmarks on them.  Without going to far into the rabbit-hole of source control, the tl;dr version is that source control lets you keep a complete history of all changes you make to code (and assets), along with ways to restore previous versions of the entire project, or of individual files.  I will not be covering how to set up source control in this series, as I would prefer to just focus on the game.  I have been using Subversion for source control for a few years, and recently started moving over to Git.  In fact, along with being my first tutorial series, this is also my first project using git.  For anyone that wants to follow along, I've posted Tom-as3-gotchi on github, and google code.  By using source control, it makes it very easy to make huge changes, without worrying about breaking things - and it makes working on a project with multiple people a little easier.

Getting to the Code!

Finally, we've developed an overall concept (well, at least we started to),  and we've setup our directory structure (albeit basic right now).  If this were less about programming, and more about game design, the next step would probably be to start sketching ideas out on paper, and even coming up with some mock-ups and rough graphics.  However, since this is about the programming, let's code!

The first step is to setup our main component of the game, Tom.  You may notice that I use uint instead of int or Number for numeric variables.  This is another preference thing, and also a bit of optimization.  A Number type can go into the decimals, which isn't necessary for our game, and the main difference between a regular integer (int) and an unsigned-integer (uint) is that a regular integer can be negative (-1000) but a uint must be 0 or higher.  Again, this makes sense because our age, weight, or other values will never be less than 0.

Tom.as

package
{

	/**
	 * ...
	 * @author Thomas Gorence
	 * Base class for the main component of the Tom-as3-gotchi game.
	 */
	public class Tom
	{
		// Weight and Age are integers
		private var _weight:uint;
		private var _age:uint;

		// hunger, thirst and boredom will be rated from 0-10
		private var _hunger:uint;
		private var _thirst:uint;
		private var _boredom:uint;

		// health and mood will be represented by strings
		private var _health:String;
		private var _mood:String;

		public function Tom()
		{
			// constructor function
			trace("Hi, I'm Tom!");
		}

	}

}

Notice that our class, Tom, does not extend Movieclip or Sprite, or anything else - meaning that Tom is an abstract class.  I've also created a few private variables to store information about Tom.  They all begin with an underscore, which I use to denote a private variable versus a public variable.  It's another personal preference thing, and also allows me to create getter/setter methods easily, which I will get into later.  The class is named "Tom," and you will notice a public function in the class with the same name ("public function Tom").  This is known as the constructor function, which runs when the class is instantiated.  To put that into English, the constructor function is run once, automatically, whenever a new "Tom" is added.  In this case, when a new Tom object is added to the project, it will trace out "Hi, I'm, Tom!"

Before wrapping up, take a look at the other file in this project.

TomAS3Gotchi.as

package
{
	import flash.display.Sprite;

	/**
	 * ...
	 * @author T@IDEAS
	 * Main class of the entire project.  This is the file that is actually compiled to SWF.
	 */
	[SWF(width="800", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class TomAS3Gotchi extends Sprite
	{
		private var _tom:Tom;

		public function TomAS3Gotchi()
		{
			_tom = new Tom();
		}

	}

}

So this is the actual file that we will use to compile.  If you don't have Flash IDE or FlashDevelop installed (and have no other way of using flash), this Tom-as3-Gotchi Flash Game Programming Tutorial is also hosted on wonderfl, so you can program and view it for free.  I'm using FlashDevelop (it's free, windows only) but you can also use the Flash IDE by creating a new FLA file, and then in the stage properties, set the Document Class to "TomAS3Gotchi" and save that FLA file into the same folder as TomAS3Gotchi.as (the src folder).

Note: if you are using Flash IDE, you will have to go into Publish Settings and set the SWF output to "../deploy/TomAS3Gotchi.swf" and uncheck HTML output.  If you want to set height, width, framerate and background color, those also must be done in the stage properties, as Flash IDE will ignore line #10 altogether.

If you compile/publish the project in either FlashDevelop or the Flash IDE, you should see the message trace out, indicating that our Tom class was successfully created (or instantiated) and the constructor function was run.

Flash IDE:

FlashDevelop:

Well, that's good for now.  Again, all of these files are available to download:

Tom-as3-gotchi Flash Game Tutorial - zip, git, svn, or wonderfl.

Continue to Part 2