• 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
  •  

    May 2013
    M T W T F S S
    « May    
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
  • games

    • Game Showcase
Oct 26

Creating bridges in APE part 2

APE, flash, tutorial No Comments »

This is a continuation of the last tutorial concerning Bridges in APE and is the next step that i would take to make this function more useable. Thee is no difference in how i make the bridges, all i have done is to add the options to change the stiffness of the bridge and the colour of it.
This can be changed simply with a few lines of code.
I have also learnt that default values can be set to parameters in functions, this means that flash won't throw an error if not all of the parameters are set.

Here is an example of the new ape bridge function with random colours and line thicknesses. The top bridge has a stiffness of 0.4 and the 3rd has a stiffness of 1.2, the rest have a value of 1. You should be able to tell the difference.


Reload the page to see different bridges.

The colours and line thicknesses are random so don't expect a work of art, but you can see how easy it is to change what style the bridge is. You may notice that i have changed the falling balls to black.

The code:

PLAIN TEXT
Actionscript:
  1. stage.frameRate = 30;
  2. import org.cove.ape.*;
  3. import flash.events.Event;
  4. addEventListener(Event.ENTER_FRAME, run);
  5. var apeholder:MovieClip = new MovieClip();
  6. apeholder.graphics.drawRect(0, 0, 550, 400);
  7. addChild(apeholder);
  8. var ballArray:Array = new Array();
  9. APEngine.init(1/3);
  10. APEngine.container = apeholder;
  11. APEngine.addForce(new VectorForce(false,0,2));
  12. var examplelevel:Group = new Group();
  13. examplelevel.collideInternal = true;
  14. var leftwall:RectangleParticle = new RectangleParticle(5,200,10,600,0,true);
  15. leftwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  16. examplelevel.addParticle(leftwall);
  17. var rightwall:RectangleParticle = new RectangleParticle(545,200,10,600,0,true);
  18. rightwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  19. examplelevel.addParticle(rightwall);
  20. for (var ballnum:int = 0; ballnum<20; ballnum++) {
  21.     var ball:CircleParticle = new CircleParticle(Math.random()*550,-50-Math.random()*150,15,false,2);
  22.     ball.setStyle(1, 0x000000, 1, 0x000000,1);
  23.     examplelevel.addParticle(ball);
  24.     ballArray.push(ball);
  25. }
  26. createBridge(530, -50, 6, 60, 0.4, false, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
  27. createBridge(20, 50, 6, 60, 1, true, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
  28. createBridge(530, 150, 6, 60,1.2, false, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
  29. createBridge(20, 250, 6, 60, 1, true, Math.random()*0xFFFFFF, Math.random()*10,  Math.random()*0xFFFFFF);
  30. APEngine.addGroup(examplelevel);
  31. function run(event:Event):void {
  32.     APEngine.step();
  33.     APEngine.paint();
  34.     for (var ballstocheck:int = 0; ballstocheck<ballArray.length; ballstocheck++) {
  35.         if (ballArray[ballstocheck].py>400) {
  36.             ballArray[ballstocheck].py = -50;
  37.         }
  38.     }
  39. }
  40. function createBridge(startx:Number, starty:Number, jointnum:int, ropedist:Number, elasticity:Number = 1, right:Boolean = true, linecolour:uint = 0x000000,linethickness:Number = 1, fillcolour:uint = 0x000000) {
  41.     var bridgeArray:Array = new Array();
  42.     var reverse:int = 1;
  43.     if (right == true) {
  44.         reverse = 1;
  45.     } else {
  46.         reverse = -1;
  47.     }
  48.     for (var bn:int = 0; bn<jointnum; bn++) {
  49.         var bparticle:CircleParticle = new CircleParticle(startx+(bn*ropedist*reverse),starty+(bn*ropedist/2),5,false,2);
  50.         bparticle.setStyle(linethickness, linecolour, 1, fillcolour,1);
  51.         examplelevel.addParticle(bparticle);
  52.         bridgeArray.push(bparticle);
  53.     }
  54.     for (var cn:int = 0; cn<bridgeArray.length-1; cn++) {
  55.         var bridgeConn:SpringConstraint = new SpringConstraint(bridgeArray[cn], bridgeArray[cn+1], elasticity, true, 10, 1);
  56.         bridgeConn.setStyle(linethickness, linecolour, 1, fillcolour);
  57.         examplelevel.addConstraint(bridgeConn);
  58.     }
  59.     bridgeArray[0].fixed = true;
  60.     bridgeArray[bridgeArray.length-1].fixed = true;
  61. }

The explanation of what has changed:

Lines 26-29: These, as you know if you have read this post are how we call the bridge functions. i will explain in more detail after i have explained the changes to the actual function.

Line 40: This is where i declare the the function that makes the bridges. You will notice 4 new parameters. Elasticity is how stiff the bridges are from 0-1, where 0 is floppy ad 1 is solid, but i have found that you can put the elasticity to 1.2 before it breaks the bridge, the default is 1. Linecolour is obviously the colour of the outlines. It is a hex code 0x000000 is black and the default. Line thickness is the thickness of the line in pixels, default is 1. Fillcolour is the fillcolour of the blocks and the default is black, 0x000000.

Line 50: This sets the style of the circle particle that acts as our joint. So instead of setting them to constants i have set them to the parameters that i set on line 40.

Line 55: This is the line where i set up the springconstraints for the bridge the only thing that i have changed in the stiffness, i have changed it from 1 to the elasticity parameter i set earlier.

Line 56: Where the style of the pringconstraints are set, just as before i have changed the colours and line thicknesses to those of the parameters.

Ok that is all the code we changed to get these results, now lets look at how i called the bridges on lines 26-29.
I will just explain line 26 as the others are the same.

Line 26: createBridge(530, -50, 6, 60, 0.4, false, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);

The bits in bold are the new parameters. The first one, the 0.4 is the stiffness of the bridge, so not very stiff in this case. The next one is the line colour and i have set a random colour for this. The next is the line thickness and i have set a random number between 1 and 10. The last is the fill colour which is again random.

I will probably continue to play with APE in the next tutorial but you can send requests if you want something more specific.

Oct 24

Creating bridges in APE

APE, flash, Uncategorized 1 Comment »

In my last tutorial post, which was a while ago i made a simple example using APE just with solid objects. In this next tutorial i will show you how to make floppy bridges.

Here is what we will be making:

You can see that the physics simulator is pretty accurate, i really like the rope bridges that can be made and i used them a lot in the SteerWheels games. But i have created a function that automatically makes a rope bridge from some simple parameters. I have made this function for the tutorial and i wish i had made it for the steerwheels games.

To start off open a Flash CS3 document and set up the file like i showed you for the last tutorial, here.

The ActionScript is as follows:

PLAIN TEXT
Actionscript:
  1. stage.frameRate = 30;
  2. import org.cove.ape.*;
  3. import flash.events.Event;
  4. addEventListener(Event.ENTER_FRAME, run);
  5. var apeholder:MovieClip = new MovieClip();
  6. apeholder.graphics.drawRect(0, 0, 550, 400);
  7. addChild(apeholder);
  8. var ballArray:Array = new Array();
  9. APEngine.init(1/3);
  10. APEngine.container = apeholder;
  11. APEngine.addForce(new VectorForce(false,0,2));
  12. var examplelevel:Group = new Group();
  13. examplelevel.collideInternal = true;
  14. var leftwall:RectangleParticle = new RectangleParticle(5,200,10,600,0,true);
  15. leftwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  16. examplelevel.addParticle(leftwall);
  17. var rightwall:RectangleParticle = new RectangleParticle(545,200,10,600,0,true);
  18. rightwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  19. examplelevel.addParticle(rightwall);
  20. for (var ballnum:int = 0; ballnum<20; ballnum++) {
  21. var ball:CircleParticle = new CircleParticle(Math.random()*550,-50-Math.random()*150,15,false,2);
  22. ball.setStyle(1, 0x00CC00, 1, 0x00CC00,1);
  23. examplelevel.addParticle(ball);
  24. ballArray.push(ball);
  25. }
  26. createBridge(530, -50, 6, 60, false);
  27. createBridge(20, 50, 6, 60, true);
  28. createBridge(530, 150, 6, 60, false);
  29. createBridge(20, 250, 6, 60, true);
  30. APEngine.addGroup(examplelevel);
  31. function run(event:Event):void {
  32. APEngine.step();
  33. APEngine.paint();
  34. for (var ballstocheck:int = 0; ballstocheck<ballArray.length; ballstocheck++) {
  35. if (ballArray[ballstocheck].py>400) {
  36. ballArray[ballstocheck].py = -50;
  37. }
  38. }
  39. }
  40. function createBridge(startx:Number, starty:Number, ballnum:int, ropedist:Number, right:Boolean) {
  41. var bridgeArray:Array = new Array();
  42. var reverse:int = 1;
  43. if (right == true) {
  44. reverse = 1;
  45. } else {
  46. reverse = -1;
  47. }
  48. for (var bn:int = 0; bn<ballnum; bn++) {
  49. var bparticle:CircleParticle = new CircleParticle(startx+(bn*ropedist*reverse),starty+(bn*ropedist/2),5,false,2);
  50. bparticle.setStyle(1, 0x0066CC, 1, 0x0066CC,1);
  51. examplelevel.addParticle(bparticle);
  52. bridgeArray.push(bparticle);
  53. }
  54. for (var cn:int = 0; cn<bridgeArray.length-1; cn++) {
  55. var bridgeConn:SpringConstraint = new SpringConstraint(bridgeArray[cn], bridgeArray[cn+1], 1, true, 10, 1);
  56. bridgeConn.setStyle(1, 0x0066CC, 1, 0x0066CC);
  57. examplelevel.addConstraint(bridgeConn);
  58. }
  59. bridgeArray[0].fixed = true;
  60. bridgeArray[bridgeArray.length-1].fixed = true;
  61. }

Code explanation:

Lines 1-25: This is how i set up my APE examples, i have explained these lines in detail in this tutorial.

Lines 26-29: these are my createBridge functions. I will get back to these after i have explained the actual functions. For some reason i always put my functions at the bottom of my code.

Line 30: Adding the group to the Ape engine.

Lines 31-39: This is The function that makes the simulation move, it is exactly the same as it was in this tutorial.

Line 40: Finally, my create Bridge function. It has 5 parameters; startx and starty are the coordinate for the first particle in the bridge, it is always fixed. The next is ballnum which is the number of joints in the bridge. Ropebridge is the distance between the joints and the last parameter, right, is the direction in boolean form, true = right, false = left.

Line 41: This is an array that holds all the joints of the rope bridge.

Line 42: Setting up an number that is either 1 or -1 and will be used to send the bridge either left or right.

Lines 43-47: This is an if statement that checks to see if the boolean "right", mentioned earlier is true or false. If it is true than the number from line 42 will be 1 otherwise it will be -1.

Line 48: Setting up a for statement with that goes up to ballnum that we set when calling the function.

Line 49: Creating a circle particle with an x coordinate of startx+(bn*ropedist*reverse) which just means that for every particle created they will always be ropedist apart. if reverse is 1 than the bridge will go from left to right and if it is -1 than the reverse will happen. The y coordinate of the circle particle is starty+(bn*ropedist/2) which is similar to the x but it will be only half of the ropedist vertically and will only ever go downwards.

Line 50: Colouring the particle blue.

Line 51: Adding the particle to the group.

Line 52: Adding the particle to the array that holds all the joints.

Line 54: Setting up another for statement to handle the springs in between the joints. There is always going to be 1 less spring than there is joint so all we need to do is get the length of the joint array and take away 1.

Line 55: Creating a springConstant between 2 particles in the joint array. cn and cn + 1 . This is the reason we needed to minus 1 from the joint array length so that the springs can join to the joints.

Line 56: Setting the springs to the same blue colour.

Line 57: Adding the constraints, the springs, to the group.

Lines 59-60: Setting both ends of the bridge to fixed positions so that they don't move.

You should now be able to understand lines 26-29 where i create the bridges.

I hope this helps some people and post stuff that you make with it in the comments.

Sep 14

Creating a simple APE example

APE, flash, tutorial 13 Comments »

I have made a simple example flash movie with the actionscript physics engine to show you briefly how it works. If you are unsure about any on the classes i talk (and try to explain) in this post then you can take a look at the APE documentation here.

You will have needed to read this tutorial before starting!

Here is hopefully what we will be creating.

You should see a load of cascading black balls bouncing off various shapes. This is only the very basics of what APE can do but it is amazing as the physics seem very realistic.

Ok, i am now going to show you the entire code and then i will explain it.

 

PLAIN TEXT
Actionscript:
  1. stage.frameRate = 30;
  2. import org.cove.ape.*;
  3. import flash.events.Event;
  4. import flash.events.KeyboardEvent;
  5. import flash.display.Sprite;
  6. import flash.events.MouseEvent;
  7. addEventListener(Event.ENTER_FRAME, run);
  8. var apeholder:MovieClip = new MovieClip();
  9. apeholder.graphics.drawRect(0, 0, 550, 400);
  10. addChild(apeholder);
  11. var ballArray:Array = new Array();
  12. APEngine.init(1/3);
  13. APEngine.container = apeholder;
  14. APEngine.addForce(new VectorForce(false,0,2));
  15. var examplelevel:Group = new Group();
  16. examplelevel.collideInternal = true;
  17. var leftwall:RectangleParticle = new RectangleParticle(5,200,10,600,0,true);
  18. leftwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  19. examplelevel.addParticle(leftwall);
  20. var rightwall:RectangleParticle = new RectangleParticle(545,200,10,600,0,true);
  21. rightwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  22. examplelevel.addParticle(rightwall);
  23. for (var ballnum:int = 0; ballnum<25; ballnum++) {
  24. var ball:CircleParticle = new CircleParticle(Math.random()*550,-Math.random()*50,15,false,2)
  25. ball.setStyle(1, 0x000000, 1, 0x000000,1);
  26. examplelevel.addParticle(ball);
  27. ballArray.push(ball);
  28. }
  29. var platforma:RectangleParticle = new RectangleParticle(150,60,400,10,0.2,true);
  30. platforma.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  31. examplelevel.addParticle(platforma);
  32. var platformb:RectangleParticle = new RectangleParticle(450,150,400,10,-0.2,true);
  33. platformb.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  34. examplelevel.addParticle(platformb);
  35. var circ:CircleParticle = new CircleParticle(175,270,70,true);
  36. circ.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  37. examplelevel.addParticle(circ);
  38. var circb:CircleParticle = new CircleParticle(70,340,20,true);
  39. circb.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
  40. examplelevel.addParticle(circb);
  41. APEngine.addGroup(examplelevel);
  42. function run(event:Event):void {
  43. APEngine.step();
  44. APEngine.paint();
  45. for (var ballstocheck:int = 0; ballstocheck<ballArray.length; ballstocheck++) {
  46. if (ballArray[ballstocheck].py>400) {
  47. ballArray[ballstocheck].py = -50;
  48. }
  49. }
  50. }

What the code means!

 

Line 1: Setting the movies frame rate to 30 frames per second. This is what i use as my framerate when making games. 

Line 2: Importing the APE classes, if you followed the previous tutorial than this line should work fine.

Lines 3-6: Importing the necessary flash classes.

Line 7: This line adds a listener that triggers the function run every frame. Run is declared later in the code.

line 8: For the APE engine to run it needs to have a container movieclip. This can be set as this or stage but i prefer to have it in a movieClip that i can control. So i have created a new movieClip called "apeholder".

line 9: Setting the dimensions for the apeholder movieClip.

line 10: Adding the apeholder movieClip to the display list.

Line 11: This is setting up an array which will hold the balls that i create. Arrays are objects that store data which can be easily manipulated. For example if i use a for statement like i do later to declare the balls, if i add the balls to the ballarray than i can access them individually later.

line 12: Now we start to add properties directly to the instance of the APE engine that we are using. The init property tells APE to initialize itself. Lower values result in slower more accurate physics where as higher values give faster less accurate physics.

line 13: As i explained earlier this tells the APEngine that it is contained within the apeholder movieClip.

line 14: This adds a force to the physics for example gravity or wind. Vectors are scalers in a direction so this provides a directional force in this case gravity. With no X force and 2 Y force.

line 15: We need to make a group that contains our simulation so i have made on e called examplelevel.

line 16: Making the group able to collide with itself.

line 17: Adding particles to the group. the first one is a rectangle particle called leftwall. In the parameters there is (x, y, width, height, rotation(inradians), fixed). So for this example i have made a particle with an x value of 5, a y of 200, 10 pixels high, 600 pixels tall, no rotation and i have made it fixed to its original position.

line 18: APE comes with a very nice built in drawing API so in this line i have set the style of the bar. setStyle(3 (line thickness), 0x000000(colour - black), 1(alpha of line), 0xFFFFFF(fill colour), 1(fill alpha) ). 

line 19: adding the particle that we just made to the group example level that we made earlier.

lines 20-22: setting up the right wall which is exactly the same as the left wall just with a different x position do no need to explain it.

line 23: Setting up a for statement. These are used to execute code multiple times without having to retype it. You have to set up a variable number i have called mine ballnum. The second input is how many times you want the code to loop in this case 25 and the final input is how much you want the ballnum to go up by, this case its 1.

line 24: Making a new circleparticle from its APE class called ball. The parameters are (x, y, radius, fixed, mass). So i have set up the ball with random x and y coordinates.

line 25: Setting the style of the balls, this is the same as we used earlier for styling the rectangle particles.

line 26: Adding the ball particle to the example level group that we made earlier.

line 27: remember that array that we set up at the beginning? Well we are going to push the ball particle that we made into the array so that it can be accessed from outside the for statement.

line 28: Closing the for statement.

lines 29-34: Creating 2 more fixed rectangle particles the same way as we did before.

lines 35-40: Creating 2 more circle particles that are bigger than the balls we made and that can't move to use as platforms.

line 41: Adding the group example level to the APEngine, this must be done in order to use this group.

line 42: Making a function called run that is triggered every frame by the event listener that we set up near the beginning of the code.

line 43: This is the built-in function in ape that makes all the particles collide and move, this is essential for ape to work.

line 44: This is the built in drawing api that is used to draw all of the ape example that we have made.

line 45: This is another for statement. Like before we have to make a number this time i have called it ballstocheck. in the next parameter it will run as long as it is less than the number of objects in the ballArray, 25. It will go up in ones like the other for statement.

line 46: This if statement checks to see if the balls y position is greater than 400. It does this by using the ball array that we made earlier with the balls to check number.

line 47: Changes the y position of the ball to -50

lines 48-50: Closing the statements.

 

Hopefully this should work, if you have any issues with the code than just leave a comment and i will get back to you.

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

cssandhtml