Macromedia Flash MX Game Design Demystified phần 3 pot

Solving for the time is very difficult. We must insert the equations for x1 , y1 , x2 , and y2 . We then square both sides of the equation (to get rid of the square root sign). What we are left with is a quadratic equation. Quadratic equations have two solutions, which means that when we solve for the time, we will get two answers. Conceptually we can see why in this case we will get two separate Imagine two circles moving toward each other. At one time they will be touching on an edge. As goes on, they will move through each other, but just as they are about to separate, they will be exactly at one point a g ain. The two times found by solvin g the quadratic equation g ive the two times that a collision can occur. When we have our two answers, we look at the lower of the two times and discard the other one. By defining these constants, R = radius1+radius2 a = -2*xmov1*xmov2+xmov1 2 +xmov2 2 b = -2*xl1*xmov2-2*xl2*xmov1+2*xl1*xmov1+2*xl2*xmov2 c = -2*xl1*xl2+xl1 2 +xl2 2 d = -2*ymov1*ymov2+ymov1 2 +ymov2 2 e = -2*yl1*ymov2-2*yl2*ymov1+2*yl1*ymov1+2*yl2*ymov2 f = -2*yl1*yl2+yl1 2 +yl2 2 g = a+d h = b+e k = c+f-R 2 we can write the vastly simplified quadratic equation as g*t 2 +h*t+k = 0 Using the quadratic formula to solve for the time, we arrive at and 4. This calculation is performed for every frame. If either of the times is less than or equal to 1, then a collision happened between the previous frame and the current frame. This works for any possible velocity; there is no limit. If you are interested in seeing this math worked out more rigorously, check out circ_circ_frame_independent.pdf in the Chapter05 directory on the CD. It shows this worked out manually. Solving Quadratic Equations Any equation in which the variable has an exponent of 2 (and no other terms with a higher exponent) is a quadratic equation. For instance, a*t 2 +b*t+c = 0 is a quadratic equation. All quadratic equations have two solutions; this means there are two values for the variable for the equation is valid. The simplest example is x 2 = 4. This is a quadratic equation with the two solutions 2 and -2. There is a formula called the quadratic formula that is used to find the two solutions. Using a*t 2 +b*t+c = 0 as an example, here are the solutions for t: and In the circle-circle example given in this section, the quadratic equation was manipulated until 1. It defines an object for each movie clip to store information about that movie clip. 2. It defines a function that updates the position of the movie clips in memory (not on the stage). 3. It defines a function that checks for collisions between any two balls (circles). 4. It defines a function that physically places the balls on the screen. 5. It creates an onEnterFrame event to call all of these functions in every frame. Here is the ActionScript that defines the objects: 1 1 1 1 game = {}; 2 2 2 2 game.numBalls = 2; 3 3 3 3 for (var i=1; i<=game.numBalls; ++i) { 4 4 4 4 var name = "ball"+i; 5 55 5 game[name] = {}; 6 66 6 game[name].clip = _root[name]; 7 77 7 game[name].xpos = game[name].clip._x; 8 88 8 game[name].ypos = game[name].clip._y; 9 99 9 game[name].radius = game[name].clip._width/2; 10 1010 10 game[name].xmov = 0; 11 1111 11 game[name].ymov = 0; 12 1212 12 } 13 1313 13 game.ball1.xmov = 1; 14 1414 14 game.ball1.ymov = 2; 15 1515 15 game.ball2.ymov = 1; First we create an object called game . This ob j ect will store all of the other ob j ects we create. The only reason for having this container object, game , is to keep from polluting the timeline with unneeded data. We can track of everything we need to about the balls in the game object. In the second line we set a variable on game object that stores the number of balls we have chosen to use. Next, we loop for each ball, create an ob j ect for it, and store information about that ball in its ob j ect. Notice that we are giving the balls no starting speeds. In lines 13–15 we assign starting velocities to the balls. Then comes the following ActionScript: 1 11 1 function moveBalls() { 2 22 2 for (var i=1; i<=game.numBalls; ++i) { 3 33 3 var ob = game["ball"+i]; 4 44 4 ob.tempx = ob.xpos+ob.xmov; 5 55 5 ob.tempy = ob.ypos+ob.ymov; 6 66 6 } 7 77 7 } This function loops through the list of balls (in this case, just two) and updates their temporary positions in memor y to their current p ositions p lus their s p eed. We do not y et u p date the p osition of the actual movie cli p on the stage. I encourage you to get into this habit of creating a temporary position of the movie clip in memory, because when we start dealing with collision reactions, we will update the temporary position of the movie clip (due to multiple collisions or forces) possibly several times before we actually place the movie clip the stage. Let's analyze an example. Imagine that you are coding a game in which a ball bounces off a wall. This ball could be written in standard quadratic-equation form. From there it is easy to solve. Now let's look at an example of this in ActionScript. Open circle_circle2.fla from the Chapter05 folder on the CD. There are two movie clips on the stage, ball1 and ball2. its most fundamental level, the ActionScript used here performs all of the following tasks: be moving very fast. Now imagine that on one frame the ball is not colliding with the wall, and on the next frame y ou detect that half of the ball is collidin g with the wall. When this ha pp ens, y ou do not want to u p date that ball's position on the stage to show this. Rather, it is a good idea to update its position in memory to reflect where the ball should be and then render the ball on the screen. So, if it is detected that the ball is colliding with the wall (no matter how deep into the wall the ball is), then we should update the ball's in memory so that the ball is just barely touching the wall. At the end of the frame, we render the ball on screen, and it looks as if it is j ust barely touchin g the wall (which is what we want). In real life, a ball would move past the wall boundary. Next we create a function to render the balls onto the stage. 1 1 1 1 function renderBalls() { 2 22 2 for (var i=1; i<=game.numBalls; ++i) { 3 33 3 var ob = game["ball"+i]; 4 44 4 ob.xpos = ob.tempx; 5 55 5 ob.ypos = ob.tempy; 6 66 6 ob.clip._x = ob.xpos; 7 77 7 ob.clip._y = ob.ypos; 8 88 8 } 9 99 9 } This function simply sets the physical position of each movie clip using the value of the x and y position variables on the object, which are xpos and ypos . Now (drum roll, please) we come to the function that handles the collision detection itself. It's a fairly large function, but it follows exactly what we discussed about the logic for determining the collisions. 1 11 1 function ballToBallDetection(b1, b2) { 2 22 2 //set the speed variables 3 33 3 var xmov1 = b1.xmov; 4 44 4 var ymov1 = b1.ymov; 5 55 5 var xmov2 = b2.xmov; 6 66 6 var ymov2 = b2.ymov; 7 77 7 //set the position variables 8 88 8 var xl1 = b1.xpos; 9 99 9 var yl1 = b1.ypos; 10 1010 10 var xl2 = b2.xpos; 11 1111 11 var yl2 = b2.ypos; 12 1212 12 //define the constants 13 1313 13 var R = b1.radius+b2.radius; 14 1414 14 var a = -2*xmov1*xmov2+xmov1*xmov1+xmov2*xmov2; 15 1515 15 var b = -2*xl1*xmov2-2*xl2*xmov1+2*xl1*xmov1+2*xl2*xmov2; 16 1616 16 var c = -2*xl1*xl2+xl1*xl1+xl2*xl2; 17 1717 17 var d = -2*ymov1*ymov2+ymov1*ymov1+ymov2*ymov2; 18 1818 18 var e = -2*yl1*ymov2-2*yl2*ymov1+2*yl1*ymov1+2*yl2*ymov2; 19 1919 19 var f = -2*yl1*yl2+yl1*yl1+yl2*yl2; 20 2020 20 var g = a+d; 21 2121 21 var h = b+e; 22 2222 22 var k = c+f-R*R; 23 2323 23 //solve the quadratic equation 24 2424 24 var sqRoot = Math.sqrt(h*h-4*g*k); 25 2525 25 var t1 = (-h+sqRoot)/(2*g); 26 2626 26 var t2 = (-h-sqRoot)/(2*g); 27 2727 27 if (t1>0 && t1<=1) { 28 2828 28 var whatTime = t1; 29 2929 29 var ballsCollided = true; 30 3030 30 } 31 3131 31 if (t2>0 && t2<=1) { 32 3232 32 if (whatTime == null || t2<t1) { 33 3333 33 var whatTime = t2; 34 3434 34 var ballsCollided = true; 35 3535 35 } 36 3636 36 } 37 3737 37 if (ballsCollided) { 38 3838 38 //Collision has happened, so throw a trace 39 3939 39 trace("Ouch!"); 40 4040 40 } 41 4141 41 } First we give the function a name, ballToBallDetection , and set two parameters, b1 and b2 . When this function is called, the two objects will be passed in and represented by b1 and b2 . In lines 2–11 we define speed and position variables needed. Next, we define all of the constants in terms of the speed and position variables. The variable names match what we discussed earlier in this section. With lines 24–26 we solve the quadratic equation. In line 24 we set a variable called sqRoot whose value is equal to the square-root term in our solution to the quadratic equation (remember that there are two both of which contain the same square-root term). We set this as a variable so that it can be reused for solutions (lines 25 and 26). At this point, we have two times at which the balls will collide. What follows in ActionScript (lines 27–36) is lo g ic to determine if the time was in the past, the present, or the future. If the time is in the past or the present, then it is less than or equal to 1, and a collision has occurred. If the time the future (greater than 1), no collision has occurred. If a collision has occurred, then we store the time at which this collision happened (using the whatTime variable). We will use this information in Chapter 6, "Collision Reactions." Also, when a collision is detected, a variable called ballsCollided is set to true . ballsCollided is true , a final if statement executes a trace action to let you know that a collision was detected. Generate a SWF to see this work. With this collision-detection script, you can determine when in the future a collision may happen. When you solve the quadratic equation for time1 and time2 , it tells you any time in the future when the balls will intersect, even if it is a million frames into the future. Lookin g more than one frame into the future is somethin g I have not yet found a need for, but should a use come for it, we'll know how to do it! Line-Line Collision Detection In this section we will discuss the equations for lines and for line segments, and how to tell when lines are intersecting. I have never encountered a situation in which I needed a collision-detection script for two lines, so we will just cover detection for two stationary lines. It may not be immediately obvious to you how—or where—this type of collision detection might come in As an active member of man y Flash user boards on the Internet, I fre q uentl y see the q uestion of how to tell if two lines are intersecting. The most important application of this that we will see is in circle-line collision detection. One step in the process of detecting the collision of a circle and a line is to test to see if two lines intersecting. The Equation of a Line Time once again to think back to your high school math class. You may remember this equation: y = m*x+b where m is the slope of the line, and b is the y intercept (the spot where the line intersects the y-axis). This the equation for a straight line. The slope, m, is defined as the rise over the run of the line. For instance, if line is at a 45° angle, then the rise of the line equals the run, so the slope is 1. If you have a line that is to horizontal, then its rise is less than the run, and therefore the slope is small—far less than 1. If the line exactly horizontal, then the rise is 0, and therefore the slope is also 0. If you know the slope and y intercept of a line, then you can draw that line. Open draw_line.fla in the Chapter05 directory on the CD. You'll notice that there are no movie clips in this file. The ActionScript it contains builds an object that represents the properties of a line (its slope and y intercept) and then draws line using two functions. Here are the first few lines of ActionScript in this file, which are used to build the object. 1 1 1 1 _root.createEmptyMovieClip("clip", 1); 2 2 2 2 clip.lineStyle(0, 0x000000, 100); 3 3 3 3 line1 = {}; 4 4 4 4 line1.m = 1; 5 5 5 5 line1.b = 100; In the first line we simply create an empty movie clip on the stage. The line that will be drawn using this ActionScript will be drawn in this movie clip. In line 2 we s p ecif y a line st y le for the movie cli p . Before an y thin g can be drawn in the movie cli p , we have to inform Flash of how we would like it drawn. This method tells the movie clip that we want the line to be a hairline (which is a thickness of 0), the color to be black (which has a hex value of 0x000000), and the alpha value to be 100. Lines 3–5 create an object called line1 that holds the variables m (for the slope of the line) and b (for the y It is a good programming practice to create a movie clip to hold lines drawn with Flash's dynamic drawing tools. Why? Because this procedure makes cleanup easier— you can just remove the movie clip when needed. For instance, if you create a application (in which dynamically creating lines is a common occurrence), then you most likely want a "clear screen" function. It is much easier to remove one movie clip that contains all of the drawn lines than to remove many individual lines. Also, if all lines had been drawn on the main timeline, then the cleanup would be all the more difficult. If you are interested in learning more about Flash MX's new drawing Application Programming Interface (API), check out the ActionScript Dictionary from the Help menu in Flash. intercept). Next, we write two functions that work together to draw the line. 1 1 1 1 function findY(line, x) { 2 22 2 var y = line.m*x+line.b; 3 33 3 return y; 4 4 4 4 } 5 5 5 5 function drawLine(line) { 6 66 6 //Choose an x 7 77 7 var x = 300; 8 88 8 //Find the y 9 99 9 var y = findY(line, x); 10 1010 10 //Move the pen 11 1111 11 clip.moveTo(x, y); 12 1212 12 //Choose another x 13 1313 13 var x = 0; 14 1414 14 //Find the y 15 1515 15 var y = findY(line, x); 16 1616 16 //Draw line 17 1717 17 clip.lineTo(x, y); 18 1818 18 } 19 1919 19 drawLine(line1); The function findY() was created to calculate the y position from the line object passed in and the x (using the equation for the line y = m*x+b). After that, starting on line 5, we use the drawLine() You need two points to draw a line, of course, and so this function chooses two x positions, finds the appropriate y positions from those, and draws a line between this pair of points. On line 11 you see the moveTo() method. This method is used to move the starting position of the Flash "pen" to the coordinates passed in. (The Flash pen, sometimes called the virtual pen, is a place that you cannot see, with the coordinates (0,0), where Flash will start drawing if you were to call the drawing methods. The moveTo() method only moves the position of the pen—it draws no lines. There is a method called lineTo() , found in 17, that handles drawing the line. It draws a line from the current pen position to the coordinates passed The final line is what calls the function. This function call passes in a line1 object reference to the () function. The drawLine() function then uses this reference to access information on the object. It is important to note that all lines are infinite in length, although in this case we are showing only a the line in question. A portion of a line is called a line segment. Intersecting Lines All lines that are not parallel to each other intersect at some point, and any two lines that have the same are parallel. So, to tell if two lines intersect, you simply compare their slopes. If the slopes are not equal, they do intersect somewhere in space. In this section, we're going to learn how to find out at what any two lines intersect. Slope 1 Slope 2; therefore they intersect at some point First, let's look for the point of intersection. Say we have two lines whose equations are y = m1*x+b1 and y = m2*x+b2 At the point where these two lines intersect, the y value (in the equations above) is the same, and the x (in equations above) is the same. With this knowledge, we set the two equations equal and write: m1*x+b1 = m2*x+b2 and we solve for x to get: x = (b2-b1)/(m1-m2) This is the x position at which the lines intersect. To find the y position, simply stick this x value back into either of the two line equations (I've chosen the first): y = m1*x+b1 1 11 1 function findIntersection(line_a, line_b) { 2 22 2 var x = (line_b.b-line_a.b)/(line_a.m-line_b.m); 3 33 3 var y = line_a.m*x+line_a.b; 4 44 4 dot._x = x; 5 55 5 dot._y = y; 6 66 6 } Open lines_intersecting.fla from the Chapter05 folder on the CD to see this in action. This file uses the same functions as we did in the previous example. Also, since we now dealing with two lines, we have created a second line object. There is an of a movie clip on the stage called dot that, when calculated, will be moved to the point of intersection. Here is the function that calculates the intersection. This function accepts two parameters, line_a and line_b , which are references to line ob j ects. It then the equation we derived above to find the x position of the intersection. Once this x position is found, it is plugged into the equation for the line represented by the line_a object to find the y position. Then the dot movie clip is placed on the stage using these two values. When you test the movie, you will see that the appears over the intersection of the two lines. Determining If Two Line Segments Are Intersecting This is an easy extension of what we have already accomplished in this section. The technique we just introduced allows us to determine if two lines are intersecting. To do this, we find the coordinates of the intersection between these lines as if they were not segments, and then check to see if this point falls within the boundaries of each segment. It may not be obvious when something like this would be useful. Without thinking very hard, I can only come up with one common use, but it's a big one. It occurs when detecting a frame-independent collision between a circle and a line. This is covered in detail in the next section. Lines intersect, but the segments do not; therefore there is no collision Lines intersect, and so do the segments; therefore a collision is occurring 1 1 1 1 function drawLine(line) { 2 2 2 2 //Choose an x 3 3 3 3 var x = line.x1; 4 4 4 4 //Find the y 5 55 5 var y = findY(line, x); 6 66 6 line.y1 = y; 7 77 7 //Move the pen 8 88 8 clip.moveTo(x, y); 9 99 9 //Choose another x 10 1010 10 var x = line.x2; 11 1111 11 //Find the y 12 1212 12 var y = findY(line, x); 13 1313 13 line.y2 = y; 14 1414 14 //Draw line 15 1515 15 clip.lineTo(x, y); 16 1616 16 } In this function we move the p en to one boundar y and then draw a line to the other boundar y . The result is a visual representation of the line segment. After this function is called, the line object contains the x and y coordinates for both of the line-segment boundaries. Before this function is called, the line object only contains the x1 and x2 line boundaries. The y1 and y2 boundaries are calculated in this function, on lines 5 and 12, and then stored on the line object in lines 6 and 13. The findIntersection() function also has a major addition for our current purposes—it now checks the point of intersection to see if it is within the segment boundaries on both lines. Here is the function: 1 1 1 1 function findIntersection(line_a, line_b) { 2 2 2 2 var x = (line_b.b-line_a.b)/(line_a.m-line_b.m); 3 3 3 3 var y = line_a.m*x+line_a.b; 4 4 4 4 dot._x = x; Open line_segments_intersecting.fla in the Chapter05 directory. After defining the objects that represent the lines in this file, we add two variables, x1 and x2 , that are the boundaries of the line segment. I modified the drawLine() function from the same function in the previous example file to take the x1 and x2 boundaries of each line and to find the y1 and y2 boundaries from them. Here is the modified drawLine () function. [...]... (mass1*xVel1prime+mass2*xVel2prime); var V = (xVel1prime-xVel2prime); var v2f = (P+mass1*V)/(mass1+mass2); var v1f = v2f-xVel1prime+xVel2prime; 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 } var xVel1prime = v1f; var xVel2prime = v2f; //Project back to Flash' s x and y axes var xVel1 = xVel1prime*cosTheta-yVel1prime*sinTheta; var xVel2 = xVel2prime*cosTheta-yVel2prime*sinTheta; var yVel1 = yVel1prime*cosTheta+xVel1prime*sinTheta;... file, collision reaction is implemented in every place where a collision-detection script sits check for collisions in the methods game. checkForWalls() and game. checkPaddleCollisions() Here the ActionScript for the game. checkForWalls() method: 1 2 3 4 5 6 7 8 9 10 11 game. checkForWalls = function() { if (this.ball.tempythis.height)... along the line of action, we can translate back to Flash' s x and y axes We do this in lines 29 32 are the new velocities of each ball, and need to be stored on each ball But first we set the temporary of the ball to be exactly where the balls should have been when they first collided (lines 34 37 ) Now we change the velocity on the ball objects in lines 38 –41 Generate a SWF to test this file You will see... position of the ball's bottom edge is greater than the y position of the game' s lower boundary (The bottommost part of the ball is its y position plus its height.) You may recall that the value for the y position of the game' s bottom boundary was set earlier in the frame as game. height Since the checkForWalls() method belongs to the game object, then we can access this property by using this.height, which... update the tempx variables (lines 16 and 17) To see an example of this in Flash (not in a game) with multiple rectangles of masses, check out railroad.fla in the Chapter06 directory This file was created with Flash 5, so don't be surprised if the ActionScript looks a little different from what you would expect with Flash MX Generate a SWF to test this file You will see that when the two objects collide,... last frame that it takes for the collision to occur (this number is between 0 and 1) 3 We add a function called ball2BallReaction() This function calculates what the new velocities of each ball should be after the collision Here is the ball2BallReaction() function: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function ball2BallReaction(b1, b2, x1, x2, y1, y2, time) { //get the masses... where the ball should be for initial contact 3 Determines the point of contact and compares that with the boundaries of the line segment 4 Calculates the number of frames it will take for the ball to reach the collision point Steps 3 and 4 are not dependent on each other, and in this function they swap places Here is the for step 1 1 2 3 4 5 6 7 8 9 10 11 12 13 function getFrames(tempLine, point) { //Step... upper boundary of the game board is 0; the lower boundary is game. height In line 2 of the ActionScript above, check to see if ball.tempy is less than 0 If it is, then a collision is occurring with the top wall, and the if statement is entered Line 4 sets ball.tempy = 0, which positions the ball right up against the top wall is a necessary step Due to the frame-based nature of Flash MX, ball.tempy could... great starting place And for the games used in this book they work very well But as Flash grows as a programming platform, and as the demand for complicated or original games gets larger, we will be forced to further refine these techniques— techniques with which we currently see, and have, no problems We may even have to scrap for newer and better ways If these issues of Flash growth and development interest... moved, and a check is performed to detect collisions Here is the ActionScript used to create the objects 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //Create an object to store information about point_clip1 point1 = {}; point1.clip = point_clip1; point1.x = point1.clip._x; point1.y = point1.clip._y; point1.xmov = 3; point1.ymov = 1; //Create an object to store information about rectangle_clip1 rectangle1 = {}; rectangle1.clip . true; 30 30 30 30 } 31 31 31 31 if (t2>0 && t2<=1) { 32 32 32 32 if (whatTime == null || t2<t1) { 33 33 33 33 var whatTime = t2; 34 34 34 34 var ballsCollided = true; 35 35 35 35 . var ballsCollided = true; 35 35 35 35 } 36 36 36 36 } 37 37 37 37 if (ballsCollided) { 38 38 38 38 //Collision has happened, so throw a trace 39 39 39 39 trace("Ouch!"); 40 4040 40. 1 1 1 1 game = {}; 2 2 2 2 game. numBalls = 2; 3 3 3 3 for (var i=1; i< =game. numBalls; ++i) { 4 4 4 4 var name = "ball"+i; 5 55 5 game[ name] = {}; 6 66 6 game[ name].clip