Flash Game Development :: Lesson 2 - A
Lesson 2 - A :: Drawing in Sprites
Now that we have covered most of the Basics of User Input and basic Text handling in Lesson 1, we can proceed to start working and drawing on Sprites.
Let's begin by creating a Controller class. This class will not contain any drawing logic or any User Interface (UI) related code, however it will be used to control the objects that exist in the movie. Make sure to link the Movie to it, and save both the '.fla' and the '.as' file.
Next create a new AS3 class named 'Face' and make sure it extends the Sprite class. Create it's Constructor and leave it blank for now. Save the Face class, and switch back to the Constructor of the Controller Class. Create an instance of the Face class and add it to the Controller class. [Figure 001]
Switch to the Face class, and create the following four private variables, of type Sprite, named eyeLeft, eyeRight, nose, and mouth.
Once the variables are declared, create four private functions which require no parameters named InitLeftEye, InitRightEye, InitNose, and InitMouth. Once the functions are created, add a call to them to the Constructor. [Figure 002]
Next we'll proceed to initialize the Eyes. In order to draw the eyes, we'll just make use of the graphics property of the eyeLeft and eyeRight variables, and draw a circle on them. The centre point of the circle will be the coordinates 0, 0 (X,Y) of the Sprite. We'll set the radius of the eye to 20, and make sure to colour them black.
We must make sure that we initialize the proper variables in the respective functions, i.e. the Left Eye should be initialized in the InitLeftEye function and the Right Eye should be initialized in the InitRightEye function. [Figure 003]
Now, let's initialize and draw in the Nose. We'll do so by making use of the drawLine function available to us through the Graphics object. the point of origin of the nose will be the coordinates 0, 0 (X,Y) of the Sprite. From there we'll draw a Line straight down at an angle to X = 30 and Y = 45, and then draw another Line to the coordinate X = 0 and Y = 45.
Before we draw the Lines, though, we need to make sure that we set the LineStyle property, otherwise the drawLine function will attempt to paint with 'invisible ink'. So let us set the LineStyle to a Tickness of 1 and the Colour 0x000000. [Figure 004]
Now for the tricky part, lets make the face smile.
Drawing curves is a little tricky. We'll make sure that the mouth is centered on the X = 0, Y = 0 coordinates. In order to do so, we first move our point of origin from where the curve will begin to X = -40, Y = 0. Then we make use of the curveTo function to draw a curve to the X = 40, Y = 0 position, bending using the Coordinates X = 0, Y = 30.
Curves in Flash are drawn using Bezier Curves *1. Just as before, remember to set the Line Style before drawing anything on the Sprite. [Figure 005]
Now, if you review our code, although we have initialized our Sprite variables, and drawn on them, we have not yet placed them in our movie. In order to do so, let us create a new private function named PlaceSprites which takes no parameters. In this function we will add the Sprites to the Face object, and move them to their proper coordinates.
Again, we will make sure that the centre point of our face is the middle of the face, and not the Top Left corner, thus we will set the following coordinates to the Sprites.
- The Left Eye will have an X and Y position of -35, and -30.
- The Right Eye will have the X and Y position of 35, and -30.
- The Nose shall be positioned at an X value of -5, and a Y value of -10.
- The Mouth shall be place at an X value of 0, and a Y value of 60.
Finally, make sure that you call the PlaceSprites function in the Constructor of the Face Class. [Figure 006]
Once all the above work is ready, just make sure to update the Face object's location in the Controller object to be centred on X = 100, and Y = 100, and that should be it. If we Save, Compile and Run our movie we should have managed to get a decently formed face on our screen. [Figure 007]
Click here to download the source code for this example.
*1 For more information on Bezier Curves visit here