Drawing Lines to the Cursor

[ LiB ]

Drawing dynamic lines to the current cursor's position will reinforce everything you know so far. A case in which you might use this technique would be when you are working on some tools for your game project. One of those tools could be a character creation program that requires you to draw dynamic lines that the programs logs, and later saves. Using a program like this would nearly be impossible with the keyboard, so learning how to program the mouse and dynamic lines is essential.

The demo I have prepared for this section is pretty cool because you get to interact with it, as you'll soon see. You, the user and programmer, get to control the program's behavior. See Figure 9.7 for a shot of this demo in action.

Figure 9.7. Drawing dynamic lines to the cursor

graphic/09fig07.gif


Would you believe that the longest block in this demo is four lines and that there is only one block of code here? See the following listing.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demonstrates how // you can have a line drawn to your // curor's position dynamically. // Let's prepare a function that's // constantly executed onEnterFrame = function () {   // Let's clear all the lines   // off the screen.   clear();   // Let's setup the line style   lineStyle(0, 0xFF0000);   // Let's move back to the center   moveTo (274, 199);   // Let's finally draw the line to   // the mouse cursor position.   lineTo(_xmouse, _ymouse); }; 

There is only one new command in this listing that I haven't taught you yet, the clear method of a Movie Clip. It clears the screen from all lines drawn dynamically. This command is the first that I placed within the onEnterFrame handler on the main Timeline. I did this to ensure that every time I enter this function, the main stage will always be clear (from dynamic art) before drawing another line.

Next up, I change the line style, which you know how to do very well:

 // Let's setup the line style lineStyle(0, 0xFF0000); 

I gave the line a hairline thickness and assigned a red color to it.

The next thing I did was add a moveTo command to make sure that the line is always drawn from the center.

 // Let's move back to the center moveTo (274, 199); 

As my movie is 550 and 400, I approximated its center by using 274 and 199.

The next thing I did was draw the line to the current cursor position using the _xmouse and _ymouse properties of the main Timeline:

 // Let's finally draw the line to // the mouse cursor position. lineTo(_xmouse, _ymouse); 

That's it. Now all you have to do is work up to doing this in your sleep.

Programming Lines Chasing the Cursor

Before going on and improving this program in the next section, let's see how you can modify the last example program so that you can get your juices flowing and design the next popular game design program.

See Figure 9.8, which shows my next demo. This demo is very similar to the previous one; as a matter of fact, I took the last demo and modified it to get completely different results.

Figure 9.8. Lines chasing your mouse

graphic/09fig08.gif


So what does the demo do? Nothing but draw lines as you move your mouse cursor. Interesting, very interesting.

Take a look at the changes that I made from the last listing.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This program demonstrates how // you can set up the program to // initialize and then draw consecutive // lines that are connected. // Initialize... onLoad = function () {   // Let's setup the line style   lineStyle(3, 0xFFFFFF);   // Let's move back to the center   moveTo (274, 199); }; // Let's prepare a function that's // constantly executed onEnterFrame = function () {   // Let's connect the lines...   lineTo(_xmouse, _ymouse); }; 

As you can see, what I did was move most methods to the initialization function, onLoad . This causes the program to set up once and then move on with its short life. // Initialize...

 onLoad = function () {   // Let's setup the line style   lineStyle(3, 0xFFFFFF);   // Let's move back to the center   moveTo (274, 199); }; 

In this function, I have set the line thickness to 3 and its color to white. I have also initiated the first line to be drawn from the center of the stage.

As you can see from the onEnterFrame handler, all you have is a lineTo command in there. And as this command is executed on every frame, it will end up drawing lines connecting the previous line. All of the lines will be relative to where the mouse was and to where it was moved.

I know all of this is giving you ideasjust because I'm such a nice guy, we'll take it a step further in the next section. Read on.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net