Day 6 - Tweeking & The first skill[size=95]1 - You may have noticed that you can actually walk off the map and fall into nothingness, to rectify this, we need to set boundaries in which the character can only occupy to prevent him/her from Falling off the edge. Look into your 'ground' Movie Clip. Scroll all the way to the left and all the way to the right where the ground starts and ends. draw a little marker for each point. You should allow a little extra.
2 - Click each point. Write down somewhere (Notepad is awesome!) the x and y locations of each point (Round off to the nearest integer).
Note: The below picture is silly. You only need the x positions.
3 - Delete your two markers.
4 - Add
- Code:
-
if(_x < mostLeft + _root.ground._x) _x = mostLeft + _root.ground._x; else if(_x > mostRight + _root.ground._x) _x = mostRight + _root.ground._x;
Under
onClipEvent(enterFrame){ in your character actions.
5 - Add
- Code:
-
mostLeft = ???;
mostRight = ???;
Somewhere in the
onClipEvent(load){ statement in your character actions. It doesn't matter where, it just needs to be in that segment. Remember to replace the '???' with the values you obtained earlier with the points you drew up. Replace the first one with the most left point (Or the smallest number) and the second '???' with the highest number. Yours will not be the same as mine.
6 - Export and try and walk off the edges off the map. If you did the previous steps right, you shouldn't be able to!
7 - You may have noticed that the foreground and background move if you meet the left-most and right-most restrictions if your character is still walking. I'm not going to tell you how to fix this; it's your job!
8 - Make a backup of your source file. Then twiddle with the code and attempt to fix the 'twitching' bug like I have
If you screw up, don't worry; you made a backup, right?
9 - Give the Movie Clip of the visual camera the instance name 'vCam' & add this line before the final line in it's actions:
- Code:
-
if(_root.vCam._x - _root.vCam._width/2 - _root.ground._x < _root.player.mostLeft) _root.vCam._x = _root.player.mostLeft + _root.vCam._width/2 + _root.ground._x; else if(_root.vCam._x + _root.vCam._width/2 - _root.ground._x > _root.player.mostRight) _root.vCam._x = _root.player.mostRight - _root.vCam._width/2 + _root.ground._x;
Yes, I know it's a big giant line, but it's actually... 4. I've cut out the opening and closing statement brackets ( { & } ) Because I was only using one line between them. This is valid if you are using one line and only line only.
10 - Export. You should notice that if you go to the edges of the map, you won't be able to see where the ground ends because the digital camera doesn't move.
11 - If the edges of the foreground were visible if you moved all the way to the left (Like in my previous swf file) then:
A) You can make it longer.
B) Make a script that will test if the _x property (+ or -) the width divided by 2 (Assuming the contents is exactly in the middle of the clip) is smaller than the 'vCam' 's _x property (+ or -) the 'vCam' 's width/2. If it returns true, set the _x property of the object to a suitable place.
I did both, you may only wish to do one.
12 - By Now, your game should look something like this:
[flash=800,420]
http://www.montycarlo.com.au/mapleAnime/Tutorials/Day6/source.5.swf[/flash]Please keep in mind that I did a fair bit of fine-tuning to the code to get rid of some glitches and annoyances. They probably still occur in yours (Such as the 'vibrating' glitch). It's up to you to fix them.
13 - As you may have noticed, I've added a background and changed my character. Both can be done easily.
14 - If you jump from a high ledge onto a low ledge, you may fall through the floor. This is a common occurrence in many flash games because people don't realize how it happens or why. I'm going to tell you how it happens and hopefully you will devise your own way of fixing it. A pretty cheap work-around it to make the ground thicker, but that's really only postponing the problem, but it's fine if you don't have many large ledges.
- Code:
-
yVel += gravity;
_y += yVel;
Within the character Movie Clip (MC), you'll notice these two lines somewhere early in the code.
yVel += gravity; means "Add the value of '
gravity' to the variable '
yVel'". Then the next line is
_y += yVel;, where the variable 'yVel' (y-Velocity) is being added onto the _y property of the object. Then later on a hitTest statement is being performed. This is quite problematic if the variable '
yVel' becomes larger then the thickness of the ground, because it will skip it altogether.
15 - Go to the online
Bannedstory Simulator.
16 - Open the character simulator.
17 - Make a Skill layer.
18 - Choose a simple, easy skill, I chose "Power Strike". I highly recommend you choose this for your first one as the rest of this tutorial will only apply to this skill.
19 - Save
Sprite Sheet to your source directory.
20 - Unzip the downloaded file.
21 - You may wish to rename the acquired folder to an appropriate name.
22 - Import to Library-> Your extracted sprites of "Power Strike"
23 - Organize them in the library as you feel appropriate.
24 - Go 'into', or open, your Character Movie Clip.
25 - Create a new empty frame. You should now have four.
26 - Choose one of the melee animations of your character in the library. Choose the first image in that sequence.
27 - Drag it onto the stage.
28 - Convert it into a Movie Clip.
29 - Create frames and add the rest of the images in the newly created Movie Clip of the animation sequence appropriate to the action that you chose. Then align them together the same way you did with the Stand & Walk animations previously.
30 - You may wish to create more animation clips if you want random attacks (In Maplestory, it's random which attack movement you get; Stabbing, swinging...)
31 - Align all the Movie Clips in the character Movie Clip so there is little or appropriate movement between the feet between frames (Remember to keep the feet above the little cross-hair!)
32 - Add
- Code:
-
_parent.stopAttacking()
somewhere in the
onClipEvent(load){ statement of the character.
33 - Within each attacking Movie Clip within the character, add another frame to the end and then add these actions to the created frame:
- Code:
-
_parent.doingAction = false
Before:
After:
34 - Add this code to the first frame of your character Movie Clip:
- Code:
-
function stopAttacking(Void):Void{
doingAction = false;
if(jumping && !_root.ground.hitTest(_x, _y+1, true)) {
jumping = true;
gotoAndStop(3);
}else jumping = false;
}
35 - Go to this line:
- Code:
-
if(Key.isDown(Key.UP) && jumping == false && touchedGround){
and replace it with
- Code:
-
if(Key.isDown(Key.UP) && !jumping && touchedGround && !doingAction){
36 - Add this:
- Code:
-
if(Key.isDown(65) && !doingAction){
doingAction = true;
gotoAndStop(Math.round(Math.random()*6)+4);
}
Before:
- Code:
-
if(Key.isDown(Key.LEFT)){
37 - See the
Math.round(Math.random()*6)? Replace the 6 with how many attacking frames you have inside your character Movie Clip.
38 - Export. You should end up with something resembling this:
[flash=800,420]
http://www.montycarlo.com.au/mapleAnime/Tutorials/Day6/source.75.swf[/flash]I did a bit of tweaking again. See if you can match it! Press A to attack normally.
39 - Now we're going to add in the skill, "Power Strike" so you can see the visuals.
40 - Remember the sprites of "Power Strike" that we imported earlier? Grab the first one marked
effect_0_2.png41 - Drag it onto the stage.
42 - Convert it to a Movie Clip. Name it 'attack.powerStrike'.
43 - Open the newly created Movie Clip.
44 - Create a frame for each picture in the animation sequence, 'effect' (If you didn't rename the pictures it should have the prefix 'effect' followed by _x_y.png)
45 - Add in each image
46 - Align the images so they look right when played through (Press the enter key to test this)
47 - Go to each frame and press F5 enough times so the animation isn't rushed and progresses nicely. (I did it twice for each frame)
48 - Go to the last frame in the Movie Clip.
49 - Press F5 once, then select the new extension of the frame.
50 - Press F7.
51 - Give the frame this action:
- Code:
-
stop();
52 - The Movie Clip's timeline should resemble this:
53 - Delete the Movie Clip from the stage.
54 - Go into the Character Movie Clip.
55 - Click the new layer button (There is a picture of this earlier on).
56 - Select the frame (But in the newly created layer) where the attacks start in the Character's Movie Clip (It should be frame 4)
57 - Press F7.
58 - Drag 'attack.powerStrike' onto the stage and position it so that it focuses in on the character.
59 - Congratulations! You have created your first skill, Power Strike! Export, and you should see that if you press the attack button it will start the character animation of him/her attacking and also 'charging up' like Power Strike does! You may want a separate button to differ between normal attacking and using Power Strike, but really, wouldn't you want to use Power Strike all the time?
[flash=800,420]
http://www.montycarlo.com.au/mapleAnime/Tutorials/Day6/source.swf[/flash]These 'Days' are getting increasingly hard to create, consuming more and more of my time as if it was a geometric sequence X.x
Tomorrow: An Enemy!
[/size]