Dress-up game tutorial
From GMpedia.org Wiki
Before taking this tutorial, please have a quick look at MovieClips, and know the basics of animation.
One of the best places to start learning how to make games is with a simple dress-up or jigsaw puzzle game. Dress-up games don't usually have any set objectives; the player simply drags and drops items clothing to their liking. Jigsaw puzzle games take this one step further by having an objective to put the pieces in specific places, possibly with multiple levels of play.
It is your own decision how deep you want to make your games: you might have just 10 or so still pieces, or you might make thousands, with multiple modes or levels of gameplay.
Contents |
[edit] Drag-and-drop Basics
The first step is to draw an item of clothing. Don't make it too detailed yet, a simple outline with a coloured fill will do, as you will be changing it later. Then just select your drawing and convert it to a Movieclip by pressing F8. Now, click on your new movieclip and open up the actions panel by pressing F9. Copy and paste in the following actionscript:
on(press){
startDrag(this,false);
}
on(release){
stopDrag();
}
About this code: on(press){ tells Flash "Do these actions when the mouse button is pressed on this movieclip"
startDrag( tells Flash "Start dragging a movieclip with the mouse"
(this, tells Flash "do it with THIS movieclip"
false); tells Flash not to lock the movieclip's centre to the mouse. If you dont get it, try changing it to true and see how it works differently. You might even find you like it better with true.
Now press control+enter to test it. You should be able to click and drag the MovieClip around the screen. Congratulations, you've made your first game! All you need to do now is create more items of clothing and add the actionscript to them, and then create a person to put the clothes on. To do this, make a new layer in the timeline, and drag it below the layer with all the clothes on. On this layer, draw the person you are going to dress up. Then, lock the layer. Test the movie, and all the clothes should be draggable over the person, and not under it.
[edit] Improving the game
[edit] Graphics
I wont go into detail about drawing techniques and shading and whatnot here, but I will tell you this: You'll probably find that the clothes dont seem to 'fit' the person very well, because they are a slightly different shape from the character's body. To fix this, open up one of the clothes movie clips. Delete the current shapes that are there, and using the paintbrush or pencil tool, draw over the outline of the persons body. This way the clothes will fit better, because they will be the right shape. Or, you could just copy-and-paste the outline of the person into the movieclip, and modify it a bit to make it clothey.
[edit] Changing Backgrounds
For a bit of variation, you might want to allow the user to change the backdrop of your game. First, create a new layer underneath the others. Draw your first backdrop on it, and convert that into a movieclip. Click on it, and open up the properties menu by pressing control+F3. IMPORTANT: Give it the instance name of 'backdrop', as shown in the picture on the right. This allows us to refer to it in ActionScript. Now, open up the backdrop movie clip, and create 3 blank Keyframes on its timeline (after the current keyframe with the first backdrop on it). On each of these new keyframes, draw a different backdrop image. On the first frame, open up the actions panel and type:
stop();
This prevents the movieclip from playing thorugh all the backdrops when the game is started. Create another blank keyframe after the others, and give it the actions:
gotoAndPlay(1);
This will make it loop back to the first backdrop when there are no more left. Now exit the movieclip, going back to the main timeline. Create a new button in the same way you create a movieclip, but select 'button' on the menu that comes up, instead of 'moive clip'. On the actionscript panel for the new button, put:
on(release){
_root.backdrop.nextFrame();
}
This button now tells the backdrop movieclip to go the next frame when the button is pressed. And that, sir, is how you can allow the player to change the background. Test the movie and check it works. You can add as many backdrops as you want to the backdrop movie clip, as long as the first frame says 'stop();' and the last frame says 'gotoAndPlay(1);'.
[edit] Changing Music
This can be done in almost the same way as the backdrop. Create a movieclip, and create a few blank keyframes on it. Give these frames the same actionscript you gave to the backdrop movieclip. Now put a sound or a music loop on each frame, excluding the last one, and set the music properties to 'event' and 'loop'. Exit this movieclip, and give it the instance name 'musicplayer'. Create a new button, and give it this actionscript:
on(release){
stopAllSounds();
_root.musicplayer.nextFrame();
}
Check it works. Now as long as you have decent graphics, and you've done everything I've mentioned, this should get a half-decent score on Newgrounds. I'm talking about 2-3 out of 5. But thats the max. You could also apply these techniques to make a 'scene creator'.
