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

    October 2008
    M T W T F S S
    « Sep   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.

Oct 06

SteerWheels 2

Uncategorized 1 Comment »

My game SteerWheels 2 has finally been released, please enjoy it and give me feedback.

Play it here! games.tudwaythecore.com/SteerWheels2.html

It has a some new features such as a level select that saves your progress and a practice mode with no timer.
Thanks for playing and i hope you enjoy it!

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

cssandhtml