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

06/11/2010

For the fourth part to this tutorial, as promised, I will start introducing some graphics.  I started by sketching out a very rough example of the room our virtual character will live in, then I sketched out a gui - which for now is really just a rectangular frame.

After a bit of time using my Wacom in the Flash IDE, I recreated the sketches in vector format, and then separated them into MovieClips and Graphic symbols.

Here is an example of how I decided to organize all of the different assets for now. Notice that two of the items, Gui and gauge, have linkage properties, which is why their "Export" property isn't blank like the rest of the symbols in the library.

First, let's take a look at the code and assets in the Gui class. Here's a screenshot of the assets, and their instance names:

And now, here is the code to go along with the Gui class:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;

	public class Gui extends MovieClip
	{
		// Event constants
		public static const APPLE_CLICKED:String = "apple clicked";
		public static const CHEESEBURGER_CLICKED:String = "cheeseburger clicked";

		// Gui elements
		public var age_txt:TextField;
		public var weight_txt:TextField;

		public var boredomGauge:Gauge;
		public var hungerGauge:Gauge;
		public var thirstGauge:Gauge;

		public var apple:MovieClip;
		public var cheeseburger:MovieClip;

		public function Gui()
		{
			// set labels
			boredomGauge.label.text = "Boredom";
			hungerGauge.label.text = "Hunger";
			thirstGauge.label.text = "Thirst";

			// add button function to apple
			apple.addEventListener(MouseEvent.CLICK, function(evt:Event) { dispatchEvent(new Event(APPLE_CLICKED)); }, false, 0, true);
			apple.buttonMode = true;
			apple.useHandCursor = true;

			// add button function to cheeseburger
			cheeseburger.addEventListener(MouseEvent.CLICK, function(evt:Event) { dispatchEvent(new Event(CHEESEBURGER_CLICKED)); }, false, 0, true);
			cheeseburger.buttonMode = true;
			cheeseburger.useHandCursor = true;
		}

		public function update($tom:Tom):void
		{
			// update all Gui fields based on $tom variable
			age_txt.text = String($tom.age);
			weight_txt.text = String($tom.weight);
			boredomGauge.value = $tom.boredom;
			hungerGauge.value = $tom.hunger;
			thirstGauge.value = $tom.thirst;
		}

	}

}

Since it's all new, let's go through it line by line.

First, you will notice two public static constants, APPLE_CLICKED and CHEESEBURGER_CLICKED, which will serve as temporary Event descriptions. We then define our textfields, age_txt and weight_txt.

Then we define the gauges, boredomGauge, hungerGauge, and thirstGauge, which make use of another new class, Gauge.as.  Finally, we need something to click on, which interacts with our character.  For now, I've created two simple MovieClips and cleverly named them apple and cheeseburger, but  in the future I will connect these to the Food.as class.

Other than the declarations we just went over, there are only 2 functions to the Gui.as class right now, the constructor function, Gui(), and update().  The constructor function is pretty simple, we just assign labels to the gauges.  Each item which uses the Gauge.as class is basically a MovieClip with certain child item, including a textfield named label. Next, we add MouseEvent listeners to the apple and cheeseburger MovieClips, which in turn dispatch an event.  This may seem redundant, but it's one way of separating the logic in the Gui fro the game logic, which will reveal it's use as the project increases in complexity.

The remaining function, update(), is used to refresh the gui to reflect all of the current values of the passed Tom.as object.

For Part 5 we'll explore the Gauge.as class, and then see everything in action so far!