Beginning Flash and ActionScript Game Programming Part 9: Vector Drawing

In the previous sections, we went through the basics of programming that can be applied to most common languages.

In this section, we’ll look at Flash and Actionscript specific concepts, starting with vector drawing.

Tutorial Demo

This is what you’ll create in this tutorial:

Vector Drawing Programmatically Using Actionscript

A good tool to have and use, is being able to draw dynamically. Lets say you create a new game, and want to check the game mechanics before investing in the art.
The easiest way to do this is creating something to hold it’s place visually.

Lets demonstrate this now. Create a new FlashDevelop project, and enter change it to resemble the following:

Main.as

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author Chris Moeller
	 */
	public class Main extends Sprite 
	{
		public var smiley_face:Sprite;
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			smiley_face = new Sprite();
			addChild(smiley_face);
			
			//draw the main circle
			smiley_face.graphics.beginFill(0xffff00);
			smiley_face.graphics.lineStyle(10, 0x000000);
			smiley_face.graphics.drawCircle(800 / 2, 600 / 2, 300);
			smiley_face.graphics.endFill();
			
			//draw the eyes
			smiley_face.graphics.lineStyle(0);
			smiley_face.graphics.beginFill(0x000000);
			//left eye (from our perspective)
			smiley_face.graphics.drawEllipse(290, 150, 75, 110);
			
			//right eye (from our perspective)
			smiley_face.graphics.drawEllipse(450, 150, 75, 110);
			smiley_face.graphics.endFill();
			
			//draw the mouth
			
			//draw left side of the mouth curve
			smiley_face.graphics.lineStyle(7);
			smiley_face.graphics.moveTo(250, 340);
			//first two are anchor point, second two are destination
			smiley_face.graphics.curveTo(240, 380, 190, 380);
			
			//now lets draw the right curve
			smiley_face.graphics.moveTo(550, 340);
			smiley_face.graphics.curveTo(560, 380, 613, 380);
			
			//and draw the final mouth curve
			smiley_face.graphics.lineStyle(10);
			smiley_face.graphics.moveTo(233, 373);
			smiley_face.graphics.curveTo(400, 600, 567, 373);
		}
		
	}
	
}

If you compile this, you’ll notice a classic yellow and black looking smiley face. As you can see from the code, it requires you to add a sprite (or a movieclip) object, add it to “the stage”, and then draw on it however you like.

Line 24: We first need to create an object of the built in ‘Sprite’ class, which is an object that has functions in it to draw with.

Line 25: In flash, we must use “addChild” to add a movieclip or sprite object to the screen, to make it visible.
At this spot, we are calling the function of the ‘Main’ object, which is of type ‘Sprite’, so we are adding our smiley_face to the ‘Main’ object, which is already on screen.

Line 28: This is where we begin drawing. ‘BeginFill’ defines what color we are going to fill in any object we want to create.
We have to use hexadecimal format for the color, which has the first representing the red value, 2nd two representing the Green value, and the last two representing the blue value.
Hexidecimal goes from 0-9, then A-F, which represents 0-15. So all black is 0x000000, all red is 0xFF0000, all blue is 0x0000FF. 50% gray is roughly would be 0x777777.

Line 29: We can also specify the line style for the object we want to draw, so we can have a “stroke” on the object. Here I set it to a 10px line, of black color.

Line 30: Now that we have a fill color, and a line style setup, we can draw something! Here I draw a circle with the position setup as the center of the screen (default screen size 800×600), and going to the top and bottom of the screen( radius 300, so full diameter = 600).

Line 31: Lastly, we need to use ‘endFill’, so that any other objects we draw later on aren’t affected by the fill color we setup for this section.

Now that we have the basic yellow circle with black outline created, we need to create the eyes and mouth for the smiley face.

Line 33-41: Here We draw both ellipses for the eyes. We get rid of the linestyle to just have plain ellipses, fill them in as black, and draw each one.

Line 43-58: Here, we create the mouth by creating two curves on both sides of the mouth, and one large curve for the mouth. Honestly, I’ve never needed to draw curves before this, but typically use the “lineTo” function to draw lines.
The basic concept is simmilar to drawing with a pencil. Whenever you call ‘lineTo’ or ‘curveTo’, it’s as if you were leaving your pencil on a piece of paper, and drawing from point to point.

Alternatively, ‘moveTo’ is used as if you were picking up your pencil and placing it somewhere else. It doesn’t actually draw a line, but it sets up the starting point of a new line segment.

Conclusion

Using these concepts, you should be able to draw anything that you could want programmically.

In the next section, we’ll look into using Actionscript methods to move the sprite around.

Other Articles in this Series

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *