• Home
tudwaythecore.com
blog
  • Recent Posts

    • Creating bridges in APE part 2
    • Creating bridges in APE
    • SteerWheels 2
    • Creating a simple APE example
    • Design me some levels!
  • Recent Comments

    • Stefan on Sound in AS3 Part 3
    • tudway on Sound in AS3 Part 3
    • Stefan on Sound in AS3 Part 3
    • tudway on Sound in AS3 Part 3
    • Stefan on Sound in AS3 Part 3
  • Categories

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

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

    January 2009
    M T W T F S S
    « Oct    
     1234
    567891011
    12131415161718
    19202122232425
    262728293031  
  • 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.

Sep 14

Creating a simple APE example

APE, flash, tutorial 3 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.

Aug 28

APE Tutorial - getting started

APE, flash, tutorial 6 Comments »

APE, or the Actionscript Physics Engine is a free as3 physics engine built by Alex Cove. It is really easy to use once you get the hang of it and it has detailed documentation to read if you get stuck.

In this tutorial i will show you how to make a simple ball example with gravity.

Firstly you will need to download the latest version of APE. There is a stable release on Alex Cove's website but i am using the 'bleeding edge' one from the google code repository. You can download the whole package from my site here.

Unzip the folder and save it in a place so that you know where it is for example mine is located in my documents folder on my computer.

Now load up flash and create a new actionscript 3 file like normal and save this file however you want. To load the APE classes into the flash authoring environment so that we can use them we first need to change the root classpath of the .swf that will be created. The next step is the most important to get APE running in flash. Follow exactly as i say!

 

publish settings

Go to file>publish settings then a screen should pop up that looks like this one below. Click on the flash tab in the centre, that is highlighted in the picture below. Now look to the picture on the right.

 

Click on actionscript 3 settings, where the mouse curser is on the screenshot. A screen like the one below should show.

 

Click on the browse to path button that is above the large 'classpath' box at the bottom of the window, where the mouse curser is pointing.

 

 

 

 

This will send you to a browsing screen where you have to select the classpath.

h of your .swf. You need to choose the ape_a045 folder that you downloaded earlier and select the source folder inside that. This is where your classpath needs to be. Take a look at this picture. The folder should only have a folder called org inside it like shown.

Click choose and then the white box at the bottom of the publish settings should have the direct path to the source folder inside the ape_a045 folder on it.

If the class path is correct click OK and then click OK again to return to the flash authoring environment.

Next we can start to code and use the engine.

 

 


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

cssandhtml