- WinterGlass - Flash Game Programmer

New game release! Zombie VS Pinball!

2011-09-20T21:01:00.015+08:00

This is a Zombie themed pinball game which uses Box2D library for the physics :D. A tribute to my old pinball days! Hope you guys enjoy it!

Get all 'ZOMBIE' and the zombie comes to life! :D

Created in Multimedia Fusion Developer
Learn all about Multimedia Fusion at www.clickteam.com

Corona is my friend...

2011-07-06T11:37:00.007+08:00

Well like it's title suggested, Corona is my friend. Now what is this corona? It's basically Mobile Development Framework. Currently does

Android

Barns & Noble's Nook

Hmm... now what does this have to do with Flash Game Programming? You can read / download / try ... all about it here
http://www.anscamobile.com/corona

They even have a Flash Actionscript comparison on that side to help you migrate from Actionscript to LUA. Oh wait... did I mentioned that the codes are in LUA? No? Well everything in Corona is in LUA. Just code once and deploy to iOS, Android and that Nook thingy.

It comes with

Emulator for Android

Emulator for iOS Devices - for Mac version only :(...

What it didn't come with is a nice LUA scripting interface but you can find a LUA editor by googling it.
It's

Does this mean I am leaving the Flash Arena?
...
..
.
Never!!! Well not currently... if you look at my [BETA] page you can see I am actually working on a pinball game.... sponsor anyone? Help poor me?

Miniportraits 3

2011-03-08T16:52:00.003+08:00

Another Miniportriats (3) : Spot the Difference Game for everyone to enjoy! Heard that some did stressed on the difficulty of the levels. Well.. it's a spot the difference game where you have to look real hard :D I thought being black and white should be easier... guess not really true :D Portraits are drawn by "dreamscometrue". You can see his artwork at http://www.silkmark.com/dreamscometrue or at http://powderfactor.deviantart.com.. yeah he got a deviantart at last :D Do enjoy...

Welcome stencyl!

2011-02-23T17:16:00.007+08:00

Hmm.. I notice I haven't been errr... talking on this blog a lot. Seems more Game Releases this few months than actual blogging.... anyway....

Lets give a good hand for stencyl. (Not sure how long has it been around but I just heard about it... wait... it says 2011 at the bottom is the page). ~~Tried to copy the logo but it aint happening cause I can't see it in the html code... arggg~~ What's stencyl and what does it have to do with game programming?

Well err.. you can read about it at their site or just read below...

It helps you make games... flash game.. currently

It's actually a packaged Flixel with a very useful and easy user interface to handle game logics... (that's what it looks like in their screen shot... not sure if it's true... yet)

Still blurr? Let me try again....

It lets you create flash game without coding? No?

How about it helps non programmers to make flash game!

Ok.. I am a bit blurr about this until they actually approve me to join their BETA but meanwhile you can try out their games created by their approved ~~(envied)~~ BETA testers.

PS:Ouch... I noticed my link to the Miniportriats 2 game actually pointed to Miniportraits 1... aww... fixed it :D

New Game Release! Smack-A-Lot : Zombie Cockroach!

2011-02-16T11:34:00.006+08:00

Remember Smack-A-Lot : Zombie? After you manage to smack it real good, zombie falls to the ground and a cockroach starts chewing on it / him / her ... whichever suitable. Thus, Smack-A-Lot : Zombie Cockroach is born!

With the addition of left and right blocking and a score penalty system, this adds that extra 'annoying feature' into the game. Go for the highscore!

Miniportraits 2

2011-01-04T16:16:00.003+08:00

First game of the year! Yet another release of Miniportraits spot the difference game. Portraits are drawn by "dreamscometrue". You can see his artwork at http://www.silkmark.com/dreamscometrue

Happy New Year 2011!

2011-01-03T14:35:00.003+08:00

Happy New Year everyone... whoever that is reading this post! Let us make this year a wonderful and joyful year! More games to come? You bet!

Now lets review what happened last year a litle bit. I manage to launch my first online game! Here is the list below!

Smack-A-Lot : Vampire
The third installment of the Smack-A-Lot series with Vampire this time :D This time the smacked fight back! Use the "S" key to defend against the attack and smack the Vampire to oblivion.

You can PLAY it here.

Mini Portraits : A Game of Difference
First collaboration project with an old friend artist, this is a simple spot the difference game which features the artist original work in a form of mini portraits sketched and scanned into the digital world! Have fun!

You can PLAY it here.

Smack-A-Lot : Zombie
A continuation of the Smack-A-Lot series with Zombie smacking action this time around :D A new addition of gameplay has been added... the hyper edition. Can you get the 'UNSTOPABLE!'

You can PLAY it here.

Smack-A-Lot : Piranha
A simple 2 button game where you smack the piranha left and right before the counter runs out :D

You can PLAY it here.

New game release! Smack-A-Lot : Vampire!

2010-12-20T22:05:00.002+08:00

The next Smack-A-Lot is about Vampire. This time they fight back! Smack them before they smack you! The addition of the defend key "S" makes all the difference between life and dead.

Mini Portraits : A Game of Difference

2010-12-15T00:07:00.003+08:00

A deviation of gameplay from the previous smacking releases. This time it's a spot the difference game with mini portraits drawn by "dreamscometrue". You can see his artwork at http://www.silkmark.com/dreamscometrue

New game release! Smack-A-Lot : Zombie!

2010-11-25T22:02:00.003+08:00

A continuation of the Smack-A-Lot series. This time it's with the Zombie! Play the all new hyper smacking edition and see how long can you last against the undead!

New game release! Smack-A-Lot : Piranha Edition!

2010-10-24T16:56:00.006+08:00

Flash 3D Engines Anyone?

2010-10-08T14:51:00.008+08:00

Yup been busy lately.. busy playing Starcraft 2 and other stuffs... (not a very good explanation of being busy...)

Now some of you have already seen and even played with 3D flash games. Ever wonder the 3D engines behind them? How it works? Who writes them? ~~What were they thinking? What do you mean you have not watch Piranha 3D? Go watch it now!~~ Well currently (at time of writing) Flash CS5 does support 3D but in a limited away that you need an engine to be on top of it to ease things out. It's like saying :

"Yeah C++ can do 3D with OpenGL and DirectX and stuff but then to get moving fast (fast and productive being the operative word here...), people probably work with an already built 3D engine like The Unreal Engine (Unreal), The Crystal Engine (Final Fantasy)..."

Well, in Flash we have 2 FREE 3D Engines to work with. (popular ones that is)

Away3D (here)

Papervision3D (here)

You can just download the libraries and plug it into Flash Develop like how you did it with Flixel in my previous tutorials.

Which one am I using? Well err... not any actually... just browsing along.. moving along but Away3D seems to be pretty easy to get into... no I am not promoting it. Just ignore my previous sentences.. well ignore this whole paragraph but you might want to take a look at a book called "The Essential Guide to 3D in Flash". It's easy to follow and though there are errors in the codes, it's easily spottable.. spotable? Is this a word? 'Spotable'? By the way, it's based on Away3D.

Note : if you are interested, there is this Piranha flick movie called "Mega Piranha" which is totally awesome in a comedic way.

A Tribute to Cactaur ('Cactuar' actually)

2010-08-31T16:44:00.007+08:00

Q : Is there a spelling mistake or something cause the last time I played final fantasy...
A : Yes I know. I got the name wrong... it's supposed to be Cactuar instead of Cactaur but the game has already been done since 2002. The title screen, the conversations... they are all pointing to Cactaur... how embarassing creating a tribute to someone when getting their name wrong :p

Q : What is the 'Fire' key? And why?
A : 'Spacebar'. Because it's easy to press.

Q : The screen is so small? Wha?
A : Yes I know again, it was an old game and 352 x 264 is the norm back then.

Q : Wait a minute I played this before. It was an app by the way... What happened?
A : Yes I got it port over to swf. Unfortunately not all stuffs got translated.

Q : What stuffs gone good bye?
A : The videos especially. I took it out for size sake.

Q : The game is short... I want more...
A : Sorry there isn't anymore... the reason I port this is to test it out under flash.

Q : Cactuar is supposed to sound more intelligent.
A : Errr? Wait... can I answer saying this is Cactaur and not Cactuar?

'A Tribute to Cactaur' is a fan game made by me after got stuck in the Final Fantasy universe back in the early y2k with Clickteam products. It was released as a tribute to Cactuar (yes I got the name right!) along with Twin Bee characters in 2002 :D

The original release has midi music from the twin bee series but flash does not support midi so it was taken out.
The porting includes replacing all pictures from bitmap (bmp) to either jpegs (jpg) or png (whichever is smaller). Unfortunately it still compiles to a massive 3 MB swf files... ~~err I will look into it~~ The original also had a pre-rendered 3D cactuar :D

Take a look at Clickteam's excellent Multimedia Fusion 2.

A simple A-Star pathfinding in Flash

2010-08-28T20:13:00.000+08:00

Been trying to come out with a prototype of what this pathfinding A* (Pronounced A Star) was all about ever since my previous post.

Reffering to http://www.policyalmanac.org/games/aStarTutorial.htm, which is a good explanation of the topic along with nice pictures of the pathfinding algorithm in progress, I have managed to come out with this...

Go ahead click on it. It should find a path from the blue box to the rather darker blue box.

Sometimes pictures are worth a thousand words.

Keyboards with Flixel.. my moving ship.

2010-08-20T14:03:00.014+08:00

Okay.. we will be continuing from the previous tutorial of ~~clowness~~ clownship. Now where were we? Ahh.. lets see.... we have the ship on screen (Better read the previous tutorial if you are a bit on the blurr side.... Previous Tutorial)

On this tutorial what we are gonna achieve is :

- ~~Import bitmap into the game~~ Done
- ~~Add the imported bitmap as a sprite to the game~~ Done
- Extend the clownship class (Adds more functionality to the Clownship class)
- Taking care of keyboard presses
- Introduction to movement
- Checking for boundaries so that our ship does not go beyond the viewable area

Meanwhile flash has moved to CS6 ... nah not yet as far as I know... still stuck with CS5. Anyway we are using Flash Develop so the only concern is the Flex SDK ... really... no really... really really...

Back to the codes... your directory should look as below.

Note the 3 files...

1. ClownShip.as
2. LoadMeShip.as
3. Main.as

The Main.as sets up the entire flash player and calls LoadMeShip.as.
LoadMeShip.as then creates a new ClownShip instance called cship.

Below is the code for Main.as


package 

{
import org.flixel.*;

 public class ClownShip extends FlxSprite
 {

  [Embed(source = "data/clownship.png")] private var ImgShip:Class;

  public function ClownShip()
  {
   loadGraphic(ImgShip);
  }

 }

}

Yet again the code for LoadMeShip.as


package
{
 import org.flixel.FlxState;
 
 public class LoadMeShip extends FlxState
 {
  private var cShip:ClownShip;
  
  public function LoadMeShip():void
  {

   cShip = new ClownShip(100, 100);
   add(cShip);
  }
 }
}

Wait a minute... it's not the same as the previous example... what's with the cShip = new ClownShip(100,100);
It was cShip = new ClownShip(); before.

Well my furry friend, let me introduce you to these things called parameters... what we are doing here is passing in 100 and 100 again as parameter ~~numero uno~~ no 1 and no 2 to the ClownShip. This also means that our previous ClownShip.as has to be modified to accept and use those parameters.

It's like when you get an ~~aiskrim~~ icecream for free you don't pass any money to the seller. The seller don't even need to count the money... but when you purchase the icecream with money, the seller has to have the ability to count the money.~~... whatever... what kind of sick example is this?~~

The entry point (constructor) to the ClownShip.as class is the function which has the similar name to the class name.
Previously ~~on X-Files~~ we have ...


public function ClownShip()
  {   
 loadGraphic(ImgShip);
  }

as the entry point (constructor... get used to the term constructor cause this is widely used by people that talks funny...)

To make it able to accept parameters we need to add it in the function declaration...


public function ClownShip(x:int)
  {   
 loadGraphic(ImgShip);
  }

Note the x:int. This means accepting 1 parameter named x of type integer (32-bit signed integer). Yes you need to declare what kind of parameter this ~~bozo~~ constructor is accepting. But wait... there are 2 of them.. 2 jedi knights? Now there are 2 of them!
So us having a higher plain of intelligence will quickly deduced that the constructor should look like this...


public function ClownShip(x:int,y:int)
  {   
 loadGraphic(ImgShip);
  }

Get it? I do hope you do. Now loadGraphic has been explained ~~about a million times~~ in the previous tutorial so I am not gonna go into that.

Ok now you can accept 2 parameters into the constructor, now what? The 2 parameters from cShip = new ClownShip(100, 100); is actually the X and Y coordinates where we want the ClownShip to appear, so within the ClownShip main function we call "super(x, y);". It should now look like this...


public function ClownShip(x:int,y:int)
  {   
 super(x, y);
 loadGraphic(ImgShip);
  }

Wha? super? What the? Ok I think we need some words about the "super" function.
Here goes...

~~Long ago in a galaxy far far away.. the hope of freedom ..~~

Now which class was ClownShip extended (derived) from? Any answers? Yes.. the FlxSprite class... (from the "public class ClownShip extends FlxSprite") so whenever we call "super~~man~~", it simply means that we are calling the superclass's constructor...
...
..
.
which in this case is the constructor function of FlxSprite, which is

"public function FlxSprite(X:Number = 0, Y:Number = 0, SimpleGraphic:Class = null)" from the FlxSprite.as file.

No don't look into the FlxSprite.as... just look into the documentation that comes with Flixel. From there you will also find out that the first and second parameter passed into the super corresponded with the X and Y coordinate of the created instance.

Okay so now "super" simply means referring to the parents (extended from) object. You can even call the parents object's function / method ... lets say you wanna call the "update" function from FlxSprite.. you can simply call "super.update();" which you are gonna use in the near future. :D

So I hope you pretty much get the idea of "super". ~~While "duper" simply means calling the grand...~~

Now we are going to add a function which Flixel calls each game loop, ~~the ultimate most important function of them all~~ the "update" function. Now if you look into the FlxSprite there is already an update function which has been inherited into the ClownShip.as class so why do we need to add it somemore?

You are right.. it has already been inherited but then we wanna modified that update function to add in listeners for keyboard strokes so we want to override it's parents update function. How are we gonna do this? Well we use override...


override public function update():void {
}

What this means now is whenever Flixel calls the update for the ClownShip... it totally ignores the one it inherited from the FlxSprite and goes straight into the overrided one above. Overrided? Is this even a word? ~~Should it be overrode or overlord or something... all hail Starcraft!~~ SO far it does nothing...

We need to fix this. We need to add something to it... we need the FlxG.keys.xxx


override public function update():void 
{
 if(FlxG.keys.LEFT)
 {
 x -= 3;
 }
}

FlxG.keys contains the keyboard stuffs you are looking for. To test for the left arrow key presses the "FlxG.keys.LEFT" is used
So here we are telling if the LEFT key is pressed we need to minus the x coordinate of the ClosnShip by 3 pixel making it move to the left by 3 pixels.
x -= 3; is the same as x = x - 3; ~~It was implemented long ago during the Mayan time~~
Now which is what key as what who where?
Simple... in Flash Develop, when you key in FlxG.keys. ->upon hitting the "." after "keys", a whole list of keys will appear for you to choose so you don't need to remember what key as what who where.

Now cater for RIGHT, DOWN and UP...


override public function update():void {
 if(FlxG.keys.LEFT)
 {
  x -= 3;
 }
 else if(FlxG.keys.RIGHT)
 {
  x += 3;
 }
 else if(FlxG.keys.DOWN)
 {
  y += 3;
 }
 else if(FlxG.keys.UP)
 {
  y -= 3;
 }
}

Now run the game... tadaaa... you have keyboard control of the ship :D Yeah it goes beyond the viewable boundaries so we add...


if(x > FlxG.width-width-4)
 x = FlxG.width-width-4; //Checking and setting the right side boundary
if(x < 4)
 x = 4; 
 
if(y > FlxG.height-height-4)
 y = FlxG.height-height-4; //Checking and setting the right side boundary
if(y < 4)
 y = 4;

This should stop it from going beyond the boundaries with a 4 ~~mega~~pixel margin :D

The final ClownShip.as should look like this..


package  
{
import org.flixel.*;

 public class ClownShip extends FlxSprite
 {
  [Embed(source = "data/clownship.png")] private var ImgShip:Class;


  public function ClownShip(x:int)
  {
   super(x, y);
   loadGraphic(ImgShip);
  }
  override public function update():void {

   if(FlxG.keys.LEFT)
   {
    x -= 3;
   }
   else if(FlxG.keys.RIGHT)
   {
    x += 3;
   }
   else if(FlxG.keys.DOWN)
   {
    y += 3;
   }
   else if(FlxG.keys.UP)
   {
    y -= 3;
   }

   if(x > FlxG.width-width-4)
    x = FlxG.width-width-4; //Checking and setting the right side boundary
   if(x < 4)
    x = 4; 
   if(y > FlxG.height-height-4)
    y = FlxG.height-height-4; //Checking and setting the right side boundary
   if(y < 4)
    y = 4; 
  }
}

You should now have some idea about "super" and the all important "update" function which is called each game loop.
Also important is the concept of parent and child function overriding :D

The end product should look like this ...

That's about it this time :D This is turning out to be an introdution and understanding of classes and stuffs rather than game programming... hmm... well next time we are going to look into Flixel specific variables like Speed, Acceleration, Drag and how to handle multi key presses ~~which you already know :D from the code above hehehe~~

Updates on Flixel...

2010-08-20T13:55:00.003+08:00

Hmm somehow Flixel has stopped with updates since version v2.43 which is like 65 days ago.. while on the other hand FlashPunk is showing constant updates up till v1.4 on August 11.

Hope ChevyRay is doing well as we eagerly awaits more updates to Flixel.

Of bitmaps and sprites in Flixel

2010-06-27T09:14:00.000+08:00

Previously on winterglass, we learn how to setup and run an empty flixel project. If it works, congrats! If it doesn't it's time to call for help... :D cause I am moving forward to the next tutorial.
What we are going to do here is to :

- Import a bitmap into the game
- Add the imported bitmap as a sprite to the game
- ~~Eat with your nose!~~

Since we are not working in the Adobe Flash Pro interface we do not have the tools to draw ~~lavishly beautiful~~ vector sprites. We are left with the option of importing ~~Starcraft SUV sprites from the mpg files~~ from external file.
Importing bitmap in Flixel does not restrict you to bitmap as in bmp files but you get the variety of png, jpg and bmp to choose from each with their own unique advantages. I will be dealing with png since it's clean ~~unlike jpegs lossy compression~~ and has transparency :D
Yes, transparency information in png. We will need to draw a 'ClownShip' with external drawing packages like GIMP, Photoshop, CorelDraw... ~~MS Paint.~~

Here is my ClownShip below!

I call it clownship.png. Cool right? I mean if you compare with the old vector ClownShip from my previous tutorials. This is a side view instead of the old top down view. You got it right, I am gonna make a left right scrolling shooter instead of the old top down. Enough about directions, since I am writing this tutorial I minus well do it nicely with a good game to end up with in the end.
You might consider buying a Wacom tablet if you are into drawings. It makes drawing sprites ....... easier.

The sprites we are importing is a 64 x 32 pixel sprite. The filename I choosed is clownship.png located at 'data' directory. Yes I created a directory called 'data' inside of 'src'

Now we are going to create a class for the clownship. Why? because creating classes for stuffs makes it easier to control / manage once the project gets big. You will need classes for the player, the enemy...
Under 'src', right click and Add->New Class. Call the new class 'ClownShip'. You will get a ClownShip.as file created for you in the 'src' directory.

Your directory should now look like this.

Now open up the file in the editor. Again you are not interested in the default items in the file. Replace them with these.


package 

{

import org.flixel.*;



 public class ClownShip extends FlxSprite

 {

  [Embed(source = "data/clownship.png")] private var ImgShip:Class;

  public function ClownShip()

  {

   loadGraphic(ImgShip);

  }

 }



}

Lets go line by line again. In the previous episode, we started with classes that extends FlxGame then goes into FlxState. It simply means... We create a game base and put in a stage to the game. All game needs a stage even if it's just a title screen, a game level 1, 2, 3...
Now we need to put in a player or sprite so we extends the FlxSprite thus the public class ClownShip extends FlxSprite

[Embed(source = "data/clownship.png")] private var ImgShip:Class;
- This is the way to tell it to import a bitmap picture called clownship.png in the 'data' subdirectory and refer to it as ImgShip.

loadGraphic(ImgShip);
- Ok loadGraphic is a function inherited from the FlxSprite class. Just go ahead and open the FlxSprite.as from the 'src/org/flixel/FlxSprite.as' directory and search for loadGraphic
- Since it's in the constructor function of ClownShip, it simple loads the bitmap whenever it's created / instantiated.
- The are other parameters which can be passed into the loadGraphic function. I will go that later but if you are interested you can just view the doc that comes with flixel.

Ok now that you have created the ClownShip class, try hitting 'F5'... waaa laaaa.. nothing happens. Why? Because you didn't add it in the stage / state. Go back to LoadMeShip.as
Declare the ClownShip and add it in the state! The code should look like this.


package

{

 import org.flixel.FlxState;

 

 public class LoadMeShip extends FlxState

 {

  private var cShip:ClownShip;

  

  public function LoadMeShip():void

  {

   cShip = new ClownShip();

   add(cShip);

   //trace('I am running');

  }

 }

}

private var cShip:ClownShip;
- You declare a ClownShip and call it cShip. You kinda need to grasp the concept here.
- You are telling it that there is a thing called cShip which is a (type) ClownShip.

cShip = new ClownShip();
- You are instantiating / creating the cShip as a new ClownShip. Basically you can create / instantiate lots of ClownShips with a different name but make sure you declare them first. This one so happends to be named cShip. ~~Am I making sense? I am sounding weird here...~~

add(cShip);
- Now you are adding the cShip, which is a type ClownShip to the playing stage! By default it's located top left ( x = 0, y = 0 )
- What, where did 'add' come from? Take a guess.... yes it's from the FlxState class. To see what it does, just go to the doc under FlxState class and read on.. it tells you it needs an FlxObject to be passed in. FlxObject? Well now take a look at FlxSprite doc file. You see it says it inherits from FlxObject so making it a FlxObject... confuse?... you need to look into these docs often to get up and running on these libraries.

//trace('I am running');
- The // means I commented out this line of code. I think you all knew this already... I just needed this article to be a bit longer.

Now hit 'F5' again. ta daaa.... you have the ship up at the top and it's ready to move around. Now hit the arrow keys. Yes.... yes..... it's not moving.
You will have to wait for the next episode for that to happen! So stay tuned...

FIFA 2010...

2010-06-22T23:33:00.003+08:00

It's here it's here... started... that means some shows are cancelled on TV just for the ~~brokast~~ broadcast. Though you have to agress this time around, the outcome of the first few games are rather unexpected.

I am not really a footbal fan ~~sadly but true~~. The only time I am into these things are for the Padini sticker books. Soon I realised that I can't get those books filled... always a missing sticker here and there...

The same with the padini dinosaur collection and then that nice robot stickers... what was I thinking... I was ~~a dino myself~~ young... what can i say.

Ok back to the topic... football... soccer if you must. There seems to be some rather unsettling news on the new ball being used in FIFA 2010. Complains came in the form of

Ball too round - resulting in weird angular kicks

Ball too ~~lite~~ light - causes much flying

Ball too slippery - causes frequent miss

Ball too aerodynamic - way better than Nissan 370Z

Ball too ~~happy~~ weird - player unable to determine the head or tail of the ball... I am talking nonsense again...

The design and striking lines camoflauged it from the players eyes making them hard to judge its distant from them - the so near yet so far syndrome
~~Ball too soft - stuck to foot when kicked too hard~~

But well, seeing how things turned out, there might be some truth to those claims.
Referees aren't exactly too shy in giving out colored cards either...

Meanwhile I have missed Prince of Persia, A-Team, Toy Story 3 and a whole bunch of other movies... argg... I gotta keep up to date. Catch you all later...

While I am away....

2010-05-31T17:52:00.001+08:00

While I am away ~~finishing off C&C 4~~, Flashpunk has gone Version 1. It was 0.8 before. Much improvement has been added includes the all mighty...

ability to choose frame or time based rate... framerate or timestep based game engine.

Various helper class for animation, collision and ...

basically a redesign of the classes for objects and inputs

powerful motion tweening stuffs

path based motion

~~advanced godlike AI~~

particle effects and emitters

we even have a more powerful sound department now... with pan, fading,... ~~dolby and skywalker sound~~

Not to mentione the older pre - V1 source codes are uncompilable now with the V1 :(
No worries... a quick porting over by your local flash programmer will do the trick. ~~not~~

With these new stuffs in place and comparing the activities and updates on flixel and flashpunk, I can't help but to reevaluate which one should I concerntrate on...
hmmm.... ~~more news after the commercials~~

Pathfinding... what is it?

2010-04-17T16:51:00.007+08:00

Path finding is extremely important for some game. Note the 'some' games. Well this is because games like 'Tetris' does not need path finding, nor does Twin Bee. ~~Wha? You don't know what Twin Bee is? Go google...~~ While some does not need it, others like C&C (Command and Conquer) can't work without it. What does this 'pathfinding' means. Let's put it this way. When playing all rts (real time strategy), clicking on a tank and clicking on a destination, you actually asked the computer to move the tank to that destination. It needs to calculate the road it's gonna use, which bridge is accesible, what rock is blocking, which humans the tank can mow over... you get the point don't you? And thus... that is pathfinding.

Basically an algorithm to calculate possible path from point A to B taking into account obstacles and some point even type of terrans ~~terian... terry...~~

This is just a small article to tell you what it is, I am done. Go on... go away...
... it's over.

Ok.. since you decided to read on, I am gonna introduce you to some path finding algorithm. I am by no way gonna go detail into these algo but I am gonna direct you to some really nice readings about them.

A* (pronounced "A Star") is one of the famous ones... and it's most famous article here at http://www.policyalmanac.org/games/aStarTutorial.htm This article comes highly recommended as I ~~tried and tried to understand for about 80 years but to no avail~~ really gain some insight on it on the very first reading which got me interested to learn more. Oh ya... this is only good if you are dividing the play area into grids and want to find the nearest path from A to B. This one moves from one grid item to another and count and move to another and count and again and again. Yes it's quite computing intensive. You can see a sample here in flash... at http://pixelwelders.com/experiments/pathfinding/ if it's still there...

Dijkstra's algorithm is another one. This is a bit different as it spreads out from it's origin until it reaches it's target unlike A* which travels node to node (point to point). I found and old example dated year 2000 at http://www.electrotank.com/junk/mike/ai/precomputedPathTutorial.html. Basically Dijkstra is slower than A* for the obvoius reason of spreading out...

There are others out there but since we are going into Flixel with tilemap style gameplay I think the A* should suffice. Well no codes for today... just some reading... come on it's weekend... take some time out and play ~~something duh...~~

Absolute Ultra Beginners guide to Flixel with Flash Develop

2010-04-15T04:33:00.000+08:00

In the previous episode, we see the introduction of game libraries in flash scripting language namely Actionscript 3 or AS3. Ok I am going to make some huge assumptions here. What I am assuming are...

- You are rather well to do with AS3
- You have already looked through my previous tutorials
- You know how to setup and already installed Flash Develop
- You have already link to the Flex SDK (FREE download btw) and compiled the 'Hello World' example I previously wrote about.
- ~~You do not wear skirts~~
- ~~You are geeky~~

Ok.. here I am also assuming that

- You want to program a game
- You want to program a 2D game
- You want to program a 2D game with sprites
- You want to program a 2D game with sprites in AS3
- ~~You want to go head on with Blizzard WOW~~

If you are looking for 3D Flash, look elsewhere or maybe look here in like a few years later. I know we already have Papervision and other stuffs but I am still trying to grab 2D.

First I will need you to download a game library... it will be Flixel.. yeah... Wha? Why not Flashpunk? ~~Do not argue with the master programmer~~
Well err... currently I have already started with Flixel. ~~Yes I lied... I started with Flashpunk but it kinda links me to Flixel~~
Ok the reason being that flixel have less letters to type. There!

Start an 'AS3 Project' under Flash Develop. Flash Develop will generate those default files. I call my project name Ship. What we are going to do is to :

- Add a AS3 Project
- Setup the Flixel Library
- Initialises the FlxGame and FlxState
- View the prebuilt in features

After creating a new project, you will get a Main.as default file and if you press 'F5' to test the movie, it will be a blank screen.

Now it will look like this in the Main.as.

Clear all those texts and import stuffs because we are going to use flixel and when we use flixel, flixel handles the import for us in the library itself ~~whatever that means~~.


package 
{
 import org.flixel.*;
    [SWF(width = "500", height = "350", backgroundColor = "#000000")]

 public class Main extends FlxGame
 {
  public function Main():void 
  {
   super(500, 350, LoadMeShip, 1);
  }

 }

}

Just copy whatever is in above and replace whatever which was in the Main.as with it. There... hit 'F5'. You got a game running! Yeah!
...
..
.

Sadly no... it's not that easy.

You did download the flixel library already right? Just unzip it and ~~link to the library via the properties in the..... wait... there is a less confusing way... just~~ copy the 'org' folder in the 'src' folder in the project.
It should look like this in the Project view.

Ok now that you have copied the items into the correct place, hit 'F5' Wha? Again? You should get an error stating some undefined properties LoadMeShip. It's ok.

Let's go line by line on the code we just put in.

import org.flixel.*;
- This simply means we are importing the flixel library located at org/flixel folder relative to the main.as and * simply means everything. So it translate to 'gimme everything from org/flixel'

[SWF(width = "500", height = "350", backgroundColor = "#000000")]
- Since we don't have a nice interface to tell how big we want the flash movie to be like in Flash Pro, we have to do it here like this. The parameters should explain themselves. Or should they?

public class Main extends FlxGame
- Why? extends? What? The class name 'Main' directly relates the the filename Main.as. When compile, the system will look for the filename as the class name so basically this is the entry point.
- extends? If you have some kind of programming background this is equivalent to inherit. I hope I am right but basically this means the Main class inherits the FlxGame class (which by the way is located in org/flixel/FlxGame.as) and is capable of extending it's functionality. Gosh correct me if I am wrong...
- If you look into FlxGame.as you will see it imports flash.display.Bitmap, Sprites and all so basically this FlxGame imports those stuffs and when you import extends FlxGame.as you kinda use those too.
- Ok why do we need to extend from FlxGame? Well this is the kinda core class to extends from when using Flixel. To actually learn more about this, you can view in the documentation that comes with the downloaded library under docs/index.html. You will need to refer to these docs VERY frequently as I have to really understand the library you are using. It helps. It really does... and if you are wondering... wow.. these documents are cool.. how do they do that and keep up with all the updates. The answer is 'You can do it too :D' In Flash Develop, look under Tools->Flash Tools->Documentation Generator... wait I am going off topic... later then.

public function Main():void
- Hmm.. how do I explain this. This is actually the constructor function of the class. A function with the same name as the class will be it's constructor, the one that executes upon initialisation of the class ~~, much like Protoss Executor from Starcraft I... I am talking rubbish again~~
- This is what will run first. As a further reading for you guys, read up on destructor.

super(500, 350, LoadMeShip, 1);
- No relation to Superman, try to guess what it does?
- Although not immediately clear, the 'super' actually calls the class's superclass's constructor!
- Yes... Main being an extention of FlxGame, so Main's superclass is actually FlxGame class and FlxGame constructor is actually the FlxGame function in the FlxGame class which is in FlxGame.as file in org/flixel folder :p. Get it? I really hop you do because, there will be lots of super calling in the future and I really hope you know what it actually means.
- Note the parameter passed in and relate it to the FlxGame constructor function : FlxGame(GameSizeX:uint,GameSizeY:uint,InitialState:Class,Zoom:uint=2)
- 500 = GameSizeX:uint (Width of hte game screen)
- 350 = GameSizeY:uint (Height of the game screen)
- LoadMeShip = InitialState:Class (It will look for the LoadMeShip class, in this case, it's not found cause we have not add it yet!)
- 1 = Zoom:uint=2 (Zoom level with a default of 2)

So now that you realised the error came from the missing LoadMeShip class, all you need to do is to add that class in. Right click on the 'src' folder and Add->New Class

Call it 'LoadMeShip'. Again we don't want the default items in the class so just clear them out and replace with ...


package
{
 import org.flixel.FlxState;

 public class LoadMeShip extends FlxState
 {

  public function LoadMeShip():void
  {
   trace('I am running');
  }
 }
}

FlxState? What's that? Lets just put it as errr.... game states. You know like menu screen, level 1, level 2... so basically it's a game state we are dealing with here.
You can read more about it in the docs. Now hit() 'F5' to run the test movie. If you get the

'Warning: This compilation unit did not have a xxx specified in Frame metadata to load the configured runtime shared libraries. To compile without runtime shared libraries either set the -static-link-runtime-shared-libraries option to true or remove the -runtime-shared-libraries option.'

You should already know how to solve this (for Flex SDK 4) in my previous post. Just add

-static-link-runtime-shared-libraries=true

in the Project->Properties->Compiler Options->Additional Compiler Options
Everything should run fine now. If you are fast enough you can catch the volume control sliding up out of view. This is a default for the volume control. You have lots of other prebuilt stuffs too. Try pressing '`'. You get a console telling your framerate and other infos. If you lose focus on the flash window, your game pauses and a pause screen shows :D
So basically these are the stuffs which are handled by the Flixel game library.

You should also be able to see the 'I am running' in the output panel in Flash Develop! If not you might be using a non debug flash player (solution also explain in my previous blog entry).

Ok that's about as much I am able to write here for today. Sleeping already? Yes it's kinda boring at first but all these needs to be done for the progress to the next tutorial.

About game libraries and stuffs....

2010-04-13T09:11:00.006+08:00

Well I noticed I mentioned Starcraft II back in 2008. It's 2010 now. My how time flies and I am still waiting for it's release... I wonder how those developers at Blizzard do it. I mean come on.. .2 years ? 1 game? Not ready yet? I seen the beta footage and all and it looks great... ready for release I think.

Ok now look at myself... ha! 2 years barely 10 posts on this blog. ~~Talk about kettle calling the pot black~~. Anyway I do hope Starcraft II, when it's out 'soon' will be able to run on my aging PC. I got ready for the game 2 years ago, it's already outdated in terms of processing power and graphic card today. Still remember those... 'yes I needed that graphic card for the coming Starcraft II' in 2008 thoughts... but if they did started development 2 years ago, the PC requirements shouldn't be that bad right? ~~yeah right... they probably had it on papers for a whole year~~ Right? Anyway C&C 4 is out and it's been great! Supreme Commander II has since hang's on my PC and refuse to work. The only thing I could joyfully play on my PC now is actually.....
...
..
.
nothing.
I am stuck with Flash Games and mini exe.
Nothing works anymore.
It started showing signs of aging when I poped in and installed Street Fighter 4 and started playing it in slow motion. Then that racing car game that doe not render correctly, then Supreme Commander II with it's 3 frame per second thingy on my PC when things get crowded. It's a sad world and if we don't upgrade often enough, we get left behind.

Same goes to game programming. We need to constantly do stuffs... program mini modules... just get things compiling. It started out really hard when anyone try to grab the concept but with gradual trial and error, you get the picture.

There are a few game libraries that work well with Flash Develop. Gone ~~not really~~ were the days where I used to draw using that Flash Pro tools on vector graphics and all. Nowadays it's Gimp for graphics and a little bit of other tools.

2 rather popular libraries are (FREE too)

- http://www.flixel.org

- http://www.flashpunk.net

These 2 are suitable for sprite based games like those you get on 8-bit days. Wha? I am talking super mario here and games that are 2D, flat. As with other libraries, these 2 makes it easier for game programmers to put things on screen and move them around, provides easy collision detection methods, a game loop, blah blah.. ~~the list goes on~~

Of course there are others around like

- http://pushbuttonengine.com
- http://code.google.com/p/as3isolib
- http://www.theoworlds.com

and specialised libraris like

- http://code.google.com/p/collisiondetectionkit

These are all cool and all requires time to learn and get used to.
Do take a look see, download the libraries and try them out!

Now why should I? Well you should cause I am gonna use one of these libraries for my next tutorials! ~~.. like next year or so... is that Ironman II coming out?~~

2010-04-08T14:18:00.006+08:00

Ok now that you have got Flash Develop and Flex SDK on your end ~~assuming you listen to my advice~~, create a new AS3 project and hit F5. If everything is correct you will get the Flash Player running an empty screen. If you get an error stating...

"Warning: This compilation unit did not have a factoryClass specified in Frame metadata to load the configured runtime shared libraries. To compile without runtime shared libraries either set the -static-link-runtime-shared-libraries option to true or remove the -runtime-shared-libraries option."

~~it's time to say good bye as your PC cannot and will not compile the script due to lack of vision~~ you are with the majority of us that got stuck with this. Mind you this error comes with SDK 4. After hunting around for a solution, fear not, I have found one!

Go to Projects->Properties->Compiler Options->Additional Compiler Options

Add -static-link-runtime-shared-libraries=true into the String Array... click on that '...' button to add. If you are like me, you will try to type into the 'String[] Array' thingy but it doesn't work. ~~See the time I just saved you?~~ Once it's done.... hitting the F5 will release you from the pain which you are suffering. ~~anger leads to hate, hate leads to pain, pain leads to suffering... is this right? Where does evil fit in?~~
It should look like below...

Soon after there appears a blank Flash Player Screen. If it's not there, one of the reason might be that the 'No output' checkbox is checked. Just go to Projects->Properties to uncheck that OR you might have the 'Test Movie' option below messed up, which is not likely to happen.

Everything runs, fine. You just compiled your first Flash Develop empty project. Now what fun is that? Lets put in the traditional 'Hello World' Expand the Project Viewer Tree ~~(The thing on the right)~~ under 'src' you will see a Main.as file created for you. Right click on it, you will see the 'Always Compile' checked. What this simply means is that the main.as file will always compile ~~Now that explanation is about as useful as a peice of s....~~. Ok what it means is that the entry point to the flash .swf you are gonna generate starts from main.as so basically everything starts from main.as. If you are not keen on using main.as as the main starting point, fell free to add a new file and check it as 'Always Compile'. You will see that the main.as automatically demotes and the new file gets the 'Always Compile' icon! ~~duuuhh~~

Ok.. back to coding. Starting from main.as, double click on it and watch what was defaulty ~~is there such word?~~ written in it. That's basically the proposed item in it which is needed to compile an empty screen. ~~Note 'proposed'...~~ Add a

trace('Hello World');

in the init function. Hit F5 and you should see a 'Hello World' in the 'Output' window.

What's that? No Hello World? ~~You need to spell it correctly in order to make it appear...~~ One of the reason is that you are testing it on a NON DEBUG flash player :D ~~Yes, that was an issue for me for about 5 minutes.~~ To solve this just to go Adobe and get the 'Adobe Flash Player X — Debugger Versions' Get the standalone projector version if possible whichever that suits your style, just remember to point to it under

Tools->Program Settings->FlashViewer ... mine is 'flashplayer_10_sa_debug.exe'.

Ok you should be able to get the 'Hello World' working properly by now!

Flex 4 SDK with Flash Develop

2010-04-07T22:37:00.002+08:00

Ok my mistake... I took a look back at Adobe's site and discover the Flex 4 SDK is out. Download it from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

You can read about the differences between 3 and 4 at http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

Have you guys tried it with Flash Develop yet? Well I will be talking about this combination for my coming articles so get ~~on right~~ right on to it!

How time flies..

2010-03-28T22:02:00.007+08:00

Gosh how time ~~disappears~~ flies. It's 2010 and guess what? This site ain't getting much hits anymore. Well, I guess simply because of lack of updates. Don't worry... I will still be here ~~not~~. Kinda playing on with Flash Develop nowadays. In case you guys have no idea what it is look.... here at www.flashdevelop.org

It's a free AS3 programming interface which works rather well for programmers. Note the words 'free AS3 programming interface'. This simple means you are not getting those drawing tools like you get in normal Adobe Flash Pro and stuffs like that. Well Flash Develop don't even have a timeline for you to look at. It's all in the mind... you need to plan it out and stare real hard at the screen to actually visualised something ~~and they not to develop tumor~~. What good is it anyway without those nice drawing and timeline? It's for the programmers... not designers. You get to compile stuffs written in pure actionscript. For a better understanding of what it is, here is a screenshot...

You still get a compiled .swf as the final output just that you need more understanding in AS3 when doing it in Flash Develop than in Abode Flash Pro itself. For starters... remember how you use 'trace("Hello World!");' in the timeline to output in the debug window? No? ~~What do you mean you don't remember?~~
... and how you conviniently use the 'this' to refer to the whatever you are writing the script to target in... well you need to specify if clearly and import, extends... full blown programming in Flash Develop. What I am trying to say is you pretty much needs to import the libraries and stuffs to use it ~~unlike in Adobe Flash Pro where you are spoonfed with the basic libraries without lifting even a single finger.. well not really actually~~. Flash Develop just don't work out of the download package itself. You need to get the FREE Downloadable Flex SDK from Adobe and point to it in Flash Develop under Tools->Program Settings. (At current time of writing it's Flex SDK 3.5) Screenshot as below...

Once all that is up, you are ready to go... except you can't run in debug unless you download the Adobe Flash Debug Player or something like that from Adobe yet again FREE...

So basically three stuffs to get going

- Flash Develop - FREE
- Flex SDK - FREE
- Adobe Flash Debug Player - FREE
~~- Brain - FREE~~

After that, just go ahead and google all the tutorials for Flash Develop. Yeah go on... go on.. what do you mean I am supposed to write one? And I am supposed to convince you to use it too? ... grrrrr

Wow... missing in action.

2009-11-09T14:49:00.006+08:00

Wow I noticed my last post was almost a year ago. Way to go for losing the readers and followers... if there are any to start with :)

Anyway back to the Flash world, I have again discover something new... in the lines of...

http://www.3dfla.com

It's a plugin for 3D studio max to produce 3D flash stuff... after seeing how flash matures into a 3D playground over the pass few years.

Have you heard of '3D Flash Animator'?

2008-11-21T15:02:00.002+08:00

Have anyone heard of '3D Flash Animator'? It's suprising this piece of ~~sweet~~ software is not mentioned often. Although I would say it's not exactly what the software name suggest... it's also actually a 'click and produce your game' software much like the old 'Klik & Play' with actions and all those... even scripting if you are really into it!

You can use it's various actions available for the objects (if you find programming AS3 to be really mind bogging unlike some 'multimedia fusion' tool... ).. not too many though... but you have the basics for a good game like collisions and such...

The end result may be output in the web just like normal flash would...

Anyway if you are interested, you can visit the site at http://www.3dfa.com

Tutorial Sourcecode Downloadables available!

2008-11-17T17:11:00.003+08:00

Yup, you heard that right! I have added the sourcecodes for Tutorial 8 and 9 in ZIP format ready for downloading! Now if you have followed some of m tutorial you mgiht find it difficult for ME to refer to certain items... NOT anymore! Now download those files and I will just refer to them as item A, line 5 .. go check it out and read! Ha! Having said that... the solution is fairly straight forward. This blog is in blogspot and I hosted the files via sites.google.com so it's basically the same family! I hope this keeps on working and does not violate any rules. Anyway do inform me if this method is ~~illegal~~ not right.

PS : I have finisheddddddd RED ALERT 3.. hahahaha!!! Now looking forward for Starcraft 2... just when is that coming... I thought it was this year???

AS3 09 - Collision Detection

2008-11-11T17:54:00.009+08:00

You have put something on screen, move it around with your keyboard and shooting stuffs out of it. Logically, we should now put in something to shoot at ~~before we get bored~~. But before we go into that ~~lets listen to me talk some nonsense~~, lets talk about collision detection a little. Hands up for those who knows what ‘collision detection’ means… ahh.. I see all of you know this… so therefore I ~~shall~~ ~~will~~ ~~shall~~ will not linger around any longer… anyway it’s basically how you measure if something collides with another… like err… bullet overlaps or intersects with enemy ~~shit~~ ship. Say.. that sounds familiar… that sounds like the hitTestObject() method definition in AS3. Yeah.. I took the ‘overlaps or intersects’ right out of that one. So all you need to do is to run object A hitTestObject with object B and this little ~~joker~~ method returns ‘true’ or ‘false’.

Now down to codes and stuffs that might bore you. First create the enemy, for simple sake my enemy look like a red trangle with a black outline. I convert it into a movie symbol and called it ‘myEnemy’. Create a new AS3 Class file for myEnemy and all those class ~~shit~~ stuffs.

The class file looks like this..

Filename : myEnemy.as


package {
 import flash.display.*;

 public class myEnemy extends Sprite{

  private var timeVal:int;

  public function myEnemy(x,y){
   this.x = x;
   this.y = y;

   }
   
 }

}

Just a simple class to place the enemy on the x and y location specified when initializing.
Now we need to add it in the main AS309.as file. (Yeah you need to create and change all the name to follow the tutorial from AS308.as… also remember the class and the constructor’s name needs to be change accordingly... ~~I am not gonna tell you how because I told you in the previous tutorial… muahahaha....~~)

At the declaration section, add in …


var oneEnemy:myEnemy;

…and in the main function AS309 after the addChild(ClownShip);, add in…


oneEnemy = new myEnemy(stage.stageWidth/2,40);
addChild(oneEnemy);

Now you got a completely easy target placed directly in front of the ship. Start shooting at it. Now lets add in collision detection. We are going to add a text object on screen to tell you how much hit you got.

For this, let me introduce to you the “import flash.text.TextField;”. You will need to import this whenever you deal with textbox and such. To cut some explanation short, add these codes in the main AS309.as file…

In the declaration section…


var myHitsTxt:TextField;
var myHitsNo:int;

In the main AS309 function…


myHitsTxt = new TextField();
myHitsTxt.x = 10;
myHitsTxt.y = 10;
addChild(myHitsTxt);
myHitsTxt.text = String(myHitsNo);

… put that piece of code just before the closing bracket. Why? Because we want it to Trender last, after the clownShip and enemy. Now for the actual event that calls the hitTestObject… we add in an event which runs every frame that calls the checkCols function which test the objects for collision…


stage.addEventListener(Event.ENTER_FRAME, checkCols);

And the function…


public function checkCols(event:Event) {
 var bulletNo:int = mybullets.length-1;
 for(bulletNo;bulletNo>=0;bulletNo--){
   if (mybullets[bulletNo].hitTestObject(oneEnemy)) {
    mybullets[bulletNo].deleteBullet();
    myHitsNo ++;
    myHitsTxt.text = String(myHitsNo);
    break;
   }
 }
}

What happens here is the code loops through every bullet (which was placed in the array) and check each one for collision with the ‘oneEnemy’. If it did collide, then we add to the hits counter, myHitsTxt. Simple right?

Now try running a test movie. Yes! Your first collision detection! Hhaha… the bullet even destroy itself upon impact. Wait.. you are not drooling yet… it’s actually a simple concept right? And if the bullet destroy itself wouldn’t that mess up the array? Well if you look at the previous tutorial, in the .deleteBullet() function, it actually splice out the destroyed bullet so when it loops through again, the array length will be less… and how come you count down – instead of count up ++ in the loop? Experience is the bext teacher so try doing it the other way around… hmm…

If you count up ++, let’s say you move from B1 to B2 to B3 to B4. Let’s say you hit on B2, that also means you splice the array and now it’s B1,B3,B4 but then you are moving forward from the front to the back… to the third position which is occupied by B4 instead of check with B3. You will be skipping one bullet… BUT if you do a countdown you splice out at the end and move forward to the front. You won’t miss a thing… get it? It’s ok… I get confuse of what I am trying to say sometimes…

Here is the final product! Download SOURCECODE

I guess that should be it this time. Next I will add in ~~more Red Alert 3 related~~ a simple AI to the enemy…. movement and make it shoots back.

AS3 08 - Shooting Bullets

2008-11-06T08:22:00.005+08:00

Continuing from the previous tutorials… Now that we got the clownShip moving about, we are going to make it shoot bullets. (Remember if you rename the main AS07.fla to AS08.fla and AS07.as to AS08.as, you need to re-link the class to the main document under the document properties to AS08.as… also… since the AS07.as is now AS08.as, you need to alter the public class name from ‘public class AS307 extends MovieClip’ to ‘public class AS308 extends MovieClip’.. and also… the constructor from ‘public function AS307()’ to ‘public function AS308()’. Please keep all these in mind)

Let’s create the bullet now. This is how my bullet look like… with 800 times magnification.

Yup… a simple circle. Convert it into a symbol and named it ‘myBullet’. Create a class for the bullet… myBullet.as. I hope these all makes sense ~~or suffer the consequences for not reading my last tutorial…~~ because I have already explain how to do all these in the previous tutorial. Now what we need to do is whenever the bullet is created :

It will start from the clownShip
It will move upward from the clownShip
Delete the bullet when going out of screen

So if you already have guessed it correctly, it needs the coordinates of the clownShip and then speed / direction it will move. Moving it upwards should be a loop event so we use the ENTER_FRAME event listener to trigger a function to move it upwards after the bullet has been created. When the bullet reaches beyond the top of the screen, we need to delete it. (The coordinate of a flash document starts from the top left corner and increases as it moves horizontal, x and vertical, y. So basically the top would be when y=0, the bottom would be when y = height of the document.). Then whenever we delete the bullet, we need to end it’s listener too. Don’t forget or you will let it loop to eternity ~~and beyond!~~

A question arises on how do we manage so many bullets at one time? I mean how do we keep track of each bullet whenever it has been created / shoot? And the answer isssss….. array. Now what’s an array? Googling it would be a good idea as I can’t really explain that well ~~due to my lack of wisdom.~~ Create and array as a placeholder and push in a reference to each bullets to build up the array. Why do we need this? Well… it’s actually part of the next tutorial to loop through the bullet array to check for collision with the enemy object... I thought I would explain it here for easier understanding later on… but… well.. just remember that we put in an array to hold the reference to each bullet for the time being. Anyway the array should be in the main AS08.as class since it will be shared with other objects later on. The myBullet.as file should look like this.

Filename : myBullet.as


package {
 import flash.display.*;
 import flash.events.*;
 import flash.utils.getTimer;

 public class myBullet extends Sprite{

  private var timeVal:int;
  private var myspeed:Number;

  public function myBullet(x,y,speed){
   this.x = x;
   this.y = y;
   timeVal = getTimer();
   myspeed = speed;
   addEventListener(Event.ENTER_FRAME,moveBullet);

   }
   
  public function moveBullet(event:Event) {
   var timeDiff:int = getTimer()-timeVal;
   timeVal += timeDiff;

   this.y += myspeed*timeDiff/1000;
   
   if (this.y < 0) {
    deleteBullet();
   }
  }
  
  public function deleteBullet() {
   MovieClip(parent).removeBullet(this);
   parent.removeChild(this);
   removeEventListener(Event.ENTER_FRAME,moveBullet);
  }
   
 }

}

I guess it’s pretty much self explanatory as most of the codes are seen on the previous tutorial except this little ~~bugger~~ one… parent.removeChild(this); It’s actually calling a function on the main parent class which is the AS08.as called removeChild… the part


   if (this.y < 0) {
    deleteBullet();
   }

tells the flash player to call the deleteBullet function which takes it out of the array “MovieClip(parent).removeBullet(this)” and remove the bullet from screen “parent.removeChild(this)” and actually remove the listeners which are are not going to use anymore for that bullet “removeEventListener(Event.ENTER_FRAME,moveBullet)” since it’s deleted.

Anyway, the AS08.as look like this…

Filename : AS08.as


package {
 import flash.display.*;
 import flash.events.*;

 public class AS308 extends MovieClip{

 var leftdown,rightdown:Boolean = false;
 var clownShip:myShip;
 var mybullets:Array;

 public function AS308(){

  stage.addEventListener(KeyboardEvent.KEY_DOWN, listenKeyDown);
  stage.addEventListener(KeyboardEvent.KEY_UP, listenKeyUp);

  clownShip = new myShip(stage.stageWidth/2,stage.stageHeight - 40);
  addChild(clownShip);
  mybullets = new Array();
 }

 public function listenKeyDown(event:KeyboardEvent)
 {
  if (event.keyCode == 37) { //Left arrow
   leftdown = true;
  }
  if (event.keyCode == 39) { //Right arrow
   rightdown = true;
  }
  if (event.keyCode == 32) { //Spacebar
   shootBullet();
  }
 }
  
  
 public function listenKeyUp(event:KeyboardEvent)
 {
  if (event.keyCode == 37) { //Left arrow
   leftdown = false;
  }
  if (event.keyCode == 39) { //Right arrow
   rightdown = false;
  }
 }

 public function shootBullet() {
  var b:myBullet = new myBullet(clownShip.x,clownShip.y-20,-250);
  addChild(b);
  mybullets.push(b);
 }
  
 public function removeBullet(mybullet:myBullet) {
  for(var i in mybullets) {
   if (mybullets[i] == mybullet) {
    mybullets.splice(i,1);
    break;
   }
  }
 }

}
}

I have declared


 var clownShip:myShip;
 var mybullets:Array;

at the base class because I am using them for the coordinates of the bullet and adding bullets into the array. Note the new


  if (event.keyCode == 32) { //Spacebar
   shootBullet();
  }

.. is for the spacebar key… and also the new functions… shootBullet and removeBullet. shootBullet pass in the x and y-20 (why y-20? Because we want it to shoot from the tip of the front, not the middle of the ship…) coordinates of the clownShip along with the speed and direction of the bullet. Negative being moving up. 250 being moving 250 pixels per second. The removeBullet actuualy removes the bullet from the array via the splice function and breaks the loop once the item is found and removed ~~seeing no point to go further after Neo is actually killed in the Matrix right?~~.

Test run the movie and see what happens. Hitting the spacebar should release the bullets from the ship. Looks nice?

Download SOURCECODE

Well, still think game programming is ~~easy~~ nice to dive in? Read on… err… next we will look into adding an enemy and check for collision detection with the bullets… that’s when you see why I put the array for… hohohoh… until then, kudos to The Empire of the Rising Sun for such wonderfully feeble looking tsunami tank…

Open wider...

2008-11-04T17:41:00.002+08:00

At last it's wider... I was looking at my blog and noticed how 'thin' it is. As I post my codes, they kinda get the nextline treatment and I didn't really like that. Thennn... Ta daaa... now it's 900 px across the screen... originally 700. In case anyone would like to know how to do this, it lies with the Layout->Edit HTML page again. Different template offers different ways of changing but basically just search for width and a little bit of experiment, you should get it right.

Anway please backup or copy the codes to another page first before attempting this as it might ended up being ~~totally crap~~ corrupted.

AS3 07 – Classes, your best friend

2008-11-04T16:57:00.005+08:00

I graduated from UPM, a local University in Malaysia and one thing that really frightens me is I actually graduated without much knowledge about classes in programming. We didn’t really have extensive classes about classes ~~(or maybe I didn’t pay much attention)~~ and the few classes I remembered didn’t really put much effort in classes. Hah! Maybe it’s a class of it’s own. ~~Ok enough rubbish.~~ They did teach about classes, just that I didn’t really think it was THAT important.

I ~~tried to~~ picked up Flash AS3 ~~since last month after I bought a dummies book~~ after the 3D demo on balls flying around got me interested and like most others.. downloaded some codes and view at them in awe and decided never to look at programming ever again. Well, we can’t cheat to learn. To learn something is to understand how it is and to understand how it is, is to spend some time with it. If you are not following this with hands-on practical, most likely you will be missing out something…

We are now at tutorial 7. We started with placing movieclips, symbols and instances in Flash, getting the input from keyboard, moving objects around based on frame and time. All these were done within the frame in the timeline. ~~We didn’t even bother renaming ‘Layer 1’ hahahaha…~~

Not that it is a bad thing to start with but as you progress ~~along the lines of insanity, you might want to confuse the readers into giving up their leisure time to do this…~~, you will notice the codes starts to get a little cluttered and if this continue, it will get ~~ugly~~ pretty unmanageable. For someone who actually read this far, I guess you must have realized that ~~I am buying time to figure out what to write~~ the next step is to invite in your best friend, ~~Rudy from Hitz…~~ ‘classes’. What are classes in terms of programming? You can get the answer by googling it. What I introduce here is how it can benefit you in Flash AS3. Let’s just redo the entire thing from the beginning but this time with classes involved.

Create a new Flash File (ActionScript 3.0). Copy over the myShip symbol (the movieclip type you see in your library section. ~~extensively referred to as clownShip in previous tutorials~~) Leave the timeline alone as we are not going to touch that. Now create a new ActionScript file (as shown below).

Name it AS307.as. It a big white empty space for you to write scripts in. Now go back in the main Flash File, in the document properties section create a link to the ‘AS307.as’ by typing in the Class as ‘AS307’ which is the filename of the ActionScript file we just created. It should look like this…Class : AS307 with the myShip in the Library.

Run the test movie. It’s a blank file so nothing is there. Go back to the ActionScript AS307.as file. It’s blank. Yeah.. I repeated twice.. Let’s write out our first class.



package {
 import flash.display.*;
 public class AS307 extends MovieClip{
 }
}

If you run the test movie, it’s still a blank screen. What we did here was a bare minimum for a class declaration. Each class starts with package{} for the class. Within the package we need to import predefined items which we are going to use…. Example if we are to use the textbox functions within the class, we need to write in


import flash.text.*;

For the time being, importing the flash.display.* should be sufficient. Within the package we declare the class name. The class name we declare here must be similar to the filename of the .as file. We named our file AS307.as so the class name is AS307 not very interesting isn’t it? Now we need a constructor… what’s a constructor? It’s a function that runs whenever the class initializes, that means whenever it starts. The constructor must have the same name as the class ~~while the destructor has a ~ in front… wait… wrong language…~~ so the code should look like this.

Filename : AS307.as


package {
 import flash.display.*; //Importing all display related…

 public class AS307 extends MovieClip{

  public function AS307(){ //Constructor
    trace('Hello world again');
   }

 }
}

I put in a trace statement so when you run the test movie, you should see ‘Hello world again’ in the output window. Let’s extend this and put in the clownShip at the same time takes out the trace statement.

Filename : AS307.as


package {
 import flash.display.*;

 public class AS307 extends MovieClip{

  public function AS307(){
var clownShip:myShip = new myShip;
addChild(clownShip);
   }

 }
}

Run the test. Your clownShip should appear at coordinates (0,0) like below.

Well what happened was we created a variable (var) named clownShip of type myShip with …


var clownShip:myShip = new myShip

…then we add it into the scene / stage with the addChild().

Now we are NOT going to tell the clownship to move to the near bottom middle like what we used to at AS307.as. Why? Because it’s not the OOP (Object Oriented Programming) way. ~~Wow am I actually saying this?~~ We are going to create another class for the myShip and then define whatever we need about the ship there. This should include an input of the start coordinates.

Create another ActionScript file and named it myShip.as (save it as myShip.as). This will automatically be referenced to by the myShip object in the library. How? Go back to the main flash document AS3-07.fla. Notice the myShip we copied from the previous projects in the library section? Right click it and choose to view its properties. Under ‘Linkage’ look at ‘Class’, it shows ‘myShip’. This is also the class filename for that particular symbol.

Now in the myShip.as file, code in the class and all those ~~silly~~ stuffs. It should look like this


package{
 import flash.display.*;
 public class myShip extends MovieClip{
 }
}

Again we need to import the flash.display.* because we are extending the functionality of myShip from the MovieClip class which is actually part of the flash.display.* class. Am I saying it right? Please correct me if I am wrong ~~as I am constantly thinking of Red Alert 3~~ Why MovieClip? There are actually 2 obvious options for this. First we created the myShip as a movieClip symbol so basically we are extending from there. Second one might ask why not extending it from ‘Sprite’? Why? ~~I don’t want to that’s why… stop asking…~~ Actually it’s because I intend to add animation frames in the timeline to the myShip in the future. ‘Sprite’ is simply movieclip minus the timeline. So for the time being, let’s just use movieclip. We add a constructor function which receives an x and y coordinates and a few lines to make the ship appear at the bottom middle. ‘this’ in this context refers to the myShip.


package{
 import flash.display.*;
 public class myShip extends MovieClip{
  public function myShip(x,y){
   this.x = x;
   this.y = y;
 }
}

Note I have 2 parameters that needed to be passed into the constructor function. This means whenever I create / initializes the myShip, I need to pass in 2 items, the x and y coordinates. So lets go back to AS307.as and alter the script a little. Put in


var clownShip:myShip = new myShip(stage.stageWidth/2,stage.stageHeight - 40);

replacing the


var clownShip:myShip = new myShip;

The codes should look like this...

Filename : AS307.as


package {
 import flash.display.*;

 public class AS307 extends MovieClip{

  public function AS307(){
     var clownShip:myShip = new myShip(stage.stageWidth/2,stage.stageHeight - 40);
     addChild(clownShip);
   }
 }
}

We are actually passing the start x and y coordinates for the myShip. Now run the test movie. The clownShip should appear at middle bottom. My my… this is turning out to be a long winded tutorial.

Next we will need to create an event listener for keyboard and how it communicates with the clownShip. The event listener should be placed at the AS307.as file while the actually code to move the ship should be placed in the myShip.as file. Why? ~~It’s the OOP way so stop asking…~~ We should err… encompass… err… cover all myShip related functions within the myShip class itself. Whatever that sound like… yeah that’s it. So in the AS307.as, let us put in…


var leftdown,rightdown:Boolean = false;

…in the main public class. Wait.. I think I skipped a part. What is with the public.. public stuffs? Simple… there are only 2 popular ones… public and private. It’s like err… taxi and a normal car. In the taxi (Public transport) you can hop in and start asking and directing the taxi anywhere while in the private car, you can’t do that unless you are somehow related to the driver. Same goes here in AS3, public functions / methods / variables… are accessible by all… meaning declaring the leftdown and rightdown as public will enable other classes to access to it. If this sounds confusing, it’s time for your another best friend… google.  hehe… for more information. Anyway lets get back…

You need to put the event listerners to run whenever the class initializes / started so it should be in the constructor ~~Constructicons merged to form Devastator.. muahahaha and kill those puny Autobots…~~ like this…


stage.addEventListener(KeyboardEvent.KEY_DOWN, listenKeyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, listenKeyUp);

Also note that those pesky listeners calls ‘listenKeyDown’ and ‘listenKeyUp’ functions. Lets code those functions…


 public function listenKeyDown(event:KeyboardEvent)
 {
  if (event.keyCode == 37) { //Left arrow
   leftdown = true;
  }
  if (event.keyCode == 39) { //Right arrow
   rightdown = true;
  }
 }
 

 public function listenKeyUp(event:KeyboardEvent)
 {
  if (event.keyCode == 37) { //Left arrow
   leftdown = false;
  }
  if (event.keyCode == 39) { //Right arrow
   rightdown = false;
  }
 }

It you notice carefully, these are the same codes we coded from the previous tutorials, we are only rearranging them in classes. Try to run the test movie. You will get an error! Why? Because unlike the codes we put in the timeline, we need to import the flash.events.*, so that the event listerner, keyboard events and other events related stuffs can work.

The AS307.as file should look like this…

Filename : AS307.as


package {
 import flash.display.*;
 import flash.events.*;

 public class AS307 extends MovieClip{

 var leftdown,rightdown:Boolean = false;

  public function AS307(){

     stage.addEventListener(KeyboardEvent.KEY_DOWN, listenKeyDown);
     stage.addEventListener(KeyboardEvent.KEY_UP, listenKeyUp);

     var clownShip:myShip = new myShip(stage.stageWidth/2,stage.stageHeight - 40);
     addChild(clownShip);
   }


  public function listenKeyDown(event:KeyboardEvent)
  {
   if (event.keyCode == 37) { //Left arrow
    leftdown = true;
   }
   if (event.keyCode == 39) { //Right arrow
    rightdown = true;
   }
  }
 
 
  public function listenKeyUp(event:KeyboardEvent)
  {
   if (event.keyCode == 37) { //Left arrow
    leftdown = false;
   }
   if (event.keyCode == 39) { //Right arrow
    rightdown = false;
   }
  }


 }
}

Now that we are done for AS307.as, we move on to myShip.as. As we are going to add event listerners and use timer objects for the movement, we need to import…


 import flash.events.*;
 import flash.utils.getTimer;

.. add an event listerner (oh man this tutorial is getting lengthy…) and the function called by the event listener.

The whole file should look like this…

Filename : myShip.as


package{
 import flash.display.*;
 import flash.events.*;
 import flash.utils.getTimer;

 public class myShip extends MovieClip{
  private var timeVal:int;

  public function myShip(x,y){
   this.x = x;
   this.y = y;
  
   addEventListener(Event.ENTER_FRAME,moveClownShip);
  }
  public function moveClownShip(event:Event) {
   var speed:Number = 110.0;
   var timeDiff:int = getTimer()-timeVal;
   timeVal += timeDiff;
     
   if (MovieClip(parent).leftdown == true){
    this.x -= speed*timeDiff/1000;
   }
  
   if (MovieClip(parent).rightdown == true){
    this.x += speed*timeDiff/1000;
   }
  }
 }
}

Run the finish product. You should get exactly what you got when you program it in the timeline in the previous tutorial. The only difference here is the codes are now in classes instead of timeline. It requires a bit more work but the result is ~~exactly the same what good is this anyway I just wasted my time…?~~err … I guess that pretty much intro you to classes. Try to take a look see and reread this ~~again and again~~ a few times until you get the picture ~~/connection to the karma which holds the tsunami tank together… damn Red Alert 3.~~ In the next tutorial we are going to make the clownShip ~~spit I mean~~ shot bullets upward. These are going to be in classes of course.

Testing of Syntax Highlighter

2008-11-03T11:01:00.009+08:00

This is a test for the syntax highlighter...


function listenKeyDown(event:KeyboardEvent)
{
 if (event.keyCode == 37) { //Left arrow
  leftdown = true;
 }
 if (event.keyCode == 39) { //Right arrow
  rightdown = true;
 }
}

Damn the colours doesn't work... or do they? Anyway let's just stick with this for a while ya. :) If anyone is interested, I am using 'prettifier' yeah sounds feminine... which can be seen here http://google-code-prettify.googlecode.com/svn/trunk/README.html

I had to copy and paste the codes within the blog Layout->Edit HTML area since I do not want to link to any other host and blogspot does not allow any uploading of .css and .js files. I hope with this 'prettifier' things will start to look ~~good~~ better. :) (PS : If it's all messed up on other browsers, please please please tell me... thank you.)

AS3 06 - Time based animation, My clownShip

2008-11-03T09:20:00.004+08:00

Previously ~~on X-Men, we see Professor X-Xavier being beaten to pulp…~~ we managed to get a character on screen (clownShip) and control it with the keyboard (left and right arrow). We learned how to listen for events and call functions whenever the events occur. However we noticed that it’s not ‘behaving’ like a normal ship in any arcade game. It’s sluggish and there is a strange interval between the first and second keys before it starts to move continuously. Now lets make it smoother. Instead of moving the ship with each time the key press is detected, why not we create a switch which alternates between ‘move’ and ‘stop’… sounds confusing? Why not we have a switch which sets to ‘move’ when we first hit the arrow key (KEP_DOWN) and ‘stop’ when the key is release (KEY_UP). Let’s call the switch leftdown and rightdown and declare it as …

var leftdown:Boolean = false;
var rightdown:Boolean = false;

What’s a Boolean? It can only hold ‘true’ or ‘false’ which is suitable for what we want now. If we hold the left arrow down, then we set the leftdown to ‘true’, if we release the key (let go), we set the leftdown to ‘false’. In order to do that we need to change the event listeners for the keyboard.

stage.addEventListener(KeyboardEvent.KEY_DOWN, listenKeyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, listenKeyUp);

function listenKeyDown(event:KeyboardEvent)
{
if (event.keyCode == 37) { //Left arrow
leftdown = true;
}
if (event.keyCode == 39) { //Right arrow
rightdown = true;
}
}

function listenKeyUp(event:KeyboardEvent)
{
if (event.keyCode == 37) { //Left arrow
leftdown = false;
}
if (event.keyCode == 39) { //Right arrow
rightdown = false;
}
}

That should get rid of the loop interval at the start.

Now that we have the alternating switch for the movement, we need to actually move the clownShip based on the Boolean value. Here we add another event listener to run at each frame with the Event.ENTER_FRAME and call the moveClownShip function.

addEventListener(Event.ENTER_FRAME, moveClownShip);
function moveClownShip(event:Event) {
if (leftdown == true){
clownShip.x = clownShip.x - 10
}
if (rightdown == true){
clownShip.x = clownShip.x + 10
}
}

Try to test the move now. It’s smoother now isn’t it? There is something still not right here. What we did so far is program based on frame rate. What this means is the clownShip’s movement is directly linked to the number of frames this Flash document is currently running in per second. Basically it’s 24 FPS (frames per second). Where did I get this? It’s a default framerate set by Flash if you start a new document which can be seen at the document properties section.

Basically the Event.ENTER_FRAME runs every frame so the higher the framerate the more times this is triggered. Try increasing the FPS and run the test movie. Move the clownShip around. It moves faster!!!... not smoother. . What we are going to do next is to alter the programming structure to base on time instead of frame. This is very important as this enables control of the animation based on the time passed no matter how slow it takes for the PC to render the image. ~~Duh?~~ Ok… try this… when you play single player Diablo ~~(that’s so olddd…)~~ on an old PC with below minimum requirement, the games slows down but you still get all the animation frames being viewable and all… (much like when you set the Flash FPS to 1) but when you play multiplayer Diablo it skips the frames and keep up with time yeah… that’s it… ~~whatever…~~. Ok.. I think DoTA would be a better example. Once a while you will experience frame skipping within the game. This needs to happen because the game is trying to keep up (sync) with the rest of the clients (players) based on time. If it’s based on frame, the moment one PC slows down, the synchronization is gone. ~~Am I making any sense???... aii… forget it~~

First we need a placeholder (variable) to hold time values. Let’s call it timeVal and define it…

var timeVal:int;

Now we need to alter the moveClownShip function as below…

function moveClownShip(event:Event) {

var speed:Number = 110.0;
var timeDiff:int = getTimer()-timeVal;
timeVal += timeDiff;

if (leftdown == true){
clownShip.x -= speed*timeDiff/1000;
}

if (rightdown == true){
clownShip.x += speed*timeDiff/1000;
}
}

Confused already? Instead of fixing the movement to 10 pixels per frame (previously), now we get the time difference between each frame

var timeDiff:int = getTimer()-timeVal;

and move the clownShip to their appropriate horizontal location based on the time passed from previous frame.

clownShip.x -= speed*timeDiff/1000;

Why divide it by 1000? Well, getTimer() returns the current time value in milliseconds so I am merely converting it back to seconds. Just like 1 meter = 100 centimeter = 1000 milimeters, hmm.. that should give us 1 second = 1000 miliseconds. With the speed value of 110, that means I am trying to make the clownShip move 110 pixel per second. Now try running the test movie at FPS of 1,30,60,120 moving the clownShip across the screen. Note that they all took ~~approx~~ 5 seconds to complete. This would be completely different if the movement was based on frame instead of time. Also note that at around 60 frames per seconds it smooth as silk  Higher framerates are have not so noticeable increase in smoothness ~~unless you have superior/bionic eye/brain.~~ For your info.. your cinema operates at 24fps, television 30 fps and you monitor / LCD probably gets 90 Hertz as the refresh rate. So your fps is actually capped by the display device you are using . Also films in cinema achieve such smoothness because of motion blur.. ~~a topic which I will only go into when I talk about Lightwave 3D some err…~~ . Anyway if all things go right, the final stuff should look something like this.

The whole code is as below :

var clownShip:myShip = new myShip;
clownShip.x = stage.stageWidth/2;
clownShip.y = stage.stageHeight - 40;
var leftdown:Boolean = false;
var rightdown:Boolean = false;
var timeVal:int; // animation time

addChild(clownShip);

stage.addEventListener(KeyboardEvent.KEY_DOWN, listenKey);
stage.addEventListener(KeyboardEvent.KEY_UP, listenKeyUp);

function listenKey(event:KeyboardEvent)
{
if (event.keyCode == 37) { //Left arrow
leftdown = true;
}
if (event.keyCode == 39) { //Right arrow
rightdown = true;
}
}

function listenKeyUp(event:KeyboardEvent)
{
if (event.keyCode == 37) { //Left arrow
leftdown = false;
}
if (event.keyCode == 39) { //Right arrow
rightdown = false;
}
}

addEventListener(Event.ENTER_FRAME, moveClownShip);

/*
function moveClownShip(event:Event) {
if (leftdown == true){
clownShip.x = clownShip.x - 10
}
if (rightdown == true){
clownShip.x = clownShip.x + 10
}
}
*/

function moveClownShip(event:Event) {

var speed:Number = 110.0;
var timeDiff:int = getTimer()-timeVal;
timeVal += timeDiff;

if (leftdown == true){
clownShip.x -= speed*timeDiff/1000;
}

if (rightdown == true){
clownShip.x += speed*timeDiff/1000;
}
}

One more thing the /* and */ serves as the opening and closing of comments in AS3.

Well, I hope you grab the difference between frame based and time based animation programming. This tutorial has been quite confusing ~~to write~~ for some. Next I am going to talk about how we are going to rearrange these stuffs into classes. Well, you can’t actually escape from classes, from school classes to C++ … classes are there to stay. We need them to keep things organize if we are going to do anything bigger than moving single object ~~with our thoughts and balance ourselves with one hand~~ around and also it’s the OOP (object oriented programming – I can see you all yawning now) way.

Why this? FPS? Frame?

2008-10-31T14:48:00.005+08:00

Well, I have browsed a lot... and have read many tutorials about Flash. I am taking a less serious approach here while contributing my part. These tutorials I am writing here are going to be long and rather basic. I am learning as I am writing this too :) I will go from concept to code and even focused on possible mistakes and shortcomings of the codes whenever possible.

Unlike other tutorials, I write lots of gibberish here, so please bear with me. There will bound to be gramatical mistakes here and there but as long as you get what I am trying to say, it should be ok. Meanwhile I hope you all won't maul me for not having a tutorial today hahahaha... whoopps... don't worry. Coming soon.

Once more thing, I do not publish during weekends. It's because ~~I am a lazy bonehead~~ I need err.. time to think of what to write... yeah so that you all can benifit ... err better future... something like that.

Anyway since I am not writing any tutorials todays, I might as well just briefly talk about Flash a little. Who knows what FPS stands for? Whenever you start a document in Flash if you look at the document properties, you are bound to find FPS there... FPS is actually First Person Shooter so kinda get to er.. shoot people in Flash. The higher the rate, the more bullets you get to shoot... NOT. FPS here actually stands for Frame Per Seconds. It is the rate at which the number of frames is shown in 1 second. The higher the framerate of the FPS, the smoother the animation. Now please don't go and change it insanely high like 120 (max for Flash) thinking you get superior smoothness and all shall bow to your animation... Take note that cinema runs at 24 FPS and your television goes 30 FPS. The human eye can be tricked to see smooth / fluid movement with 24 frames per second. In other words, you won't benifit much by putting the framerate to 120 frames per second. Then how come NVIDIA is boosting about how games like F.E.A.R can perform over 160 fps with their GeForce 8800GTX... Yes that's good... very good... they are trying to tell us how powerful their graphic processor can go but do you know that not all games are able to run that way? For example, GTA (Grand Theft Auto) have a standard 30 fps. It can't run properly with frames more than that without killing itself... why? Try running the previous tutorial with the settings of 120 FPS. The clownship got a huge speedboost :).. almost uncontrollable... it's the programming that counts. What we did was we programmed based on frames instead of time, so the higher the framerate, the faster the game. I will talk about this in my next tutorial :) Hohoho... now look at your monitor / LCD panel, what is the highest 'Screen Refresh Rate' does your monitor / LCD panel supports? 90 Hertz? Hohoh... (Christmas in 2 month's time...) That equals to the maximum of 90 frames displayed per second :) So even if your F.E.A.R runs at 160 FPS, you can't see it. It's capped by the limitation fo the display device.

So that's it today. I hope this post is as informative as the grass growing on your lawn.

AS3 05 - Interactivity with stage. My First spaceship

2008-10-30T17:51:00.005+08:00

We have learned how to trace to the output tab, how to listen to keyboard strokes and how to create symbols and create instances in the stage in AS3. In this tutorial we will look into interactivity in the stage. It’s simply a combination of previous tutorials so just take a look see at them if you find this one rather err.. confusing.

Create a new Flash File. Draw a simple ~~clown~~ ship shape on stage. Mine look like this…

Not much of a ~~clown~~ ship but it will do. Convert it to symbol with ‘Export for ActionScript’ and put the name ‘myShip’ for the clown… I mean ship. Now once converted, it should appear in the library like this…

Now delete the original shape on stage. Yes… delete it! Select it and delete. Don’t worry… it has been immortalized in the form of a symbol in the library… well until you delete the symbol.. hmmm. Ok now the stage is empty. We will use AS3 to fill it with the ~~clown~~ ship.

Right click and select ‘Action’ on Frame1 to bring up the ActionScript Editor. (Actually this is not the best way to do this… I will explain in future ~~like few years down the road.~~ but it should be ok for now). Create an instance of the clown ship on stage.

var clownShip:myShip = new myShip; //yes… the name clownship is catching on!!!
addChild(clownShip);

‘//’ Simply puts the characters after ‘//’ as comment until the end of line. It’s good for ~~forgetful~~ programmers to comment so that they may refer to their codes easily ~~and equally easy to be stolen and reuse…~~

You can test the movie now by pressing ‘CTRL+ENTER’. Your clownship appears to be on top left corner of the stage. Position it near bottom middle…

clownShip.x = stage.stageWidth/2;
clownShip.y = stage.stageHeight - 40;

Now this will cause a little overhead to the processing power. Why? Because we could have set the x (horizontal) and y (vertical) position of the clownShip before we add it into the stage (addChild). Currently we add it to stage (default at 0,0) then move it to half of the stage’s width and 40 pixel from the bottom of the stage.. meaning the flash player needs to first position it at 0,0 and then reposition it at stageWidth/2, stage.stageHeight-40…. 2 steps of rendering the ~~clown~~ shape on stage.

We could go around this by re-arranging the codes as below

var clownShip:myShip = new myShip;
clownShip.x = stage.stageWidth/2;
clownShip.y = stage.stageHeight - 40;

addChild(clownShip);

This way, the flash player only needs to render the clownShip once at stageWidth/2, stage.stageHeight-40.

Big deal, we got tons of processing power… that’s what we all thought. But it is these small things that eat up the processing power itty bitty by itty bitty and if you loop the above statement by 1000 times, those will be an additional 1000 steps the flash player needs to take. Now, ~~since the force is strong with this clown…,~~ once we got the clownShip where we wanted it to start with, we need to add an event listener. You do remember how to do that don’t you? In the AS editor, add in these lines of ~~wisdom~~ codes.

stage.addEventListener(KeyboardEvent.KEY_DOWN, listenKey);

The listener will call the function listenKey each time a key is pressed. Now lets put in the listenKey function…

function listenKey(event:KeyboardEvent)
{
if (event.keyCode == 32) {
trace('I have pressed the spacebar');
}
}

This function receives keyboard event and if you look carefully the keyboard keys are referred to by numbers. It’s ok, you just need to memorize all keys and their corresponding key code (keyCode). For example, the ‘spacebar’ holds the keyCode of 32, the ‘up arrow’ holds 38, down 40, left 37 and right 39. Now if you got a key which you would like to find out its key code, you can add this line to the code…

trace(event.keyCode);

…in the listenKey function. So basically the function would look like this…

function listenKey(event:KeyboardEvent)
{
trace(event.keyCode);
if
(event.keyCode == 32) {
trace('I have pressed the spacebar');
}
}

Try to test run the movie, remember to check the ‘Disable Keyboard Shortcut’ from the test movie window and press any key to see their corresponding key codes being displayed in the output (debug) window in the flash app. Hmm…. There is another thing called charCode instead of keyCode. Try reading about it in the help section. ~~Now that was redundant…~~

By now you should be able to know whichever key codes for any keys you wish to know to really want to know, you know. Now lets move on to moving the clown left and right via the keyboard. First you detect the left and right arrow keys…

function listenKey(event:KeyboardEvent)
{
if (event.keyCode == 32) {
}
if (event.keyCode == 37) { //Left arrow
}
if (event.keyCode ==
39) { //Right arrow
}
}

…then you add or minus from the current clown’s horizontal position… here…

function listenKey(event:KeyboardEvent)
{
// trace(event.keyCode);
if (event.keyCode == 32) {
// trace('I have pressed the spacebar');
}
if (event.keyCode == 37) { //Left arrow
clownShip.x = clownShip.x
- 3
}
if (event.keyCode == 39) { //Right arrow
clownShip.x =
clownShip.x + 3
}
}

What happened here is I minus the x position of the clownShip by 3 pixels whenever I press the left key and add 3 pixels to it whenever I press the right key. What are pixels you say? They are ~~actually related to pixies, fairies and all sorts of mythical beast as if I know lots about…~~ tiny dots on screen. Your screen resolution goes by pixels, 800x600, 1024x780… stuffs like that.

Now try to test run the movie. Move the clown around. Does it work? Well if it does, it is not looking good. A bit on the sluggish side I would say, especially on the start. Well, what went wrong? ~~The whole damn tutorial went wrong!~~ What happened was the delayed input of the keyboard thanks to the operating system… (yes blame it on Microsoft) … actually it’s because of these features you don’t get mulllltiiipllleee letters appearing when we type something. Now let’s make that point valid. Open your ‘Notepad’ and hold down a key…. you notice that it repeats only after certain interval. That was what was happening. We will er… tackle this issue ~~once I find out~~ in the next tutorial. Meanwhile try to make the clown move up and down.

AS3 04 - More About Instances

2008-10-30T16:40:00.005+08:00

From the previous post… what we have done is adding a rectangle manually in the stage and repositioning it via AS3. What if we want to add additional rectangle? Are we going to draw it out one by one? In a game, we are most likely to add enemies… waves and waves of enemies. We draw / import a sample enemy (in this case… a movieclip we created earlier called ‘myRect’) into the library and make copies (instances) of them on the fly on the stage whenever we need them. Get it? I just referred to the movieclip = sample enemy and instances = copies of enemies.
Now in order to make copies of the enemies we need to refer to the original sample enemy (in the library called ‘myRect’ – remember we tick on the ‘Export for ActionScript’ when we created the ‘myRect’ symbol? Take note on the class name on the Linkage section because that’s the class we are refering to. What do you mean no?). Here we create the new instance from ‘myRect’ with the name of ‘myRectIn2’

var myRectIn2:myRect = new myRect();

Now that we have the name of the second rectangle, we can reposition it like what we did with the first one.

myRectIn2.x = 200;
myRectIn2.y = 200;

Now the second rectangle is not gonna be displayed on the stage unless we add it into the stage thus….

addChild(myRectIn2);

stage.addChild(myRectIn2);

whichever you prefer… they both work… which brings to the point that what I wrote here isn’t necessarily the only method to achieve similar results.

This article has been brief ~~because I am lazy~~ not because I am lazy but I would like to streesss on the importance of not mixing or confused symbols reference in the library with instances references of the symbols ~~because I always make this mistake when I started out~~ and therefore they deserve an entire post for it.. (other than the one before this) err.. themselves...hmm. You will need to use these lots in future if you are ~~interested to read more of my rumblings~~ to pursue a higher ~~karma~~ understanding of stuffs yet to come. ~~What the??~~

AS3 03 - On stage instance

2008-10-29T10:07:00.000+08:00

My previous post deals with tracing items in the output window and getting the input from keyboard presses. Now those are ~~great for filling in blog spaces~~ basics that well err... need for er... basic understandings. Now that you know that the event listeners are the way to go, you can now start to add stuffs to the stage and making them move about.

Here is what we are going to do in this tutorial.

First we go about adding an item to the stage
Next, we script in AS3 to perform certain things to the item on stage

Simple stuffs? ~~Yeah right.~~ Let's start shall we?

Start with a new Flash File (ActionScript 3.0). Draw something on the stage. Anything at all... well not really anything... A simple circle or square would be nice. Well, mine is a rectangle and it looks like this...

Now 'right click' on the perfect looking triangle... I mean rectangle and choose the 'Convert to Symbol' option.

Next, name the symbol as 'myRect' ~~follow this name or die!!!~~ for convinience sake. ~~(Sake? or sake as in sa ke for Japanese rice wine?).~~ Make sure to 'check/tick' the checkbox for 'Export for ActionScript' so that we can refer to the item in AS3 ~~instead of mindlessly wondering around what went wrong later on.~~

Now try this...

Open up the ActionScript Editor for Frame1 and type in...

myRect.x = 100;

The rectangle should move to 100px from the left of the stage. Well does it happen? What you get from that is an error. This is one of the common error poeple faces when starting out scripting (well at least that was what happned to me...) What happened was the script was trying to refer to an instance in the stage while you actually is trying to point to the movieclip in the library. You need to name the instance of the movieclip you created which resides on the stage. Confuse now? If you look at the image below, you can notice when you click on the myRect instance on stage, the properties on the left shows . Type in 'myRectIn' to name the instance of the myRect which is on the stage.

Once done, you may type in

myRectIn.x = 100;

It works! Now the rectangle is paced 100 pixel from the left of the stage. I hope you grab this concept of MovieClip and Instance on and off stage. This is by far considered very dear and costly if you didn't really grab what I am trying to put forward here. ~~I will end here so that you can think about your future instead of reading this...~~

Gosh... no files...

2008-10-28T16:59:00.003+08:00

Recently ~~(how embarassing)~~, I have come to realised that I cannot upload any files other than pictures to blogspot. This has been a real pain as I was so willing to share my flash scripting .fla files... ~~but too bad~~ Alas this will not deter my err... determination... I will still blog about flash. Now what was it I am supposed to write after this paragraph?... hmm... makes me wonder...

AS3 02 - Listening to Keyboard...

2008-10-28T15:50:00.006+08:00

Now that we have a basic idea of starting and writing a simple trace feature in CS4 [in the previous post], let's move on to something more interactive. Instead of tracing out the 'Hello World' all the time... let's make flash trace out based certain ~~vulgar~~ words of wisdom whenever we hit certain key.

Now.. shall we start ~~bratss~~ ladies and gentlement? Let's start with the opening of Flash CS3/4 .... blah blah... up until the part where you already know to bring out the AS editor.

Now before we proceed further let me ~~tell you a story of a~~ enlighten you on certain things which are primarily improtant in AS3. The blank screen which appears everytime you startup Flash is referred to as 'stage' by the AS. You can get the width of the flash document by tracing out "stage.stageWidth"

Referring to the title of this post, I guess you should be wondering what does this have anything to do with the so call 'stage'? Well, the stage is where everything happens.. (not really true but it's a good way to think about this now... ). The stage needs to listen for any events that happen. I repeat... the stage needs to listen to events that happen... the STAGE LISTENS to EVENTS that happen... I think by now you should get the degree of the importance of that statement. What does this 'stage' listen to anyway? Well, for starters, keystrokes...

How do we have this 'stage' listens to keystrokes? We simply add an event listener...
yeah it's that simple... not...
you add this line into the AS editor

stage.addEventListener(KeyboardEvent.KEY_DOWN, displayPress);
function displayPress(event:KeyboardEvent)
{
trace('Press');
}

What happens here is the 'stage' has been added a listener... which is the 'KeyboardEvent.KEY_DOWN' It listens to the keyboard events and wait for each key presses through the 'KEY_DOWN'. When the 'stage' hears a 'KEY_DOWN' pressing of a key by the user, it calls the 'displayPress' function. The 'displayPress' function traces out the word 'Press' to the output window.

So run test the script and press the 'spacebar' you can see the word 'Press' appears each time you press the 'spacebar'.

You might be wondering 'Eh? How come only the spacebar works? I didn't specifically listen only to the spacebar...' Well, there is a truth in this... when running in test movie mode, many of the shortcut keys still point back to the main Flash App window. To disable this while testing a movie, simply run the test and go to 'Control->Disable Keyboard Shortcut'. Try pressing any keys now... you get the idea?

Oh... and all said and done if you somehow have problem running the script, just take into consideration that AS3 is CASE SENSITIVE! This means keywords like KeyboardEvent is spelled with the capital intact. ~~Do not ask me why.. as if I am responsible for the damn AS3 language.....~~

My Game Making History

2008-10-28T15:20:00.005+08:00

You read it right. I am interested in game programming. It started with Klik & Play. I actually bought the whole diskette stack together with the manual back in 199+. Back then, it was the only thing that can really make games without much programming. I actually learn simple logic scripting with that thing. I was back in university (UPM-anyone?) then and everything was done with my laptop. It was during that time that I discovered the pain joy of making a game. ~~Not only you have to crack your brain thinking what to do but...~~ I was all alone back then with my Pentium 133Mhz (yes it was the state of ark) running 3D Studio 4 (nope not 3D Studio Max 4.0 but 3D Studio 4 for DOS, way before 3D Studio Max 1 ~~or was it Lightwave 4.0 hmmm~~ ) I rendered myself a few images of what looked like a ball with an inverted ball for two eyes of a weird looking character, animate them a bit and import them image by image into Klik & Play. Anyone who actually did this would felt the hardship I went through and cried on this very moment. You would then said something like .... 'Actually there is another way'

I got into creating a clone of Snow Bros, something I called Fire Bros. The gameplay is similar, jumping from platform to platform and shotting red flaming balls of fire at the enemies insted of snowballs in Snow Bros. It was fun and nice ~~(in a way if you think burning cute animals is fun... )~~. My sis got to play with it and dare I say it was additive. That fueled me further and it was shaping out to be a good game with boses at the end of the level (I used the gaint ant animation which came with Klik & Play). Then I did something ~~stupid~~ back then with my laptop. I installed Windows 2000 ( Cursed Unofficial ALPHA Releasessss ) over my Windows 98. Seeing how Windows 2000 have the tendancy to switch to FAT 32 from the existing FAT 16 in Windows 98, it formatted my entire harddisk. I was thinking that it was an upgrade and my stuff would have stayed intact so no backups were made. (There were no such things as thumbdrive, only floppy disk and CD writer cost a bomb on a laptop). To my most dismay, I lost all my stuffs including a half done shoot them-up. I cried overnight at my university dorm. Nah... I didn't. I just went blank and hope that I might be able to recover the info. After trying for about a month, I lost all hope together with Fire Bros. (Internet was not the norm back then so none of my work was uploaded anywhere and I use rocketmail - later bought over by yahoo to be yahoo mail) What a sad ending. The tools I used were

Klik & Play
3D Studio 4.0 (DOS)
Paint Shop Pro
~a very old sound editing software which I have forgotten

These 3 tools were good... very good for what I did back then. Very good friends of mine they were... good friends they were (ok enough gibberishing). Klik & Play is still available from http://www.clickteam.com/.
My second big attempt weren't that glorious. It was for a course in Multimedia Design. I took screenshots from the animation Anastasia and created a point and click kinda game. And what did I use?

Multimedia Fusion
Paint Shop Pro
Cakewalk (midi music)
Media Studio Pro (Ulead)

Klik & Play was off the board as Multimedia Fusion kicked in. You can still find the later versions of Multimedia Fusion at http://www.clickteam.com/. Anyway I got a ~~freakingly bad~~ not so good grades due to some errr volume problem. (I still can't believe they rate based on the number of diskettes and CDs handed in)
Then came the big final year project! I took the challenge of creating a game. It was something I never did before (hahaha yeah right..) and I do not know what came into my brain when I took up that project. Oh wait.. I do. It was that Final Fantasy 7 game that was released on PC on that year. 3D animated character on 2D background! That was awesome back then! I played and played and played (finished and restarted again and again) ~~until my laptop motherboard melted and burn down the entire dorm along with our papers~~. I went on a wild research and bought a whole lot of books on OpenGL and Direct3D. Finally it was done in Direct3D. It was DirectX 5 back then and the only major game worth mentioning was Diablo, Warcraft, Red Alert, Quake, Doom.. (Halflife does not exist yet OMG!!! ) Halfway through my project, DirectX 6 was released but I didn't upgrade. I sitll did my stuffs in DirectX 5 with C++. The tools used were

Visual C++
DirectX Library
Lightwave3D (Switch from 3D Studio)

I wasn't into sound so the project was without sound until the very last part where I passed the stuffs to my partner to add in the sound department. I got an A. It was one of it's kind. It was called The Sanctuary. It was just a POC (proof of concept) demo game where a 3D character actually walked around a 2D rendered room similar to Final Fantasy 7 and only consisted of 4 areas to walk around. After graduation, I got students emailing me about my project. I passed on the codes and became a regular at http://www.putera.com/ for Q&A for game programming until they revamp the site.

AS3 01 - Hello World

2008-10-28T13:24:00.003+08:00

Ok.. here goes.. for those who can script and understands what eventListeners are... skip this article NOW!

For those who can draw on Flash CS4 or CS3 but with a little.. subtle... knowledge of know how on ActionScript 3... read on. ~~and cry because you are not gonna end up any better!~~

AS2 gave way to AS3 as the scripting language for Flash. Release concurrently with CS3 (but was actually released announced in 2006 and released with Flex 2), this joker pack speed boost and a ~~nightmare~~ change of structure. They did good... good they did. The original AS was back in 1996 so after 20 years, they came up with version 3. I wouldn't say the same with certain 3D studio software which spawns almost 10 versions... I started with 3d studio for DOS.

Now I would assume that most that read this article have at least a basic understanding of simple scripting language like errr... loop? if else... stuff like that? What was it you say? No? Great.... because I am about to go through this very quickly.

Let's start with 'Hello World'.

Here are the crappy steps...

1. Launch your Flash CS4/3 ... whichever you prefer. (Tips... CS4 crawls on my PC :(... but I still need it thanks to the bones feature... ~~which reminds me of Animatoion Master, Anime Studio... why am I saying these things here...~~)

2. Create a new Flash Action Script 3 file.

3. You will be faced with a blank screen. ~~Unlike other blank screen, if you look at it carefully you can faintly see Mona Lisa....~~ There is a 'Layer1' in your timeline created by default. Move your mouse over to the first cell/node/'that thing' and right click to bring up a floating menu. Select 'Action' ~~to enable importing your action figures~~ and you will bring up the ActionScript editor.

4. Type in "trace('Hello World');"

5. Now hold down 'Ctrl' and 'Enter' together to test the movie.

6. That's it! Your first action script in action... ~~this is a waste of time... dammit why do I even bother writing this article...~~. Wha? You mean that's it? If you don't know where to look for the 'Hello World', just close your AS editor and test the movie again. The 'Hello World' is in the OUTPUT tap.

Now for those who do not understand what 'trace()' does, just go back to the AS editor, highlight the word 'trace' and hit 'F1'. The help file should explain what it does.

So in this article you know how to bring up the AS Editor, type in a simple AS, test the script and view it's output in the OUTPUT tab. Now that was very informative...

.... not really.

The Dead Blog...

2008-10-28T13:12:00.001+08:00

I notice that my last post was way back in July 4. That was like more than 3 months back. When I started this thing I thought it was easy to write and simple to share stuffs. Guess I was wrong. Anyway I am (supposedly) back on track...

Why Flash?

2008-07-04T17:28:00.001+08:00

I am gonna start up this blog by talking about Flash... no.. not the flashy type but Adobe Flash. Flash has been around since it's introduction in 1996. It was under Macromedia back then (Macromedia Flash) and gained much momentum as a standard for the web animation and media delivery. Then in December 3rd 2005, Adobe Systems acquired Macromedia. T thought that it was the end for Flash but then I was wrong... and I was wayyy wrong. Adobe released Flash Player 9 in 2006, along with a preview of ActionScript 3.0. It was not until 2007 that Adobe Flash CS3 came out with full support for AC3. Why all the fuzz about AC3? Well, it's like this...

Long time ago I played with Flash and AC (Action Script) 1 and 2. It was good and things were going pretty well. However, the speed of AC 1 and 2 was a bit on the disapointing side but that didn't stop millions of programmers from creating games, sites and applications with Flash. We just have to make do with all the things and restrictions we have that time. When AC3 was released, it changes everything. It's fast... and way way faster that it's predecessor. And then things just got better and better!