Flowcharting

by Marz   | filed under Flash and ActionScript

Flowcharting, my friend, is a programmer's best friend. If you have ever taken a programming course for C++ or pretty much everything, then my guess is that you know how to do something like a flowchart. Over the years of programming I have developed some different methods of flowcharting. Some are for more business reasons, others are just to remind me of things.

What is it really though? Flowcharting is a graphic and text based summary of what you are going to program and how you are going to piece it together. It typically gets drawn on a piece of printing paper and is usually scratched out and redone 500 times during the development of the game! But, no matter what, it can save you loads of time when getting into the real programming comes around.

This is what a typical flowchart might just look like. Seeing as how my scanner is being entirely ghetto, I'm going to have to display this through a Flash drawing:

[ example of a flow chart ]

All right, I know it's very small but at the same time, it conveys what a flowchart might look like and some of the elements found in a flowchart. I know, I know... it doesn't look like a flowchart you might see in a real programmer's hands, but it still shows you what a flowchart is.

Now, a real programmer's flowchart will be a lot more complex. Sometimes it will look something like this:

[ another example of a complex flow chart ]

Now, looks complex doesn't it? Multiply that by about 50 and you'll have yourself a working game flowchart! But no worries... it can be a pain, but like I said it can help out tremendously. Each symbol in a flowchart has its own function and use.

Like, the diamond symbol is used for an if type statement. Basically stating that if this happens, go this way. If it doesn't happen, go this way. Or if this happens, go this other way.

Flowcharting Symbols

• Diamond: Used for if statements. Each message branches off in a different area, each with their own line.
• Box: Can be used to describe functions, variables, or anything really. The function or variable name is located at the top in the gray area, and the information and description about the object is located in the box right below it. If it returns a value, such as true or false, then separate lines can be drawn off this function as well.
• Parallelogram: Used to actually state the function and use it. This is where the action typically happens. For example, throwBaseball(). If that function returns anything, then that is when you start to branch off with different lines.
• Solid Box: This is where you put the final layout image, or whenever you print to the screen this is what happens!
• Lightning Bolts: Used for debugging and termination. If you run into this area, your program should quit in an error or terminate without saying. A problem should occur at these areas. This is great for debugging everything.

These are all of the basic symbols. If you have any problems using these or if you need a better description of what to do with these, ask and you shall receive at [email protected].

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going!

- Marz