MapleIndex
Would you like to react to this message? Create an account in a few clicks or log in to continue.



 
HomeLatest imagesSearchRegisterLog in

 

 [Tutorial] How to create a basic maplestory flash game

Go down 
3 posters

DID YOU LIKE THIS TUT (better be a yes)
YES
[Tutorial] How to create a basic maplestory flash game Vote_lcap0%[Tutorial] How to create a basic maplestory flash game Vote_rcap
 0% [ 0 ]
YES YES YES
[Tutorial] How to create a basic maplestory flash game Vote_lcap0%[Tutorial] How to create a basic maplestory flash game Vote_rcap
 0% [ 0 ]
OMFG SO ROCKING YES
[Tutorial] How to create a basic maplestory flash game Vote_lcap100%[Tutorial] How to create a basic maplestory flash game Vote_rcap
 100% [ 2 ]
NO
[Tutorial] How to create a basic maplestory flash game Vote_lcap0%[Tutorial] How to create a basic maplestory flash game Vote_rcap
 0% [ 0 ]
NO IMA GONNA KILLYOU
[Tutorial] How to create a basic maplestory flash game Vote_lcap0%[Tutorial] How to create a basic maplestory flash game Vote_rcap
 0% [ 0 ]
Total Votes : 2
 

AuthorMessage
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: [Tutorial] How to create a basic maplestory flash game   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:41 am

[size=100]Tutorial: How to create a simple Maplestory Flash Game[/size]

[size=95]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.[/size]

[size=100]Day 1 - Grabbing the player sprites[/size][size=95]
1 - Go to www.maplesim.com or open your Bannedstory program.
2 - Create a character.
[Tutorial] How to create a basic maplestory flash game Pic1
3 - Click 'File', then 'Save Sprite Sheet'
[Tutorial] How to create a basic maplestory flash game Pic2
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"
[Tutorial] How to create a basic maplestory flash game Pic3
8 - Day one Completed![/size]


Last edited by zhulov3rz on Thu Apr 23, 2009 4:21 am; edited 1 time in total (Reason for editing : Added poll)
Back to top Go down
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Day 2   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:41 am

Day 2 - Importing and movement
[size=95]
1 - If you completed Day1, you should end up with something like this:
[Tutorial] How to create a basic maplestory flash game Pic1
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)"
[Tutorial] How to create a basic maplestory flash game Pic2
7 - Click File->Import->Import to Library
[Tutorial] How to create a basic maplestory flash game Pic3
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:
[Tutorial] How to create a basic maplestory flash game Pic4
12 - Find "stand1_0_4.png" in the library. Click and drag it to the left, where the white screen is.
[Tutorial] How to create a basic maplestory flash game Pic5
13 - The image should have appeared on the 'stage'.
14 - Right click the image. Then press "Convert to Symbol"
[Tutorial] How to create a basic maplestory flash game Pic6
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"
[Tutorial] How to create a basic maplestory flash game Pic7
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:
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:
[flash=550,400]http://www.montycarlo.com.au/mapleAnime/Tutorials/Day2/source.swf[/flash]
[/size]
Back to top Go down
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Day 3   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:42 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:
[Tutorial] How to create a basic maplestory flash game Pic1
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'.
[Tutorial] How to create a basic maplestory flash game Pic2
11 - Double click the create MovieClip beforehand.
12 - Done correctly, you should see this in the top-left corner.
[Tutorial] How to create a basic maplestory flash game Pic3
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:
[Tutorial] How to create a basic maplestory flash game Pic4
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.
[Tutorial] How to create a basic maplestory flash game Pic5
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.
[Tutorial] How to create a basic maplestory flash game Pic6
25 - Click once on the MovieClip.
26 - Press F9.
27 - Copy and paste this new code in, overwriting what was previously there.
Code:
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.
[Tutorial] How to create a basic maplestory flash game Pic7
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:
[Tutorial] How to create a basic maplestory flash game Pic8
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:
[flash=550,400]http://www.montycarlo.com.au/mapleAnime/Tutorials/Day3/source.swf[/flash]
35 - Day 3 Completed!
Back to top Go down
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Day 4   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:42 am

Day 4 - A Map
[size=95]
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.
[Tutorial] How to create a basic maplestory flash game Pic1
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.
[Tutorial] How to create a basic maplestory flash game Pic2
5 - You should end up with something like:
[Tutorial] How to create a basic maplestory flash game Pic3
6 - Drag the images that look like the top of the platforms onto the stage roughly.
[Tutorial] How to create a basic maplestory flash game Pic4
7 - Align the images so they look nicely together.
[Tutorial] How to create a basic maplestory flash game Pic5
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' Wink
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 Smile 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'.
[Tutorial] How to create a basic maplestory flash game Pic6
10 - Select the character. Open the Actionscript window. Copy this new code in, overwriting the previous code:
Code:
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:
[flash=550,400]http://www.montycarlo.com.au/mapleAnime/Tutorials/Day4/source.5.swf[/flash]
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:
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:
[Tutorial] How to create a basic maplestory flash game Pic7
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:
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!
[flash=550,400]http://www.montycarlo.com.au/mapleAnime/Tutorials/Day4/source.swf[/flash]
[/size]
Back to top Go down
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Day 5   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:42 am

Day 5 - A Mobile Map
[size=95]
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:
[Tutorial] How to create a basic maplestory flash game Pic1
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.
[Tutorial] How to create a basic maplestory flash game Pic2
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.
[Tutorial] How to create a basic maplestory flash game Pic3
9 - Select the empty frame 'background'
10 - Repeat step 7 except for the background images.
[Tutorial] How to create a basic maplestory flash game Pic4
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.
[Tutorial] How to create a basic maplestory flash game Pic5
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.
[Tutorial] How to create a basic maplestory flash game Pic6
14 - You may have made the map larger then the background and foreground extends like I have. If you have, you can extend it.
[Tutorial] How to create a basic maplestory flash game Pic7
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:
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:
[flash=800,420]http://www.montycarlo.com.au/mapleAnime/Tutorials/Day5/source.5.swf[/flash]
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.
[Tutorial] How to create a basic maplestory flash game Pic8
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.
[Tutorial] How to create a basic maplestory flash game Pic9
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:
onClipEvent(enterFrame){
   _x = _root.player._x
   _y = _root.player._y
}
30 - Select the Player. Replace the current actions with these:
Code:
onClipEvent(load){
   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:
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:
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:
_root.foreBg.offSetX += speed*1.5;
      _root.backBg.offSetX += speed/2;
36 - Do the same for these actions but under line 27:
Code:
_root.foreBg.offSetX += speed*1.5;
      _root.backBg.offSetX += speed/2;
37 - Export and you should end up with something like this:
[flash=800,420]http://www.montycarlo.com.au/mapleAnime/Tutorials/Day5/source.swf[/flash]
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.
[/size]
Back to top Go down
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Day 6   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:42 am

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.
[Tutorial] How to create a basic maplestory flash game Pic1
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.
[Tutorial] How to create a basic maplestory flash game Pic2
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.
[Tutorial] How to create a basic maplestory flash game Pic3
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 Wink
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.
[Tutorial] How to create a basic maplestory flash game Pic4
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!)
[Tutorial] How to create a basic maplestory flash game Pic5
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:
[Tutorial] How to create a basic maplestory flash game Pic6
After:
[Tutorial] How to create a basic maplestory flash game Pic7
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.png
41 - Drag it onto the stage.
42 - Convert it to a Movie Clip. Name it 'attack.powerStrike'.
[Tutorial] How to create a basic maplestory flash game Pic8
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:
[Tutorial] How to create a basic maplestory flash game Pic9
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.
[Tutorial] How to create a basic maplestory flash game Pic10
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? Wink
[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]
Back to top Go down
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Day 7   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:43 am

Day 7 - An Enemy!
[size=95]
1 - Open up Banned Story.
2 - Select Monster Simulator
3 - Make a mob Layer
4 - Choose a Monster! I chose 'Rellik'.
[Tutorial] How to create a basic maplestory flash game Pic1
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 Smile
16 - Exit the 'child' Movie clip so you are in the Movie Clip which has a Movie Clip within it.
[Tutorial] How to create a basic maplestory flash game Pic2
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:
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:
[flash=800,420]http://www.montycarlo.com.au/mapleAnime/Tutorials/Day7/source.25.swf[/flash]

Tomorrow: Collisions between the character and the enemy.
[/size]
Back to top Go down
zhulov3rz
Moderator
zhulov3rz


Male
Number of posts : 15
Location : singapore
Registration date : 2009-03-15

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: good   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:32 pm

This is great.
i though you could align the sprites with swap bitmap
then move it closer >.>
and for each action now adays i use a for loop (code below extracted from a game im making [values edited]){
Code:

onClipEvent (load) {
   this._x =_global.savefile.data.x
   this._y =_global.savefile.data.y
   //KEYS
   keysetting = SharedObject.getLocal("keysetting");

   jump = keysetting.data.jump;

   claw = keysetting.data.claw;

   eclaw = keysetting.data.eclaw;

   beam = keysetting.data.beam;

   apocalypse = keysetting.data.apocalypse;

   guard = keysetting.data.guard;


   medi = keysetting.data.medi;

   arrow = keysetting.data.arrow;

   //speed varibles
   speed = 4;
   //gravity (y movements)
   gravity = 0.6;
   ydirection = 0;
   //actions
   actionat = 0;
   this.stop();
   actions = new Array();
   actions[0] = 'stand';
   actions[1] = 'jump';
   actions[2] = 'claw';
   actions[3] = 'guard';
   actions[4] = 'medi';
   actions[5] = 'walk';
   actions[6] = 'arrow';
   actions[7] = 'alert';
   actions[8] = 'eclaw';
   actions[9] = 'eclaw_keydown';
   actions[10] = 'beam';
   actions[11] = 'apocalypse';
   actions[12] = 'jump';
   walking = false;
   released = 0;
   released2 = 0;
   jumping = 0;
   atking = 0;
   clawin =false
   clawrelease =0
}
onClipEvent (enterFrame) {
   if(Key.isDown(116)){
      ydirection =-15
   }
   if(Key.isDown(eclaw)){
      clawrelease = 1
      if(clawin == false){
   actionat = 8
      }
      atking =1
      if(clawin ==true){
         actionat=9
      }else {
         clawin =false
      }
   } else if(clawrelease ==1){
      atking =0
      clawin =false
      clawrelease =0
      actionat =0
   }
   if(Key.isDown(apocalypse) && atking == 0){
      actionat = 11
      atking =1
   }
   if(Key.isDown(guard) && atking == 0){
      actionat = 3
      atking =1
   }
   if(Key.isDown(beam) && atking == 0){
      actionat = 10
      atking =1
   }
   if(Key.isDown(medi) && atking == 0){
      actionat = 4
      atking =1
   }
   if(_root.wall.hitTest(this)){
      if(Key.isDown(Key.LEFT) && atking ==0){
         _x+=4
      }
      if(Key.isDown(Key.RIGHT)&& atking ==0){
         _x-=4
      }
   }
   if (Key.isDown(arrow) && atking == 0) {
      atking = 1;
      actionat = 6;
   }
   if (Key.isDown(claw) && atking == 0) {
      atking = 1;
      actionat = 2;
   }
   if (Key.isDown(jump) && jumping == 0) {
      
      ydirection = -10;
      _y -= 2;
      jumping = 1;
   }
   if (Key.isDown(Key.LEFT)&& atking ==0) {
      if (jumping == 0) {
         actionat = 5;
      }
      this._x -= speed;
      walking = true;
      this._xscale = 100;
   } else {
      released = 1;
   }
   if (Key.isDown(Key.RIGHT)&& atking ==0) {
      if (jumping == 0) {
         actionat = 5;
      }
      this._x += speed;
      walking = true;
      this._xscale = -100;
   } else {
      released2 = 1;
   }
   if (released == 1 && released2 == 1 && jumping == 0 && atking == 0) {
      actionat = 0;
      atking = 0;
      released = 0;
      released2 = 0;
      walking = false;
   }
   ydirection += gravity;
   for (actionvar in actions) {
      if (actionvar == actionat) {
         this.gotoAndStop(actions[actionvar]);
      }
   }
   if (_root.floor.hitTest(_x, _y, true)) {
      ydirection = 0;
      jumping = 0;
   } else {
      _y += ydirection;
      if(atking ==0){
      actionat = 12;
      }
   }
}
other than that this tut is awesome
pss: see the 'eclaw' is more complex than others cos i wanted it to react like hurricane
PS: you stealers , copying wont work properly cos i edited it
Back to top Go down
Admin
Admin
Admin


Male
Number of posts : 212
Location : Orelans , France.
Job/hobbies : I Love Spamming Good Spams! :P
Registration date : 2008-12-22

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Re: [Tutorial] How to create a basic maplestory flash game   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 5:53 pm

Great tutorial. Thanks Monty
Back to top Go down
http://www.mapleindex.com
Montycarlo




Male
Number of posts : 8
Location : Melbourne
Registration date : 2009-04-17

[Tutorial] How to create a basic maplestory flash game Empty
PostSubject: Yes, that will work.   [Tutorial] How to create a basic maplestory flash game EmptyFri Apr 17, 2009 11:31 pm

Yes, that for loop is a nice design, but I create separate functions for each skill in "A Pirate's Fury", which would then do the appropriate actions (Stopping at the correct frame) and then linking up to a general procedure. I did it this way because I like more control over it. Either way is fine.
Back to top Go down
Sponsored content





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

Back to top Go down
 
[Tutorial] How to create a basic maplestory flash game
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
MapleIndex :: MapleIndex.com :: Flash Games-
Jump to: