Creating Bloons in Flash
Tutorial parts
Part 3: Programming the scenery
Scenery
These elements are non-interactive which means you don't "do" anything with them, but little bits of polish like this are a vital component of any successful game.
Each of these 3 components are controlled via very simple ActionScript.
The water
You might remember in the setting up part we had 3 movieclips that each held a water graphic, named Water1, Water2 and Water3. We're now going to create a WaterManager that will be in charge of moving those 3 clips backwards and forwards to simulate some waves.
It is a very simple class:
package Doubloons
{
import flash.display.MovieClip;
public class WaterManager extends MovieClip
{
public var Pieces:Array;
public function WaterManager() { }
public function Tick():void
{
// Move each piece of the water around
for each(var water:MovieClip in this.Pieces)
{
water.x += water.Direction;
if(water.x == 0 || water.x + water.width == 550)
{
water.Direction = water.Direction == 1 ? -1 : 1;
}
}
}
}
}
Because we have just 3 pieces of water and only those 3 and they are located on the stage in our FLA we store them in the Pieces array from our main class. We'll come back to that later.
The clouds
The clouds are easier because they are randomly attached and moved around. First we create some clouds in our movie and link them:
The cloud clips made from drawing a bunch of white circles/ovals over each other, then pressing F8 to create a MovieClip
The linked clips - Doubloons.CloudX - makes the clouds available from our AS3
After the clouds set up we create a CloudManager class which handles spawning and moving clouds around on the screen. There's a few lines but it's very simple code.
package Doubloons
{
import flash.display.MovieClip;
public class CloudManager extends MovieClip
{
private var NextCloud:int = 0; // our timer for spawning new clouds
public function CloudManager() { }
public function Tick():void
{
// Move the clouds around, we do this by going backwards
// through the 'children' of our Clouds clip and moving
// each one then checking if it has left the stage.
for(var i:int=this.numChildren-1; i>-1; i--)
{
var cloud:MovieClip = this.getChildAt(i) as MovieClip;
cloud.x -= 0.5;
// check if it's off the stage
if(cloud.x + cloud.width < 0)
{
// remove from the display and array
cloud.parent.removeChild(cloud);
}
}
// Check if we can spawn another cloud
if(NextCloud == 0)
{
// Create the cloud
var newcloud:MovieClip;
var rand:Number = Math.random();
if(rand < 0.25)
newcloud = new Doubloons.Cloud1();
else if(rand < 0.5)
newcloud = new Doubloons.Cloud2();
else if(rand < 0.75)
newcloud = new Doubloons.Cloud3();
else
newcloud = new Doubloons.Cloud4();
newcloud.x = 550;
newcloud.y = Math.random() * 200;
newcloud.scaleX = Math.random();
newcloud.scaleY = newcloud.scaleX;
this.addChild(newcloud);
NextCloud = Math.random() * 600;
}
else
{
NextCloud--;
}
}
}
}
The seagulls
The final "nice little touch" we're going to add is seagulls flying around on the screen. This is handled almost exactly like the clouds. First we get our seagull images and then we create our linked MovieClips, and finally a SeagullManager that handles them.
package Doubloons
{
import flash.display.MovieClip;
public class SeagullManager extends MovieClip
{
private var NextSeagull:int = 0; // our timer for spawning new seagulls
public function SeagullManager() { }
public function Tick():void
{
// Move the seagulls around, we do this by going backwards
// through the 'children' of our Seagulls clip and moving
// each one then checking if it has left the stage.
for(var i:int=this.numChildren-1; i>-1; i--)
{
var seagull:MovieClip = this.getChildAt(i) as MovieClip;
seagull.x += seagull.MoveX;
seagull.y += seagull.MoveY;
// check if it's off the stage
// condition 1 = it's come off the left edge (x + width)
// condition 2 = it's come off the right edge (x)
// condition 3 = it's come off the top edge (y + height)
if(seagull.x + seagull.width < 0 || seagull.x > 550 || seagull.y + seagull.height < 0)
{
// remove from the display
seagull.parent.removeChild(seagull);
}
}
// Check if we can spawn another seagull
if(NextSeagull == 0)
{
// Create the seagull
var newseagull:MovieClip;
if(Math.random() < 0.5)
{
// type one, moves up and to the right starting from the left edge
newseagull = new Doubloons.Seagull1();
newseagull.MoveX = 1 + Math.random();
newseagull.MoveY = -0.01;
newseagull.x = -newseagull.width;
newseagull.y = Math.random() * 350;
}
else
{
// type two, moves up and to the left starting from the right edge
newseagull = new Doubloons.Seagull2();
newseagull.MoveX = -1;
newseagull.MoveY = -0.01;
newseagull.x = 550;
newseagull.y = Math.random() * 350;
}
this.addChild(newseagull);
NextSeagull = Math.random() * 360;
}
else
{
NextSeagull--;
}
}
}
}
Once you have done all of this you're ready to the game screens, saving, and sound managers.
Tutorial parts
Discuss
blog comments powered by DisqusPlay free games
Want to play free games? We recommend these games:
Sift Heads World - Act 3 Doodle Jump Online Doodle God Infectonator!: World Dominator When Penguins Attack When Penguins Attack 2 Original Blast Billiards Worm Madness Bloons Insanity Shadez 2 Cursed Treasure
