• 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

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 27

Rotating a movieClip to face the mouse

flash, tutorial 1 Comment »

This is one of the first things that i tried to do in flash when i first got mx. now i will explain how to rotate a movieClip to face the mouse in adobe cs3.

To start off you can either draw the object that you want to rotate on the stage, or make it entirely in actionscript, as long as its a movieclip with an instance of it on the stage it will work.

First i have to create the object i am going to rotate. i am going to do it in actionscript with the built in drawing API.

I will explain the drawing API in greater detail in a later tutorial. But this code will make a turret shaped movieclip.

turret.graphics.beginFill(0xFFFFFF);
turret.graphics.lineStyle(2, 0xFFFFFF);
var turret:MovieClip = new MovieClip();
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);

 
Ok now to explain the code;

line 1: This introduces a new variable called “turret” which is a movieClip. We can now use the instance “turret” to give it commands.

line2: Using the movieClip.graphics method i am telling the turret movieclip to start a fill colour which is white. the “0xFFFFFF” is a colour hex code. 6 Fs means white.

line 3: This is setting the linestyle of the movieClip to 2 pixels thick and then its colour, again white.

Line 4: This line draws a rectangle in the movieClip instance, the first number is the x coordinate, the second is the y coordinate, the third number is the width and the last number is the height. If you want the object to have dynamic actions applied to it it is best to set the x and y coordinates to 0.

line 5: Telling the movieClip to stop filling in with the colour.

line 6: Setting a new fill, with the same colour as before. If i hadn’t ended the previous fill then part of the movieClip would be transparent.

line 7: This command “drawCircle” does exactly what it says, it draws circles. the numbers are x then y coordinates and then the radius of the circle. The coordinates are set to 0 because we want the turret to rotate about its centre.

line 8: Ending the circle fill colour.

line 9-10:These are setting the x and y coordinates of the turret, these can be anything but i’ve set them to the centre of the stage.

line 11: This is probably the most important line. It adds the movieClip instace to the stage so that we can see it!

Copy these actions in your actions panel and set the background colour to something other than white. I have used black. It should look exactly like this.



 

In the next part of the tutorial we will make it actually rotate.

Mar 29

creating a platform game in as3 part 5

flash, game, platform, tutorial 17 Comments »

Welcome back, At the end of the last tutorial i wondered what would happen if we had a platform that you could jump underneath from.

As you can see, i have made the map a lot more complicated, and the simulation runs quite accurately until you go under the overhang on the left side. Where you can jump through the bottom of that platform. Lets change that.
We need to add a hit detection for when the top of the character hits the bottom of the land.
Ok, now you can't jump up through platform bottoms, but if you jump sideways into the hovering platform, you float down.
I will think on this matter for the next step in the tutorial.
Previous Entries Next Entries
Powered by WordPress .::. Designed by SiteGround Web Hosting

cssandhtml