RPG Character Movement – Part 3

July 31st, 2008

This is the third part of the RPG Character Movement tutorial, if you are not caught up, you can check out the other two here: Part 1, Part 2

Today I would like to show how to make our hero jump onto platforms. I know from our gaming experience we usually don’t have a top down RPG hero jumping around, but in this game, we are going to have our hero jump. I will also discuss how we could have our hero swim on a later date. I think having our Hero jump around the stage can be really nice if you want to place some gold, or a hard to reach item. Speaking of which, there was a request for an item inventory which will be in the next tutorial of this RPG development series.

Before we begin making our Hero jump, we are going to have to do several updates and changes to our code and movie clips. If you follow the steps in order you should be just fine. So lets begin.

Open the “Level” movie clip from our library and highlight the water you have on your stage. After you select the water, or all of the water spots depending on how you set your Level up, convert it to a movie clip symbol (press F8 to bring up the menu to do so). Give it the name of “water” for the movie clip symbol, and then back on the stage give it a instance name of “water” as well.

Now lets create a new symbol which will be our “platform” that our Hero can jump on and off of. Hold down the Control (or Command) key and press F8 to bring up the Create a New Symbol menu. Give it a name of “platform” and hit enter. After you create the symbol, select the paint brush and draw a brown platform about the size of the of the water. Once you created the platform open up the “Level” movie clip again and drag and drop the new movie clip “platform” onto the stage. You should have something like this in your “Level” movie clip afterwards:

After you have this set up, lets move onto the code.

In the first frame we have created our hero object. Update the hero object to look like this:

[as]
var hero:Object = new Object();
hero.mc = new Hero();
hero.speed = 2;
hero.jump = false;
hero.jump_current = 1;
[/as]

If you noticed anything different we just added lines 4 and 5 to our hero object so he can get ready to jump around. Line 4 is a boolean which can turn into true or false, and line 5 tells us the current state of the jump our Hero is when jumping. We use this to resize our Hero’s scaleX and scaleY to appear as if he is jumping. We next need to update our keys object so we can detect if the player/user pressed on the jump button (in my case I set the Space Bar as the jump button). Here is our update keys object:

[as]
var keys:Object = new Object();
keys[65] = keys[Keyboard.LEFT] = false;
keys[68] = keys[Keyboard.RIGHT] = false;
keys[87] = keys[Keyboard.UP] = false;
keys[83] = keys[Keyboard.DOWN] = false;
keys[32] = keys[Keyboard.SPACE] = false;
[/as]

All that is different is that we added the last line to the keys object. Next, in the hero_move function, at the top, update the left, right, down, and up movement with these lines of code:

[as]
// move the hero
if(left) {
if(hero.mc.x > 0) {
hero.mc.x -= hero.speed;
}
hero.mc.rotation = 180;
} else if(right) {
if(hero.mc.x < level.mc.width) { hero.mc.x += hero.speed; } hero.mc.rotation = 0; } else if(up) { if(hero.mc.y > 0) {
hero.mc.y -= hero.speed;
}
hero.mc.rotation = -90;
} else if(down) {
if(hero.mc.y < level.mc.height) { hero.mc.y += hero.speed; } hero.mc.rotation = 90; } [/as] These few changes will keep our Hero on the Level movie clip without walking off the stage. And at the very bottom of the hero_move function, remove the following lines:

[as]
// pickup any gold
if(hit_test(hero.mc, level.mc.gold)) {
level.mc.removeChild(level.mc.gold);
}

// collision detection with level mc, we set the third parameter to false so when don’t get a return Boolean value
hit_test(hero.mc, level.mc, false);
[/as]

We are removing these few lines because they will conflict with the new code we are going to place in its place. Here is the code you need to place at the bottom of the hero_move function:

[as]
// get the number of children in the movie clip, and then loop through all movieclips in the level
var num_children:int = level.mc.numChildren;
for(var i:int = 0; i < num_children; i++) { // hol der of mc var mc = level.mc.getChildAt(i); // used to determine if we are hitting the mc var hit_mc:Boolean; // if movie clip has an instance name of platform in it if(mc.name.indexOf("platform") != -1) { // are we hitting the mc? hit_mc = hit_test(hero.mc, mc, true); if(hit_mc) { if(hero.mc.scaleX < 1.5) { hit_test(hero.mc, mc, false); } else if(hero.mc.scaleX > 1.5 && hero.mc.scaleX < 1.8 && hero.jump_current < 0) { if(hit_mc) { hero_jump(false, 1.5); } } } else if(hero.mc.scaleX == 1.5) { hero_jump(false, 1); } } else if(mc.name.indexOf("water") != -1) { hit_test(hero.mc, mc, false); } else if(mc.name.indexOf("gold") != -1) { hit_mc = hit_test(hero.mc, mc, true); if(hit_mc) { level.mc.removeChild(mc); } } } // end for i loop [/as] Now the explanation of the code, keep in mind, the 1.5 is the so called height of the platform which the Hero is jumping on and off of. 2. Declare a variable num_children which holds the number of children, or movie clips in our case, that is inside our Level movie clip
3. Start the loop
6. Declare a variable mc which holds the movie clip we grabbed at that index of our Level movie clip
9. Declare a variable hit_mc which will be a either true or false when we use our function hit_test later in the script
12. A simple if statement to check if our movie clip instance name is “platform”
15. We get either true or false from the function hit_test and return the result in the variable hit_mc
17. If the variable hit_mc is true, continue instead the if statement block
19 – 20. If our Hero’s movie clip scaleX is less than 1.5 keep the Hero on the out side of the movie clip platform. Remember, we have to trick depth perception by scaling our Hero’s X and Y values
21 – 24. If our Hero’s scaleX is between 1.5 and 1.8, and current jumping state less than 0, we continue to line 22 – 23. Which does another if statement to see if we are hitting the movie clip platform inside our Level movie clip. What these few lines of code are doing is when the Hero is falling from his jump, and if the Hero is hitting the platform, or on top of it, have the Hero stop the jump animation and set it at a scaleX and scaleY position of 1.5. The function hero_jump will be discussed shortly
27 – 29. If the Hero’s scaleX is 1.5, reset the Hero’s scaleX value through the hero_jump function
31 – 34. We check to see if the mc.name is the water movie clip in the Level movie clip. If it is, then we don’t want our Hero to be walking on top of it, thus we use the function hit_test again
35 – 43. We check to see if the mc.name is the gold movie clip in the Level movie clip. If it is, we then remove it from the stage.
45. Close the for loop

One last step to do before we have our hero jump around the stage on the platforms, and that is the hero_jump function. Put this function right after the hero_move function we just code done editing.

[as]
// jump the hero. if begin is set to true, will start jumping. the size is so we know what to resize the hero after jumping, or when landing
function hero_jump(begin:Boolean = true, size:Number = 1):void {

if(begin) {

hero.mc.scaleX = hero.mc.scaleY += (hero.jump_current * .1);

if((hero.mc.scaleX && hero.mc.scaleY) < size) { hero.jump_current -= .07; } else { hero_jump(false, size); } } else { hero.mc.scaleX = hero.mc.scaleY = size; hero.jump_current = size; hero.jump = false; } } [/as] Here is the final result if you have done everything properly, press the space bar to jump: [swfobj src="/wp-content/uploads/rpg/part.1.3.swf" width="600" height="400"] And here is the fla file for reference

AS3 > Games > RPG

One Response to “RPG Character Movement – Part 3”

  1. Adam Says:

    hi-

    realize this is a pretty dated post but i’m just starting to go through the tutorial and noticed that in the reference file this little guy still seems to be walking on the water and rocks? is there just an error with what i downloaded? i’m using cs5. thanks for posting such a great tutorial :)