Data Processing and Analysis Techniques
Data Processing and Analysis Techniques
This is not a step-by-step instruction guide on how to make an awesome and compelling story for a game. If I do a proper job of putting this together, you should be able to learn from it, in order to help take your ideas to the next level, and put them all together. Hopefully this will help you think, and give you ideas on how to get the most out of your game. The methods I'll be bringing up should apply to most game genres, regardless of what content you're trying to put into it. Even though I may lean towards an RPG type of story, you should be able to apply the same methods for whatever genre you want, like action. It should work fine for just about any serious theme, and if you're looking for a comedy, by sparingly breaking "The Rules" you can end up with some funny content. So, without any further delay, lets get started! If you have any questions, comments, or suggestions for me, feel free to e-mail me. What are you trying to do? If you can answer that question, you're ready to begin! I cannot express to you enough, that from the beginning to the end of your project, you MUST have an idea of what your outcome is going to be. Even if it's something simple like: "Make a cool game that people will want to play", is something, not very well thought-out, but it's a start. ideally, you should have a general idea of what you want to finish with. For me, I wanted to create an Old-School Style RPG, which shifts the focus back on game play, and story, and away from Graphics. You can be more, or less elaborate if you want. You don't have to put this to paper, or anything, just keep it in mind as you work on your story. There you have it! That's your foundation! Not very much yet, I know, but you're getting there!
Now that you have a general idea of the type of game your looking for, now you need to come up with a setting for your story. The setting is basically the overall stage for your game. Some games benefit from completely original, and alien landscapes, while other games seem to make sense in settings that are familiar, and common. It all depends on your overall theme, the one you came up with before. If your making a post-apocalyptic game, you may want to have your game take place in an unrecognizable wasteland, or smack-dab in the middle of Chicago. Most RPG's, with a fantasy setting take place on a foreign world, almost completely different from our own (Example: Final Fantasy, Chrono Trigger, Star Ocean) Platform games tend to use either a setting that is bizarre, almost humorous (Example Mario, Earthworm Jim), or a 'generic' setting that is easy to compare to something the player knows (Double Dragon, Ninja Gaiden). This should be something simple to come up with, don't spend to much time fretting on the basic Setting, you have to save your energy for what's coming up. My job was a little harder, since in Worlds, the player moves from world to world, in which each setting is different. I made my setting encompass the entire Omniverse, so effectively, my setting is as follows: Worlds takes place in an Omniverse, composed of infinite separate universes (or universi?) similar to cells in a body, separated by a substance called "Ether". Travel between universe(es/i) is difficult to accomplish, but possible. Once you have this put down to paper, you should be ready (and hopefully excited) to elaborate on it. You should start thinking about the details of your setting, and how they all interact. This is where the hard work comes in. Break out those pencils people! Now you have to build your setting into a believable, and hopefully enjoyable environment for the PCs (Player Characters) to romp through. This is one of the difficult parts of Story Development. You have to make everything in your setting mesh smoothly together, nothing should contradict each other. For instance, if your setting says that in the ancient past, humans could wield all kinds of magic, that is now lost to today's generation, then compliment, and talk about this aspect of history by having Modern Mages talk about that era, and show artifacts, and other
relics of the past era: magnificent castles, powered by ancient magic still working, or giant crater-scarred plain where ancient battles occurred. However, you need to think about what this would mean to the currently living population: Do they now have an abundance of ancient magical items that still work? Is magic now extremely rare/non-existent? What happened to that race of Mages? Did they kill themselves? Did thy inter-marry with non-magical folk, and 'water down' the gene pool? Whatever you pick should be consistent with your setting: Don't choose to eliminate magic all together, and then decide you want your PCs to have powerful magic skills - unless you can explain it. Explaining things away can be easy, but be careful - make sure it makes sense, and don't just say: "they can do this, that no one else can do, 'cause they are cool/powerful/special!" - that's a cop-out, and is just sad. In following my example, you could say that they were gifted by some kind of magical artifact, or perhaps there is a fringe race of people who still have magical abilities, or something more sinister is going on... try to avoid the easy way out. It's always better, and sometimes more fun, to make something up that's interesting, than copping out. The setting is one of the hardest, most rewarding, and most fun of all the aspects of Story Development, at least to me. I want to note, that at this point we're not making up individual locations, just a general world/area-wide collection of information about how things work, how they are, and their history. One method I've come up with to put everything in order, is to make sort of a list of things involved with the setting... I mostly use this list for my personal use, until I'm ready to publish to my Design Document. Here's an example excerpt on the subject of 'Ether': Ether: y y Has metallic Blue/Violet sheen disappears quickly while in Material environment - looks like quicksilver floating away and shrinking.... has morphological effects on material organisms immersed in ether for extended periods of time.
I have pages, and pages of similar writing, which I reference when needed. Some of it has ended up in a final form in my Design Doc (lit. Really Big File Full of Really Important Stuff). Feel free to spend as much, or as little time in this section as needed to flesh out your environment, and don't think that once you've made up as much cool stuff as possible that you're done, you should come back to this section often to add things, remove things, and make changes to make sure everything is kosher. Okay, so now we have our Destination Goal laid out for us, and a basic idea of the type of game it's going to be, plus, we now have a detailed chunk of paper full of information about our environment. We're getting there!
This is where the fun really starts. By Definition: A Player Character (or PC) is any character in your game that the person playing the game has control over. Depending on your game genre, you might have a whole lot of PCs, or just a couple. Usually, the term Player Character is associated with RPGs, but I see no reason, in story terms, to differentiate between Mario, Solid Snake, Jill Valentine, "Serious" Sam Stone and Zidane Tribal - they may be different in terms of game play, or programming, but for our purposes, they are the same. The PCs are the characters that the player will see, and deal with through most (if not all) of the game, so it is important to try and make them lovable, or at the very least, tolerable to anyone who might be playing the game. The player should be able to get attached to the character, perhaps even see a bit of themselves reflected in the PC. You want to decide how many PCs you are going to have in the game. If it's just going to be one character, you have an easy job ahead of you... if you plan on having several PCs, then you may need a bit more time.... I've come up with my own little method of creating interesting characters, which has evolved from my D&D and BESM-ing days. For right now, you don't want to worry too much about the technical side of the characters, such as what kind of skills they possess, or what kind of spells they can learn throughout the game - this is strictly story based information. Keep in mind, this is just my method, and you can use your own, or mix-and-match. I've just seen that this works for me. 1. Get a Job! - Now, this may seem like an odd way to start a character, but this seems to yield better results for me. Start by deciding what you want your PC to do... Should they be a monster hunter? A soldier? Super-intelligent Zombie-slaying Monkey? Come up with something that will mesh well with your setting. Let me make an example. I want to make a platform game, similar to Mario, but with a jungle theme. I want the main PC to be a Jungle Explorer, who jumps around in the jungle fighting tigers, and things. Not the most original of concepts, but it's a start! 2. Cool Threads - Next, you want to start to form an image of the character in your head, or if your are artistically inclined (unlike myself), you may want to start sketching out some ideas for their looks... Dress them up in cool gear, and give them a few distinguishing features. Distinguishing features are what make the character. Begin to construct an image for him/her. I read somewhere that if people can identify a character by shadow alone, you've done a good job. You may not want to put too much detail here yet, since you may change it later. For my example PC, I want to dress him up in a stereotypical lemon-yellow jungle explorer outfit. Complete with the big-yellow pith helmet. I picture his hat about 2 sizes to big, and he carries a large shotgun. 3. Personality - Now that you know what the PC looks like, you'll want to give him/her a personality. Try not to make them too far to one extreme, unless you have a REALLY good reason for it. Some of the best PCs are a mix of 2 or more types of conflicting personalities. Such as a Gruff, Testosterome filled Fighter, with a soft spot for small furry a critters, or the Secret Agent, who's as slick as dry concrete.... Start to flesh out some of your PC's quirks and other features of their personality. Let's give our Explorer a Paranoid personality, and throw in a little bit of scaredy-cat, so he's kind a easily frightened, jumpy hunter... hmm..interesting... 4. A Name - Give your character a name. You can name them whatever you want, but try to stay away from silly, or stupid names. Don't name your main character in a Roman Olympics game "Bigus Dicus", or "Naughtius Maximus"... that's just wrong. It might add a bit of humor to name a non-important NPC (non-Player Character) with a silly name, but after playing your game for an hour, a silly name will just get old. Let's make our guy an Anthony.... Sir M. Anthony Wendington, Exotic and Dangerous Animal Hunter from England. Yeah, that sounds about right for our guy....
5. Background - now you want to come up with some kind of back-story for your PC. Where did they come from? Where do they live? Who have they interacted with in the past? Who do they interact with now? This may be slightly more difficult to flesh out until you have a good idea of the rest of your story... so for now, you might just want to throw in a couple of ideas, and wait until later to add to the background. For Sir Anthony, lets say that he was a normal, happy, nonadventurous soul, until one day, at the request of the Queen, he is sent into the jungle on a quest to find a secret treasure-trove of lost gems and gold. Why was he picked above everyone else? Well , that's because his older brother, Thomas, was sent on the mission a few months earlier, but hasn't been heard of in a several weeks... of course, if his brother is an expert Jungle Explorer, then obviously Anthony should be too, right? 6. Finish Up - You're basically done with your PC now, just add some finishing touches here, and throw some other information in that you think would be interesting... and you're done! For the most part, those steps should help guide you through creating your PCs, the steps for creating NPCs aren't much different, but we'll go over some more information about them later on down the road. Make up as many PCs as you think would be good for your story, and then get ready for the next section!
Okay, now I'm going to try to write up another section here... my computer is dead, so I'm doing this at work... This is all about the locations that your PC(s) will be visiting during the game. By my definition, a "Location" is any particular area that the player will move through at some point. You can have a lot of fun here. You'll want to come up with interesting, and believable locations, which keep the player interested in the game. Some genres won't focus too much on this area, since there won't be any reason to go into detail on most areas in, say, a platformer. RPGs, on the other hand, benefit from having tons of detail and information on each location. So lets say we were going to be making an RPG, and we needed a bunch of locations. Lets say our RPG is going to be a Fantasy style, and take place on a world other than Earth (basically your stereotypical Pre-8 final fantasy.. ) So what do we need to do in order to plan our location? Generally, you'll want to come up with some kind of general map, or make one up as you go. Here are a few key points to look into: 1. Climate - This is the first thing to look at. Where is your first location going to be? Desert? Forest? Swamp? Frozen Tundra? Make a decision here, and keep it in mind, the climate you choose will be important. Sometimes an exotic location makes for an interesting location, but if this is going to be the first place the player sees, you may want to make it something they'll recognize... Let's make an example. Lets say that our location is going to be a Heavily Forested Area, in a temperate zone. Easy enough. 2. Name - You can really give it a name anytime, but sometimes I like to make up the name first, so that you have a basis to work from. Let's call our area "Foalhaven". 3. Establishments - Now that you know the climate, you need to know the inhabitants. Are there any cities, towns, villages in this location? Or is it barren, except for the few wandering monsters... is the entire location a City in itself, or is it a section of a city (like Midgar in FFVII, I would consider each section of the city a separate location, giving the Shinra building it's own location.) It's up to you. For our example, lets say that there is only one town in this location, not very large, and each pretty far from any other town. Around 300 people total. 4. Inhabitants - So what kind of people live in this location? Are they all human? Do they all have
to work equally, or is there some kind of slave system in place? What kind of lives do they live? Think hard about all of these, and keep in mind the climate that your location is in. In our example, lets make our own town a logging town, filled with humans, and a few dwarves, where most of the men are loggers, and most of the women run any other trades, like inns, shops, government offices, etc (all the non-physical jobs). I kind of like to throw in a few things that are a little different when coming up with the towns. Feel free to make up whatever interesting features you want. 5. History - This is (to me) a fairly important feature of the area you're working with. Even if you're not dealing with a town, you can make up some pretty interesting historical events that can, at the very least, add to the player's experience, and can be used for interesting plot events/twists/or special events. Come up with some cool stuff, if you want. FFX had some great history tied into each area of the game... I remember the Calm Lands, which was where an epic battle took place years, and years ago, and was still sporting the craters, and battle scars from the battle in the landscape. Come up with something that will peak your player's interests, and (when possible, or beneficial), try to tie in to other areas/people/events that the player has or will meet in the game. Let's go back to our example, and say that this area, Foalhaven, was once nothing but forest, and until just recently was not inhabited by any humans... Hidden somewhere in the deepest section of forest was a colony of Forest Dryads, who have since disappeared to areas unknown, since the humans started moving in to the area. Some believe that the Dryads are still hiding in the forest, and a few eye-witnesses say that they have seen them in small groups, while others fear that they are preparing to take back the forest. The logging town was established as a direct source of lumber for a nearby nation, which is the only source of external income to the town. As you can see, I tried to add a little bit of history that can be further explored if the player wants to. The history is not too difficult to come up with, if you try to think logically about the type of area you're dealing with. Finishing Up - That's about all there is to making up a location, feel free to tweak my ideas if you want. You may want to make a map or two for this location, to help get an idea of what's in the area, or whatever works for you. Later on, I'm going to make up a few "Cheat Sheets" to help out if you run out of ideas.
It's time for the 5th installment of my tutorial, and hopefully everyone is learning from it... a little bit... right? Okay. Here, we're going to talk about Non-Player Characters (NPCs), and Villians. as you may have guessed, NPCs are characters that the player does not control, but interact with the PCs somehow. Most game genres will benefit from this section, but, again, due to the in-depth story developments of the RPG type, I'm going to end up focusing on them once again. An RPG will usually have hundreds of NPCs, and at least one major Villain, with lots of henchmen. When I refer to Villians, I'm only talking about the characters that play a large role in the game, and seem to have vicious hatred for the PCs, not just every boss the player faces. The Dragon at the end of the cave who pops out of no where, and is killed by the PCs after a long, and grueling battle, while considered a Boss, is not a Villain. For the most part, most NPCs the PCs will encounter are going to be your average townspeople, walking around town, and giving out semi-helpful one-liners of information. They don't need a lot of details. The NPCs you'll want to focus on, are the ones that will play some kind of important role in the story. A good place to start with your NPCs is by thinking a little bit about your story in general. For the most part, you'll want to build up your NPCs in a similar manner to the way you made your PCs, but you won't necessarily have to go into too much detail... Some good examples of NPCs would be: y y y y Cid from FFV Regis the Mayor from Star Ocean 2 O'aka from FFX-2 Red XIII's Grandfather from FFVII
Those are just a couple of good NPCs, there are a bunch others out there. When building your NPCs, try to give everyone a little bit of history, even if it's pretty basic. Sometimes an NPC's history can be turned into a plot line of some kind.... NPCs help to fill your world with life, and add a touch of believability to your story, but Villians add a touch of chaos, and evil to balance out the world. Plus, Villians can be lots of fun to create!! Creating a Villain can be done in only a few easy steps:
Name - I tend to start with the name, and build from there... sometimes, though, I change it a couple times before finding something that sticks. Good villian names are very ominous. Lets make our example's name something freaky, like: Valouse Basic Description - Describe your villain - sketch them out... make them look sinister, and decide what their personality is like on a basic level. I want Valouse to be female, and wear lots of dark red/black armor with spikes, and things. Obsession - All villains are obsessed with something , whether it's a person, an item, or a location, or whatever - the best villains will stop at nothing to obtain what they are obsessed with. Some good examples: Sephiroth (FFVII), was obsessed with becoming an omnipotent being. Kefka (FFVI), was obsessed with obliterating all life, and the classing Bowser (About every Mario Game) was obsessed with the Princess, for some inter-species breeding... or something.... Sometimes, it's a good idea to gradually reveal the Villians obsession over time, let the player try to figure it out on their own. For our example, lets make Valouse obsessed with a certain magical
item... um..lets see.... she's looking for an ancient relic that will allow her to rule the world. Sounds a little cliche-esque, but, no matter.... good enough for me. y Resources - A villain can't be really nasty if they've only got the clothes on there back, and $2.40 in change, most every villain seems to have nigh-infinite resources, and loads of henchmen. For instance, our ol' pal Sephiroth Had a bunch of Followers, and his Mam to help him slow down the heroes' progress... not to mention some backing from Shinra. He wasn't going to be found easily. For some reason, most villains seem to have a lot of extra cash laying around, it seems to make them more viscious. You'll want to decide just how powerful your villain's going to be... and how much they have to spend. Lets make our baddie be in charge of a large group of warriors from a northern countries. She's sort of like Ghengis Khan, in a sense, only more sophisticated. She is able to call on her troops for support, and she has a large amount of funds (from their hording) to use as needed. Mania - While this can (and usually is) tied in to their Obsession, most Villians have a level of insanity to go with it. It's hard to find out where the line is, between obsession and insanity, but it can be fun to play with the line a little... kefka (FFVI) was absolutely insane, and that freaking laugh of his was bone-chilling... even in the days of the ol' Super NES. Let's say that our Villain hates wildlife, and wants to raze the forests, and build massive cities of iron and steel to cover the world. Power - Here you want to have fun. Most every major villain has some sort of ungodly power, which gives them the edge, and the terrifyingly strong attacks... Sephiroth sort of had Meteor's power to call upon, among other powers at his disposal. you never see a villain who is clearly weak, and powerless (at least not unless their faking). Our villain will have the power of (once she locates it) the Ancient Relic, but in the meantime, her arsenal consists of the ability to build terrifying robotic, and sentient creations of destruction to do her bidding.
And that's about the jist of it! Try making your Villians someone that wll scare the crap out of you, or try another method, and make them someone you would perhaps idolize, until they show you their 'other side'... and you'll be on your way to making worthwhile villains in no time!!
Now we're getting to the fun part. The Plot is the Meat of your Game Story, without a Plot, your story has no drive, or motivating force. Your characters have no reason to do anything, but laze about on large sofas watching TV, and eating pork rinds.... mmm... pork rinds.....Ahem. Anyway, since the Plot is so important, I'm going to dedicate several posts to it. The first post is going to start with some of the basics of developing your story out from start to finish. Now, everyone works differently, and most people find their own way of looking at things, but I'm going to lay out a few different methods that I've seen work, and then I'm going to explain the way I do it. We're going to have fun... First off, now you have a bunch of characters, a few locations, and a few bad guys, you need to figure out how to get your story assembled. Now, like I said, there are many different methods to build your story. We'll start with the Bubble Method. Essentially, the Bubble Method is sort of a way to brainstorm some of your ideas, and bring them together. It's also a good way to put together a non-linear storyline. It works like this: Draw a bubble in the center of a sheet of paper. Make it sort of small, so you can add to it later. In the center of this bubble, write down an event, or some kind of scene. I don't really have access to a graphics program now, so bear with me, I'll try to describe this as best I can... Here's a crappy example:
Next, draw a line out from that bubble, and draw another bubble:
Now, you'll continue to add these bubbles, and keep adding more sections of the story, eventually ending up with a whole bunch of bubbles on sticks, with ideas inside. This can help you form a representation of all the items in your game, and when they occur. This is one method I've seen lots of times before, but doesn't work for me very well... Some people like it, so you should give it a shot, and see if it works for you. The next method I've seen is a little bit more like my method, but a little too logical for me... basically, you
want to write down each of your events, the people involved, and give each a ranking to determine when they happen, and then apply these events to a timeline. This works for some people. Example: 1: Introduce Characters 2: Tutorial 3: Boss Fight 4a: Find Lock Pick 4b: Find Key 5: Open Door 1----2----3---4---5---This can be good for those who are very logical thinkers, and who keep track of things through numbers, etc. I find it very hard to keep track of things this way, so my method is a little more straightforward. My method is simple. I start with several sheets of paper, or to be able to read it later, I will probably use Word, and I start a Numbered List. I start out similar to above, with just a few words to describe each event: 1. 2. 3. 4. 5. 6. 7. Intro Movie - Lab Introduce Eta (optional) Learn how to play Explore Ninja Ruins Boss: RagMan Scolded by Sensei Etc
Next, I open a new Word Document, and just start filling in the blanks. I'll start with a Numbered event in my first list, and fill in the details: 1. Intro Movie: Lab Lengthy Description of Intro Movie 2. Lengthy Description of This Event 3. Etc.
Now, we were talking about my method of Plot Building. For the most part, I lay it all out in my head, and then let my fingers go wild on the keyboard. I know that this method doesn't work for everyone, but for me, it ends up with me getting a lot of the story done in one go. While I may not yet know the precise ending, I sort of imagine, and act out the story in my head, like a movie... Anyone who's seen my Design Doc will probably say that it almost reads like a storyboard, minus the pictures. And with a lot of details. Some people will find it easier to leave out most of the details until far later in the process, but for the most part, you want to find a method that works for you. Some people like to work in chapters, or sections, or scenes, and I try to break up my story that way myself, but eventually end up with a long list of events that just keep going, and going. I end up adding the chapters later on, as I re-read the finished product. Don't struggle too much just yet with the overall plot layout, we still need to figure out how to create the plot. Why did I talk about all this crap about bubbles, and stuff? Because I want you to start trying to come up with a method of your own on getting your plot written down, to be converted to real use later. We're going to start talking about the actual story itself now, and you need to know how to lay everything you're going to make up out. So there. Okay, so you have a couple of Good Guys, a Villain or two, a settings, and, essentially, a world in which your Game will take place. Now what? Well, for some MMORPGs, this is it. Your done. Throw in some crazy tasks, and adventures, and a few billion different types of items, and you've got your game, and people will flock to it, and stand around all day chatting, and showing off the fact that they played for 6 months straight, at $20 a month, and have just now gotten strong enough to defeat the big bad monster, and obtain the Black Dye they used to make their shirt black. Fun. But if you're like me, and require, rather, demand some kind of adherable story, or relish the fact that when you play the game, your actions matter, you're going to want to come up with an interesting, mysterious, and fun story for your Players to follow, and treat them to a game they can have a good time with. So the story is going to play a big part. Better not screw it up. At this point, you should know something of what your story is going to be like... some inkling of an idea, but if you don't there are some tricks that I have up my sleeve, to help you out. There are several Key Story Points that we have to discuss, in order to build our story:
y y y y y y y
The Quest The PCs' Role The Villians' Role The Path The Reward The Consequences Misc
We're going to discuss each of these items in turn, and hopefully go through a process of getting your story together.
The Quest First, what is the purpose of your PCs? Why do they have to do whatever you want them to do? Perhaps they have to find a secret item, or rescue someone, or anything... you should decide why their leaving home. In my RPG, Worlds , our main PC, Eta, is accidentally sucked into another world through a portal, and after an accident in the Lab where he ends up, Eta is blown to another world, and lost within the Omniverse. He's now on a Quest to find his way home. (See that? That's like pointing out the key word, that is... oooo... ) Now the Quest can (and probably will) change periodically throughout the game, as more information becomes available... but they should generally stay static through most of the major sections (only really changing occasionally). Now a quest is the overall goal of the PCs, which is what they're trying to do in a big-picture type of thinking, a path is sort of like a mini-quest, that only lasts for a short time, until the PCs get to the next Path. Try not to get them confused... Alright, so you're having trouble Picking a quest. Well, I've got help for you! Anyone who's familiar with the D&D Dungeon Master's Guide on Building a Dungeon should know this trick. Get out your d6es (six sided dice) (or made a quick random-number generator), and roll to pick out a quest (roll for each category, and then add them together): Type of quest: 1. 2. 3. 4. 5. 6. Find Destroy/Kill Escape from Steal/Kidnap Free/Release Re-roll
Item/Person Involved: 1. 2. 3. 4. 5. 6. Royalty (King/Queen/Prince/Princess) A City/Town/Building/etc Magic Item (Ring/Gem/etc) Ruins Monster Regular Person
Okay, so lets make some rolls.... And it looks like I got........... a3 , and a .... 1 ... hmmm, so we consult the tables, and we get: Escape from Royalty . Well, so how do we work this in as a Quest.... let's see... The Quest Our Main Character, who happens to be some sort of political activist, is under surveillance by the Duke of a neighboring Dukedom. The Character is suspected in a plot to overthrow the government, but he continues to state his innocence. After a failed assassination attempt on the Duke's Brother,
he sends a team of warriors to take out our main character. While having a quiet evening at home one night, our PC sees a group of mercenaries snooping around his house, so he picks up his welloiled sword, dons his ebon cloak, and steps out into the night to confront the sneaks.
Pretty neat, huh? Came up with that on the spot... You may find that you have a little trouble coming up with a good quest right off the fly, so you may want to think it out for a while. I've kind of touched on a little bit of a path as well, at least the beginnings of one... You may decide to come up with your own general quest generator, or just make up a quest out of your head... You'll want to try and make it a coherent path from quest-to-quest, so you may decide to do a few rolls all at once. Lets say I roll again, and I get: 5 and 2 ....Release a Town/Place ... Okay, so our hero escapes from the Duke, but then comes back to Free the town from his tyrannical rule. It all should lock together. Remember, Quests are big events, that take a lot of time to complete, and are composed of tiny Paths ....it will all make sense soon...
The PCs' Role We're going to talk about the role that the PCs have in their quest. While this is sometimes something you want to come up with before you make up the Quest, you can usually base it off of what the Quest is, which is why I wanted to bring it up after the Quest. Generally, what is the PCs overall role in this adventure? Are they trying to save the world? Save a country? Find a particular item? Are they good guys? What? This is going to be the overall general thing that's going on in the game. Example (continued off of the last example): Our heroes are going to eventually go on a quest to find a secret, magical item to save the world with, and keep it from the villains. If you look at it in sort of a hierarchy of how the story breaks down, the PCs' Role is at the top, which is made up of slightly smaller Quests , which are each made up of even smaller Paths . You can go ahead and roll for your Role, if you want, but I would recommend looking for a bigger connection to the whole thing yourself. If you want, you can save the Rold for last, and put everything together then. The Villians' Role Just like the aforementioned PCs' Role , the Villians' Role is what the overall goal of the Villians in your story. Make it simple. Why do they want to stop the PCs? Or what goal do they have that the PCs are interfering with?
Lets bring out our Villain again from the earlier NPC section. The Villians are looking for the same magical item, to bring total chaos and darkness to the world. They are racing against the PCs to locate the item first. Short and sweet is all you really need. The Path Really, I should call this "Paths", and this is where things start getting complicated. You'll want to create several mini-obstacles for the PC to navigate through. You may want to simply make a list of simple things for them to do: y y y y y Investigate Duke's Mercenaries Infiltrate Duke's Castle Find plans for world domination Run into Dukes warriors Escape from Castle
...and then expand on these: y Investigate Duke's Mercenaries o Find 3 Mercenaries outside your house. o Defeat Mercenaries o Find note with Duke's Seal on it Infiltrate Duke's Castle o Locate Supply Route to Castle o Bribe Guards for entrance o Sneak inside Castle Find plans for world domination Run into Dukes warriors Escape from Castle
y y y
And so on and so forth... Anyway, just add whatever seems natural to the story. And take baby steps from point a to point b. It should be pretty simple, so don't try to over think things. (For those, like me, who think better in a narrative way, go ahead an just explain the whole story between paths, and it should work out fine.) The Reward So what are the PCs going to get out of their Quest(s)? If they win, do they save the world? Become rich & Famous? What motivation do they have to go through with it? Come up with a logical jump from their quest, for instance, if they're on a quest to locate a magical item, then don't have the reward have something to do with the cute girl down the street.... A logical jump would be to say that once they find the item, they can use it to rid evil from the world, and live out their days in blissful peace. Sure, why not? The Consequences What will happen if your PCs fail? While this won't necessarily be used for an "alternate ending" type thing (though it could ), you still want to come up with some kind of threat to hold over the PCs heads, to help keep them moving. In this case, we want to say that if they don't find the magic relic before the villains, then the world will be plunged into darkness. You will most definitely refer to this consequence often throughout the game, in a manner that the player will want to try and make sure that they do what
they need to do. Using FFVII as an example, the 3rd disc, with Meteor hanging over the horizon was an ominous reminder of the consequences of failing, as well as a push to kind of get the player to keep moving. Who knew when that thing was going to land... scary... By now, you should have everything put together, in many, many different files, and sheets of scrap paper. The last thing you need to do is Type it all up in a coherent, easy to follow document, called the Design Document . So the next section, is going to be all about that Document. Tune in!
Well, it took you 4 pages, but now you can finally open up Flash. Happy? Okay, so now we're going to get to the fun stuff. The first thing you should do, once you have Flash open, is to create a new Movie Clip. I named it "Guy". Next, you want to draw a representation of your main character, or avatar, or PC. You don't have to be elaborate at this step. After you draw this wonderful piece of art, make another Movie Clip, and drag an instance of this into it. Then, give it's instance a name, like "guy_mc", and drag an instance of the second movie out onto the stage. I find nesting things in this way can make the overall code easier, but you may come up with your own system.
[ Our Guy ]
So now you have the stage, with a Movie Clip which contains another Movie Clip, named "guy_mc", which has our Guy's Graphic. In case you were wondering, in my image the head and body are on different layers to make animation easier. Alright, next, go to the stage, and double click on the Movie Clip there. You can name the original layer something like "Graphic" if you like. Select the "guy_mc" clip, and type this code in the ActionScript Panel: onClipEvent (load) { walkSpeed = 5; } It is almost always a good idea to place some type of "constant" variable at the start of your code, so that id you decide you want to make a change, it only involves changing one number. What we've just done
is tell the program that walkSpeed is equal to 5, nothing new there. This number will represent the number of pixels that our guy will move whenever he walks. For now, lets keep this number at 5, and move on. Here's the next code: onClipEvent (enterFrame) { if ([Link]([Link])) { _y-= walkSpeed; } } If you test the movie at this point, and press the up arrow, your guy will move up. Wow. Let me explain some of this code so far, for the n00bs. This simply states that every time the MovieClip enters this Frame, it will check to see if the "UP" key is being pressed, and if it is, will move the "guy_mc" MovieClip up by the number of pixels indicated in the first bit of code. Make sense? Note In Flash (and in fact most programming languages) Y increases the further down you go on the screen, and X increases the further right you go.
This means that by decreasing the value of Y, you move up, increasing Y moves you down.
With that said, we'll make the Guy move down now, by adding the appropriate code, until your whole thing looks like this: onClipEvent (load) { walkSpeed = 5; } onClipEvent (enterFrame) { if ([Link]([Link])) { _y-= walkSpeed; } if ([Link]([Link])) { _x+= walkSpeed;
} if ([Link]([Link])) { _x-= walkSpeed; } if ([Link]([Link])) { _y+= walkSpeed; } } When you test out the program, you can move your guy in 8 directions, but he's always facing the same way. We'll remedy this with a simple "_rotatation" command. "_rotation = x" simply tells Flash to rotate our MC by X Degrees. The finished segment of code should read: onClipEvent (enterFrame) { if ([Link]([Link])) { _rotation = 0; _y-= walkSpeed; } if ([Link]([Link])) { _rotation = 90; _x+= walkSpeed; } if ([Link]([Link])) { _rotation = 270; _x-= walkSpeed; } if ([Link]([Link])) { _rotation = 180; _y+= walkSpeed; } } If you test it now, you'll see Mr Guy moving around, and facing the way he's moving - but he's such a stiff walker. You can easily add some code to make him swagger a bit in his walk. From the stage, doubleclick on the first MC, and then from inside that, Double-click on the inner-MC to open up the MC you created first. I named this one "Guy". Note The reason I nested the MCs like this, is to allow for quick modifications to the "Guy" MC, without having to re-do any code in the other MC. This comes in handy later, and is a good habit to pick up.
[ make sure you have your MCs nested - the animation graphic inside the MC with all the code ]
Now, my Guy is simply a box on one layer, and a circle on an other. To make my animation of him walking, I just make a quick Motion Tween on the Head layer, and then have it move left and right a couple of frames. Nothing too long, or complicated or it will obviously appear to be a loop.
Your next step is to go back to our Movement MC, and modify the code a bit. First, in the "onClipEvent (load)" function, place the "stop();" command. This will tell our Guy not to start bobbing as soon as the Movie is loaded. Next, inside every "if ([Link]()) {" blocks, insert the "play();" command. As you can probably guess, this will make him animate whenever a key is pressed. If you try it out now, you'll see that Guy is stationary until you press one of the arrow keys, after which he starts bobbing, or whatever - non stop. To get him to calm down, after taking away his caffeine, we need to make an If statement that simply says: "If none of the arrow keys are pressed, then stop the clip." It looks something like this: if ( &  &  & ) { stop(); } Place this snippet just before the very last } in the "onClipEvent (EnterFrame)" block. Note In case you were wondering, the "!" doesn't mean to get all excited - when dealing with comparisons, like If/Then statements in most languages, "!" means: "NOT". So, the statement above basically says: "IF This Key is NOT Down". Make sense?
So there you have it! Hopefully at this stage you have a working movie, with a guy who can walk around, and looks lively when he does it. If you have any problems at this step, recheck all your code, and/or download the source file for what we've done so far to compare. Please make sure you are able to get your own code to work properly before moving on - don't just download the source, and then keep going... Well, this concludes Page 04 of this tutorial. I think this is a good place to stop temporarily... the rest of
this will be coming soon - no later than a week or two. In the meantime, enjoy this, play with it, and feel free to send me any comments or suggestions you may have. I can be found easily on the forum.
Moving right along... It would be a very boring game indeed (if you could even call it a game) if your Guy could not interact with anything. So, we need to come up with some hitTests. For this simple sample game, I'm going to make some small items that the player can walk over and pick up. Nothing elaborate. First, using the same .Fla from earlier, you'll want to make a new MC, and lets name it "money". Inside, make a simple, and not to big icon for some money.
[ simple money mc ]
Now, drag an instance of this MC out to the stage, and name it "money_mc". Open up the ActionScript Pane, and enter this code: onClipEvent (enterFrame) { if (_root.move_mc.hitTest (this)) { _root.money++; this._x = -50; this._y = -50; } } Note This assumes you've named the MC with the Guy MC inside it "move_mc", if you named it something else, change the code accordingly.
Essentially, what this code will do is this: Every time the Clip comes to this frame (which is always), it will check the "move_mc" movie clip against itself, and if the two touch or overlap at all, it will perform the following 3 steps: It will increase the value of "money", a variable we will be adding to "_root" by 1, then it will move this clip to the coordinates (-50,-50) - basically off the playing field so that Guy can't grab the same coin again. Note When we get further along, we'll be creating items with the "duplicateMovieClip()" function, so we can later use "removeMovieClip()" to get rid of them instead of "cheating" by moving them off the screen.
We still need to do two more things before this works perfectly. First, create a new layer (you can name it ActionScript, or something if you like), select the first frame, and open up the ActionScript Panel. Enter this single line of code to create the "money" variable, with an initial value of "0": money = 0; Next, go back to our other Layer, and create a new TextBox, any size or color you want, and make it Dynamic. Where it says "Var:" type: "_root.money", then save and test the movie.
Pretty simple, right? You can do much more complex things with hitTesting. For now, I would suggest getting some practice with hitTest in - it is one of the most useful functions for game programming in Flash. If you want, you can give your Guy an "HP" variable, and make a trap MC that if he steps on it, it takes away MC, or whatever. Just make sure that your Movie looks and works like the source before moving on to my next section.
While HitTesting is a wonderful thing, it can be a little finicky in practice sometimes, as you'll see with practice. Not only that, it tends to be difficult to use when making maps, as we're going to do with this RPG. Almost all classic-style RPGs use tiles, at the very least for background use. As you'll see, using tiles can be very useful. Start out by opening up your favorite painting program, Photoshop will work just as good as MS Paint. First up, you want to determine the base size for all your tiles. I made them 64 X 64, but you can pick whatever you like. Then, draw away! I simply made 3 tiles: One for basic grass, one for Water, and one for a rock wall. Save them, and then open up Flash. Make a new MovieClip, named "TileSet1", and on frame one import your first tile, frame 2 the second, and frame 3 the third. Align them all to the top-left of the Stage, like this:
I would make the tile you plan to use the most as the first frame, but its up to you. Now, once you've done this, put "stop();" into the ActionScript of each frame. This is just a precaution. Make a new layer on the main stage, below everything else. Next, right-click on the MovieClip in the library, and choose "Linkage". Check the first check-box, where it says: "Export for ActionScript", and hit "Okay".. Next, set the height and width of your movie to something divisible by the height and width of your tiles. In this case, 576 is my height, and width. Now, get ready for some more advanced ActionScripting...Fun. Basically, what we need to do is tell Flash which Tile is which, and what those tiles are allowed to do. We do this by using some prototypes, and OOP, and other fun things which I really don't feel like trying to explain in great detail. For those who care, you can find some great tutorials on those subjects right here on Kirupa - written by people who know a whole lot more than I do on the subject. Anyway - this is pretty simple though. Make a new Movie Clip, name it "blank", and click on "Advanced". Check where it says "Export for ActionScript". Keep this MovieClip blank, and then go back to the Main Timeline. Copy the following code to frame 1 of the main timeline: mvWdth = 576; mvHght = 576; tileWdth = 64; tileHght = 64; tile0 = function () {}; [Link] = 1; [Link] = false; tile1 = function () {}; [Link] = 2; [Link] = true; tile2 = function () {}; [Link] = 3; [Link] = true; map1 = [[2,2,2,2,2,2,2,2,2], [2,2,2,0,0,0,0,0,2], [2,2,1,0,0,0,0,0,2], [2,1,1,1,0,0,0,0,1], [1,1,1,1,0,0,0,0,1], [1,1,1,1,0,0,0,0,2], [1,1,1,0,0,0,1,1,2], [1,1,0,0,0,0,0,1,2], [1,1,1,1,2,2,2,2,2]]; Now, let me try to explain what this all means... First, I simply told Flash how big our stuff is: mvWdth = 576; mvHght = 576; tileWdth = 64; tileHght = 64; Then, I defined our 3 tile prototypes:
tile0 = function () {}; // Tell Flash that there will be a Tile1 [Link] = 1; // this is the number of the frame that the image is in [Link] = false; //since the first tile is grass, its not a barrier tile1 = function () {}; [Link] = 2; [Link] = true; // the water is a barrier, since you can't walk through it. tile2 = function () {}; [Link] = 3; [Link] = true; Next, I defined our first Map. Now, this map is essentially a 2-Level Array, also known as a Matrix. So, when someone asks you: "What is the Matrix?" you can say: "Its a 2-Level Array". Moving right along, Neo, if you can tell, our Map Matrix is made up of numbers from 0 to 2, and in seemingly random order. What we're going to do, is go through the numbers, one at a time, and place a copy of the "currentTileSet" clip on the stage, in the order that the map shows. This is how we do it: function MapMaker (map) { _root.attachMovie("blank", "tiler", d++); var mapWdth = map[0].length; var mapHght = [Link]; for (var i = 0; i < mapHght; i++) { for (var j = 0; j < mapWdth; j++) { var name = "tile_"+j+"_"+i; _root[name] = new _root["tile"+map[i][j]]; _root.[Link]("TileSet1", name, i*100+j*2); _root.tiler[name]._x = (j*_root.tileWdth); _root.tiler[name]._y = (i*_root.tileHght); _root.tiler[name].gotoAndStop(_root[name].pos); } } } MapMaker(map1); What this does, is create a new instance of the "blank" mc on the stage, which will hold all our tiles. Then, it goes one-by-one through our Map Matrix, and checks the number to see which tile it wants, and it makes a new tile on the stage, changing the frame to match what our tile prototype says. And finally, it moves the tile to the point of the stage that it should go. Simple, huh? The last line of code: "MapMaker(map1);", is how we call the function to do all the work. The reason this is in a function, is so that you can change maps, which we will do later. When you run the movie, you'll see a map, based on what your map matrix looked like But what happened to our guy? Well, he was buried under the tiles. Sucks to be him. We can easily fix this by making our Guy get placed on the screen after the tiles. So, go ahead and delete our Guy MC from the main stage, as well as the coins and whatever else you may have dragged there. (I recommend saving the file under a new name at this point, to keep from having losing anything...) Next, we want to go to our library, and right-click on the Mc the contains the Guy graphic. In this case, I named it: "moving_mc". Choose "Linkage", and set it to "Export for ActionScript", I named mine "guy_mc", but you can name it whatever you like as long as you know what part of the next few lines of code to change.... Next, make a new Matrix in the first Frame of the main timeline, which will look like
this: itemMap1 = [[0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0]] Essentially, we're going to have 2 layers on the screen. The first one will be the map, and all the background stuff, and the top one will be the Player, and all interactable items. Simple enough, right? This new matrix should be the same size as the map matrix - there's no reason why this should be otherwise. Next, create the function to place all the items on the screen: function placeItems (map) { _root.attachMovie("blank", "items", [Link]()); var mapWdth = map[0].length; var mapHght = [Link]; for (var i = 0; i < mapHght; i++) { for (var j = 0; j < mapWdth; j++) { switch (map[i][j]){ case 1 : _root.[Link]("Guy","guy_mc", d++); _root.items.guy_mc._x = (_root.tileWdth * j); _root.items.guy_mc._y = (_root.tileHght * i); } } } } And call it with: placeItems(itemMap1); Now, if you test the movie, Guy should appear wherever the "1" is in the matrix. Make sure the 1 is always on a space which corresponds to a non-barrier tile. You can move him around, but he is in no way hindered by the tiles - yet. The next phase is fairly complicated. In order to make this work the best, we need to determine where Guy is going to be before he moves. And then check his X, Y coordinates to see if he will hit a wall or not. This means we almost have to completely re-write our movement code. First, lets start with a new function, which will go just above all the movement code we've already made, and inside the "onClipEvent(EnterFrame)" block: onClipEvent (enterFrame) { function checkCoords(x,y,direct){ guyTL = _root["tile_"+[Link]((x-(_parent._width/2)+1)/_root.tileWdth)+"_"+[Link]((y(_parent._height/2)+1)/_root.tileHght)].barrier; guyTR = _root["tile_"+[Link]((x+(_parent._width/2)-1)/_root.tileWdth)+"_"+[Link]((y(_parent._height/2)+1)/_root.tileHght)].barrier;
guyBR = _root["tile_"+[Link]((x+(_parent._width/2)1)/_root.tileWdth)+"_"+[Link]((y+(_parent._height/2)-1)/_root.tileHght)].barrier; guyBL = _root["tile_"+[Link]((x(_parent._width/2)+1)/_root.tileWdth)+"_"+[Link]((y+(_parent._height/2)-1)/_root.tileHght)].barrier; switch(direct) { case 0: if (guyTL || guyTR) { return false; } case 1: if (guyBR || guyBL) { return false; } case 2: if (guyTR || guyBR) { return false; } case 3: if (guyTL || guyBL) { return false; } } return true; } Okay, let me try to explain what this function is going to do when we use it. First, it takes 3 variables: x, y, and direct. X and Y will be the theoretical coordinates of Guy, if he were allowed to move where he wants. direct is the direction he is moving. Next, we find Guy's corners: guyTL, Guy's Top Left Corner, will be either true or false depending on what tile that corner is on, and so on. So if Guy is standing on grass, and is moving to grass all four of those should be false, meaning none of his corners are on top of a Barrier space. The next section checks to see if the pertinent corners are going to be on a barrier or not, depending on the direction Guy is going to move. If direct is 0 Guy is trying to move UP, so we check his 2 top points to see if they will be on a barrier or not. If one of them is, then the function returns a false value. If they are BOTH false, or, if both points are not going to be on a barrier, then it returns true. Whew. If you don't understand at this point, feel free to e-mail me and let me know.... its a bit hard to explain this perfectly... Okay... next, we adjust our movement code - instead of simply moving if a key is down, we should only move after checking our coordinates with our new function, and if the function says its okay by returning true. Here's the entire modified movement code: if ([Link]([Link])) { play(); _rotation = 0; if (checkCoords(_parent._x, _parent._y - walkSpeed,0)){ _parent._y-= walkSpeed; }} if ([Link]([Link])) { play(); _rotation = 90;
if (checkCoords(_parent._x + walkSpeed, _parent._y,2)){ _parent._x+= walkSpeed; } } if ([Link]([Link])) { play(); _rotation = 270; if (checkCoords(_parent._x - walkSpeed, _parent._y,3)){ _parent._x-= walkSpeed; }} if ([Link]([Link])) { play(); _rotation = 180; if (checkCoords(_parent._x, _parent._y + walkSpeed,1)){ _parent._y+= walkSpeed; } } if ( &  &  & ) { stop(); } } Well, this should be pretty self-explanatory. If you notice, we're not sending the current x, y coordinates of Guy, we're sending what they would be if he moved. Also, in case you were wondering, when we send the direct value, 0 = UP, 1 = DOWN, 2 = RIGHT, and 3 = LEFT. Test out the Movie, and you have a walking Guy, who cannot walk through walls, or over water. Yay! Play with this a little bit, and experiment. See if you can make bigger maps, or change the maps around. If its not working, compare my source code to yours... but try to get at least some understanding before the next section, where I will show you how to make a simple Map editor, so that you can make maps much easier.
Being able to visually edit maps is a huge benefit to game developers. So, we're going to create a simple Map Editing Program to do this for us. First, make sure you've saved your Movie, and then create a whole new one. Make it at least a little wider than the game movie, and just as tall. For my file, I made it 676 X 576. Save it, and switch back to the game code, and copy/paste the this from your original file into the first frame of your new movie: mvWdth = 576; mvHght = 576; tileWdth = 64;
tileHght =64; tile0 = function () {}; [Link] = 1; [Link] = false; tile1 = function () {}; [Link] = 2; [Link] = true; tile2 = function () {}; [Link] = 3; [Link] = true; map1 = [[0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0]]; function MapMaker (map) { _root.attachMovie("blank", "tiler", d++); var mapWdth = map[0].length; var mapHght = [Link]; for (var i = 0; i < mapHght; i++) { for (var j = 0; j < mapWdth; j++) { var name = "tile_"+j+"_"+i; _root[name] = new _root["tile"+map[i][j]]; _root.[Link]("TileSet1", name, i*100+j*2); _root.tiler[name]._x = (j*_root.tileWdth); _root.tiler[name]._y = (i*_root.tileHght); _root.tiler[name].gotoAndStop(_root[name].pos); } } } MapMaker(map1); Note You should note that I changed my map1 to all 0s, which would make it all grass for now. This just makes a simple "empty pallet" for us to work with.
Next, go ahead and copy both your TileSet MC, and your blank MC to the library of the new movie. All your tiles should come with them. If you test the Movie, it should make the map like in the other Movie. So far so good.
Now, we need to add a variable to the _root, so put this line of code at the very top of the ActionScript panel for frame 1: selectedTile = 0; Next, make a button for each tile you have, and drag an instance of the tile image into all 4 frames of the button. Next, open up the TileSet MC, and make a new layer on top of all the others. Create a new button, which has nothing in it, except for a box on the "Hit" frame, which is the exact same size as your tile. Place this button in the layer above your tiles, and align it to cover your tiles.
[ button placement ]
Select the button, and add this ActionScript: on (release) { [Link](_root.selectedTile + 1); } Go back to the Main Timeline, and drag an instance of the "TileSet" MC to the stage, somewhere to the right, away from your other buttons. Name it "selector", and put a TextBox near it that says: "current tile". Now, select the button which shows your first tile, and enter this code: on (release) { _root.selectedTile = 0; _root.[Link](1); } Copy and paste the same code into your other buttons, incrementing each number by one, so that the second button would look like this: on (release) { _root.selectedTile = 1; _root.[Link](2); } And so on. If you test it out at this point, you should be able to click on a tile button, and then change the map accordingly. All we did was make a button in the TileSet which, when clicked, changes the Tile displayed to whatever "_root.selectedTile" is set to. Simple enough, right? Now, we need to find a way to save, or export these maps into a matrix. Unfortunately, according to Macromedia, Flash is not allowed
to write to an external Text file directly... In order to do this, you have to use ASP, JavaScript, or some other Server-Side Scripting... I don't feel like even trying to do this for such a quick and simple tool... if you feel you absolutely have to have such features, you're on your own. However, we can do something simpler: Have Flash create a the matrix for us, and display it on the screen for us to copy/paste, and do whatever we want. This is good enough for my purposes, so here we go: First, make a new MovieClip, and name it: "mapBox". In this MC create a TextBox, set it to Dynamic, and name it: "mapTxt". I would make some kind of background for this textbox, so that you can read it above the map. Also, make a small "close" button, and place it in this MC. Right-click the mapBox in the library, choose linkage, and set it to "Export for ActionScript". Use the same name. The code for the close button should look like this: on (release) { _root.Clicked = false; _parent.removeMovieClip(); } Now, you'll want to make a button on the main timeline, which will have this code: on (release) { if (!_root.Clicked) { _root.Clicked = true; _root.attachMovie("blank", "map", [Link]()) _root.[Link]("mapBox", "mapBox", [Link]()); _root.[Link]._x = 300; _root.[Link]._y = 200; _root.mapString = "["; var mapWdth = _root.map1[0].length; var mapHght = _root.[Link]; for (var r = 0; r < mapHght; r++) { _root.[Link]("["); for (var n = 0; n < mapWdth; n++) { var name = "tile_"+n+"_"+r; _root.mapString+= String(_root.tiler[name]._currentframe - 1); if (n < mapWdth - 1) { _root.mapString+= ","; } else { _root.mapString+="]"; } } if (r < mapHght - 1) { _root.mapString+=",\r"; } } _root.mapString+= "]"; _root.[Link] = _root.mapString; }
} All this does it look at the map on the screen, and create a string, which will look like the matrix that we want to create, then it creates an instance of the mapBox on the screen, and fills the mapText with the string. And that's it! Try it out, and see how it works! Hopefully this editor is easy for you to modify to your own needs. You should have no problem creating one of your own for your own game later on. Next, we'll discuss how to put maps together, so that our Guy can move from place to place.
Download FLA
Wait - this tutorial isn't over! There is more that needs to be written, and the rest of this tutorial will appear right here shortly. Until then, I hope this helped. If you have any questions, feel free to post them @ kirupaForum.
Creating a Vertical Shooter by Ernesto Quezada aka _Bruno : January 22 2006 Vertical shooters are also known as Fixed Shooter. A fixed shooter has players only able to control their two-dimensional position on the screen and sometimes the direction they are facing* *Wikipedia So, we will create a game using our super hero Pawel to kill dragons that are coming from one side of the screen. I have provided an FLA with all of the graphics you will need, but you will need to place the graphics in the right spot. This tutorial is more of an explanation of the code with some design work as opposed to a fully-featured tutorial covering every aspect of a vertical shooter. The following animation is an example of a vertical shooter. Click inside the animation to give it focus. Use your left and right keys to move left and right, and press the up key to fire an arrow at a dragon.
Let's Start Because there are some sprites in the game, I have provided them for you. That way, you can focus more on the Flash as opposed to the actual design work. Download and open the following FLA for the sprites:
Download Sprites FLA
Now that you have your list of sprites, let's continue. We need a sprite to make it walk, in this case I use a movieclip of Pawel (see [Link]) and as he is a knight, the instance name is knight:
On another layer, in the first frame of our timeline copy and paste the following ActionScript: //---- variables ---var steps:Number = 5; var spriteX:Number = 265; var spriteY:Number = 265; //---- functions ---function checkKeys() { if ([Link]([Link])) { spriteX += steps; } else if ([Link]([Link])) { spriteX -= steps; } } function updatePawel() { knight._x = spriteX; knight._y = spriteY; } [Link] = function() {
checkKeys(); updatePawel(); }; Ok, our hero is moving from side to side on the screen but, he can even move outside of the stage! We can animate the legs and the arms so it will look better and it will add the option of throwing arrows (we don't have arrows yet). If you double click on your knight movie clip, you should be in the timeline for that movie clip. You will see three layers corresponding to the body, arms, and legs:
More importantly, notice that the arms and legs are movie clips with the instance names...arms and legs! If you look inside the arms and legs movie clips, you will find that they have some keyframes that provide some extra animation for movement. Let's modify our code to take advantage of the new movement in the legs and arms: //---- variables ---var steps:Number = 5; var spriteX:Number = 265; var spriteY:Number = 265; //---- functions ---function checkKeys() { if ([Link]([Link]) && spriteX<510) { spriteX -= steps; [Link](); } else if ([Link]([Link]) && spriteX>40) { spriteX -= steps; [Link]();
} if ([Link]([Link])) { [Link](); } } function updatePawel() { knight._x = spriteX; knight._y = spriteY; } [Link] = function() { checkKeys(); updatePawel(); }; In the next page, I will explain the above code and guide you through adding features such as the background and arrows.
Creating a Vertical Shooter - Page 2 by Ernesto Quezada aka _Bruno : January 22 2006 In the previous page, I started explaining the code for getting our hero Pawel to move. We will keep making modifications to our code, but in this page, I will finish up my code explanation. Let's go through the code you used in the previous page:
//---- variables ---var steps:Number = 5; var spriteX:Number = 265; var spriteY:Number = 265; First we declare the variables, steps are the number of pixels our hero will move, spriteX and spriteY will help us to give value to the X and Y position of our hero.
The first function checks if we are pressing the keys that are making our hero to do things: if ([Link]([Link]) && spriteX<510) { spriteX += steps; [Link](); } The above code essentially says that only if we press the Right arrowKey and our hero is not
outside of the stage, our hero will move to the right (remember, steps = 5 pixels) and play the legs animation.
else if ([Link]([Link]) && spriteX>40) { spriteX -= steps; [Link](); } This code is the same as above, except I now check for the Left arrow key and ensure that our hero is not outside the left edge of our stage. If we press the Up arrowKey on our keyboard, the animation in our arms movieclip will play.
function updatePawel() { knight._x = spriteX; knight._y = spriteY; } This function tells Flash that our hero will take the X and Y values of the variables spriteX and spriteY.
[Link] = function() { checkKeys(); updatePawel(); }; This onEnterFrame event checks to see if we are pressing keys on the keyboard or if our hero is moving.
Creating a Vertical Shooter - Page 3 by Ernesto Quezada aka _Bruno : January 22 2006 Now that we finished up the code explanation on the previous page, let's starting making our game more realistic. Adding a Background Now we are able to move our sprite, but our sprite is "in the air." We will fix that by adding a background. To add a background is easy as you already know. Just add another layer in the main timeline and draw your background (I drew mine in Freehand and pasted it into Flash):
If you don't have time to create a background, a giant colored rectangle should suffice for now. Drawing the Arrow The arrow can be drawn in Flash as well (I used Photoshop to draw mine). If you take a look at my FLA, you will see the arrow movie clip and image in the Library. Whether you create your own arrow, or use my arrow, just ensure that your arrow is inside a movie clip. The arrow should be a movieclip and we should leave it in the library, not on the stage. Open the Library (Ctrl + L) and right click the arrow movieclip so you can open the Linkage Properties box. From the Linkage Properties dialog box, if you tick in linkage options Export for Actionscript by default the identifier will be arrow, so leave it like that. Getting back to the Code Let's modify the code we added in the previous page. Let's add to the script a couple of variables: one to declare the speed of our arrow and another to allow us to shoot one arrow at a time. Now, we also need a function to update our arrow. Now the script look like: //---- variables ---var steps:Number = 5; var spriteX:Number = 265; var spriteY:Number = 265; var speed:Number = 25; var arrowActive:Boolean = false; //---- functions ---function checkKeys() { if ([Link]([Link]) && spriteX<510)>40) { spriteX -= steps; [Link](); }
if ([Link]([Link]) && arrowActive == false) { [Link](); attachMovie("arrow", "arrows", 8); arrows._x = spriteX; arrows._y = spriteY+50; arrowActive = true } } function updatePawel() { knight._x = spriteX; knight._y = spriteY; } function updateArrow() { if (arrowActive == true) { arrows._y -= speed; } if (arrows._y<-10) { arrowActive = false; removeMovieClip(arrows); } } [Link] = function() { checkKeys(); updatePawel(); updateArrow(); };
Creating a Vertical Shooter - Page 4 by Ernesto Quezada aka _Bruno : January 22 2006 Our game is progressing nicely so far. We just need to add our dragon. In this page, we will deal with the dragon and wrap up what we have done so far. Adding the Dragon! Pawel shoots arrows, moves and there is a beautiful background (hopefully), but Pawel is shooting into an empty sky! We need the dragons. Again, as we did with the arrow, background, etc. we need to draw our dragons, I drew mine first using Freehand and then pasted into Flash. You can find a dragon movie clip in my sprite FLA's library, so don't worry if you aren't familiar with drawing a dragon. Here is how my dragon looks like:
[ our dragon - scary thing, ehh? ] For the sake of this tutorial, let's leave it as an image. You can make an animation of the wings/tail/etc. if you really really want to. We don't need instances of our dragon on the stage but we need it in the Library as a movieclip. Like we did with the arrow, let's change it's Linkage Properties. Open the Library and right click on the dragons movieclip to open the Linkage Properties window, tick Export for Actionscript, and leave the identifier as default (dragon). Back to the ActionScript We now need to add some more variables: var dragons:Number = 3; var i:Number = 0; var score:Number = 0; dragons is the number of dragons we will have on the stage. The variable i is a bit difficult to explain right now, for it does several things. Hopefully with the rest of the code, you will see what i does. score is to store our score, we can add a dynamic text box on the stage with variable name score so we know how good we are killing dragons.
We need to add two new functions, one to initialize the dragons and another one to update them. Add the following code to the end of your existing code: function initDragons() { for (i; i<dragons; i++) { attachMovie("dragon", "dragon"+i, i); dragon = _root["dragon"+i]; updateDragons(dragon); [Link] = function() { if ([Link](arrows)) {
score += 5; trace(score); arrowActive = false; removeMovieClip(arrows); updateDragons(this); } if (this._x>0) { this._x -= [Link]; } else { updateDragons(this); } }; } } initDragons(); function updateDragons(which) { [Link](random(4)); which._x = random(100)+530; which._y = random(80)+20; [Link] = random(10)+2; } In the function initDragons(), we start with the loop for (i; i<dragons; i++), usually this sort of loops look the same, with a variable to initialize the loop, the condition to loop and then increment the variable value after each loop iteration. When the value of i is less than the number of dragons, we will attach an instance of our movieclip dragon with this script: attachMovie("dragon", "dragon"+i, i) The new name of this instance is "dragon"+i, the value of i is incrementing, so the first one will be called dragon0, the second dragon1 and because we set dragons number as 3, the last instance will be dragon2 finishing the loop. To make our life easier, we will set a variable to store the name of each dragon, dragon = _root["dragon"+i]; To update the dragons that have been just created, we need to call the function updateDragons(dragon). if ([Link](arrows)): this line checks if the arrows hit them, and if it happens, we increment the score by 5: score += 5; arrowActive = false: sets the arrow's status to be inactive removeMovieClip(arrows): because the arrow has already hit something, we can safely
remove it. This line does that. updateDragons(this): we will update the dragons using the soon to be explained updateDragons function.
if (this._x>0) { this._x -= [Link]; } else { updateDragons(this); } if the dragon is on the stage, then its x position is bigger than zero. We will set it to move horizontally (x axis), but if the x position is not greater then zero, then we send that dragon to our updateDragons function.
The updateDragons function is pretty straightforward. It is run whenever a dragon has been hit with an arrow or if it moves outside of the stage. We simply try to simulate a new dragon by specifying a new vertical position, horizontal position, and speed. Your final code should look like the following: //---- variables ---var steps:Number = 5; var spriteX:Number = 265; var spriteY:Number = 265; var speed:Number = 25; var arrowActive:Boolean = false; var dragons:Number = 3; var i:Number = 0; var score:Number = 0; //---- properties ---[Link](10); //---- functions ---function checkKeys() { if ([Link]([Link]) && spriteX<510) { spriteX += steps; [Link](); } else if ([Link]([Link]) && spriteX>40) { spriteX -= steps; [Link](); } if ([Link]([Link]) && arrowActive == false) { [Link]();
attachMovie("arrow", "arrows", 8); arrows._x = spriteX; arrows._y = spriteY+50; //arrowActive = true } } function updatePawel() { knight._x = spriteX; knight._y = spriteY; } function updateArrow() { if (arrowActive == true) { arrows._y -= speed; } if (arrows._y<-10) { arrowActive = false; removeMovieClip(arrows); } } function initDragons() { for (i; i<dragons; i++) { attachMovie("dragon", "dragon"+i, i); dragon = _root["dragon"+i]; updateDragons(dragon); [Link] = function() { if ([Link](arrows)) { score += 5; trace(score); arrowActive = false; removeMovieClip(arrows); updateDragons(this); } if (this._x>0) { this._x -= [Link]; } else { updateDragons(this); } }; } } initDragons(); function updateDragons(which) { which._x = random(100)+530; which._y = random(80)+20; [Link] = random(10)+2; }
[Link] = function() { checkKeys(); updatePawel(); updateArrow(); }; You are done! If you have any questions, please visit the forums.