Getting Warmer: Smart Aiming With Heat-Seeking Missiles

In the previous tutorial we had a homing missile chasing after a single target. This tutorial will show you how to convert your homing missiles into heat-seeking missiles for multiple targets.

If you haven't read the first Homing Missile tutorial, you may download this .zip file, which contains the source code we'll be starting with on this tutorial.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Modify the Cannon Graphic

The only Movie Clip in the Library we'll need to change is the Cannon, since we'll make it aim at the closest target before shooting. Remember that 0° of rotation means pointing at the right, so make the graphic accordingly.

Step 2: Declare Distance Variables for the Cannon

I'm going to reuse the targetX and targetY variables to calculate the distance of the cannon from the target, so I'll declare them at the beginning of the class instead of inside the playGame function, as well as a new variable to store the calculated distance:


private var missile:Missile = new Missile();
private var speed:int = 15;
private var cannon:Cannon = new Cannon();
private var missileOut:Boolean = false;
private var ease:int = 10;
private var target:Target = new Target();
private var floor:int = 385;
private var gravity:Number = 0.5;
private var targetVY:Number = 0;//Current vertical velocity of the target
private var distance:int;
private var targetX:int;
private var targetY:int;

Now the targetX and targetY variables will be already declared for the playGame function:


private function playGame(event:Event):void
{
    if (missileOut)
    {
        if (missile.hitTestObject(target))
        {
            var explosion:Explosion = new Explosion();
            addChild(explosion);
            explosion.x = missile.x;
            explosion.y = missile.y;
            removeChild(missile);
            missileOut = false;
        }
        else
        {
            targetX = target.x - missile.x;
            targetY = target.y - missile.y;
            var rotation:int = Math.atan2(targetY, targetX) * 180 / Math.PI;
            if (Math.abs(rotation - missile.rotation) > 180)
            {
                if (rotation > 0 && missile.rotation < 0)
                    missile.rotation -= (360 - rotation + missile.rotation) / ease;
                else if (missile.rotation > 0 && rotation < 0)
                    missile.rotation += (360 - rotation + missile.rotation) / ease;
            }
            else if (rotation < missile.rotation)
                missile.rotation -= Math.abs(missile.rotation - rotation) / ease;
            else
                missile.rotation += Math.abs(rotation - missile.rotation) / ease;
            
            var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90;
            var vy:Number;
            if (missile.rotation < 0)
                vy = -speed + Math.abs(vx);
            else
                vy = speed - Math.abs(vx);
            
            missile.x += vx;
            missile.y += vy;
        }
    }
	targetVY += gravity;
    target.y += targetVY;
    if (target.y > floor)
    {
        target.y = floor;
        targetVY = -18;
    }
}

Step 3: Make the Cannon Point Towards the Target

Previously in the playGame function we were only interested in knowing if the missile was out to take care of its rotation and motion. Now we need first to know if the missile hasn't been shot yet and update the cannon's rotation.


private function playGame(event:Event):void
{
    if (!missileOut)
    {
        targetX = target.x - cannon.x;
        targetY = target.y - cannon.y;
        cannon.rotation = Math.atan2(targetY, targetX) * 180 / Math.PI;
    }
    else
    {
        if (missile.hitTestObject(target))
        {
            var explosion:Explosion = new Explosion();
            addChild(explosion);
            explosion.x = missile.x;
            explosion.y = missile.y;
            removeChild(missile);
            missileOut = false;
        }
        else
        {
            targetX = target.x - missile.x;
            targetY = target.y - missile.y;
            var rotation:int = Math.atan2(targetY, targetX) * 180 / Math.PI;
            if (Math.abs(rotation - missile.rotation) > 180)
            {
                if (rotation > 0 && missile.rotation < 0)
                    missile.rotation -= (360 - rotation + missile.rotation) / ease;
                else if (missile.rotation > 0 && rotation < 0)
                    missile.rotation += (360 - rotation + missile.rotation) / ease;
            }
            else if (rotation < missile.rotation)
                missile.rotation -= Math.abs(missile.rotation - rotation) / ease;
            else
                missile.rotation += Math.abs(rotation - missile.rotation) / ease;
            
            var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90;
            var vy:Number;
            if (missile.rotation < 0)
                vy = -speed + Math.abs(vx);
            else
                vy = speed - Math.abs(vx);
            
            missile.x += vx;
            missile.y += vy;
        }
    }
    targetVY += gravity;
    target.y += targetVY;
    if (target.y > floor)
    {
        target.y = floor;
        targetVY = -18;
    }
}

Now the cannon rotates in relation to the target's position.

Step 4: Match the Missile's Rotation with the Cannon's.

The cannon is rotating, but the missile keeps being shot upwards. Replace the hard-coded rotation with the cannon's current location at the moment the missile is being shot.


private function shoot(event:MouseEvent):void
{
    if (!missileOut)
    {
        addChild(missile);
        swapChildren(missile, cannon);//missile will come out from behind cannon
        missileOut = true;
        missile.x = cannon.x;
        missile.y = cannon.y;
        missile.rotation = cannon.rotation;
    }
}

Now the missile will look like it's actually coming out of the cannon.

Step 5: More than One Target

Right now the homing missile is program to go after one target, but what if we have more targets? How will it decide which one to go after?

First, let's decide how many targets will there be, then we'll put each target in an Array. In this example I'm going to say there are 2 targets, and I'll give each target a random position on screen.


private var target:Target;
private var floor:int = 385;
private var gravity:Number = 0.5;
private var targetVY:Number = 0;//Current vertical velocity of the target
private var distance:int;
private var targetX:int;
private var targetY:int;
private var numTargets:int = 2;
private var targets:Array = [];

public function Main()
{
    addChild(cannon);
    cannon.x = 50;
    cannon.y = 380;
    addEventListener(Event.ENTER_FRAME, playGame);
    stage.addEventListener(MouseEvent.CLICK, shoot);
    for (var i:int = 0; i < numTargets; i++)
    {
        target = new Target();
        addChild(target);
        target.x = Math.random() * 600;
        target.y = Math.random() * 400;
        targets.push(target);
    }
}

Now we have more than one target on screen.

The missile is still only acknowledging the existence of one target. We'll fix that next.

Step 6: Seek the Closest Target

We have the missile seeking the target variable, so let's check the targets Array and see which one is closer. The target variable will be referencing the closest at the beginning of the playGame function.


private function playGame(event:Event):void
{
    for (var i:int = 0; i < targets.length; i++)
    {
        targetX = targets[i].x - missile.x;
        targetY = targets[i].y - missile.y;
        var dist:int = Math.sqrt(targetX * targetX + targetY * targetY);//the distance from one point to another in a 2D space.
        if (i == 0 || dist < distance)
        {
            distance = dist;
            target = targets[i];
        }
    }

At this point the closest target is the only one moving, but the missile is acknowledging the existence of both:

Step 7: Fix the Cannon's Aim

You may have noticed that while the missile does seek the expected target, the cannon's stuck pointing at the same target, regardless if it's closer or farther than the other one. The distance is set in relation to the missile's position, so if there's no missile on stage we need to update its position to match the cannon's so that it always knows which one is closer.


private function playGame(event:Event):void
{
    for (var i:int = 0; i < targets.length; i++)
    {
        targetX = targets[i].x - missile.x;
        targetY = targets[i].y - missile.y;
        var dist:int = Math.sqrt(targetX * targetX + targetY * targetY);
        if (i == 0 || dist < distance)
        {
            distance = dist;
            target = targets[i];
        }
    }
    if (!missileOut)
    {
        missile.x = cannon.x;
        missile.y = cannon.y;
        targetX = target.x - cannon.x;
        targetY = target.y - cannon.y;
        cannon.rotation = Math.atan2(targetY, targetX) * 180 / Math.PI;
    }

Now the cannon will always aim at the closest target.

Step 8: Move the Cannon

Before the missile is shot, the cannon is already pointing to the closest target, and will change direction if moved closer to the other target. Let's add a couple of lines to position the cannon with the mouse cursor.


private function playGame(event:Event):void
{
    cannon.x = mouseX;
    cannon.y = mouseY;

Now you can move the cannon freely.

Step 9: Target Hit, Target Destroyed

To make things more dynamic here, I'm going to relocate a target after being hit by a missile, or replace it by a new one, and leave an Explosion instance in its place.


if (missile.hitTestObject(target))
{
    var explosion:Explosion = new Explosion();
    addChild(explosion);
    explosion.x = missile.x;
    explosion.y = missile.y;
    removeChild(missile);
    missileOut = false;
    explosion= new Explosion();
    addChild(explosion);
    explosion.x = target.x;
    explosion.y = target.y;
    explosion.scaleX = explosion.scaleY = 1.5;
    target.x = Math.random() * 600;
}

This is what you'll get:

Step 10: Multiple Missiles

We made multiple targets, so now we can make multiple missiles the same way. The difference here is that all missiles must keep moving at all times until they hit, and we're actually going to remove those which have already exploded, so we need to modify a few lines of our code for this to work. First, we'll need an Array for the missiles.

1
2	private var missiles:Array = [];

Then, we need to make sure all the missiles behave properly:


private function playGame(event:Event):void
{
    cannon.x = mouseX;
    cannon.y = mouseY;
    for (var i:int = 0; i < targets.length; i++)
    {
        targetX = targets[i].x - missile.x;
        targetY = targets[i].y - missile.y;
        var dist:int = Math.sqrt(targetX * targetX + targetY * targetY);
        if (i == 0 || dist < distance)
        {
            distance = dist;
            target = targets[i];
        }
    }
    if (!missileOut)
    {
        missile.x = cannon.x;
        missile.y = cannon.y;
        targetX = target.x - cannon.x;
        targetY = target.y - cannon.y;
        cannon.rotation = Math.atan2(targetY, targetX) * 180 / Math.PI;
    }
    else
    {
        for (i = 0; i < missiles.length; i++)//each missile must keep moving
        {
            missile = missiles[i];
            if (missile.hitTestObject(target))
            {
                var explosion:Explosion = new Explosion();
                addChild(explosion);
                explosion.x = missile.x;
                explosion.y = missile.y;
                removeChild(missile);
                missiles.splice(i, 1);//out of the Array
                if (missiles.length < 1)//only if no missiles are out at all
                    missileOut = false;
                explosion= new Explosion();
                addChild(explosion);
                explosion.x = target.x;
                explosion.y = target.y;
                explosion.scaleX = explosion.scaleY = 1.5;
                target.x = Math.random() * 600;
            }
            else
            {
                targetX = target.x - missile.x;
                targetY = target.y - missile.y;
                var rotation:int = Math.atan2(targetY, targetX) * 180 / Math.PI;
                if (Math.abs(rotation - missile.rotation) > 180)
                {
                    if (rotation > 0 && missile.rotation < 0)
                        missile.rotation -= (360 - rotation + missile.rotation) / ease;
                    else if (missile.rotation > 0 && rotation < 0)
                        missile.rotation += (360 - rotation + missile.rotation) / ease;
                }
                else if (rotation < missile.rotation)
                    missile.rotation -= Math.abs(missile.rotation - rotation) / ease;
                else
                    missile.rotation += Math.abs(rotation - missile.rotation) / ease;
                
                var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90;
                var vy:Number;
                if (missile.rotation < 0)
                    vy = -speed + Math.abs(vx);
                else
                    vy = speed - Math.abs(vx);
                
                missile.x += vx;
                missile.y += vy;
            }
        }
    }
    targetVY += gravity;
    target.y += targetVY;
    if (target.y > floor)
    {
        target.y = floor;
        targetVY = -18;
    }
}

private function shoot(event:MouseEvent):void
{
    missile = new Missile();
    missiles.push(missile);//into the Array
    addChild(missile);
    swapChildren(missile, cannon);//missile will come out from behind cannon
    missileOut = true;
    missile.x = cannon.x;
    missile.y = cannon.y;
    missile.rotation = cannon.rotation;
}

Now when a target is destroyed, the missiles will seek the next target.

At this point all the missiles are chasing after the same target. In order to make each missile seek its own target, it would be better to make a separate class for the missiles in which you determine the closest target individually.

Step 11: Make a Crosshair

At this point you've already understood the main idea of this tutorial, but let's face it, an enemy will not move depending only on its distance to you or your missiles. You can use another indicator, such as a crosshair. Make it a Movie Clip and export it to Actionscript.

Step 12: Use the Crosshair

Now it will be obvious to anyone which target is being aimed at. Just add an instance of the Crosshair Movie Clip.


private var crosshair:Crosshair = new Crosshair();

public function Main()
{
    addChild(cannon);
    cannon.x = 50;
    cannon.y = 380;
    addEventListener(Event.ENTER_FRAME, playGame);
    stage.addEventListener(MouseEvent.CLICK, shoot);
    for (var i:int = 0; i < numTargets; i++)
    {
        target = new Target();
        addChild(target);
        target.x = Math.random() * 600;
        target.y = Math.random() * 400;
        targets.push(target);
    }
    addChild(crosshair);
}

Then place it on the target's position as the last instruction in the playGame function.


	targetVY += gravity;
    target.y += targetVY;
    if (target.y > floor)
    {
        target.y = floor;
        targetVY = -18;
    }
    crosshair.x = target.x;
    crosshair.y = target.y;
}

You'll get a crosshair marking the closest target's position.

The closest target is marked by the crosshair.

Step 13: Move All Targets

Remember what I said about the missiles? The same applies to the targets: They'll look better in their own class with a set of instructions of its own. This is just a quick example, but in your game I don't recommend coding all the objects in the Main class. The more complex your game is, the less stuff you'll code inside the Main class.

The targets are already in an Array, which is already being checked in a for loop, so I'll move the bouncing instructions inside the for loop, so that all the targets, no matter how many, will move the same at all times.


private function playGame(event:Event):void
{
    cannon.x = mouseX;
    cannon.y = mouseY;
    targetVY += gravity;
    for (var i:int = 0; i < targets.length; i++)
    {
        targetX = targets[i].x - missile.x;
        targetY = targets[i].y - missile.y;
        var dist:int = Math.sqrt(targetX * targetX + targetY * targetY);
        if (i == 0 || dist < distance)
        {
            distance = dist;
            target = targets[i];
        }
        targets[i].y += targetVY;
        if (targets[i].y > floor)
            targets[i].y = floor;
    }
    if (target.y >= floor)
        targetVY = -18;
    if (!missileOut)
    {
        missile.x = cannon.x;
        missile.y = cannon.y;
        targetX = target.x - cannon.x;
        targetY = target.y - cannon.y;
        cannon.rotation = Math.atan2(targetY, targetX) * 180 / Math.PI;
    }
    else
    {
        for (i = 0; i < missiles.length; i++)
        {
            missile = missiles[i];
            if (missile.hitTestObject(target))
            {
                var explosion:Explosion = new Explosion();
                addChild(explosion);
                explosion.x = missile.x;
                explosion.y = missile.y;
                removeChild(missile);
                missiles.splice(i, 1);
                if (missiles.length < 1)
                    missileOut = false;
                explosion= new Explosion();
                addChild(explosion);
                explosion.x = target.x;
                explosion.y = target.y;
                explosion.scaleX = explosion.scaleY = 1.5;
                target.x = Math.random() * 600;
            }
            else
            {
                targetX = target.x - missile.x;
                targetY = target.y - missile.y;
                var rotation:int = Math.atan2(targetY, targetX) * 180 / Math.PI;
                if (Math.abs(rotation - missile.rotation) > 180)
                {
                    if (rotation > 0 && missile.rotation < 0)
                        missile.rotation -= (360 - rotation + missile.rotation) / ease;
                    else if (missile.rotation > 0 && rotation < 0)
                        missile.rotation += (360 - rotation + missile.rotation) / ease;
                }
                else if (rotation < missile.rotation)
                    missile.rotation -= Math.abs(missile.rotation - rotation) / ease;
                else
                    missile.rotation += Math.abs(rotation - missile.rotation) / ease;
                
                var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90;
                var vy:Number;
                if (missile.rotation < 0)
                    vy = -speed + Math.abs(vx);
                else
                    vy = speed - Math.abs(vx);
                
                missile.x += vx;
                missile.y += vy;
            }
        }
    }
    crosshair.x = target.x;
    crosshair.y = target.y;
}

Take a look:

Conclusion

Homing missiles, heat-seeking missiles, both are a fun and useful weapon to have around in a shooting game or maybe some other type of app. This tutorial shows an example of its use and the algorithm to make it, but for best practices it is recommended that you have separate classes for the missiles and the targets, unless your app is as simple and short as this one.

I hope you've found this tutorial useful. Thanks for reading!