[Tutorial] How to create a basic maplestory flash game
- Montycarlo
- Zombie Mushmom
- Posts:473
- Joined:Sat Jan 10, 2009 12:30 am
- Location:Melbourne, Australia.
- Contact:
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.
3 - Click 'File', then 'Save Sprite Sheet'
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"
8 - Day one Completed!
- 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
1 - If you completed Day1, you should end up with something like this:
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)"
7 - Click File->Import->Import to Library
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:
12 - Find "stand1_0_4.png" in the library. Click and drag it to the left, where the white screen is.
13 - The image should have appeared on the 'stage'.
14 - Right click the image. Then press "Convert to Symbol"
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"
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;
}
}
You should end up with something like this:
- 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
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:
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'.
11 - Double click the created MovieClip beforehand.
12 - Done correctly, you should see this in the top-left corner.
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:
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.
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.
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.
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:
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!
- 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
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.
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.
5 - You should end up with something like:
6 - Drag the images that look like the top of the platforms onto the stage roughly.
7 - Align the images so they look nicely together.
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'.
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);
}
}
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);
}
}
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:
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);
}
}
18 - Export! Day 4 Completed!
- 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
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:
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.
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.
9 - Select the empty frame 'background'
10 - Repeat step 7 except for the background images.
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.
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.
14 - You may have made the map larger then the background and foreground extends like I have. If you have, you can extend it.
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.
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.
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.
- 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
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: 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;
5 - Add
Code: Select all
mostLeft = ???;
mostRight = ???;
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;
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;
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: Select all
stopAttacking()
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()
After:
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){
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);
}
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'.
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:
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?
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!
- 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
1 - Open up Banned Story.
2 - Select Monster Simulator
3 - Make a mob Layer
4 - Choose a Monster! I chose 'Rellik'.
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.
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;
}
}
Tomorrow: Collisions between the character and the enemy.
- 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
1 - Change the
Code: Select all
doingAction = 0;
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;
Code: Select all
default:break;
4 - Add
Code: Select all
_parent.hitEnemy();
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();
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.
- 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
- 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
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
Re: [Tutorial] How to create a basic maplestory flash game
- 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
- 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
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.poke1024 wrote:when you save sprite, what do you do? what do you extract?
Silly you. I told you need to come back to it later. Try again, but this time remember where you save it!chobbilight wrote:ok i did but i cant find the image i saved
- crackerboi
- Snail
- Posts:1
- Joined:Sun Mar 08, 2009 8:51 pm
Re: [Tutorial] How to create a basic maplestory flash game
- 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
Then make one :)crackerboi wrote:When I try to download flash, it says i need an account
Adobe wrote:New to Adobe?
Create an Adobe Account
It´s free and only takes a minute
Get complete access to:
* Free trial downloads
- 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
Montycarlo wrote: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.poke1024 wrote:when you save sprite, what do you do? what do you extract?Silly you. I told you need to come back to it later. Try again, but this time remember where you save it!chobbilight wrote:ok i did but i cant find the image i saved
yeah i made a new map to save it in..... but i cant c it.....but ill try it mybe your write
- Montycarlo
- Zombie Mushmom
- Posts:473
- Joined:Sat Jan 10, 2009 12:30 am
- Location:Melbourne, Australia.
- Contact:
- 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
- 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
I want to see some prototypes soon haha ^^