Create an Eskiv Flash game tutorial

Do you know a Flash game called Eskiv? No?

Never mind, it's not the best game around there, but there is a thread called Eskiv Clone? in the forum asking help in making a game like that one.

First, play it a minute

Then, take this prototype, starting from an old tutorial called Flash game creation tutorial - part 1.

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("score","score",1);
  2. _root.attachMovie("hero", "hero", 2, {_x:250, _y:200});
  3. _root.attachMovie("target", "target", 3, {_x:Math.random()*400+25, _y:Math.random()*300+25});
  4. power = 3;
  5. enemy_power = 5;
  6. points = 0;
  7. hero.onEnterFrame = function() {
  8.     if (Key.isDown(Key.LEFT)) {
  9.         this._x -= power;
  10.     }
  11.     if (Key.isDown(Key.RIGHT)) {
  12.         this._x += power;
  13.     }
  14.     if (Key.isDown(Key.UP)) {
  15.         this._y -= power;
  16.     }
  17.     if (Key.isDown(Key.DOWN)) {
  18.         this._y += power;
  19.     }
  20. };
  21. target.onEnterFrame = function() {
  22.     dist_x = this._x-hero._x;
  23.     dist_y = this._y-hero._y;
  24.     distance = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
  25.     if (distance<(hero._width+this._width)/2) {
  26.         points++;
  27.         score.scoretxt.text = points;
  28.         this._x = Math.random()*400+25;
  29.         this._y = Math.random()*300+25;
  30.         foe = _root.attachMovie("enemy", "enemy", _root.getNextHighestDepth(), {_x:Math.random()*400+25, _y:Math.random()*300+25});
  31.         foe.dir = Math.floor(Math.random()*4);
  32.         foe.onEnterFrame = function() {
  33.             switch (this.dir) {
  34.             case 0 :
  35.                 this._x += enemy_power;
  36.                 if (this._x>500-this._width/2) {
  37.                     this.dir = 1;
  38.                 }
  39.                 break;
  40.             case 1 :
  41.                 this._x -= enemy_power;
  42.                 if (this._x<0+this._width/2) {
  43.                     this.dir = 0;
  44.                 }
  45.                 break;
  46.             case 2 :
  47.                 this._y += enemy_power;
  48.                 if (this._y>400-this._width/2) {
  49.                     this.dir = 3;
  50.                 }
  51.                 break;
  52.             case 3 :
  53.                 this._y -= enemy_power;
  54.                 if (this._y<0+this._width/2) {
  55.                     this.dir = 2;
  56.                 }
  57.                 break;
  58.             }
  59.             dist_x = this._x-hero._x;
  60.             dist_y = this._y-hero._y;
  61.             distance = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
  62.             if (distance<(hero._width+this._width)/2) {
  63.                 points--;
  64.                 score.scoretxt.text = points;
  65.                 this.removeMovieClip();
  66.             }
  67.         };
  68.     }
  69. };

And this is the result

Move the purple ball with arrow keys and take the red one. Avoid blue ones and score as much as you can.

This version has better collision detection than the original one

Download and play with it

April 30, 2008 | Filed Under Flash, Game design | 21 Comments 

Marketing Flash games: email template

When you make a Flash game, unless it hits top portals frontpages (like NewGrounds) and spreads virally, you have to submit it to thousands portals in order to give it some decent exposure.

At the moment the best resource about Flash game marketing is Marketing Flash Games: The Other Half of the Battle, but if you're not into marketing, you will also need a mail template.

I was (heavily) inspired by the creator of Kullors and this is an email template that should work the first time (you'll understand later why)

[greeting]
Hi

[brief ice breaker]
My Latest game (gamename) has just (been released/completed a 7 day exclusive license/etc) and I am now able to distribute the game freely. As such I would be most grateful if you were to consider it for inclusion on your website/Game Portal.

[brief game description]
(gamename) is (about 20 words to describe it)

[links to play and download]
You can play it at (link) and you can download a zip file containing the swf a txt description and game icons of various sizes in gif format at (link).

[encourage feed back]
If you have any questions or comments I would more than happy to hear from you.

[thank ]
Many thanks for your time and consideration

[close]
Kind regards
(your name)

Now just two or three (well... three!) considerations:

1) The link to the game to play should be the one of an important portal only if the game has good rating/reviews... you don't want the portal owner going to play your game at Kongregate just to read players don't like it

2) This, as said, is the template for the first email you will send to the portal. Once they reply, if they do, save the contact of the person who replied and try to establish a contact more... let's say "human" than a "developer to portal owner" one.

This will help you when you will need to release future games. Remember that good marketers don't have millions of contacts. They have some good contacts. When I need some information about MochiAds, I don't look for an invisible "contact us" button... I write to Ada. When I want to show my new game to AddictingGames, I write to Justin... and so on. Make your own priceless contact list and your life will be easier

3) When you managed to have a good contact list, remember they are not your classmates. Don't bother them with "I have a new girlfriend!" and don't submit them bad games just because you think they will publish anything you produce since they are friends of yours

Follow those rules and your games marketing will reach a new level.

April 28, 2008 | Filed Under Monetize | 9 Comments 

Finding adjacent cells in an hex map – part 2

In the Finding adjacent cells in an hex map post I showed you how to find adjacent cells in horizontal hex maps.

Now it's time to find adjacent cells in vertical hex maps.

PLAIN TEXT
ACTIONSCRIPT:
  1. hexagon_width = 44;
  2. hexagon_height = 38;
  3. grid_x_size = 10;
  4. grid_y_size = 12;
  5. sector_width = hexagon_width/4*3;
  6. sector_height = hexagon_height;
  7. gradient = (hexagon_width/4)/(hexagon_height/2);
  8. for (x=0; x<grid_x_size; x++) {
  9.     for (y=0; y<grid_y_size; y++) {
  10.         hexagon_x_position = hexagon_width*y/4*3;
  11.         hexagon_y_position = hexagon_height*x+(y%2)*hexagon_height/2;
  12.         hexagon_number = y+x*grid_y_size;
  13.         hexagon_movieclip = attachMovie("hhexagon", "hhexagon_"+hexagon_number, hexagon_number, {_x:hexagon_x_position, _y:hexagon_y_position});
  14.         hexagon_movieclip.gotoAndStop(1);
  15.         hexagon_movieclip.txt.text = hexagon_number;
  16.     }
  17. }
  18. onEnterFrame = function () {
  19.     _root["hhexagon_"+hexagon_hover].gotoAndStop(1);
  20.     _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(1);
  21.     _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(1);
  22.     _root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(1);
  23.     _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(1);
  24.     _root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(1);
  25.     _root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(1);
  26.     _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(1);
  27.     _root["hhexagon_"+(hexagon_hover-13)].gotoAndStop(1);
  28.     sector_x = Math.floor(_xmouse/sector_width);
  29.     sector_y = Math.floor(_ymouse/sector_height);
  30.     delta_sector_x = _xmouse%sector_width;
  31.     delta_sector_y = _ymouse%sector_height;
  32.     switch (sector_x%2) {
  33.         case 1 :
  34.             if (delta_sector_y>=hexagon_height/2) {
  35.                 if (delta_sector_x>(hexagon_width/2-delta_sector_y*gradient)) {
  36.                     real_x = sector_x;
  37.                     real_y = sector_y;
  38.                 }
  39.                 else {
  40.                     real_x = sector_x-1;
  41.                     real_y = sector_y;
  42.                 }
  43.             }
  44.             else {
  45.                 if (delta_sector_x<delta_sector_y*gradient) {
  46.                     real_x = sector_x-1;
  47.                     real_y = sector_y;
  48.                 }
  49.                 else {
  50.                     real_x = sector_x;
  51.                     real_y = sector_y-1;
  52.                 }
  53.             }
  54.             break;
  55.         case 0 :
  56.             real_x = sector_x;
  57.             real_y = sector_y;
  58.             if (delta_sector_x<((hexagon_width/4)-delta_sector_y*gradient)) {
  59.                 real_x = sector_x-1;
  60.                 real_y = sector_y-1;
  61.             }
  62.             if (delta_sector_x<((-hexagon_width/4)+delta_sector_y*gradient)) {
  63.                 real_x = sector_x-1;
  64.                 real_y = sector_y;
  65.             }
  66.             break;
  67.     }
  68.     if ((real_x>=0) and (real_x<grid_y_size) and (real_y>=0) and (real_y<grid_x_size)) {
  69.         hexagon_hover = real_x+real_y*grid_y_size;
  70.         _root["hhexagon_"+hexagon_hover].gotoAndStop(2);
  71.         if(hexagon_hover%grid_y_size!=grid_y_size-1){
  72.             _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(3);
  73.         }
  74.         if(hexagon_hover%grid_y_size!=0){
  75.             _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(3);
  76.         }
  77.         if (hexagon_hover%2 == 0) {
  78.             _root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(3);
  79.             if(hexagon_hover%grid_y_size!=0){
  80.                 _root["hhexagon_"+(hexagon_hover-13)].gotoAndStop(3);
  81.             }
  82.             _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
  83.             _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);
  84.         }
  85.         else {
  86.             if(hexagon_hover%grid_y_size!=grid_y_size-1){
  87.                 _root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(3);
  88.             }
  89.             _root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(3);
  90.             _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
  91.             _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);      
  92.         }
  93.     }
  94. };

Here it is:

This is the last uncommented step, during next one we will discuss about the method used to determine adjacent cells.

Download and enjoy!!

April 27, 2008 | Filed Under Flash, Game design | 3 Comments 

Play Flash games on Triqui.com

What I introduced in the Ramblings about Flash game portals post went live today

Triqui

I am talking about a game portal called Triqui, where you will find all MochiAds games. Well, not exactly "all", but every game listed in their feeds.

Why did I made the millionth Flash games portal? Because I want to play a bit with this new toy, because I want to make an experiment about sponsoring games (why do portals sponsor a game?) and something more.

The entire design sucks a bit, but the entire project has only 63 (yes! sixtythree!!) php lines

I will add some new features soon (game rankings, comments, reviews...), then I'll release the source code, so anyone can have its portal.

It's completely automated: every day it reads from MochiAds feed, adds new games in a MySql database and it's ready for a brand new feature Mochi guys will release in the next future.

Of course the goal is monetizing the portal... any idea?

April 25, 2008 | Filed Under Links, Monetize | 13 Comments 

Flash physics engines galore

Are you looking for a Flash physics engine?

Well, now you only have to choose the one you prefer.

Let's see how many engines we have (listed in alphabetical order):

APE: www.cove.org/ape/index.htm

APE

Free AS3 open source 2D physics engine for use in Flash and Flex, released under the MIT License.
Its last update (0.45 alpha) is dated June 2007. Anyway, it's the one with the most active community at Google Groups.

You can also find two tutorials on my blog here and here

Box2DFlashAS3: box2dflash.sourceforge.net/

Box2DFlashAS3

Open source port of Erin Catto's powerful c++ physics library Box2D, it's the most updated engine at the moment with its latest 2.0.0 version.

The Flash engine does not have a good documentation but you can start studying original Box2D manual

I wrote a tutorial on this engine here

Fisix Engine: www.fisixengine.com/

Fisix

Currently at 0.5 (alpha) version, provides an interesting documentation and some of the most complete demos.

It's not freeware, though.

FOAM: blog.generalrelativity.org/?p=17

FOAM

According to the author, it's in fact not a physics engine but an interface for simulating physics.

Its version is Alpha 0.1

In the zipped source you will find the API documentation and the source code is very well commented.

It seems interesting, too bad the demos are poor

glaze: yaa-blog.blogspot.com/search/label/Glaze

glaze

It's interesting to know the author wrote this engine to make the remake of an old game called Exile

motor: lab.polygonal.de/2007/12/31/motor-physics-released/

motor

Another porting of Erin Catto's Box2D

The author is currently working on motor2, just after a couple of months he released the first version, so the projects seems well supported

PopShapes: lab.andre-michelle.com/physics-engine

PopShapes

More an experiment than an engine, from its source you can learn how to make your own physics engine

Which one will you use?

April 24, 2008 | Filed Under Flash, Links | 11 Comments 

Finding adjacent cells in an hex map

This tutorial continues Hex maps creation and rollover.

Now I will show you how find adjacent cells. Again, at the moment it's only code, and it only works for horizontal hex maps

PLAIN TEXT
ACTIONSCRIPT:
  1. hexagon_width = 38;
  2. hexagon_height = 44;
  3. grid_x_size = 12;
  4. grid_y_size = 10;
  5. sector_width = hexagon_width;
  6. sector_height = hexagon_height/4*3;
  7. gradient = (hexagon_height/4)/(hexagon_width/2);
  8. for (x=0; x<grid_x_size; x++) {
  9.     for (y=0; y<grid_y_size; y++) {
  10.         hexagon_x_position = hexagon_width*x+(y%2)*hexagon_width/2;
  11.         hexagon_y_position = hexagon_height*y/4*3;
  12.         hexagon_number = x+y*grid_x_size;
  13.         hexagon_movieclip = attachMovie("hhexagon", "hhexagon_"+hexagon_number, hexagon_number, {_x:hexagon_x_position, _y:hexagon_y_position});
  14.         hexagon_movieclip.gotoAndStop(1);
  15.         hexagon_movieclip.txt.text = hexagon_number;
  16.     }
  17. }
  18. onEnterFrame = function () {
  19.     _root["hhexagon_"+hexagon_hover].gotoAndStop(1);
  20.     _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(1);
  21.     _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(1);
  22.     _root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(1);
  23.     _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(1);
  24.     _root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(1);
  25.     _root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(1);
  26.     _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(1);
  27.     _root["hhexagon_"+(hexagon_hover-13)].gotoAndStop(1);
  28.     sector_x = Math.floor(_xmouse/sector_width);
  29.     sector_y = Math.floor(_ymouse/sector_height);
  30.     delta_sector_x = _xmouse%sector_width;
  31.     delta_sector_y = _ymouse%sector_height;
  32.     switch (sector_y%2) {
  33.     case 1 :
  34.         if (delta_sector_x>=hexagon_width/2) {
  35.             if (delta_sector_y<(hexagon_height/2-delta_sector_x*gradient)) {
  36.                 real_x = sector_x;
  37.                 real_y = sector_y-1;
  38.             } else {
  39.                 real_x = sector_x;
  40.                 real_y = sector_y;
  41.             }
  42.         } else {
  43.             if (delta_sector_y<delta_sector_x*gradient) {
  44.                 real_x = sector_x;
  45.                 real_y = sector_y-1;
  46.             } else {
  47.                 real_x = sector_x-1;
  48.                 real_y = sector_y;
  49.             }
  50.         }
  51.         break;
  52.     case 0 :
  53.         real_x = sector_x;
  54.         real_y = sector_y;
  55.         if (delta_sector_y<((hexagon_height/4)-delta_sector_x*gradient)) {
  56.             real_x = sector_x-1;
  57.             real_y = sector_y-1;
  58.         }
  59.         if (delta_sector_y<((-hexagon_height/4)+delta_sector_x*gradient)) {
  60.             real_x = sector_x;
  61.             real_y = sector_y-1;
  62.         }
  63.         break;
  64.     }
  65.     if ((real_x>=0) and (real_x<grid_x_size) and (real_y>=0) and (real_y<grid_y_size)) {
  66.         hexagon_hover = real_x+real_y*grid_x_size;
  67.         _root["hhexagon_"+hexagon_hover].gotoAndStop(2);
  68.         if (hexagon_hover%grid_x_size != grid_x_size-1) {
  69.             _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(3);
  70.         }
  71.         if (hexagon_hover%grid_x_size != 0) {
  72.             _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(3);
  73.         }
  74.         if (Math.floor(hexagon_hover/grid_x_size)%2 == 0) {
  75.             if (hexagon_hover%grid_x_size != 0) {
  76.                 _root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(3);
  77.                 _root["hhexagon_"+(hexagon_hover-13)].gotoAndStop(3);
  78.             }
  79.             _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
  80.             _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);
  81.         } else {
  82.             if (hexagon_hover%grid_x_size != grid_x_size-1) {
  83.                 _root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(3);
  84.                 _root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(3);
  85.             }
  86.             _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
  87.             _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);
  88.         }
  89.     }
  90. };

and this is the result:

While I am optimizing the code and writing the routines for the vertical hex maps, James Prankard sent me the AS3 version of the code published in the Hex maps creation and rollover tutorial

Here it is:

PLAIN TEXT
ACTIONSCRIPT:
  1. // Container so you can easily getChildAt
  2. var hexagon_container:MovieClip = new MovieClip();
  3. addChild(hexagon_container);
  4. // Declare variables
  5. var hexagon_width:int = 38;
  6. var hexagon_height:int = 44;
  7. var hexagon_number = 0;
  8. var grid_x_size:int = 12;
  9. var grid_y_size:int = 10;
  10. var sector_width:Number = hexagon_width;
  11. var sector_height:Number = hexagon_height/4*3;
  12. var gradient:Number = (hexagon_height/4)/(hexagon_width/2)
  13. var hexagon_hover:Number = 0;
  14. // Changed the y and x for loop to add the hexagons in the correct way for getChildAt
  15. for (var y_pos:int =0; y_pos<grid_y_size; y_pos++) {
  16.     for (var x_pos:int =0; x_pos<grid_x_size; x_pos++) {
  17.         var hexagon_x_position:Number = hexagon_width*x_pos+(y_pos%2)*hexagon_width/2;
  18.         var hexagon_y_position:Number = hexagon_height*y_pos/4*3;
  19.         hexagon_number = x_pos+y_pos*grid_x_size;
  20.         var hexagon:hhexagon = new hhexagon();
  21.         hexagon_container.addChild(hexagon);
  22.         hexagon.x = hexagon_x_position;
  23.         hexagon.y = hexagon_y_position;
  24.         hexagon.txt.text = hexagon_number;
  25.         hexagon.gotoAndStop(1);
  26.     }
  27. }
  28.  
  29. addEventListener("enterFrame", enterFramer)
  30.  
  31. function enterFramer(event:Event):void {
  32.     // Get replaces the lastFrame's tile with a blank one
  33.     MovieClip(hexagon_container.getChildAt(hexagon_hover)).gotoAndStop(1);
  34.     // Declare vars (enterFrame)
  35.     var sector_x:Number = Math.floor(mouseX/sector_width);
  36.     var sector_y:Number = Math.floor(mouseY/sector_height);
  37.     var delta_sector_x:Number = mouseX%sector_width;
  38.     var delta_sector_y:Number = mouseY%sector_height;
  39.     var real_x:Number;
  40.     var real_y:Number;
  41.     switch(sector_y%2){
  42.         case 1:
  43.             if(delta_sector_x>=hexagon_width/2){
  44.                 if(delta_sector_y<(hexagon_height/2-delta_sector_x*gradient)){
  45.                     real_x = sector_x;
  46.                     real_y = sector_y-1;
  47.                 }
  48.                 else{
  49.                     real_x = sector_x;
  50.                     real_y = sector_y;
  51.                 }
  52.             }
  53.             else{
  54.                 if(delta_sector_y<delta_sector_x*gradient){
  55.                     real_x = sector_x;
  56.                     real_y = sector_y-1;
  57.                 }
  58.                 else{
  59.                     real_x = sector_x-1;
  60.                     real_y = sector_y;
  61.                 }
  62.             }
  63.             break;
  64.         case 0:
  65.             real_x = sector_x;
  66.             real_y = sector_y;
  67.             if(delta_sector_y<((hexagon_height/4)-delta_sector_x*gradient)){
  68.                 real_x = sector_x-1;
  69.                 real_y = sector_y-1;
  70.             }
  71.             if(delta_sector_y<((-hexagon_height/4)+delta_sector_x*gradient)){
  72.                 real_x = sector_x;
  73.                 real_y = sector_y-1;
  74.             }
  75.             break;
  76.     }
  77.     if((real_x>=0)&&(real_x<grid_x_size)&&(real_y>=0)&&(real_y<grid_y_size)){
  78.         hexagon_hover = real_x+real_y*grid_x_size;
  79.         // Re-adds new hovering tile with red
  80.         MovieClip(hexagon_container.getChildAt(hexagon_hover)).gotoAndStop(2);
  81.     }
  82. };

Download the source codes and experiment

April 23, 2008 | Filed Under Flash, Game design, Users contributions | 9 Comments 

Creation of a sortable list with Ajax tutorial

One interesting Web 2.0 effect is the sortable list, and we are going to make one in less than five minutes thanks to Prototype and script.aculo.us libraries.

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications and can be downloaded here, while script.aculo.us (scriptaculous from now on) provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly and can be downloaded here.

This tutorial is based on zen of shen's pseudocode found at script.aculo.us Ajax Sortable Lists Tutorial.

This tutorial will show real code and a step by step guide through MySql, php and Ajax coding in order to create your sortable list.

Of course your hosting plan must allow you to use php and MySql, so refer to your hosting provider if you don't know if your web space supports those features.

MYSQL

First we need to work on the database to create the table that will store our list. I made the simplest table ever, because it's just an example, but you can add as many columns as you want, in order to fit the table to your needs.

My table only has three fields: the primary key id, the name of the list element color and the core column, the one where you will save the order of the elements, called, in a lack of creativity, color_order. Read more

April 21, 2008 | Filed Under Ajax, Php, Tutorials | 23 Comments 

Hex maps creation and rollover

This is just a quick, uncommented snippet of code I made starting from Coordinates in Hexagon-Based Tile Maps tutorial I found at GameDev.net.

The article does not cover all hex maps, just horizontal ones. Read Understanding hexagonal tiles to know something more about hex maps.

Also, the pseudo code shown in the article has some errors, but I finally managed to have a working, full math hex maps creation and rollover.

No line comments at the moment as said, because I still have to optimize the code and write the routine to generate vertical hex maps, meanwhile take a look at it:

PLAIN TEXT
ACTIONSCRIPT:
  1. hexagon_width = 38;
  2. hexagon_height = 44;
  3. grid_x_size = 12;
  4. grid_y_size = 10;
  5. sector_width = hexagon_width;
  6. sector_height = hexagon_height/4*3;
  7. gradient = (hexagon_height/4)/(hexagon_width/2)
  8. for (x=0; x<grid_x_size; x++) {
  9.     for (y=0; y<grid_y_size; y++) {
  10.         hexagon_x_position = hexagon_width*x+(y%2)*hexagon_width/2;
  11.         hexagon_y_position = hexagon_height*y/4*3;
  12.         hexagon_number = x+y*grid_x_size;
  13.         hexagon_movieclip = attachMovie("hhexagon", "hhexagon_"+hexagon_number, hexagon_number, {_x:hexagon_x_position, _y:hexagon_y_position});
  14.         hexagon_movieclip.gotoAndStop(1);
  15.         hexagon_movieclip.txt.text = hexagon_number;
  16.     }
  17. }
  18. onEnterFrame = function() {
  19.     _root["hhexagon_"+hexagon_hover].gotoAndStop(1);
  20.     sector_x = Math.floor(_xmouse/sector_width);
  21.     sector_y = Math.floor(_ymouse/sector_height);
  22.     delta_sector_x = _xmouse%sector_width;
  23.     delta_sector_y = _ymouse%sector_height;
  24.     switch(sector_y%2){
  25.         case 1:
  26.             if(delta_sector_x>=hexagon_width/2){
  27.                 if(delta_sector_y<(hexagon_height/2-delta_sector_x*gradient)){
  28.                     real_x = sector_x;
  29.                     real_y = sector_y-1;
  30.                 }
  31.                 else{
  32.                     real_x = sector_x;
  33.                     real_y = sector_y;
  34.                 }
  35.             }
  36.             else{
  37.                 if(delta_sector_y<delta_sector_x*gradient){
  38.                     real_x = sector_x;
  39.                     real_y = sector_y-1;
  40.                 }
  41.                 else{
  42.                     real_x = sector_x-1;
  43.                     real_y = sector_y;
  44.                 }
  45.             }
  46.             break;
  47.         case 0:
  48.             real_x = sector_x;
  49.             real_y = sector_y;
  50.             if(delta_sector_y<((hexagon_height/4)-delta_sector_x*gradient)){
  51.                 real_x = sector_x-1;
  52.                 real_y = sector_y-1;
  53.             }
  54.             if(delta_sector_y<((-hexagon_height/4)+delta_sector_x*gradient)){
  55.                 real_x = sector_x;
  56.                 real_y = sector_y-1;
  57.             }
  58.             break;
  59.     }
  60.     if((real_x>=0)and(real_x<grid_x_size)and(real_y>=0)and(real_y<grid_y_size)){
  61.         hexagon_hover = real_x+real_y*grid_x_size;
  62.         _root["hhexagon_"+hexagon_hover].gotoAndStop(2);
  63.     }
  64. };

And see how does it work

Download the source code.

April 20, 2008 | Filed Under Flash, Game design | 8 Comments 

From zero to Bombuzal – step 5

This 5th step is kinldy produced by Frederik J, who decided to upgrade the game with some new features

Recently I was looking in some old posts on your site, and saw the bombuzal step 4.

It hasn't been finished, and because I think it wasn't a hard task i took it!

Here it is, finished - now you can drop and pickup bombs, and you can also explode them if space is down for more than two seconds.

This comes before my main upgrade that will allow to play a complete level, and it has comments in the code for your understanding

PLAIN TEXT
ACTIONSCRIPT:
  1. //create an invisible movie clip across the entire stage using API
  2. _root.createEmptyMovieClip("base", 1);
  3. with (base) {
  4.     lineStyle(2, 0x0000000, 0);
  5.     beginFill(0x00000000, 0);
  6.     lineTo(Stage.width, 0);
  7.     lineTo(Stage.width, Stage.height);
  8.     lineTo(0, Stage.height);
  9.     lineTo(0, 0);
  10. }
  11. //whether to pan or not
  12. level_pan = false;
  13. //tile size
  14. tile_size = 50;
  15. // pan variables
  16. pan_dist = 50;
  17. pan_speed = 5;
  18. // tiles array generation
  19. tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
  20. // bombs array generation
  21. bombs = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 1]];
  22. // main sprite
  23. // xpos: bombuzal x position
  24. // ypos: y position
  25. // moving: bombuzal is moving or not
  26. // facing: the side bombuzal is facing on
  27. bombuzal_obj = {xpos:0, ypos:1, moving:false, facing:"right"};
  28. //space down variable for checking if space is down for more
  29. //than two seconds
  30. space_down = false;
  31. //time variable for checking how long space has been down
  32. space_time = 0;
  33. // bombuzal walk speed, in pixels/frame
  34. walk_speed = 5;
  35. // time passed since bombuzal last move
  36. does_not_move = 0;
  37. // creating the level movieclip
  38. _root.createEmptyMovieClip("level", _root.getNextHighestDepth());
  39. // placing tiles
  40. for (x=0; x<tiles.length; x++) {
  41.     for (y=0; y<tiles[x].length; y++) {
  42.         // notice as it's not [x][y] but [y][x]
  43.         if (tiles[y][x]) {
  44.             placed = level.attachMovie("tile", "tile_"+(x*tiles.length+y), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  45.             placed.gotoAndStop(tiles[y][x]);
  46.         }
  47.     }
  48. }
  49. // placing bombs
  50. //MODIFIED
  51. //CHANGED:
  52. /*for (x=0; x<bombs.length; x++) {
  53. for (y=0; y<bombs[x].length; y++) {
  54. if (bombs[y][x]) {
  55. level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  56. }
  57. }
  58. }*/
  59. //TO:
  60. for (x=0; x<bombs.length; x++) {
  61.     for (y=0; y<bombs[x].length; y++) {
  62.         if (bombs[y][x]) {
  63.             level.attachMovie("bomb", "bomb"+x+"_"+y, level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
  64.         }
  65.     }
  66. }
  67. // placing bombuzal
  68. level.attachMovie("bombuzal", "bombuzal", level.getNextHighestDepth(), {_x:bombuzal_obj.xpos*tile_size, _y:bombuzal_obj.ypos*tile_size});
  69. level.bombuzal.onEnterFrame = function() {
  70.     // if bombuzal is not alread moving...
  71.     if (!bombuzal_obj.moving) {
  72.         // incrementing counter
  73.         does_not_move++;
  74.         // if 150 frames has passed and bombuzal did not move..
  75.         if (does_not_move == 150) {
  76.             bombuzal_obj.moving = true;
  77.             // choosing a random direction
  78.             moving_direction = Math.floor(Math.random()*4)+1;
  79.             switch (moving_direction) {
  80.             case 1 :
  81.                 bombuzal_obj.facing = "left";
  82.                 break;
  83.             case 2 :
  84.                 bombuzal_obj.facing = "right";
  85.                 break;
  86.             case 3 :
  87.                 bombuzal_obj.facing = "up";
  88.                 break;
  89.             case 4 :
  90.                 bombuzal_obj.facing = "down";
  91.                 break;
  92.             }
  93.         }
  94.         // moving left      
  95.         if (Key.isDown(Key.LEFT)) {
  96.             bombuzal_obj.moving = true;
  97.             bombuzal_obj.facing = "left";
  98.         }
  99.         // moving right                    
  100.         if (Key.isDown(Key.RIGHT)) {
  101.             bombuzal_obj.moving = true;
  102.             bombuzal_obj.facing = "right";
  103.         }
  104.         // moving down                    
  105.         if (Key.isDown(Key.DOWN)) {
  106.             bombuzal_obj.moving = true;
  107.             bombuzal_obj.facing = "down";
  108.         }
  109.         // moving up                    
  110.         if (Key.isDown(Key.UP)) {
  111.             bombuzal_obj.moving = true;
  112.             bombuzal_obj.facing = "up";
  113.         }
  114.         // else, if it's moving...        
  115.     } else {
  116.         does_not_move = 0;
  117.         switch (bombuzal_obj.facing) {
  118.             // moving left
  119.         case "left" :
  120.             dx = -1;
  121.             dy = 0;
  122.             this._x -= walk_speed;
  123.             break;
  124.             // moving right
  125.         case "right" :
  126.             dx = 1;
  127.             dy = 0;
  128.             this._x += walk_speed;
  129.             break;
  130.             // moving up
  131.         case "up" :
  132.             dx = 0;
  133.             dy = -1;
  134.             this._y -= walk_speed;
  135.             break;
  136.             // moving down
  137.         case "down" :
  138.             dx = 0;
  139.             dy = 1;
  140.             this._y += walk_speed;
  141.             break;
  142.         }
  143.         // if bombuzal walked for an entire tile...
  144.         if ((this._x%tile_size == 0) and (this._y%tile_size == 0)) {
  145.             // stop moving bombuzal
  146.             bombuzal_obj.moving = false;
  147.             // checking if bombuzal just walked a disappearing tile
  148.             if (tiles[bombuzal_obj.ypos][bombuzal_obj.xpos] == 2) {
  149.                 // remove tile
  150.                 tiles[bombuzal_obj.ypos][bombuzal_obj.xpos] = 0;
  151.                 level["tile_"+(bombuzal_obj.xpos*tiles.length+bombuzal_obj.ypos)].removeMovieClip();
  152.             }
  153.             // increase bombuzal x and y position according to its direction  
  154.             bombuzal_obj.xpos += dx;
  155.             bombuzal_obj.ypos += dy;
  156.             update_bombuzal_position();
  157.         }
  158.     }
  159.     if (Key.isDown(Key.SPACE) && !bombuzal_obj.moving && !space_down) {
  160.         //call handle bombs
  161.         handle_bombs();
  162.         //set spacedown to true
  163.         space_down = true;
  164.     }
  165.     if (space_down && !Key.isDown(Key.SPACE)) {
  166.         //set space down to false
  167.         space_down = false;
  168.         //set space time to 0
  169.         space_time = 0;
  170.     }
  171.     //if space is down
  172.     if (space_down) {
  173.         //increase it by one
  174.         space_time++;
  175.         //if its bigger than 60 (ie. 2 seconds)
  176.         if (space_time>=60) {
  177.             //then explode bombs
  178.             explode_bombs();
  179.         }
  180.     }
  181. };
  182. // centering level
  183. level._x = (Stage.width-tiles.length*tile_size)/2;
  184. level._y = (Stage.height-tiles[0].length*tile_size)/2;
  185. level.onEnterFrame = function() {
  186.     //if mouse is on stage
  187.     if (level_pan) {
  188.         //stopping level leaving screen
  189.         //too high
  190.         if (level._y<=0) {
  191.             level._y = 0;
  192.         }
  193.         //too low                                      
  194.         if (level._y>=Stage.height-level._height) {
  195.             level._y = Stage.height-level._height;
  196.         }
  197.         //too far to the left                                      
  198.         if (level._x<=0) {
  199.             level._x = 0;
  200.         }
  201.         //too far to the right                                      
  202.         if (level._x>=Stage.width-level._width) {
  203.             level._x = Stage.width-level._width;
  204.         }
  205.         // panning level                                      
  206.         // pan right
  207.         if (_root._xmouse<pan_dist) {
  208.             level._x += pan_speed;
  209.         }
  210.         // pan left                                      
  211.         if (_root._xmouse>Stage.width-pan_dist) {
  212.             level._x -= pan_speed;
  213.         }
  214.         // pan down                                      
  215.         if (_root._ymouse<pan_dist) {
  216.             level._y += pan_speed;
  217.         }
  218.         // pan up                                      
  219.         if (_root._ymouse>Stage.height-pan_dist) {
  220.             level._y -= pan_speed;
  221.         }
  222.     }
  223. };
  224. //when mouse is on stage pan
  225. base.onRollOver = function() {
  226.     level_pan = true;
  227. };
  228. //when mouse leaves stage stop panning
  229. base.onRollOut = function() {
  230.     level_pan = false;
  231. };
  232. //function that handles bombs
  233. function handle_bombs() {
  234.     //if theres a bomb on the tile
  235.     if (bombs[bombuzal_obj.ypos][bombuzal_obj.xpos] == 1) {
  236.         //pickup bomb
  237.         //remove the bomb
  238.         _root.level["bomb"+bombuzal_obj.xpos+"_"+bombuzal_obj.ypos].removeMovieClip();
  239.         //set the bomb array[y][x] to 0
  240.         bombs[bombuzal_obj.ypos][bombuzal_obj.xpos] = 0;
  241.     } else {
  242.         //place bomb
  243.         placed = _root.level.attachMovie("bomb", "bomb"+bombuzal_obj.xpos+"_"+bombuzal_obj.ypos, _root.level.getNextHighestDepth());
  244.         placed._x = bombuzal_obj.xpos*tile_size;
  245.         placed._y = bombuzal_obj.ypos*tile_size;
  246.         //add to bomb array
  247.         bombs[bombuzal_obj.ypos][bombuzal_obj.xpos] = 1;
  248.     }
  249. }
  250. function explode_bombs() {
  251.     //loop through bomb array
  252.     for (x=0; x<bombs.length; x++) {
  253.         for (y=0; y<bombs[x].length; y++) {
  254.             if (bombs[y][x]) {
  255.                 //remove the bomb
  256.                 _root.level["bomb"+x+"_"+y].removeMovieClip();
  257.                 //set space_time to 0
  258.                 space_time = 0;
  259.                 /*
  260.                 Place here for what to do when a bomb explodes, ie.
  261.                 check if tile under is class - if then remove it.
  262.                 - Just and example....
  263.                 */
  264.             }
  265.         }
  266.     }
  267. }
  268. // update bombuzal position
  269. function update_bombuzal_position() {
  270.     // if bombuzal falls off the stage...
  271.     if ((tiles[bombuzal_obj.ypos][bombuzal_obj.xpos] == undefined) or (tiles[bombuzal_obj.ypos][bombuzal_obj.xpos]<1)) {
  272.         // reset bombuzal to its starting position
  273.         bombuzal_obj.xpos = 0;
  274.         bombuzal_obj.ypos = 1;
  275.         level.bombuzal._x = bombuzal_obj.xpos*tile_size;
  276.         level.bombuzal._y = bombuzal_obj.ypos*tile_size;
  277.         update_bombuzal_position();
  278.     }
  279. }

And here it is:

Download the source and say thanks to Frederik

April 17, 2008 | Filed Under Flash, Game design, Users contributions | 4 Comments 

Understanding hexagonal tiles

You should already know Tile Maps: they are often used for the level design in two-dimensional games.

The most used (and simplest) tiling system has squares. Tileball is an example of a game made with this method.

Even if there are a lot of games using this tiling system, it's easy to find its limit. All movements are restricted to four directions: up, down, left, right.

Some more complex games require a more complex tiling system.

That's why I am introducing you the hexagon based tile system (hex maps from now on)

Wkipedia explains us the advantage of a hex map over a square grid map is that the distance between the center of each hex cell and the center of all six adjacent hex cells remains constant. Compare this to a square grid map where the distance from the center of each square cell (of side length x) to the center of its four diagonal adjacent cells is longer than the distance to the center of its four cardinal adjacent cells (x√2 instead of x).

It's nothing new, because you may find hex maps in Gettysburg, a board game released in 1958 (yes: half a century ago), as you can see in the photo showing the 125th Anniversary Edition of the game

Gettysburg

Back to computer games, you can play The Battle for Wesnoth, a free turn based strategy game designed in June 2003 by David White using hex maps

Wesnoth

Now that we know hex maps are important, let's see what is an hexagon: in geometry, a hexagon is a polygon with six edges and six vertices. When the six sides of an hexagon have the same length, we are talking about a regular hexagon.

Regular hexagon properties

Hexagon

As you can see, if all sides have the same lenght, we can say the total length of the hexagon is:

Total length = Side + 2*(Side*sin(30°)) = Side + 2*0.5 = 2*Side

And the total height is:

Total height = 2*(Side*cos(60°))

Now, it's important to know we can tile hexagons in two ways: I don't think someone already gave a name to the ways you can tile hexagons, so I will call H-hex map a map made tiling hexagons horizontally and V-hex map a map made tiling hexagons vertically, just like in the picture.

Hexagon tiling

Obviously, each map has its own way to manage tiles.

And that's all... obviously I am about to code everything in Actionscript, meanwhile if you have some code to share, show the world you are awesome

April 16, 2008 | Filed Under Game design | 15 Comments 

Next Page →

Posts