FlashChaz.com

Sim RPG games are very popular and strike a chord with the player. The nature of the genré allows the person playing the game to feel part of the world, and that the experience they are having is one that they are creating. However, not enough games allow depth of cusomtisation beyond assigning stats. This is something we will address, and you’ll learn how to make a character creation tool for your Sim RPG Flash game.

Preperation

First off, you want to get an idea of what theme you want your game to be about. As this is the first in a line of tutorials that plans to take you from blank canvas to finished product, it’s best to get an idea of what kind of theme you want now. Western? Sci-Fi? Dating? The possibilities are truly endless. One example of a vivid imaginaion being translated into a gaming environment is a game that I programmed with Alex aka BritishMoose. It’s called Snowstar and features a Penguin trying to get a number one Christamas hit. The game was fairly succesful and struck a chord with the gaming popularity. So, assuming you now have an idea, let’s move on! If you don’t, then take the extra time to think of something now before embarking on this journey.

Creating The Avatar

This is the part that will take the most time out of this tutorial so remember not to rush it as it will have an adverse affect on your game. The avatar is the core part of the player’s experience after storyline, because it is the character the player has created. So, to start off with, draw the outline for your head on the stage and colour it. Once you have done this, convert it to a movieclip by selecting it and pressing the F8 key. Make sure that the selection ‘movieclip’ is ticked and name it ‘Avatar’ minus the quotes. Once you have done this, double click the movieclip to enter it’s independant timeline. This is where you want to make a new layer for each part that can be customised. So as an example, if you want different hair styles to be selected, make a new layer and call it ‘Hair’. Changeable glasses? Make a new layer called ‘Glasses’ and so on.

On each layer you have, you will want to create a movieclip that holds all the items in that selection. So as an example if you have a hair layer, draw some hair and convert that to a movieclip. Enter the hair movieclip and make a new frame for each selection. On the glasses layer, draw some glasses, convert it to a movieclip and draw all your different glasses on a new frame inside the glasses movieclip. Make sure you put this code on the first frame inside of each customisable movieclip though:

stop();

Repeat this step for any item you wish to include, on it’s respective layer. Try different skin tones on the base layer, or different eye options. You are restricted by your own imagination.

Making It Work

Now that you have your avatar primed and ready to be customised, you need to assign an instance name to all the movieclips that can be customised. Select the hair movieclip and press F9 to bring up the actions panel for that movieclip. In the bottom left corner of that panel will be a type box that allows you to enter an instance name for the movieclip. Go ahead and type in ‘hair’ without the quotes. Do the same for every other movieclip you have made that has different graphics inside it, giving them the instance name of what they are. I would call my glasses movieclip ‘glasses’. Once you’ve done that for all of your different options, exit and give the main avatar movieclip an instance name of ‘avatar’, minus the quotes.

Button Time

Make an arrow on your main stage, facing right, and convert it to a button by pressing F8 and selecting the ‘button’ option. Double click the button and press F6 on it’s ‘HIT’ frame as this makes it clickable. Exit the button and select it by clicking on it once. Press F9 to bring up the actions panel for the button and add this code to it:

on(release){ //when the button is released
_root.avatar.hair.nextFrame(); //your hair movieclip which is nested inside the avatar movieclip will go to it’s next available frame
}

Now copy and paste the arrow button. Select the newly pasted button and go to Modify > Transform > Flip Horizontal. The button should face the opposite direction now. Enter the actions panel for the new button by hitting F9 again on your keybaord, and add this code:

on(release){ //when the button is released
_root.avatar.hair.prevFrame(); //your hair movieclip which is nested inside the avatar movieclip will go to it’s previous frame
}

As you will notice, it’s almost identical apart from the fact that it’s now asking the hair movieclip to go back a frame when the button is released. If there are no more frames to go back, it won’t visit a previous frame as there is none, so will stay on the last selection, just as if when you press the next button and there’s no more hair to show, it won’t go any further.

Repeat this process by making a new button to control each different customisable movieclip inside the main ‘avatar’ movieclip. Just copy and paste the buttons but be sure to change the instance names on the button’s code other wise it won’t work.

If you need help with this please feel free to post a comment and I’ll get back in touch ASAP.

Download Source File: MediaFire

Sim RPG Tutorial part 2: Assigning Character Stats coming soon!

(8 votes, average: 3.50 out of 5)
 Loading ...

Similar Articles:

• Sim RPG Tutorial part 2: Assiginging Stats with Variables
• Flash Path Finding Tutorial
• Flash Basic Boolean Variable Tutorial