How to Automate Patterns

[ LiB ]

So why am I teaching you how to draw dynamic lines if this book is supposed to teach you how to make games ? The reason this chapter even made the cut for this book was because these commands can greatly enhance your gaming and animation experiencefor you, the programmer, and your game players. Demos like the ones in this chapter will allow you to get comfortably acquainted with these commandsenough for you to branch off on your own and create your own surrealistic effects.

You'll have to really practice these line-drawing commands in order to get used to using them. Some effects, patterns and designs can be generated by your scripts with loops to create some interesting patterns, as you'll see in this section. We'll start out with simple patterns and then build up from there. To start, I'm going to create a list of horizontal lines on the screen.

GDA_PROG7.3.fla is the file name that's under the GDA_CH07 folder on the CD. This project contains code that produces the output shown in Figure 7.4.

Figure 7.4. A line pattern created with ActionScript

NOTE

NOTE

Most of the code in these demos is familiar, so that you can just focus on the new parts you're learning about in each section. If you do end up seeing spanking new code, don't worry; I will explain it all.

Take a look at the following listing.

 // Game Development with ActionScript // 2003 (c) Lewis Moronta // Drawing with a Script, Chapter 7 // This program demonstrates how to // draw and connect lines to create // shapes with built in ActionScript // Commands.  // Setup the line style for the // following commands. lineStyle( 1, 0x000000, 100); // Initialize the initial starting point. moveTo( 0, 0); var step = 5; // This is the space between the lines // Connect the lines by subsequent commands for (var y = 0; y < 200; y+=step) {   moveTo( 0, y);   lineTo( 319, y); } 

Notice that this listing is not much longer than the other ones but it does so much more. Gotta thank that for loop. This program basically initializes the line style then sets up the initial point where ActionScript works. Once this is accomplished, the program enters into a loop that draws a line at a different y value each time is passes .

Let's look into the code. The following line, as you already know (because I have pounded it into your brain) sets up the line style:

 // Setup the line style for the // following commands. lineStyle( 1, 0x000000, 100); 

I decided I wanted 1-point thickness on the lines. I also wanted black lines, and I wanted them 100% opaque (remember, though, you can leave this parameter out and Flash will default to 100% opacity anyway).

The following line also sets up the program before it starts doing any real work:

 // Initialize the initial starting point. moveTo( 0, 0); 

This line moves Flash to its origin point, (0, 0), causing any subsequent line commands to draw from this point.

Before I planned this small demo, I decided that the for loop should be able to control where the next line would be drawn. That's why I use y , the loop counter, as the Y-coordinate of the line as well. This way, I can adjust the value and I'll have a tighter or looser pattern depending on the "step" taken by the loop (in other words, how many pixels separate each line). I put this value in a variable called step , and set it to 5:

 var step = 5; // This is the space between the lines 

Before I explain the short loop below, I want you to notice a few things about the setup.

 // Connect the lines by subsequent commands for (var y = 0; y < 200; y+=step) { 

As you can see, y is declared and initialized as 0no problem there. You can also tell that it's going to loop while y is less than 200 (which is the total height of the movie). Now, for the increment stage of the for loop, you can see that y is not incremented by one on each pass as it usually is; instead it is incremented by the value of the step variable.

You already know that each line will be drawn according to y during each pass. The following two lines help move the movie down while drawing lines every certain number of pixels. Remember that it is the step variable that decides this amount. I have already assigned it to 5.

 moveTo( 0, y);   lineTo( 319, y); } 

It might not be immediately clear what is happening here, but I want you to observe how both commands use the for's y variable to decide their next y position. Their x positions will always be 0 to 319, which means that a line will be drawn from left to right on each pass. As the line's y position is the same (on each pass), you can conclude the line will be horizontal.

Let's get a bit more complicated, but use similar code. Before you move on, take a minute and see if you can write up the code that creates a cross pattern just like that in Figure 7.5.

Figure 7.5. Cross pattern created with a script

Now take a look at the following listing. I've made a cross pattern too. You'll be surprised at how this listing is almost identical to the previous listing.

NOTE

NOTE

A lot of the coding techniques that I use are universal, so if you feel comfortable using another style, feel free. But when learning new topics, try to keep your code as simple as possible so that you can master the concepts before mastering the code writing.

 // Game Development with ActionScript // 2003 (c) Lewis Moronta // Drawing with a Script, Chapter 7 // This program demonstrates how to // draw and connect lines to create // shapes with built in ActionScript // Commands. // Setup the line style for the // following commands. lineStyle( 0, 0x00FF00); // Initialize the initial starting point. moveTo( 0, 0); var step = 5; // This is the space between the lines // Create the horizontal lines... for (var y = 0; y < 200; y+=step) {   moveTo( 0, y);   lineTo( 319, y); } // Create the vertical lines... for (var x = 0; x < 320; X+=step) {   moveTo( x, 0);   lineTo( x, 199); } 

This listing creates a cross-wired green-lined pattern. Allow me to break it down for you. lineStyle is the first command I want to go over in the listing. Notice a parameter was omittedthe last one, and the value that was given to the first parameter.

 // Setup the line style for the // following commands. lineStyle( 0, 0x00FF00); 

Notice that lineStyle has 0 as its line width. Does this mean that the lines won't be visible? Nothis means that you want Flash to draw a hairline type of line. A hairline is a line that is exactly one pixel width.

The following line resets the current position to (0, 0):

 // Initialize the initial starting point. moveTo( 0, 0); 

I kept the step variable in this demo. It will be used in both of the following loops.

 var step = 5; // This is the space between the lines 

The following loop is really similar to the previous one:

 // Create the horizontal lines... for (var y = 0; y < 200; y+=step) {   moveTo( 0, y);   lineTo( 319, y); } 

This short loop loops through the height of the movie, drawing lines five pixels apart. It's exactly the same loop as in the last example.

I want you notice the final loop. It's very similar to this last loop, but it draws lines going vertically moving horizontally:

 // Create the vertical lines... for (var x = 0; x < 320; X+=step) {   moveTo( x, 0);   lineTo( x, 199); } 

This loop creates the x variable that is initialized 0. As the width of my movie is 320, I set up the loop to loop while x is less than 320. Notice that x is also being incremented by step on each pass. This means that you'll get square shapes when the pattern is finished and drawn.

Now notice the line drawing commands. They're using the x variable to dictate their x position. As their y values are constant, you know that lines will be drawn from top to bottomleft to right.

NOTE

TIP

Mess with the code.Try changing the color of each line as each new line is created.You'll learn from this exercise.

Right before I finish up this section, let me show you another quick demo. This one is demo GDA_PROG7.5.fla. Notice how I slowly built upon the first demo. This is a great way to workfun, too.

Check out Figure 7.6 before you examine the listing, so that you can get an idea of what the demo does.

Figure 7.6. A 3D-ish pattern

 // Game Development with ActionScript // 2003 (c) Lewis Moronta // Drawing with a Script, Chapter 7 // This program demonstrates how to // draw and connect lines to create // shapes with built in ActionScript // Commands. // Setup the line style for the // following commands. lineStyle( 0, 0x0000FF); // Initialize the initial starting point. moveTo( 0, 0); var step = 0; // This is the space between the lines // Create the horizontal lines... for (var y = 0; y < 200; y+=step, step++) {   moveTo( 0, y);   lineTo( 319, y+step); } step = 0; lineStyle( 0, 0x00FF00); // Create the vertical lines... for (var x = 0; x < 320; X+=step, step++) {   moveTo( x, 0);   lineTo( x+step, 199); } 

Now that you're getting the hang of it, let's go through this code a bit more quickly. In the first line you'll see that I'm setting the default line style to a hairline. You can also see that it will be drawn in blue:

 // Setup the line style for the // following commands. lineStyle( 0, 0x0000FF); 

NOTE

TIP

All this time I've been assigning colors to these lines and the only value I've been using is 0xFF (in hexadecimal). 0xFF is equivalent to 255, and it's the highest value of that particular color you can mix in with the other two. In other words, you could have a value of 255 for red, 255 for green, and 255 for blue and you would get 0xFFFFFFthis would yield white.

I set up the first point at (0, 0) and the step value to 0:

 // Initialize the initial starting point. moveTo( 0, 0); var step = 0; // This is the space between the lines 

Now that we are actually entering a loop, I'll explain what I'm doing during the incrementing portion of the for loop. Take a look:

 // Create the horizontal lines... for (var y = 0; y < 200; y+=step, step++) { 

Besides incrementing y with the step value, I added another incrementing statement. The step variable is incrementing after each pass, which will create an interesting effect. It's hard to visualize straight from the code but check out the SWF or Figure 7.5 to better understand what's happening.

NOTE

TIP

In a for loop, it is possible to initial ize more than one variable and increment more than one variable. All you have to do is use a comma, just like I did in the last code listing.

I changed the loop's body slightly as well:

 moveTo( 0, y); lineTo( 319, y+step); 

Notice that I added the step variable to the y variable to get steadily incrementing spaces to the right side of the stage.

Another difference introduced by this latest script is the mid-program reset code that I put in. It sounds more complicated than it is.

 step = 0; lineStyle( 0, 0x00FF00); 

All I did was reset the step variable and change the line style to green. I did something similar, to the last loop as well. I incremented the step variable along with the x variable. I also added the step value to the x value when drawing the line in order to get nicely incremented spaces towards the bottom of the stage.

[ LiB ]