Added: Lareina Bankston - Date: 11.09.2021 12:15 - Views: 14198 - Clicks: 2093
In this tutorial, we'll delve into Flash game character customization. The result can be used to provide players with the ability to create a unique character, beyond the basic dress-up options of most games. We found this awesome author thanks to FlashGame. We'll learn how to let the user add custom colors to different parts of our character, how to add hand-drawn des to the character's clothing, and how to modify a basic walking animation that uses the player's changes.
Fill the areas of the character's clothing with solid colors, add detail with the pencil, then hit "play" and press left and right to see him walk! Create a new AS3 Flash Document. Go into the properties panel and make sure that all of the settings are the same as the image below:. Next create a new. This will be our main class.
Make sure that your CustomCharacter class is as below. Check out this quick introduction to the document class if you're not sure what we're doing in this step. Now we will begin by drawing our main character. In this tutorial, it is important that we make sure we have every body part in a separate MovieClip. By doing this, character creation flash games can base our walking animation on Tweens which will speed up the animation process.
Our character will be made up of the following objects: a head, hair, a shirt, two legs, and two arms. You can find the main character used in this tutorial in the source FLA download link is at the top of the tutorial. For now, to encourage the player to customize the character, we'll limit the colors of the body parts of the character to grey with black outlines.
Select the entire body, push F8 to turn it into a single MovieClip and call it Player. Make sure that you set the registration point of each body part to the upper left corner. Now click on the new Player movieclip on the stage and set the instance name to player. To begin, we need to add the ColorPicker component to our library. Find the ColorPicker class and drag it into the library panel. Next we need to do all of the ActionScript work. Here is what our CustomCharacter class will look like after our new changes. Let's go through this step by step, starting with the constructor function.
First, we are creating a new var called myColorPicker. Next we are telling our ColorPicker to be changeable and invisible, so we can make it show up when we click on the player. Then, we add the ColorPicker class to the stage, although it isn't visible. We also add two event listeners.
One for when you click on the player, which toggles the visibility of the ColorPicker and moves it to the mouse location upon click, and the second one to check to see when the user has selected a new color, so that we can make the ColorPicker invisible again! Unfortunately, we can't just use the ColorPicker and make it change an object's color.
First, we need for the ColorPicker to character creation flash games which object you are clicking on, so that it can determine which object to change. This requires using one of AS3's powerful MouseEvent features. Inside the showPicker function, we can just use e. We can bring the alpha of the clicked object down to confirm which object we are dealing with.
Just add the code below to the showPicker function. We're almost ready to color our objects. Before we start, we need to make sure that we can keep the outlines on our body parts. To do this, we need to identify the area that needs a color change. We are going to have to go inside the MovieClip for every body part, and select the gray fill area inside the outline.
Now every body part should have a color MovieClip inside it. We are finally adding coloring to our application. Here is what your project should look like at the end of this step:. Let's go through this step by step. To begin with, we are creating a new MovieClip variable, myChangedObjectto be accessed by our program.
This is so our showPicker function can tell our colorChanged function which MovieClip was last clicked on. Seeing as that's out of the way, let's look at our showPicker function. As you can see, we added a little checker to see if the clicked on object's name is "color". This is just a check to see whether the user has actually clicked on the player's outline, shoes, or anything else that character creation flash games meant to be changed. Next we are changing our new myChangedObject variable to be equal to the clicked-on object, e. Finally, we are telling our ColorPicker myColorPicker to have the ly selected color preselected.
If there is none, then it will default to black. Lets analyze this little bit of code. First of all, it is important to know that to have a preselected color, the ColorPicker class has a. In the second part, we are converting the data in the parentheses to a uint to be passed onto the ColorPicker.
Here's the key, we are essentially going inside our selected MovieClip myChangedObjectgoing into its transform section where our data is storedgoing into the colorTransform data of the transform data, and pulling out the color variable which holds our RGB code which we then pass as the selected color of the color picker.
Think about it like a directory:. We're still not done yet! Next let's look at our colorChanged function. Here, we are creating a new instance of the ColorTransform class. We are then setting the color variable inside the ColorTransform class to the color that the user has selected with the color picker. However, we need to add a "0x" to the ColorPicker's chosen color e.
Like before, we are converting all of the added data to a new uint that the ColorTransform can recognize. Whew, that was confusing but now that that part is over, we can start adding new features to our program. Next, we are going to try to make the program draw directly onto the player's body parts, so that the user can draw some cool des for his character.
As you can see above, I've put together a panel with two tools. Firstly, we have a drawing pencil and next we a paint bucket tool. You can dissect the graphics if you want to learn how they were made. Also, this is sort of an extension from this tutorial by Carlos Yanezwhich does a great job of explaining how to create a drawing application.
Just as in that tutorial, I have a interface that character creation flash games of two paint bucket and two pencil images. One is gray and the other is in color. The gray one will make the colorful image visible to show that the tool has been activated. Once one tool is activated, the other will be disabled. In this step, we are only working on switching between the tools.
During the following steps, we will cover how to get the pencil tool to work. Here is what our code should look like:. First, you can see that we have taken out the showPicker and colorChanged event listeners, and they are now only to be added when we choose the paint bucket options. Instead, we have added two event listeners for each button, which link to two functions that activate the tool we have clicked on.
The functions add their own event listeners and remove the event listeners from the other tool. They also make the right interface items visible and invisible. We have setup the interface, but a question remains. How can we choose what color to draw with for the pencil tool? The answer is simple. We can just reposition our color picker to be next to the pencil tool.
It's quite simple too. Just add this to the end of the enablePencil function:. Just to make sure that the player doesn't use the ColorPicker when selecting the bucket tool, we can just add this to the enableBucket function:. We are getting closer to being able to draw onto our character, but we still have some work to do.
Soon, we are going to start masking our drawings to movie clips inside the character, so that they stay within the outline of the character. To do this, first we need to create a list of objects that need to be masked. We can do this in the form of an array. Unlike before, we are going to have to give each body part character creation flash games instance name, so go back into the player movie clip, and select each object one by one. Give each object a name "arm1", "leg2", "hair", etc. When you have finished that, create an array in the CustomCharacter constructor, like so:. This is because we are trying to reference the player movieclip before it is constructed.
To solve this, we need to reference it in the constructor, too.
Basically, we are splitting up the variable into two parts. The first part is before the constructor when we create the array, so that it'll be accessible throughout the class. To be able to draw into an object, we need to use the Shape class. First, add the import statement to the other ones at the beginning of our Main class.
This is what you need to add to the bottom of your CustomCharacter constructor function:. Here's a quick explanation of what we are doing. We are basically creating a for loop that triggers once for each of the items in our array. In the loop, we create a new instance of the Shape class.
The next four lines are just for debug testing, sort of like Box2D debug draw. Basically it is displaying purple boxes around the character's body parts. The only thing to keep in mind is that we are multiplying the width and height of each body part by 3 to get the width and height of our purple testing box, so that we know each of these "canvases" will be big enough to draw on. Next we as the name "shapes" to each Shape created, and add it into the current item of the drawableParts array. To start off, we will need to give our shapes a surface to be masked too.
We can't just link them to our body part MovieClipbecause then those will turn invisible. This is what we can do instead.Character creation flash games
email: [email protected] - phone:(989) 317-9323 x 8428
Character Creator Flash Game