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. 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!
Day 2 - Importing and movement 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:
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:
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.
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:
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. 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:
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:
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: 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:
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!
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: 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:
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:
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:
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!)
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
Somewhere in the onClipEvent(load){ statement in your character actions. It doesn't matter where, it just needs to be in that segment. Remember to replace the '???' with the values you obtained earlier with the points you drew up. Replace the first one with the most left point (Or the smallest number) and the second '???' with the highest number. Yours will not be the same as mine. 6 - Export and try and walk off the edges off the map. If you did the previous steps right, you shouldn't be able to! 7 - You may have noticed that the foreground and background move if you meet the left-most and right-most restrictions if your character is still walking. I'm not going to tell you how to fix this; it's your job! 8 - Make a backup of your source file. Then twiddle with the code and attempt to fix the 'twitching' bug like I have If you screw up, don't worry; you made a backup, right? 9 - Give the Movie Clip of the visual camera the instance name 'vCam' & add this line before the final line in it's actions:
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.
Within the character Movie Clip (MC), you'll notice these two lines somewhere early in the code. yVel += gravity; means "Add the value of 'gravity' to the variable 'yVel'". Then the next line is _y += yVel;, where the variable 'yVel' (y-Velocity) is being added onto the _y property of the object. Then later on a hitTest statement is being performed. This is quite problematic if the variable 'yVel' becomes larger then the thickness of the ground, because it will skip it altogether. 15 - Go to the online Bannedstory Simulator. 16 - Open the character simulator. 17 - Make a Skill layer. 18 - Choose a simple, easy skill, I chose "Power Strike". I highly recommend you choose this for your first one as the rest of this tutorial will only apply to this skill. 19 - Save Sprite Sheet to your source directory. 20 - Unzip the downloaded file. 21 - You may wish to rename the acquired folder to an appropriate name. 22 - Import to Library-> Your extracted sprites of "Power Strike" 23 - Organize them in the library as you feel appropriate. 24 - Go 'into', or open, your Character Movie Clip. 25 - Create a new empty frame. You should now have four. 26 - Choose one of the melee animations of your character in the library. Choose the first image in that sequence. 27 - Drag it onto the stage. 28 - Convert it into a Movie Clip. 29 - Create frames and add the rest of the images in the newly created Movie Clip of the animation sequence appropriate to the action that you chose. Then align them together the same way you did with the Stand & Walk animations previously. 30 - You may wish to create more animation clips if you want random attacks (In Maplestory, it's random which attack movement you get; Stabbing, swinging...) 31 - Align all the Movie Clips in the character Movie Clip so there is little or appropriate movement between the feet between frames (Remember to keep the feet above the little cross-hair!) 32 - Add
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:
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:
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
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'. 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:
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!). 5 - Add this function to the first frame inside your character:
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:
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.
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!
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
