[Tutorial] How to create a basic maplestory flash game

Talk about flash games that you've played or need help with.
User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

[Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:35 am

Tutorial: How to create a simple Maplestory Flash Game
Thanks Gillian for the sticky!

I'm making this in hopes of seeing some new talent to show itself and a more steady inflow of Maplestory related flash games.
I'll be splitting this up into multiple parts, each part requiring the part beforehand.


Day 1 - Grabbing the player sprites
1 - Go to www.maplesimulator.com or open your Bannedstory program.
2 - Create a character.
Image
3 - Click 'File', then 'Save Sprite Sheet'
Image
4 - Choose the character layer, then press save.
5 - Choose or make a directory; You will need to come back to this later.
6 - Browse to the saved file.
7 - Right click the file, then select "Extract Here"
Image
8 - Day one Completed!

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:35 am

Day 2 - Importing and movement

1 - If you completed Day1, you should end up with something like this:
Image
2 - Look in the 'img' folder. If you see numerous pictures of different movements of the character you made then it worked.
3 - Download Adobe Flash CS4 if you haven't already.
4 - Install Adobe Flash.
5 - Open Adobe Flash.
6 - Click "Flash File (Actionscript 2.0)"
Image
7 - Click File->Import->Import to Library
Image
8 - Browse to the saved files in 'Day 1'
9 - Open the 'img' folder
10 - Select all image files, then press "Open"
11 - When it's finished loading, click "Library" on the top, far right corner. You should end up with something like this:
Image
12 - Find "stand1_0_4.png" in the library. Click and drag it to the left, where the white screen is.
Image
13 - The image should have appeared on the 'stage'.
14 - Right click the image. Then press "Convert to Symbol"
Image
15 - In the "Name" field, type in "character" (Without the quotes), then make sure the "Type" field is set to 'MovieClip'. Thirdly, click the bottom middle square next to "Registration"
Image
16 - Click Ok.
17 - If it isn't already, select the image, which is now a 'MovieClip'.
18 - Press F9.
19 - Copy and paste this small code into the newly appeared box:

Code: Select all

onClipEvent(load){
   speed = 3;
}
onClipEvent(enterFrame){
   if(Key.isDown(Key.LEFT)){
      _x -= speed;
   }else if(Key.isDown(Key.RIGHT)){
      _x += speed;
   }
}
20 - Save the file somewhere and press Ctrl + Enter! Use the left and right keys to move the character around.
You should end up with something like this:


User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:36 am

Day 3 - Uber tediousness

1 - Open the source file (It has the extension .fla)
2 - Double click the 'MovieClip' that is the character on the 'stage'
3 - If you completed the step correctly, you should see this in the top left corner:
Image
4 - Right click the picture and select 'Convert to Symbol' OR click the picture and press F8
5 - Name: character.stand, Type: Movieclip, Registration Point: Middle-Bottom
6 - Press F7, this will create a new, empty frame within the first 'MovieClip'.
7 - Drag 'walk1_0_0.png' from the library to the stage.
8 - Right click the picture and select 'Convert to Symbol' OR click the picture and press F8
9 - Name: character.walk, Type: Movieclip, Registration Point: Middle-Bottom
10 - Go to frame 1 in the MovieClip, 'character'.
Image
11 - Double click the created MovieClip beforehand.
12 - Done correctly, you should see this in the top-left corner.
Image
13 - Press F7 and drag 'stand1_1_5.png' onto the stage.
14 - Repeat stage 13 for 'stand1_1_6.png' & 'stand1_1_7.png'.
15 - Go to Frame 2 & zoom in to 400%
16 - Click the 'onion skin' button in the Timeline window, which is under the frames to the left and then click and drag the two brackets that appeared so that the ] bracket is on the current frame and the [ bracket is on the one previous. You should have this:
Image
17 - Align the pictures in each frame so that there is little or no movement between frames. Pressing the enter key will allow you to test this or flicking between each frame.
18 - Go to the library and open up 'character', which is the Movieclip we first created.
19 - Go to the second frame.
20 - Open up the MovieClip in there.
21 - Repeat steps 13 ~ 17 except with images 'walk1_1_1.png', 'walk1_2_2.png' & 'walk1_3_3.png'
22 - Repeat step 18.
22.5 - Align the first frame's MovieClip so that the feet of the character is sitting on the little cross hair.
Image
23 - Align both MovieClips in each frame so they look like they match up with each other (Very little movement between the feet)
24 - Press 'Scene 1' in the top left corner.
Image
25 - Click once on the MovieClip.
26 - Press F9.
27 - Copy and paste this new code in, overwriting what was previously there.

Code: Select all

onClipEvent(load){
   speed = 3;
   stop();
   xscale = _xscale;
}
onClipEvent(enterFrame){
   if(Key.isDown(Key.LEFT)){
      _x -= speed;
      _xscale = xscale;
      gotoAndStop(2);
   }else if(Key.isDown(Key.RIGHT)){
      _x += speed;
      _xscale = -xscale;
      gotoAndStop(2);
   }else{
      gotoAndStop(1);
   }
}

28 - Press Ctrl + Enter. Move around, you may notice that either the character's movement is too blocky, or way too fast.
29 - Press 'Scene 1' and click the stage, so that nothing is selected.
30 - Look to the right, and click the properties tab. Then click and change the FPS (Frames per second) to anywhere between 25 ~ 60, but I recommend somewhere between 30~45.
Image
31 - Go to the library and open up 'character.stand'
32 - Click the first frame and then press F5 10 times. Do the same for each frame. You should end up with something like:
Image
33 - Press Enter. If you're happy with the tempo of the movement, then do the same for 'Character.walk'. If not, delete or add more frames until you are happy.
34 - Ctrl + Enter! You should end up with something like:

35 - Day 3 Completed!

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:36 am

Day 4 - A Map

1 - Go to www.perioncorner.com & download some background sprites.
2 - Download the preferred background (Including 'Tiles' for platforms)
2.25 - There are many pre-made background resource websites on the internet. Bannedstory Backgrounds is a good example of this.
2.5 - You may wish to create separate folders for each type of file (Background tiles and platform tiles).
3 - Import the 'Tiles' into your source document.
Image
4 - Go to the library, and look in the bottom right corner. Click the little icon that looks like a folder twice. This will create two folders. Select and drag the images relating to the character into one, and insert the platform images into the other. Rename the folders if you wish.
Image
5 - You should end up with something like:
Image
6 - Drag the images that look like the top of the platforms onto the stage roughly.
Image
7 - Align the images so they look nicely together.
Image
8 - Click and drag so they you select them all, then convert them to a symbol. Name it anything you want, but know that it's helpful to have a name that represents what the Movie Clip contains. I named mine 'ground' ;)
9 - Select the new MovieClip, 'ground' & look to the right, at the properties tab. See the field market 'Instance name'? Type 'ground' in there without the quotes :) This sets the MovieClips 'name' to 'ground', which can then be referred to with code so other Movie Clips can interact with it easily.
NOTE: The picture below is incorrect, you should name the Movie Clip 'ground', without the quotes. Not 'gravity'.
Image
10 - Select the character. Open the Actionscript window. Copy this new code in, overwriting the previous code:

Code: Select all

onClipEvent(load){
   speed = 3;
   stop();
   xscale = _xscale;
   yVel = 0;
   gravity = 0.5;
}
onClipEvent(enterFrame){
   yVel +=gravity;
   _y += yVel;
   if(this.hitTest(_root.ground)){
      yVel = -gravity;
   }
   if(Key.isDown(Key.LEFT)){
      _x -= speed;
      _xscale = xscale;
      gotoAndStop(2);
   }else if(Key.isDown(Key.RIGHT)){
      _x += speed;
      _xscale = -xscale;
      gotoAndStop(2);
   }else{
      gotoAndStop(1);
   }
}
Before you may have been able to easily understand the code, as if(Key.isDown(Key.LEFT)){ is pretty self-explanatory, if the left key is down, do the next set of actions. _x -= speed; is simply stating that the _x property of the object should be decreased by the variable speed. Now you may ask, what is _x? Well, if you've ever done graphs in maths and learnt about the x and y axis, then you already know, it's the same thing, but the y axis is inverted. gotoAndStop(1); is making the frame in the Movie Clip change to 1, and not play after that. You may have noticed a new couple of lines, namely if(this.hitTest(_root.ground)){. This is saying "If this Movie Clip is touching the object named 'ground', do these actions:".
11 - Export. You should end up with something like this:

12 - Now we're going to input jumping, so the player will be able to make the character jump whenever they want to. Copy this code and put it into the character:

Code: Select all

onClipEvent(load){
   speed = 3;
   stop();
   xscale = _xscale;
   yVel = 0;
   gravity = 0.5;
   jumping = false;
   jumpPower = 7;
}
onClipEvent(enterFrame){
   yVel +=gravity;
   _y += yVel;
   if(this.hitTest(_root.ground)){
      yVel = -gravity;
      jumping = false
   }
   if(Key.isDown(Key.UP) && jumping == false && this.hitTest(_root.ground)){
      yVel = -jumpPower;
      jumping = true
   }
   if(Key.isDown(Key.LEFT)){
      _x -= speed;
      _xscale = xscale;
      gotoAndStop(2);
   }else if(Key.isDown(Key.RIGHT)){
      _x += speed;
      _xscale = -xscale;
      gotoAndStop(2);
   }else{
      gotoAndStop(1);
   }
}
if(Key.isDown(Key.UP) && jumping == false && this.hitTest(_root.ground)){ is saying "If the Up key is being pressed & the variable 'jumping' equals false and the character is touching the ground, do this:". We want to check that the character already hasn't jumped and is on the ground or else they could simply fly away! Try it, delete the && jumping == false && this.hitTest(_root.ground) and export, your character will fly around and away!
13 - You may have noticed that the character is not in the jumping motion when he is in the air, but is walking as if he/she was on the ground. The solve this, we need to go 'into' the character Movie Clip (Double Click) and add another frame to the end (By selecting the last frame and pressing F7).
14 - You should end up with:
Image
15 - Go to the library, find the image that shows the character jumping and drag it on the stage.
16 - Align the image of the character jumping so it's close with the previous frames. You may wish to use the onion skin for this.
17 - Copy this new code into the character:

Code: Select all

onClipEvent(load){
   speed = 3;
   stop();
   xscale = _xscale;
   yVel = 0;
   gravity = 0.5;
   jumping = false;
   jumpPower = 7;
}
onClipEvent(enterFrame){
   yVel +=gravity;
   _y += yVel;
   if(this.hitTest(_root.ground)){
      yVel = -gravity;
      jumping = false
   }
   if(Key.isDown(Key.UP) && jumping == false && this.hitTest(_root.ground)){
      yVel = -jumpPower;
      jumping = true
      gotoAndStop(3);
   }
   if(Key.isDown(Key.LEFT)){
      _x -= speed;
      _xscale = xscale;
      if(jumping == false){
         gotoAndStop(2);
      }
   }else if(Key.isDown(Key.RIGHT)){
      _x += speed;
      _xscale = -xscale;
      if(jumping == false){
         gotoAndStop(2);
      }
   }else if(jumping == false){
      gotoAndStop(1);
   }
}
gotoAndStop(3); was added in to the section where if(Key.isDown(Key.UP) && jumping == false && this.hitTest(_root.ground)){ returns true, because we want the Movie Clip to be set to frame 3 (The jumping frame) when the character jumps. if(jumping == false){ was added into the if statements that trigger the key presses because we don't want the frame to switch to the walking frame when he/she is jumping. if(jumping == false){ was added onto because if it wasn't there, and if the character was in the air, jumping, but the left or right keys weren't being pressed, it would look like he is standing in the air!
18 - Export! Day 4 Completed!


User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:36 am

Day 5 - A Mobile Map

1 - Import the background pictures.
2 - Create two new layers by pressing the layer button in the bottom left corner of the Time line window. It is circled in the picture below. Then drag one of the newly created layers above the layer in which the character and the ground is in, and one under it. Look to the right of the names, at the frames. A frame with just a white outline and an unfilled circle means it is empty. Name the layers like in the picture:
Image
3 - Create a folder for the newly imported pictures in the library.
4 - Drag the pictures into the newly created folder.
5 - Decide which pictures belong in the foreground (In-front of the player) and which ones belong in the background. The ones in the foreground usually are a bit darker in colour and are generally larger.
6 - Select the empty frame in the layer 'Foreground'
7 - Drag the pictures that you decided belong into the foreground onto the stage and position them as you wish.
Image
8 - Look at the Time line panel. You may notice a little eye and a lock symbol. Next to each layer, there is a dot. If you press the dot next to the 'Player' layer that is under the eye, that will make the layer invisible, which you can then undo later. The dot to the right of that will 'lock' the layer so you can still see it, but you cannot edit it. This is useful when you're dealing with multiple layers and many objects in the same vicinity.
Image
9 - Select the empty frame 'background'
10 - Repeat step 7 except for the background images.
Image
11 - Select the player layer. You may wish to lock the other layers.
12 - Open the 'ground' Movie Clip and add 'more of a map' to complete the look.
Image
13 - You may wish to change the stage size. I like 800 x 420, but don't go any further then that because most websites don't allow larger dimensions.
Image
14 - You may have made the map larger then the background and foreground extends like I have. If you have, you can extend it.
Image
15 - Export. You will notice that your character will immediately get stuck and will be able to fly upwards with the jump button. This is because of the hitTest method we used. It was merely a basic hitTest, and only tested the 'boundry box' collisions between the two objects. To fix this, copy this new code into the character:

Code: Select all

onClipEvent(load){
   speed = 3;
   stop();
   xscale = _xscale;
   yVel = 0;
   gravity = 0.5;
   jumping = false;
   jumpPower = 7;
}
onClipEvent(enterFrame){
   yVel +=gravity;
   _y += yVel;
   if(_root.ground.hitTest(_x, _y, true)){
      yVel = -gravity;
      jumping = false
      while(_root.ground.hitTest(_x, _y, true)) _y -= 0.2;
   }
   if(Key.isDown(Key.UP) && jumping == false && _root.ground.hitTest(_x, _y+1, true)){
      yVel = -jumpPower;
      jumping = true
      gotoAndStop(3);
   }
   if(Key.isDown(Key.LEFT)){
      _x -= speed;
      _xscale = xscale;
      if(jumping == false){
         gotoAndStop(2);
      }
   }else if(Key.isDown(Key.RIGHT)){
      _x += speed;
      _xscale = -xscale;
      if(jumping == false){
         gotoAndStop(2);
      }
   }else if(jumping == false){
      gotoAndStop(1);
   }
}

16 - Export. You should end up with something like:

You should notice that the character will 'snap up' at some locations when he is next to the ground. Again, this is a hitTest problem. _root.ground.hitTest(_x, _y, true) is checking if the 'real' ground is touching the character's x and y point. It only return true if the player's co-ordinates is touching the 'true' ground because of the third parameter, 'true'. This is setting the 'shapeflag' variable in the hitTest procedure to true, and is like 'chopping away' at the 'boundary box' until it shows the real boundaries. Eg.
Image
Basically a hitTest will return true if the object is within the red lines in each picture. Hopefully that was clear enough :-?
17 - Select the Movie Clip 'ground' and delete the instance name, 'ground'. It should have none now.
18 - Create an empty Movie Clip (Ctrl + F8). Name is 'trueGround'.
19 - Go to the stage.
20 - Drag 'trueGround' from the library onto the stage.
21 - Open up, or go into, 'trueGround'.
22 - Draw in whatever colour you want, the 'true' ground, where the character should and can stand, and a little below it.
Image
23 - Go to the first frame in that Movie Clip and open the actions panel. type in _alpha=0;
23 - Go to the stage. Name that Movie Clip 'ground' (Without the quotes)
24 - Click here & download the .fla.
25 - Open the .fla marked 'vCam'
26 - Copy the only symbol on the stage onto your own project.
27 - Set the width and height properties of the newly acquired symbol to the same dimensions as the stage.
28 - Select the character. Give him the instance name of 'player' without the quotes.
29 - Select the vCam. Give it these actions:

Code: Select all

onClipEvent(enterFrame){
   _x = _root.player._x
   _y = _root.player._y
}

30 - Select the Player. Replace the current actions with these:

Code: Select all

onClipEvent(load){
doingAction = false
   speed = 3;
   stop();
   xscale = _xscale;
   yVel = 0;
   gravity = 0.3;
   jumping = false;
   jumpPower = 7;
   _quality = "LOW";
}
onClipEvent(enterFrame){
   touchedGround = false
   checkGround()
   yVel += gravity;
   _y += yVel;
   if(jumping) checkGround();
   if(Key.isDown(Key.LEFT)){
      _x -= speed;
      _xscale = xscale;
      if(jumping == false){
         gotoAndStop(2);
      }
   }else if(Key.isDown(Key.RIGHT)){
      _x += speed;
      _xscale = -xscale;
      if(jumping == false){
         gotoAndStop(2);
      }
   }else if(jumping == false){
      gotoAndStop(1);
      checkGround();
   }
   if(Key.isDown(Key.UP) && jumping == false && touchedGround){
      yVel = -jumpPower;
      jumping = true
      _y -= jumpPower/2;
      gotoAndStop(3);
   }
}

31 - 'Enter' or 'Go into' the player. Click the first frame. Enter in these Actions:

Code: Select all

function checkGround():Void{
   if(_root.ground.hitTest(_x, _y+1, true) && yVel >= 0) {
      yVel = -gravity*2;
      jumping = false
      touchedGround = true
   }
   while(_root.ground.hitTest(_x, _y-1, true)){
      _y -= 0.1;
   }
}

32 - Go to the main Timeline. Select the entire foreground layer. Convert it to a symbol and give it an instance name of 'foreBg' (Without the quotes).
33 - Do the same with the background but name it 'backBg' (Without the quotes).
34 - Give both Movie Clips these actions:

Code: Select all

onClipEvent(load){
   offSetX = 0;
}
onClipEvent(enterFrame){
   _x = _root.player._x + offSetX;
}

35 - In the Player actions, paste this under line, 19, the line with _xscale = xscale;:

Code: Select all

_root.foreBg.offSetX += speed*1.5;
      _root.backBg.offSetX += speed/2;

36 - Do the same for these actions but under line 27:

Code: Select all

_root.foreBg.offSetX += speed*1.5;
      _root.backBg.offSetX += speed/2;

37 - Export and you should end up with something like this:

38 - Meddle with some of the values of the player's actions. Figure out what controls what to gain a better understanding of how to code works. I can't be bothered explaining it because whilst this isn't the best engine ever, it works and you can rely upon it. It has it's advantages and it's disadvantages, as well as some little glitches (Like vibrating up and down) because it makes slopes work pretty simply. In that retrospect this movement engine is better then the one in "Treasure Hunt" & "A Pirate's Fury" because I used a cheap method!
39 - You may wish to import a background (I don't have one, I changed my background to black instead). Try and see if you can make it follow the player like the vCam does. (No cheating now! Don't put it in the vCam!)

Tomorrow: Fine-tuning & the first skill.

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:36 am

Day 6 - Tweeking & The first skill

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.
Image
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.
Image
3 - Delete your two markers.
4 - Add

Code: Select all

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: Select all

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.
Image
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: Select all

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:

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: Select all

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.
Image
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!)
Image
32 - Add

Code: Select all

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: Select all

_parent.stopAttacking()
Before:
Image
After:
Image
34 - Add this code to the first frame of your character Movie Clip:

Code: Select all

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: Select all

if(Key.isDown(Key.UP) && jumping == false && touchedGround){
and replace it with

Code: Select all

if(Key.isDown(Key.UP) && !jumping && touchedGround && !doingAction){

36 - Add this:

Code: Select all

if(Key.isDown(65) && !doingAction){
      doingAction = true;
      gotoAndStop(Math.round(Math.random()*6)+4);
   }
Before:

Code: Select all

 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:

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.png
41 - Drag it onto the stage.
42 - Convert it to a Movie Clip. Name it 'attack.powerStrike'.
Image
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: Select all

stop();

52 - The Movie Clip's timeline should resemble this:
Image
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.
Image
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? ;)

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!

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:37 am

Day 7 - An Enemy!

1 - Open up Banned Story.
2 - Select Monster Simulator
3 - Make a mob Layer
4 - Choose a Monster! I chose 'Rellik'.
Image
5 - File->Save Sprite Sheet to your source directory.
6 - Extract the downloaded Zip.
7 - Open up your source document (.fla)
8 - Import to library -> The images you previously extracted.
9 - Create a folder in the library to store these images in for organization purposes.
10 - Drag the images into the folder.
11 - Drag 'stand_0_0.png' of the monster you imported onto the stage.
12 - Convert it to a Symbol -> Movie Clip
13 - Open the Movie Clip by double-clicking it.
14 - Convert the image you see there to a Movie Clip. Name it 'Monster.stand'
15 - Create frames and place the other images in the animation sequence as described earlier on in the tutorial. You should be getting used to this as it is routine part of Maplestory flash game development :)
16 - Exit the 'child' Movie clip so you are in the Movie Clip which has a Movie Clip within it.
Image
17 - Create enough frames to cater for all the animation sequences that make up the monster. Drag the first frame (Or sprite, whatever you wish to call it) of each animation sequence into an individual frame. BUT your sequence of frames must be this:
Frame 1 - Standing
Frame 2 - Walking
Frame 3 - Hit/Pushed
Frame 4 - Dying
Frame 5 - Attack 1
Frame 6 - Attack 2
Frame 7 - Attack 3...
If your monster does not have any one of these sequences, simply leave the frame blank.
18 - Convert each frame's content into a Movie Clip (Apart from frame 1; You have already done that!)
19 - Repeat step 15 for each Animation sequence.
20 - Add this script to your monster:

Code: Select all

onClipEvent(load){
   stop();
   speed = 3;
   gravity = 0.3;
   yVel = 0;
   xscale = _xscale;
   doingAction = 0;
   timerVar = 200; // Roughly 4 Seconds
   angry = false
}
onClipEvent(enterFrame){
   timerVar --
   touchedGround = false
   if(_root.ground.hitTest(_x, _y+1, true) && yVel >= 0) {
      yVel = 0;
      remYVel = 0;
      touchedGround = true
      while(_root.ground.hitTest(_x, _y-1, true)) _y -= 0.1;
   }
   yVel += gravity;
   _y += yVel;
   switch(doingAction){
      case 0:
            if(timerVar<=0){
               if(angry){
               }else{
                  doingAction = 1;
                  if(Number(random(100)) > 50) _xscale = xscale; else _xscale = -xscale;
                  timerVar = random(100)+100;
                  gotoAndStop(2);
               }
            }
            break;
      case 1: if(_xscale == xscale) _x -= speed; else if(_xscale == -xscale) _x += speed;
            if(timerVar<=0){
               if(angry){
               }else{
                  gotoAndStop(1);
                  doingAction = 0
                  timerVar = random(60)+100;
               }
            }
            break;
      default:break;
   }
}
You should end up with something like:


Tomorrow: Collisions between the character and the enemy.

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 10:37 am

Day 8 - Collisions between the player and the enemy

1 - Change the

Code: Select all

doingAction = 0;
in your enemy to

Code: Select all

doingAction = 1;

2 - Add this to the onClipEvent(load){ segment of your enemy:

Code: Select all

angry = false;
pushPow = 0;

3 - Add this:

Code: Select all

case 3:   _x += pushPow;
            pushPow *= 0.93;
            if(pushPow > -0.5 && pushPow < 0.5) {
               pushPow = 0;
               doingAction = 2;
               if(Number(random(100)) > 50) _xscale = xscale; else _xscale = -xscale;
               timerVar = random(100)+100;
               gotoAndStop(2);
            }
            break;
before

Code: Select all

default:break;
In your enemy code.
4 - Add

Code: Select all

_parent.hitEnemy();
to the frame in each Movie Clip that shows the character actually swinging the weapon (You only need to put it once in each action!).
Image
5 - Add this function to the first frame inside your character:

Code: Select all

function hitEnemy(Void):Void{
   switch(_root.enemy._currentframe){
      case 1:
      case 2:
      case 3: if(this.hitTest(_root.enemy)){
               with(_root.enemy){
                  doingAction = 3;
                  angry = false
                  pushPow = _root.player._x < _x ? 7: -7;
                  _xscale = _root.player._x < _x ? xscale: -xscale;
                  gotoAndStop(3);
               }
            }
            break;
      default:
            break;
   }
}

6 - Add this line to somewhere within the onClipEvent(load){ block on your character:

Code: Select all

xHit = 0;

7 - Add this to the end of the onClipEvent(enterFrame){ block of your enemy, just before the last bracked ( } )

Code: Select all

if(this.hitTest(_root.player) && _root.player.invincibilityTimer <= 0){
   _root.player.xHit = random(16) - 8;
   _root.player.yVel = random(6) * -1 - 4;
   _root.player.jumping = true;
   _root.player.invincibilityTimer = 150; // About 3 seconds
   if(_root.player._currentframe <= 3) _root.player.gotoAndStop(3);
}

8 - Add this somewhere in your character's onClipEvent(load){ block:

Code: Select all

invincibilityTimer = 0;

9 - Add this somewhere in your character's onClipEvent(enterFrame){ block:

Code: Select all

if(invincibilityTimer > 0) invincibilityTimer --;
   if(xHit !== 0){
      _x += xHit;
      xHit *= 0.95;
      if(xHit < 0.8 && xHit > -0.8) xHit = 0;
   }

10 - Now because we're using Power Strike we need to add in the effect of when the enemy gets hit by it :)
11 - Drag the first image from the image sequence that shows the 'getting hit' effect to the stage. It will be something like 'hit 0_0_0.png'.
12 - Convert it to a Movie Clip.
13 - You know the drill. Create the animation.
14 - Delete it off the stage.
15 - Go into the Enemy's Movie Clip.
16 - Create a new layer that spans throughout all the frames.
17 - Drag in from the library the Movie Clip that holds the animation of the Power strike hitting an enemy, the one you just created.
18 - Give it the instance name 'powerHit' (Without the quotes)
19 - Go into the Movie Clip. Add another empty frame to the end of the animation and give that frame this code:

Code: Select all

stop();

20 - Exit the Movie Clip so you are within the enemy Movie Clip but can see the Movie Clip you exited from.
21 - Give 'powerHit' these actions:

Code: Select all

onClipEvent(load){
   gotoAndStop(13);
   xscale = _xscale;
}

22 - Replace 13 with the frame number inside the Movie Clip that has the actions

Code: Select all

stop();
in step 19.
23 - Go into your character.
24 - Select frame 1.
25 - Look for this line:

Code: Select all

_xscale = _root.player._x < _x ? xscale: -xscale;

Add this below it:

Code: Select all

powerHit._xscale = _root.player._x < _x ? xscale: -xscale;
powerHit.gotoAndPlay(1);

26 - Export! You should end up with something like this:


And so this tutorial has come to an end. As you can see making a game can be both easy and excruciatingly hard, but if you persist you can really make some awesome games, and have a lot of fun on the way. Coding for games is all about "If this action happens, do this next" and is mostly just shifting objects around the screen like this one. I hope some of you will pursue making the game after the tutorial and finish it, as I would love to see and play what you produce. Happy Easter to you all. I enjoyed making this, as it was something worthwhile to do. I will continue to create this game the tutorial has started ;). Be creative with what you make, and enjoy it. There's nothing more fulfilling then hearing people say that they enjoyed the game.

User avatar
chobbilight
Legend
Posts: 6536
Joined: Thu Feb 12, 2009 4:09 pm
Location: Rotterdam, Netherlands
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby chobbilight » Sat Apr 04, 2009 1:00 pm

i cant do save sprite sheet

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sat Apr 04, 2009 1:03 pm

chobbilight wrote:i cant do save sprite sheet

Why not? o.o
If you're using the offline version, use the one on maplesim.com

User avatar
poke1024
Papulatus
Posts: 1161
Joined: Sat Jan 10, 2009 5:55 pm
Location: United States
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby poke1024 » Sat Apr 04, 2009 4:46 pm

when you save sprite, what do you do? what do you extract?

User avatar
chobbilight
Legend
Posts: 6536
Joined: Thu Feb 12, 2009 4:09 pm
Location: Rotterdam, Netherlands
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby chobbilight » Sat Apr 04, 2009 8:37 pm

ok i did but i cant find the image i saved

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sun Apr 05, 2009 1:19 am

poke1024 wrote:when you save sprite, what do you do? what do you extract?
There should only have been one file saved. If not, you've chosen the wrong option (Save picture instead of save spritesheet). You extract the single file it downloaded.
chobbilight wrote:ok i did but i cant find the image i saved
Silly you. I told you need to come back to it later. Try again, but this time remember where you save it!

User avatar
crackerboi
Snail
Posts: 1
Joined: Sun Mar 08, 2009 8:51 pm

Re: [Tutorial] How to create a basic maplestory flash game

Postby crackerboi » Sun Apr 05, 2009 4:21 am

When I try to download flash, it says i need an account

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Sun Apr 05, 2009 4:25 am

crackerboi wrote:When I try to download flash, it says i need an account
Then make one :)
Adobe wrote:New to Adobe?

Create an Adobe Account
It´s free and only takes a minute

Get complete access to:

* Free trial downloads

User avatar
chobbilight
Legend
Posts: 6536
Joined: Thu Feb 12, 2009 4:09 pm
Location: Rotterdam, Netherlands
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby chobbilight » Sun Apr 05, 2009 9:26 am

Montycarlo wrote:
poke1024 wrote:when you save sprite, what do you do? what do you extract?
There should only have been one file saved. If not, you've chosen the wrong option (Save picture instead of save spritesheet). You extract the single file it downloaded.
chobbilight wrote:ok i did but i cant find the image i saved
Silly you. I told you need to come back to it later. Try again, but this time remember where you save it!

yeah i made a new map to save it in..... but i cant c it.....but ill try it mybe your write

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Mon Apr 06, 2009 1:53 am

Day 3 Added!

User avatar
shadowpend
Slime
Posts: 42
Joined: Wed Apr 01, 2009 1:00 am
Location: Earth?
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby shadowpend » Mon Apr 06, 2009 7:42 pm

Wow, this is what people do to make flash games? No wonder why no flash games are perfect ^-^

User avatar
Montycarlo
Zombie Mushmom
Posts: 473
Joined: Sat Jan 10, 2009 12:30 am
Location: Melbourne, Australia.
Contact:

Re: [Tutorial] How to create a basic maplestory flash game

Postby Montycarlo » Wed Apr 08, 2009 4:49 am

Day 4 & 5 Added!
I want to see some prototypes soon haha ^^

User avatar
maplefan2
Slime
Posts: 58
Joined: Fri Feb 27, 2009 8:56 am
Location: in the land of milk and cheese jk always moving so i gotta say the world!!!!!!!!!!!!!!!!!!!!

Huge fan

Postby maplefan2 » Wed Apr 08, 2009 12:14 pm

Zomg im your biggest fan!!!!! ty so mutch ive been wondering on how you make the games!! (F2)


Return to “Flash Games”

Who is online

Users browsing this forum: Google [Bot] and 3 guests