Working on tower defense

I had the logic of this tower defense done for several years now. Recently I've decided to clear all unfinished games and this one is the first. Its tower defense game with abstract programmer's art(very ugly art) - vector shapes running around. The enemies are triangles, squares, circles and stars and the turrets are a bit more complicated.

There are only four levels for now although its easy to add more levels. The enemies are pre-planned, now I would use a function to generate enemies but I've decided to use as much of the old logic as I can.

Currently the game is up for bidding at fgl(flashgamelicense) but I don't expect much as its not well polished game.

Edit: The game is now available here - Control Center TD.

How to embed sounds and music in FlashDevelop AS3 project

Its really easy. Lets have soundfile sound.mp3 in folder music.

        [Embed(source='../music/sound.mp3')]        
        private var musicClass : Class;        
        private var mymusic : Sound;

And then this:

         myMusic = (new musicClass) as Sound;                 
         myMusic.play();

Here is the full sourcecode:

package 
{
   
    public class MusicTest
    {
       
        [Embed(source='../music/sound.mp3')]         
        private var musicClass : Class;         
        private var myMusic : Sound;
       
        public function MusicTest()
        {
            myMusic = (new musicClass) as Sound;         
        }
       
        public function playMusic():void {
            myMusic.play();
        }
       
    }

}

How to make simple shooting game like Balloon Hunt

For this tutorial I'll use only FlashDevelop as its easier this way. You can easily adapt it later to build with the Flash Ide.

So lets describe our game first. We will have flying targets all over the screen and we will click on them with the mouse in order to shoot them. You can play the original game here Balloon Hunt 2. First we will add the targets.

Now lets start with new AS3 project with size 640x480 and 50fps. Here is the stub code:

package  
{
 import flash.display.*;
 import flash.utils.*;
 import flash.events.*;
 
 public class Game extends MovieClip
 {  
  public function Game() 
  {   
  }  
 }
}

Now I'll add an array for our targets:

private var targets:Array = new Array();

And a separate class for our targets. Its a very simple class that extends MovieClip and we will use its graphics object to draw a circle in it.

 import flash.display.*;
 
 public class Target extends MovieClip
 {

  public var hit:Boolean = false;

  public function Target() 
  {
   graphics.beginFill(0xff0000);
   graphics.drawCircle(0, 0, 30);
  }
  
 }

And a function to our game class to start the game:

 
 import flash.display.*;
 import flash.utils.*;
 import flash.events.*;
 
 public class Game extends MovieClip
 {
  
  private var targets:Array = new Array();
  
  public function Game() 
  {
   startGame();
  }
  
  private function startGame() : void {
   var target:Target = new Target();
   target.x = 320;
   target.y = 240;
   this.addChild(target);
   this.addEventListener(Event.ENTER_FRAME, gameLoop);   
  }
  
  private function gameLoop(e:Event) :void {
   
  }
  
 }

Here you will see several things. First we add a target to our game just to see something on the screen. Next or actually first we call our function startGame from the constructor. And last we add a function that will be called every frame:

this.addEventListener(Event.ENTER_FRAME, gameLoop);

This will be our game loop. Now you can run the project and see what we get - a lonely target stuck at the center of our game. Lets change this - we will add target on regular basis. We need a counter for this - targetCounter.

private var targetCounter:int;
  
private const TARGETCOUNTER:int = 1000;

And we will add the variable lastTime:

private var lastTime:int;

And a code to the gameLoop function to track how much time have passed.

   if(lastTime == 0) lastTime = getTimer();
   var timeDiff:int = getTimer() - lastTime;
   lastTime += timeDiff;

Here is the full code:

 import flash.display.*;
 import flash.utils.*;
 import flash.events.*;
 
 public class Game extends MovieClip
 {
  
  private var targets:Array = new Array();
  
  private var lastTime:int;
  
  private var targetCounter:int;
  
  private const TARGETCOUNTER:int = 500;
  
  public function Game() 
  {
   startGame();
  }
  
  private function startGame() : void {
   lastTime = 0;
   targetCounter = 0;
   this.addEventListener(Event.ENTER_FRAME, gameLoop);   
  }
  
  private function gameLoop(e:Event) :void {
   if(lastTime == 0) lastTime = getTimer();
   var timeDiff:int = getTimer() - lastTime;
   lastTime += timeDiff;
  }
  
 }

Now we will start with adding targets and moving them around. I want to mention that the code is not optimized but I think it will be easier for beginners to understand it this way. Here is how we change the game loop now:

  private function gameLoop(e:Event) :void {
   if(lastTime == 0) lastTime = getTimer();
   var timeDiff:int = getTimer() - lastTime;
   lastTime += timeDiff;
   
   // next target counter
   targetCounter -= timeDiff;
   
   if (targetCounter <= 0) {
    // add new target
    var target:Target = new Target();
    target.x = -30;
    target.y = Math.random() * 480; // random
    this.addChild(target);
    targets.push(target);
    targetCounter = TARGETCOUNTER;
   }
   // move all targets
   for (var i:int = targets.length - 1; i >= 0; i--) {
    var tg:Target = targets[i];
    tg.x += timeDiff * 0.1;
    // check if the target is outside the screen
    if (tg.x > 670) { // 640 + 30
     this.removeChild(tg);
     targets.splice(i, 1);
    }
   }
  }

And here is the result:

Now its time to add the action. We will add the function mouseDown:

  private function mouseDown(e:MouseEvent) {
   
  }

And at startGame we will add this row:

this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);

And here is the full code of mouseDown:

  private function mouseDown(e:MouseEvent):void {
   if (e.target is Target) {
    var target:Target = e.target as Target;
    target.hit = true;
   }
  }

And now we must change the part where we check if we must remove a target:

    if (tg.x > 670 || tg.hit) { // 640 + 30
     this.removeChild(tg);
     targets.splice(i, 1);
    }

And that's it all. Here is the full code if you've missed something:
Game.as

package  
{
 
 import flash.display.*;
 import flash.utils.*;
 import flash.events.*;
 
 public class Game extends MovieClip
 {
  
  private var targets:Array = new Array();
  
  private var lastTime:int;
  
  private var targetCounter:int;
  
  private const TARGETCOUNTER:int = 1000;
  
  public function Game() 
  {
   startGame();
  }
  
  private function startGame() : void {
   lastTime = 0;
   targetCounter = 0;
   this.addEventListener(Event.ENTER_FRAME, gameLoop);  
   this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
  }
  
  private function gameLoop(e:Event) :void {
   if(lastTime == 0) lastTime = getTimer();
   var timeDiff:int = getTimer() - lastTime;
   lastTime += timeDiff;
   
   // next target counter
   targetCounter -= timeDiff;
   
   if (targetCounter <= 0) {
    // add new target
    var target:Target = new Target();
    target.x = -30;
    target.y = Math.random() * 480; // random
    this.addChild(target);
    targets.push(target);
    targetCounter = TARGETCOUNTER;
   }
   // move all targets
   for (var i:int = targets.length - 1; i >= 0; i--) {
    var tg:Target = targets[i];
    tg.x += timeDiff * 0.1;
    // check if the target is outside the screen
    if (tg.x > 670 || tg.hit) { // 640 + 30
     this.removeChild(tg);
     targets.splice(i, 1);
    }
   }
  }
  
  private function mouseDown(e:MouseEvent):void {
   if (e.target is Target) {
    var target:Target = e.target as Target;
    target.hit = true;
   }
  }
  
 }

}

Target.as

package  
{
 
 import flash.display.*;
 
 public class Target extends MovieClip
 {
  
  public var hit:Boolean = false;
  
  public function Target() 
  {
   graphics.beginFill(0x00ff00);
   graphics.drawCircle(0, 0, 30);
   graphics.endFill();
  }
  
 }

}

And the final result:

How to make space shooter game with ActionScript 3 and FlashDevelop - part 2

Part 1
Now lets continue with our game. In the init function remove the hello world code and add this row:
startGame();

and right afrer the init function we will add startGame:

private function startGame():void {
 this.addEventListener(Event.ENTER_FRAME, gameLoop);
}

And now the game loop:

private function gameLoop(event:Event = null):void {
           
}

It is time to add the player. Lets make new folder called assets and add some images to it. For player spaceship I’ll use this cool image:

and for enemies this one:

You can use my images but please credit me.
Lets start with adding the player. More about embedding images you can learn from this post - FlashDevelop, ActionScript3 and images.
Add this in the class body:

[Embed(source="../assets/s1.png")]
private var playerShipImage:Class;
       
private var player:MovieClip;

And now alter the startGame function this way:

private function startGame():void {
   player = new MovieClip();
   var bitmap:Bitmap = new playerShipImage();
   bitmap.x = -bitmap.width / 2;
   bitmap.y = -bitmap.height / 2;
   player.addChild(bitmap);   
   player.x = 250;
   player.y = 430;
   addChild(player);
   this.addEventListener(Event.ENTER_FRAME, gameLoop);
  }

Compile and run! Here is the result:

And here is the full source code till now:
Main.as

package 
{
 import flash.display.*;
 import flash.events.*;
 
 
 
 public class Main extends Sprite 
 {
  
  [Embed(source="../assets/s1.png")]
  private var playerShipImage:Class;
  
  private var player:MovieClip;
  
  public function Main():void 
  {
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
  }
  
  private function init(e:Event = null):void 
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);
   // entry point
   startGame();
  }
  
  private function startGame():void {
   player = new MovieClip();
   var bitmap:Bitmap = new playerShipImage();
   bitmap.x = -bitmap.width / 2;
   bitmap.y = -bitmap.height / 2;
   player.addChild(bitmap);   
   player.x = 250;
   player.y = 430;
   addChild(player);
   this.addEventListener(Event.ENTER_FRAME, gameLoop);
  }
  
  private function gameLoop(event:Event = null):void {
   
  }
  
 }
 
}

Part 1

FlashDevelop and ActionScript 3 - how to embed image - fast tip

When you use the official flash ide, using images is as easy as clicking several buttons. Actually using images with FlashDevelop is even easier but if you haven't done it you will need this info.
First copy the desired image into folder of the project, for example I'll name my folder assets.
Add a variable to your class:
private var myImg:Class;
And place your cursor on the row above it. Right mouse button on the image and select Generate Embed Code:


You will get something like this:

[Embed(source="../assets/s1.png")]
private var myImg:Class;

Add this where you want to use the image:

var bitmap:Bitmap = new myImg();
addChild(bitmap);

Easy, isn't it?

A Story

I've made a game from my latest experiments with flixel. Flixel is really cool game library that I like more and more.
 After reading the post on mochi blog about making a retro plartformer with flixel I got inspired and now this is the result.

 The art isn't much but hey, don't expect cool art from a developer.
You can try the game on kongamato - A Story.
There are seven different levels made with Dame - by the way Dame is really cool editor once you learn to use it. You can get Dame free from its official site http://dambots.com/dame-editor/ and yea, the site is awful and my head hurts after a minute there. Till now I used Tile Studio by Mike Wiering. Actually the tiles in A Story a made with it but now I use Dame to make maps because its easier to integrate with flixel.
So the game has 7 levels - 4 with this grass land as you can see on the screenshot and 3 with lava tiles and theme. I get bored too fast when I make art or maps. I prefer to work on another game so this is a reason that I have hundreds of unfinished games.

Get A Story free for your website:
<embed src="http://games.mochiads.com/c/g/a-story/AStory.swf" menu="false" quality="high" width="640" height="480" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Experiments with Flixel

After reading an interesting article at Mochimedia Blog I got interested in Flixel. It's an open source game making library for flash, you can see more at its site: http://flixel.org/

Here is an early version of my next idea - its a retro game of course.

How to make space shooter game with ActionScript 3 and FlashDevelop - part 1

As I mentioned in this post (How to make flash games without the expensive Flash IDE) you can make flash games and earn money without buying the Flash IDE. Actually, its very easy and I prefer to make my games this way. Here I’ll show very basic example that is appropriate even for beginners.

What do you need for this tutorial?
FlashDevelop - http://www.flashdevelop.org
Flex SDK - http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

The basics

Let’s begin. Create new AS3 project and name it as you like. I’ll use the name Shooter for it.

This is what will be created for you.

And this is the content of Main.as:

package
{
   import flash.display.*;
   import flash.events.*;
   
   public class Main extends Sprite
   {
       
       public function Main():void
       {
           if (stage) init();
           else addEventListener(Event.ADDED_TO_STAGE, init);
       }
       
       private function init(e:Event = null):void
       {
           removeEventListener(Event.ADDED_TO_STAGE, init);
           // entry point
       }
       
   }
   
}

Add
trace(“Hello World”);
as the last row of the init function:

private function init(e:Event = null):void
       {
           removeEventListener(Event.ADDED_TO_STAGE, init);
           // entry point
        trace(“Hello World”);
       }

Now build and run your project. If everything is done wright you must see “Hello World” at the output window.

Let’s make some changes. First lets change the size and the frame rate. Go to Project->properties and make these changes:

Now our game will be 500x500 and will run at 50 fps(most of the time).

How to make space shooter game with ActionScript 3 and FlashDevelop - part 2

A collection of fast flash tips that may be useful

How to open an URL with AS3:

 try {
   navigateToURL(new URLRequest("http://site"), '_blank'); 
 } catch (e:Error) {

   trace("Can't open site!");
 }

How to enable button mode on MovieClip (hand cursor):

        mc.buttonMode = true;

How to hide/show the mouse:

 import flash.ui.*;

 Mouse.hide();
 Mouse.show();

How to choose a random element from an array:

 var ar:Array = [0, 1, 2, 3, 4, 5, 6];
 var randomIndex:int = Math.random() * ar.length;
 trace(ar[randomIndex]);

List of tutorials for beginner game developers - Flash and ActionScript

Here is a list of good Flash and ActionScript tutorials for game makers. If you want to learn more about how to make flash games consider reading them all.

Avoider Game Tutorial
http://gamedev.michaeljameswilliams.com/2008/09/17/avoider-game-tutorial-1/
Really good and detailed game tutorial.

Flash game creation tutorial
http://www.emanueleferonato.com/2006/10/29/flash-game-creation-tutorial-part-1/
Another good and long game tutorial.

Tile Based Games
http://www.tonypa.pri.ee/tbw/start.html
If you are serious on making games read this one too.

Make a Flash game like Flash Element Tower Defense
http://www.emanueleferonato.com/2007/10/06/make-a-flash-game-like-flash-element-tower-defense-part-1/
Good tower defense game tutorial.

How to create Tower Defense in ActionScript 3
http://www.flashgametuts.com/tutorials/advanced/how-to-create-a-tower-defense-game-in-as3-part-1/
Great tutorial!

How to make a vertical shooter
http://www.flashgametuts.com/tutorials/as3/how-to-make-a-vertical-shooter-in-as3-part-1/
Detailed and useful tutorial on making a shooter game.

How to create a Platform Game in AS3
http://www.flashgametuts.com/tutorials/as3/how-to-create-a-platform-game-in-as3-part-1/
If you want to make platform game read this one.

Build Tower Defense in ActionScript2
http://www.goofballgames.com/2009/10/25/building-a-tower-defense-game-in-flash-as2/
Its better to use ActionScript 3 but you can always get the idea and make the changes.

Complete Bejeweled Game
http://www.emanueleferonato.com/2010/12/16/complete-bejeweled-game-in-less-than-2kb/
How to make Bejeweled-like games - the tutorial is very detailed and not too hard.

Jigsaw Game tutorial
http://www.actionscript.org/resources/articles/13/1/Jigsaw-Puzzle/Page1.html

How to make flash games without the expensive Flash IDE

Can you make flash games without buying the Flash IDE? Actually, yes. You don't need to buy it to make online games. You can build flash files with the Flex SDK that is absolutely free tool by Adobe. You can learn more and download it free from here.

If you are serious about making flash games with Flex SDK I recommend you to use one more free tool called FlashDevelop. Its very useful open source editor for action script files with code completion that actually works.

If you are determined to make flash games but don't have much action script or game programming experience I recommend you to take a look at this open source game making library Flixel.

FGL blog post - optimizing for mobile

Here is one very useful blog post about optimizing games for playbook and mobile.

FGL Blog - Dillo Hills: Optimizing Games for Playbook and Mobile

My game War of the Words got 3.47 score on Newgrounds!

Yesterday I’ve submitted one of my games to Newgrounds. Today as I’ve checked my newgrounds profile I was surprised with this:

Pretty amazing because the game is not something special. It’s a simple word game, masked as space shooter. Enemy ships are attacking and you must write the words written on them to destroy them. The game starts slowly just with single letters on small blue ships. Anyone can stop the first few waves, even a kid. Later on the game is getting harder with bigger ships with whole words. Later on these ships begin to spawn interceptors with letters and short words.