How To Program Video Games Of Your Own

How To Use Loops

2007-04-12T03:03:00.000-05:00

Sometimes it’s necessary to have line(s) of code execute over and over until a certain condition is met. In the initialization (“setting up”) of your enemies or tiles, it’s often needed to cycle through a loop to set everything up. It's also important to loop through a series of objects like enemies to check their data or perform actions to them.

The two important types of loops in programming are the while loop, and the perhaps somewhat more complicated for loop. The while loop is simply the key word “while”, followed by a condition in parentheses, then a group of actions all contained in brackets.

Like so:

while(Sleeping){
Play_Soft_Music(); //Gotta have that soft music.
}

However, there is a better type of loop that can be used in place of this: the for loop. Here’s how one works: think of it as a function; you type the keyword ‘for’, then in parentheses, you initialize your counting variable, then a semi-colon, then the condition that must be met for the loop to run through each time, then another semi-colon, and finally, the increment statement. Here’s an example:

for (itemsPlaced=0; itemsPlaced < totalItems; itemsPlaced++){
//Place items throughout the level.
}

This code counts the number of itemsPlaced, starting at 0 when we begin. The code continues as long as the number of items placed is less than the number of total items. Each time we go through the loop, we increase the value of itemsPlaced. Although the use of for loops still may not be immediately apparent to you now, you’ll see in time how useful they can be, ESPECIALLY in conjunction with arrays and setting up each value within the array like so:

for (x=0; x<5; x++){
MyArray [x] = x*5; //Assign the xth element of the array to x*5
//This produces 0, 5, 10, 15, 20, etc.
}

More Shortcuts

2007-04-08T15:46:00.000-05:00

Switch statements are simply a much easier and shorter way of writing multiple if statements. If you have a series of if statements testing to see if multiple values have been met, usually the code becomes cluttered, long, and less manageable. Multiple if statements of this sort would look like this:

if (x==5){
//…
}
if (x==6){
//…
}
if (x==7){
//…
}

In situations such as this, it would be advantageous to use a switch statement. A switch statement is activated with the use of the keyword 'switch' and is contained within a block of braces, just like an if statement. The difference is that instead of having to constantly re-write if statements and have clutters of braces, you need only to write out the word "case" before the value that you're testing for. A switch statement is written like this.

//Switch Statement

switch (x) {

case 1: //Actions ;
break;
case 2: //Actions ;
break;
default: trace(“Try something else.”);
break;
}

//Versus the same functionality, using if/else statements:

if (x==1){
//Actions
} // break
if (x==2){
//Actions
} // break
else{
trace(“Try something else.”);
} // break

It is absolutely vital to include the “break” statements within your switch statement. Otherwise, Flash won’t know when one case ends and another begins, and if one case (condition) is met, then it will not only execute that code, but all of the other code below it, until it encounters a “break;” line. This is often referred to as having a leak, as the code execution "leaks" downward until a break statement is met.

This technique should help to save you substantial writing time, as well as make your code far more readable.

How To Write Out Much Shorter And Easier If / Else Statements

2007-04-06T15:25:00.000-05:00

Sometimes you might wish to have an easy alternative to the tedious task of writing (often repetitive) if and else statements. If and else statements can eventually crowd your code with excessive lines. With this shortcut, you can express entire if and else blocks, and even be able to assign a variable a value based on whether a condition is true or not; all in one line. The solution is the called the ternary or conditional operator. It' called the "ternary" operator because it performs operations of 3 operands (an operand is simply data that's effected by an operator). The syntax for this particular operator is as follows:

//Variable = ( (condition) ? true actions: false actions)
Speed = (guy._x > 500 ? 0: 5);

Observe the example using the assignment of the “Speed” variable. That one line means all of this: “If guy._x>500 evaluates to TRUE, assign Speed to 0. Else, assign it to 5.”

If this syntax may confuse you a great deal at first, don't fret. Many programmers have difficulty with this particular operator as its syntax is hard to understand to the untrained eye.

Conditional Testing: The Most Important Concept Of Interactivity

2007-04-05T03:11:00.000-05:00

This is an absolutely fundamental concept to understand. Without knowing how to test if certain conditions have been met, you have no way of allowing users to interact with your Flash movie. The most important concept in conditional testing is the all-mighty if statement.

If Statements

If statements are very important in programming games. Without them, you absolutely cannot have a game. An if statement allows your game to branch off into different sets of actions, depending on if certain conditions are met. The syntax for an if statement is as follows:

if (condition==true) {
//Take These Actions
}

So try it out. Let’s say you want an error message printed if your character moves off the visible screen.

//If the character’s x position is greater than the stage’s width,
if (_root.character._x>Stage.width) {
//Trace an error message.
trace(“Character is off the stage!”);
}

Now we can use if statements to determine if a condition is true, and act accordingly based on the evaluation of that condition. This is when your logical operators like the comparison operator (==), greater than (>), less than (<), logical AND (&&), logical (OR), and logical NOT or FALSE (!=, !) really come into use.

Else Statements

An ‘else’ statement is simply the statement that is executed if no if statements in a particular set of if statements evaluate as true. For example, if you’re checking to see whether or not the user entered your parents’ names into a text box, you might use an else statement to print messages based on what they entered:

if (Name==“John” || Name==“Susan”){
trace(“Hey, you’re named after one of my parents!”);
}
else{
trace(“You’re not named after one of my parents….”);
}

Remember what the symbol ( || ) means? That’s logical OR. If either “John” OR “Susan” is entered, the message is traced “Hey, you’re named after one of my parents!”. Otherwise, if any other name is entered, a message will say that you’re not named after one of them.

While these examples may not seem useful, they can help you to establish a strong foundation with understanding how to test for conditions. If and else statements will eventually become second nature to you, and you'll see many of them throughout the games that you create.

How to Keep Your Code More Organized With Comments

2007-04-03T21:07:00.000-05:00

During the course of your time spent programming video games, there will often be times where you need to go back over your code days, weeks, even months after you've originally wrote the code to update it. (for example in games that have new versions released on a regular basis, like Madden) You'll find that without proper documentation, you can easily forget what your code does and why it's there. This is often referred to as "code rot." The solution? Comments.

Comments are used in code to tell you or someone else(you might be working on a big project in a group) what the code does. Comments are not parsed by Flash; and for that matter, the concept of commenting codes is pretty universal throughout all programming and scripting languages. Comments only exist to aid in the organization and readability of your code. If you think this isn’t important, think again. Just because you understand what you’re typing up now doesn’t mean that 6 months from now you’ll remember what parts of your code did what.

So that your code is manageable and others can read and understand it (so that perhaps they can help you make your game), it’s important to have comments that describe what does what, and why it does it.

There are two different styles of comments in programming: I call them C-style comments and C++ comments. Or you might wish to call them multi-line and single-line comments, respectively.

C-style comments begin with ‘/*’ and do not end until you terminate them with the ‘*/’ symbols. If you do not close these comments, ALL code after your opening comment symbol will not be parsed as code, but rather ignored. Sometimes this is actually done intentionally to test what a game would be like without certain lines of code, without having to actually DELETE them. This is called “commenting out” code.

Example:

*/ This will go on and on…
…And on… until I terminate the comment with */

You’re also able to use C++ (or single-line) comments. These are much easier to type: they’re simply two forward slashes ‘//’. Everything beyond those slashes is “commented out” until it reaches the end of the line. So these comments don’t need to be terminated. They automatically terminate at the end of any line of code.

Example:

if (x==5) //If x equals 5,
DoSomething(); //Do something.

How To Make Your Characters Come To Life in Flash

2007-04-02T15:51:00.000-05:00

Our first lesson that we'll teach the aspiring video game designer is the very basics of moving a character in Flash. In any game, obviously control over the character's movement is paramount.

To understand how our character can move, first you must be familiar with how the axes (the horizontal and vertical planes, or x and y) work in Flash. Unlike the coordinate plane that you may be familiar with from your math classes, the origin (0,0) in Flash is not in the dead center of the screen, but rather in the top-left corner. As you increase the x value of the coordinate, the location moves right, and increasing the y value of a coordinate moves an object down.

In Flash, there are certain parameters that objects like movie clips possess: their position on the x axis, their position on the y axis, their height, width, and their rotation degree; just to name a few. These parameters are known as properties, and can easily be manipulated to change the orientation of the object. Properties are expressed by their name, which is prefixed with an underscore (_). For example, the way to change the position of any movie clip would be expressed as:

_root.myMovieClip._x += 5;

To create a movie clip of your own, draw any object on the stage, highlight your drawn object, and press F8 or select "Convert to Symbol..." under the Modify menu. A dialogue box will appear, allowing you to create a movie clip, button, or graphic symbol. Select "movie clip" and make sure you give your movie clip a relevant name simply for organizational purposes. A movie clip is essentially a drawn object that can be programmed to behave in a certain way with Flash's built-in ActionScript language. Movie clips run completely independent of the main animation timeline. To enter code or "Actions" into your movie clip, you must highlight your desired movie clip and select "Actions" from the Window menu, or simply press F9.

It's important to note that when entering Actions into a movie clip, all code must be contained within onClipEvent() handlers. Typically, the two handlers you'll use the most is onClipEvent(load), and onClipEvent(enterFrame). onClipEvent(load) script executes once when the movie clip first loads, and onClipEvent(enterFrame) executes all the code contained within every frame. If your movie has a frame rate of 30 frames per second, then onClipEvent(enterFrame) code is executed 30 times per second.

This script, assuming that your movie clip has the instance name, "myMovieClip" will first find the value of _x in myMovieClip. Let's assume that particular movie clip is located at the origin (0,0) in the top-left corner. After this command is executed, the clip will be located at (5,0), which will locate the clip 5 pixels to the right of where it was originally. This is the foundation for moving characters and objects around on the screen.

Now all that we must do is allow the user to press and hold down arrow keys to force our character or object to move in any direction. (up, down, left, right, and all four diagonal directions in-between each of them) To do this, we have to use conditional testing (if statements) every frame to test to see if one of the arrow keys have been pressed, and manipulate our character's _x and _y properties accordingly.

onClipEvent(enterFrame){

if (Key.isDown(Key.LEFT)){
this._x -= 5;
}

if (Key.isDown(Key.RIGHT)){
this._x += 5;
}

if (Key.isDown(Key.UP)){
this._y -= 5;
}

if
(Key.isDown(Key.DOWN)){
this._y += 5;
}

}

This code ensures that Flash will check every time a new frame is loaded to see if one of the arrow keys is pressed, and move your movie clip based on which arrow keys are pressed. Your character can even move in diagonal directions with this very simple script. It should be noted that using the default frame rate of 12 frames per second will produce a very slow and 'choppy' effect. Typically, 30 frames per second is a good frame rate for a Flash video game. To alter the your document's frame rate, simply right-click an empty part of the stage in Flash and select "Document Properties."

Welcome

2007-04-02T13:47:00.000-05:00

Welcome to Stellarsoft Studio's daily blog about programming video games of your very own. Here we'll feature daily tips, tricks, and tutorials about making your own games, namely in Macromedia Flash. We hope that you find our blog entries very useful and take the knowledge that you gain from these tutorials and put it to use in your own creative way. After all, interactive video games are one of the very best mediums through which to express your creativity and ideas.