Just to let you know that i have successfully moved all my tutorials across from my old site and they are all working perfectly. I also had the time to create a getting started with APE tutorial for those interested!

More to come soon!

In the last tutorial I showed you how to make a turret rotate to face a mouse. Now i will show you how to make it shoot bullets in the direction of the mouse. To do this we need to create a new bullet movieClip and get it to duplicate everytime a player clicks.

I’m going to make a function that creates a bullet.

i have made an empty movieClip called bullet Holder to store all of the bullets where i declare my variables, you will see it later when i release the whole code.

function createBullet(startx:Number, starty:Number) {

var bullet:MovieClip = new MovieClip();

bullet.graphics.lineStyle(2, 0xFFFFFF);

bullet.graphics.drawCircle(0, 0, 5);

bullet.x = startx;

bullet.y = starty;

bulletHolder.addChild(bullet);

}

line 1: initializing the function, with custom variables called startx and starty. These will be where the bullets start from and can be specified when the function is called.

lines 2-7:  Creating the bullet movieClip which will be fired every time the function is called. i will explain the drawing api in greater detail in a later tutorial but i have explained it briefly here.

 - Note that i have set the bullet’s x and y coordinates to the startx and starty that can be manipulated when the function is called.

This piece of code will make bullets and add them to the bulletHolder movieClip which is located on the stage. But it needs a function to call it, maybe for when the mouse clicks.

stage.addEventListener(MouseEvent.CLICK, shoot);

function shoot(event:Event) {

createBullet(turret.x, turret.y);

}

line 1: Add an event listener to detect whenever the stage is clicked that triggers the function shoot.

line 2: Creating a general function shoot.

line 3: Using the function that we made earlier we can tell it to create a bullet at the turrets x and y position.

line 4: Closing the function.

Now, if you add these bits of code together and test them you will notice that you can’t see any bullets being produced. This is because they are being produced in the centre of the turret and are of the same colour.

This is no acceptable because we want the bullets to be produced at the end of the turret each time. This is tricky as the turrets are always rotating. We can solve this by using a bit more trig.

The only line we need to change is line 3 in the above, where we call the createBullet function.

We can do this simply by using the turrets rotation in degrees, convert it to radians and then either use cosin for the x coordinate or sin for the y coordinate. The new line of code:

createBullet(turret.x+Math.cos((turret.rotation+90)*degreesToRadians),turret.y+Math.sin((turret.rotation+90)*degreesToRadians));

If you try this you will still not be able to see any bullets produced, this is because they are being produced only very small amounts away from the centre. To fix this we can simply multiply the calculated by the length of the turret, in this case 40.

createBullet(turret.x+(40*Math.cos((turret.rotation+90)*degreesToRadians)),turret.y+(40*Math.sin((turret.rotation+90)*degreesToRadians)));

Get it? Good. Now lets put all the code together and look at its effect.

stage.frameRate = 30;

var angle:Number = 0;

var radiansToDegrees:Number = 180/Math.PI;

var degreesToRadians:Number = Math.PI/180;

var bulletHolder:MovieClip = new MovieClip();

addChild(bulletHolder);

var turret:MovieClip = new MovieClip();

turret.graphics.beginFill(0xFFFFFF);

turret.graphics.lineStyle(2, 0xFFFFFF);

turret.graphics.drawRect(-10, 0, 20, 40);

turret.graphics.endFill();

turret.graphics.beginFill(0xFFFFFF);

turret.graphics.drawCircle(0,0,20);

turret.graphics.endFill();

turret.x = 275;

turret.y = 200;

addChild(turret);

function createBullet(startx:Number, starty:Number) {

var bullet:MovieClip = new MovieClip();

bullet.graphics.lineStyle(2, 0xFFFFFF);

bullet.graphics.drawCircle(0, 0, 5);

bullet.x = startx;

bullet.y = starty;

bulletHolder.addChild(bullet);

}

turret.addEventListener(Event.ENTER_FRAME, rotateTurret);

function rotateTurret(event:Event):void {

angle = Math.atan2(mouseY-turret.y, mouseX-turret.x);

angle *= radiansToDegrees;

turret.rotation = angle – 90;

}

stage.addEventListener(MouseEvent.CLICK, shoot);

function shoot(event:Event) {

createBullet(275+(40*Math.cos((turret.rotation+90)*degreesToRadians)),200+(40*Math.sin((turret.rotation+90)*degreesToRadians)));

}

changes that you should note:

line 4: This is the calculation for degrees to radians and it is calculated at the beginning to optimize performance.

example

In the next tutorial i will show you how to make the bullet move!

In the last session i briefly talked about trig, now lets put it into action.

Ok, heres all the code you need to make a turret rotate.

stage.frameRate = 30;

var angle:Number = 0;

var radiansToDegrees:Number = 180/Math.PI;

var turret:MovieClip = new MovieClip();

turret.graphics.beginFill(0xFFFFFF);

turret.graphics.lineStyle(2, 0xFFFFFF);

turret.graphics.drawRect(-10, 0, 20, 40);

turret.graphics.endFill();

turret.graphics.beginFill(0xFFFFFF);

turret.graphics.drawCircle(0,0,20);

turret.graphics.endFill();

turret.x = 275;

turret.y = 200;

addChild(turret);

turret.addEventListener(Event.ENTER_FRAME, rotateTurret);

function rotateTurret(event:Event):void {

angle = Math.atan2(mouseY-turret.y, mouseX-turret.x);

angle *= radiansToDegrees;

turret.rotation = angle – 90;

}

 

line 1: Setting the frames per second of the movie, anything above 30 makes it smooth

line 2: Creating a new number variable called angle, no guesses for what it will be storing.

line 3: As we are going to get an angle in radians and flash does rotation in degrees we need to convert those radians to degrees. This simple sum does that and i have made a variable of it at the start to optimize performance.

lines 4-14: These have already been explained earlier.

line 15: Adding a listener to “turret” to trigger once a frame, hence Event.ENTER_FRAME, the function “rotateTurret”;

line 16: The function “rotateTurret” is being set up, it is a general function so it has a basic event:Event description.

line 17: Setting the angle variable to get our angle in radians as described earlier.

line 18:  Converting the angle to degrees

line 19: Rotating the turret moviCllip by the new angle number with 90 degrees taken off to make it point towards the mouse.

It should look like this.

Ok you should be able to create dynamically rotating objects. My next tutorial will show you how to shoot.