This step-by-step tutorial builds on previous tutorials to demonstrate various methods of collision detection. Two methods isNearTarget() and isNearThis() provide a means of detecting proximity between two Objects.
Aim
This tutorial introduces isNearTarget() and isNearThis() methods.
.swi file
"collide.swi"
| 1. | Continue from the previous tutorial or open the file "droptarget.swi". Save the file as "mycollide.swi"
|
| 2. | Select the blue ball (ball2) in the 'Outline' Panel. Delete the existing Actions from the onEnterFrame() Event then select the if (isNearThis()) conditional statement.
|
Select _parent.ball from the pull-down list (_parent.ball is the other ball) and select the 'Bounding boxes hit' option
|
|
Note: As ball and ball2 are both Objects contained within the main Movie, ball can be referenced via either "_root.ball" or "_parent.ball" from inside the ball2 Object
| 3. | Complete the script for the onEnterFrame() event to be:
|
onEnterFrame() {
if (_parent.ball.isNearThis()) {
_alpha = 50;
} else {
_alpha = 100;
}
}
| This script will change the _alpha (transparency) of the ball2 Object to 50% whenever it is near the other ball
|
| 4. | Return to the 'Layout' Panel and press the 'Play' button. Drag the blue ball near the red ball from different directions noting when the blue ball becomes partially transparent.
|
| In this example, the balls are not considered 'Near'.
|
| The balls are 'Near' in the example below. This is shown by the blue ball (ball2) becoming partially transparent (_alpha = 50%).
|
Note:
| · | The balls are 'Near' even though they are not over lapping. In this case, the definition of 'Near' is defined by the 'Bounding boxes hit' checkbox option. This means that the Objects are considered 'Near' if imaginary rectangles that enclose the Objects intersect
|
| · | Note that dragging the red ball towards the blue ball has the same effect (this is different to the previous example)
|
| 5. | Press the 'Stop' button and return to the 'Script' Panel. Select the "X, Y" option for the if (isNearThis()) statement and enter values 60 for X and 20 for Y.
|
| The "if (isNearThis())" statement should now look like:
|
|
|
| Note the shape of the area where the balls are considered 'Near'. Press 'Play' to preview the movie.
|
| 6. | Press the 'Stop' button and return to the 'Script' Panel. Select the 'Distance between' option for the if (isNearThis()) statement. Enter a distance that is equal to the sum of the radius of each of the balls. In this example:
|
Ball has a width of 40 (radius = 20)
Ball2 has a width of 40 (radius = 20)
Distance is therefore 20 + 20 = 40.
| The "if (isNearThis())" statement should now look like:
|
|
|
| Press the 'Play' button and note that the blue ball changes transparency whenever the balls touch or overlap
|
| 7. | Press the 'Stop' button and return to the 'Script' Panel. Select the ball Object in the 'Outline' Panel (red ball) and add the following script:
|
onEnterFrame() {
if (isNearTarget(_root.ball2._target)) {
_alpha = 50;
} else {
_alpha = 100;
}
}
| To enter the isNearTarget() function you will need to enter a standard if (...) statement.
|
| You can then enter the function name by typing it or by right clicking and selecting from the pop-up Menu
|
| 8. | Press the 'Play' button and note that the blue ball changes transparency whenever the balls touch or overlap. Note that the red ball changes transparency when the bounding rectangles of the balls overlap.
|
| The command "if (_root.ball2.isNearThis()) {" would have the same effect
|
| 9. | Change the command within the if statement to:
|
if (isNearTarget(_root.ball2._target, 60, 20)) {
| Press the 'Play' button and observe
|
Note: This behavior is identical to:
if (_root.ball2.isNearThis(60,20)) {
| 10. | Change the command within the if statement to:
|
if (isNearTarget(_root.ball2._target, 40)) {
| Press the 'Play' button and observe. Both balls should change transparency when they touch.
|
Note: This behaves is identical to:
if (_root.ball2.isNearThis(40)) {
Analysis
isNearTarget() and isNearThis() methods provide identical functionality using a different parameter interface. Both methods allow proximity to be defined via the size of:
| · | bounding rectangles (isNearTarget(target) or target.isNearThis())
|
| · | arbitrarily sized rectangle (isNearTarget(target, X, Y) or target.isNearThis(X, Y))
|
| · | the distance between the centers (isNearTarget(target, D) or target.isNearThis(D)).
|
Unlike the _target and _droptarget properties discussed in the previous tutorial, the 'Near' condition is not affected by which Object is being dragged.