• Home
tudwaythecore.com
blog
  • Recent Posts

    • Detecting focus in flash player
    • BitmapData PerlinNoise
    • Creating bridges in APE part 2
    • Creating bridges in APE
    • SteerWheels 2
    • Creating a simple APE example
    • Design me some levels!
    • Finished Migrating
  • Recent Comments

    • random on Making a Shooting Game Part 2
    • SammyG on Making a Shooting Game Part 2
    • Jim on Making a Shooting Game Part 2
    • rraven on Making a Shooting Game Part 2
    • Adrian on Making a Shooting Game Part 2
  • Categories

    • APE
    • flash
    • game
    • platform
    • sound
    • tutorial
    • Uncategorized
  • Archives

    • May 2009
    • October 2008
    • September 2008
    • August 2008
    • May 2008
    • April 2008
    • March 2008
  •  

    February 2012
    M T W T F S S
    « May    
     12345
    6789101112
    13141516171819
    20212223242526
    272829  
  • games

    • Game Showcase
Aug 28

Sound in AS3 Part 3

flash, sound, tutorial 6 Comments »

Loading sound from an external source (i.e, not embedded in the .swf file) is really easy to do once you know how. I am going to use the same example as i used for the last tutorial but the sound is not going to be embedded in the .swf it is going to be hosted on my site

Here is the example. I have changed the sound to a whole song to demonstrate how quickly it takes to load.

Important!

Before i started i uploaded a .mp3 file to the internet so that i could call it with a URL request in this code.

You will need to do this for this code to work from the internet, alternatively you can put a sound file in the root classpath of your .fla (this is usually the same folder as the .fla).

Another important note

if you are loading a file on the internet change you publish settings for flash to “access network file only” and if you are loading it from a folder change it to “access local files only”.

To do this it was simple. I replaced one line of the old code for three more lines of code.

I replaced the line:

var sound:Sound = new acoust();

with:

var loadsound:URLRequest = new URLRequest(“http://where my mp3 file is on the internet.mp3″);

var sound:Sound = new Sound();

sound.load(loadsound);

Line 1: a new variable called loadsound which requests the file from the url mentioned inside the brackets and the “”

line 2: a variable like before that holds a blank instance of the sound class instead of the class that we made called acoust.

line 3: loading the sound that we got from the internet via the URL request into the blank instance of the sound class that we named earlier. 

Note: if you want to load the sound locally from a folder you just replace “http://where my mp3 file is on the internet.mp3″ with “sound name.mp3” 

The complete code for ease.

import flash.media.Sound;

var loadsound:URLRequest = new URLRequest(“http://where my mp3 file is on the internet.mp3″);

var sound:Sound = new Sound();

sound.load(loadsound);

var channel:SoundChannel;

var soundisplaying:Boolean = false;

var pausePosition:int = 0;

playbut.addEventListener(MouseEvent.CLICK, playsound);

stopbut.addEventListener(MouseEvent.CLICK, stopsound);

function playsound(event:Event):void {

if (soundisplaying==false) {

channel = sound.play(pausePosition);

soundisplaying = true;

channel.addEventListener(Event.SOUND_COMPLETE, soundComplete);

}

}

function stopsound(event:Event):void {

pausePosition = channel.position;

channel.stop();

soundisplaying =false;

}

function soundComplete(event:Event):void {

channel = sound.play();

channel.addEventListener(Event.SOUND_COMPLETE, soundComplete);

}

Ok this will hopefully help some of you.

i am going away for a week so don’t expect any more posts until i get back!

Aug 28

Making a Shooting Game Part 2

flash, tutorial 12 Comments »

 

In the last tutorial I showed you how to make a turret fire a bullet that doesn’t move. This is little help when creating a turret game, but it leads us on to the next part.

If you think about what exactly we want the bullet to do it is quite simple. All we want it to do is move in a constant speed in the direction that the mouse is pointing. If you look back at the previous tutorial at the createBullet function you can see that the x coordinate is controlled by cos and the y by sin. 

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

We are going to use the same concepts when making the bullet move.

Can you remember how we used 40*Math.cos to make the bullet appear at the end of the turret, well we are going to increase the x coordinate of the bullet by that, whilst replacing the 40 with the speed of the bullet.

To do this we need to make a function that is triggered every frame that increases the bullets position when triggered. We are going to put this new code into the create bullet function.

var bulletGo = bulletHolder.addChild(bullet);

bulletGo.currentTurretRotation = turret.rotation+90;

bullet.addEventListener(Event.ENTER_FRAME, moveBullet);

function moveBullet(event:Event):void {

bulletGo.x+=Math.cos((bulletGo.currentTurretRotation)*degreesToRadians);

bulletGo.y+=Math.sin((bulletGo.currentTurretRotation)*degreesToRadians);

}

line 1: Creating a variable to handle adding the child of the bullet to the stage. This is to make the variables associated with it independent each time the variables are set. This stops the bullet from changing direction due to the turrets rotation.

line 2: Setting the current rotation variable to the turrets rotation.

line 3: Adding the Enter frame listener to move the bullet.

line 4: Setting up the moveBullet function that is triggered by the event listener in the line above.

line 5: Using the bullet child handler that i set up earlier to move the bullets x coordinate by Math.cos( the rotation of the turret, set by the currentRotation variable in line 2, in radians. As i said before i move the bullet though this handler so that each bullet moves independently of each other.

line 6: Just like above i move the bullets y coordinate by the same method, but use Math.sin.

Full code

PLAIN TEXT
Actionscript:
  1. stage.frameRate = 30;>
  2. var angle:Number = 0;
  3. var radiansToDegrees:Number = 180/Math.PI;
  4. var degreesToRadians:Number = Math.PI/180;
  5. var currentTurretRotation:Number;
  6. var bulletHolder:MovieClip = new MovieClip();
  7. addChild(bulletHolder);
  8. var turret:MovieClip = new MovieClip();
  9. turret.graphics.beginFill(0xFFFFFF);
  10. turret.graphics.lineStyle(2, 0xFFFFFF);
  11. turret.graphics.drawRect(-10, 0, 20, 40);
  12. turret.graphics.endFill();
  13. turret.graphics.beginFill(0xFFFFFF);
  14. turret.graphics.drawCircle(0,0,20);
  15. turret.graphics.endFill();
  16. turret.x = 275;
  17. turret.y = 200;
  18. addChild(turret);
  19. function createBullet(startx:Number, starty:Number) {
  20. var bullet:MovieClip = new MovieClip();
  21. bullet.graphics.lineStyle(2, 0xFFFFFF);
  22. bullet.graphics.drawCircle(0, 0, 5);
  23. bullet.x = startx;
  24. bullet.y = starty;
  25. var bulletGo = bulletHolder.addChild(bullet);
  26. bulletGo.currentTurretRotation = turret.rotation+90;
  27. bullet.addEventListener(Event.ENTER_FRAME, moveBullet);
  28. function moveBullet(event:Event):void {
  29. bulletGo.x+=Math.cos((bulletGo.currentTurretRotation)*degreesToRadians);
  30. bulletGo.y+=Math.sin((bulletGo.currentTurretRotation)*degreesToRadians);
  31. }
  32. }
  33. turret.addEventListener(Event.ENTER_FRAME, rotateTurret);
  34. function rotateTurret(event:Event):void {
  35. angle = Math.atan2(mouseY-turret.y, mouseX-turret.x);
  36. angle *= radiansToDegrees;
  37. turret.rotation = angle - 90;
  38. }
  39. stage.addEventListener(MouseEvent.CLICK, shoot);
  40. function shoot(event:Event) {
  41. createBullet(275+(40*Math.cos((turret.rotation+90)*degreesToRadians)),200+(40*Math.sin((turret.rotation+90)*degreesToRadians)));
  42. }

changes to previous code:

line 4: I am creating a variable called currentTurretRotation, which you know is where i hold the rotation of the turret when the mouse is clicked.

Example.

 

In the next tutorial i will show you how to delete the bullets when they go offstage, and maybe add some things to shoot.

Aug 28

Making a Shooting Game in AS3

Uncategorized 5 Comments »

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!

Previous Entries Next Entries
Powered by WordPress .::. Designed by SiteGround Web Hosting

cssandhtml