18 May

Creating a Game Like Filler Part 1

Posted on 2008 under Flash |

Meny of you have probably played Filler.
Filler

The idea is to fill 80% of the stage with a limited amount of orbs.
And another orb can’t hit your orb when it’s still growing.

So in this tutorial I will be showing you how to make the orbs.

The only thing you need in the library is a perfect circle movieclip with the linkage identifier of Filler.

This is the code:

  1. FillersonStage = 0;
  2. gravity = .1;//You might want to increase the gravity a little… Meybe .3?
  3. delay = 10;
  4. _root.onMouseDown = function() {
  5.         FillersonStage++;
  6.         this.attachMovie("Filler", "Filler_"+FillersonStage, _root.getNextHighestDepth(), {_width:20, _height:20, _x:_xmouse, _y:_ymouse});
  7.         this["Filler_"+FillersonStage].growing = true;
  8.         this["Filler_"+FillersonStage].vy = 0;
  9.         this["Filler_"+FillersonStage].vx = 0;
  10.         this["Filler_"+FillersonStage].rad = this["Filler_"+FillersonStage]._width/2;
  11.         this["Filler_"+FillersonStage].m = this._height;
  12.         this["Filler_"+FillersonStage].onEnterFrame = function() {
  13.                 for (i=0; i<FillersonStage+1; i++) {
  14.                         if(_root["Filler_"+i] != this){
  15.                                 for(x=0; x<25;x++){
  16.                         checkColl(this, _root["Filler_"+i]);//Checks hit test between balls —- See function down —
  17.                                 }
  18.                         }
  19.                 }
  20.                 this._y += this.vy;//Adds vy to filler._y
  21.                 this._x += this.vx;//Adds vx to filler._x
  22.                 this.vx *= .99;//Adds friction — shouldnt be over 1
  23.                
  24.                 if (this._y+this.rad>400) {//If filler hits the bottom border
  25.                         this._y = 400-this.rad;//Sets the fillers y
  26.                         if (this.vy>2 or this.vy<-2 and this.growing == false) {//Checks if the fillers vy is great enough to bounce and if it is not beeing dragged
  27.                                 this.vy *= -.5;//Reverses the fillers vy
  28.                         } else {
  29.                                 this.vy = 0;//Else if its vy is not great enough or it is beeing dragged vy = 0;
  30.                         }
  31.                 }
  32.                
  33.                 if(this._x-this.rad<0){
  34.                         this._x = 0+this.rad;
  35.                         this.vx *= -.3;
  36.                 }
  37.                 if(this._x+this.rad>550){
  38.                         this._x = 550-this.rad;
  39.                         this.vx *= -.3;
  40.                 }
  41.                
  42.                
  43.                 if (this.growing) {//If the filler is beeing dragged
  44.                
  45.                 //////////////////////THIS PART MAKES THE FILLER FOLLOW THE MOUSE/////////
  46.                         var dist_x = _xmouse-this._x;
  47.                         var dist_y = _ymouse-this._y;
  48.                         var distance = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
  49.                         angle = Math.atan2(dist_y, dist_x);
  50.                         var speed = distance/delay;
  51.                         this.vx = speed*Math.cos(angle);
  52.                         this.vy = speed*Math.sin(angle);
  53.                 //////////////////////THIS PART MAKES THE FILLER FOLLOW THE MOUSE/////////
  54.                        
  55.        
  56.                         this._width += 2.5;//Ads 2.5 to the fillers width and hight
  57.                         this._height += 2.5;
  58.                         this.rad = this._width/2;//Sets the radius of the filler — Need for hit test
  59.                         this.m = this._height;//Sets the diameter of the filler — Need for hit test
  60.                 } else {//Else
  61.                         this.vy += gravity;//Adds gravity
  62.                 }
  63.         };
  64. };
  65. _root.onMouseUp = function() {
  66.         this["Filler_"+FillersonStage].growing = false;//Stops the dragging
  67. };
  68.  
  69.  
  70. /*
  71. //
  72. //The following function was made my Noddybear
  73. //from Emanuele Feronatos Forum.
  74. //
  75. //
  76. //Forum : http://www.triquitips.com
  77. //
  78. //Noddybear’s website: http://www.noddybear.co.nr/
  79. //
  80. //
  81. //You are free to use it
  82. //
  83. //
  84. //For this function to work your circles will need to have 4 variables
  85. //citrcle._x += vx
  86. //citrcle._y += vy
  87. //rad = cirlce._height/2
  88. //m =  cirlce._height
  89. //
  90. //In this code the circles already have these variables.
  91. //
  92. */
  93. function checkColl(b1, b2) {//This function checks the colison of the fillers.
  94.         var dx = b2._x-b1._x;
  95.         var dy = b2._y-b1._y;
  96.         var dist = Math.sqrt(dx*dx+dy*dy);//Gets the distance between 2 circles
  97.         if (dist<b1.rad+b2.rad and b1.growing == false and b2.growing == false) {//If the circles are touching, bounce away.
  98.                 var angle = Math.atan2(dy, dx);
  99.                 cosa = Math.cos(angle);
  100.                 sina = Math.sin(angle);
  101.                 vx1p = cosa*b1.vx+sina*b1.vy;
  102.                 vy1p = cosa*b1.vy-sina*b1.vx;
  103.                 vx2p = cosa*b2.vx+sina*b2.vy;
  104.                 vy2p = cosa*b2.vy-sina*b2.vx;
  105.                 P = vx1p*b1.m+vx2p*b2.m;
  106.                 V = vx1p-vx2p;
  107.                 vx1p = (P-b2.m*V)/(b1.m+b2.m);
  108.                 vx2p = V+vx1p;
  109.                 b1.vx = cosa*vx1p-sina*vy1p;//Bounces the balls away
  110.                 b1.vy = cosa*vy1p+sina*vx1p;//Bounces the balls away
  111.                 b2.vx = cosa*vx2p-sina*vy2p;//Bounces the balls away
  112.                 b2.vy = cosa*vy2p+sina*vx2p;//Bounces the balls away
  113.                 diff = ((b1.rad+b2.rad)-dist)/2;
  114.                 cosd = cosa*diff;
  115.                 sind = sina*diff;
  116.                 b1._x -= cosd;
  117.                 b1._y -= sind;
  118.                 b2._x += cosd;
  119.                 b2._y += sind;
  120.         }else{
  121.         if (dist<b1.rad+b2.rad){
  122.                 if(b1.growing == true){
  123.                         b1.removeMovieClip();
  124.                 }
  125.                 if(b2.growing == true){
  126.                         b2.removeMovieClip();
  127.                 }
  128.         }
  129.                
  130.         }
  131. }
  132.  

It might be a little hard to read it in the browser, so you might just want to copy it right into flash and look at it there!

You should get something like this:


Notice that when too meny orbs are creating it will start to lag.
This is because of the for loops in the hit test between orbs.
If this disturbs you can remove 1 of the for loops, but remember that in Filler only about 80%
of the stage has to be filled. I might still fix this in future parts!

In the next part I will be showing you how to count how meny % of the stage has been filled and how to create the “Bad” orbs!

You can download the FLA file here!








If you liked this post, please donate!

1 Comment so far »

  1. by Nice, on September 5 2008 @ 2:45 pm

     

    Nice this is realy good part two part two!

Comment RSS · TrackBack URI

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: