Playing with getPixel

Today I played a bit with getPixel function and I want to share with you some considerations about it.

First, you have to know getPixel(x,y) returns an integer that represents an RGB pixel value from a BitmapData object at a specific point (x, y).

Then, I wanted to know the percentage of a color in an image, maybe to manage level filling in a game like ColorFill (when using complex shapes to fill the level) or maybe to analyze the percentage of a color in a photo.

So I made this picture

and I linked it as bg.

Then I wrote this little actionscript

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.display.BitmapData;
  2. var bitmap_bg:BitmapData = BitmapData.loadBitmap("bg");
  3. _root.createEmptyMovieClip("background_image",_root.getNextHighestDepth());
  4. background_image.attachBitmap(bitmap_bg,_root.getNextHighestDepth());
  5. precision = 1;
  6. r = 0;
  7. g = 0;
  8. b = 0;
  9. other = 0;
  10. total = 0;
  11. for (x=0; x<500; x += precision) {
  12.     for (y=0; y<400; y += precision) {
  13.         switch (bitmap_bg.getPixel(x, y).toString(16)) {
  14.             case "ff" :
  15.                 b++;
  16.                 break;
  17.             case "ff00" :
  18.                 g++;
  19.                 break;
  20.             case "ff0000" :
  21.                 r++;
  22.                 break;
  23.             default :
  24.                 other++;
  25.         }
  26.         total++;
  27.     }
  28. }
  29. r = r/total*100;
  30. g = g/total*100;
  31. b = b/total*100;
  32. other = other/total*100;
  33. trace("Red: "+r+"%\nGreen:"+g+"%\nBlue: "+b+"%\nOhter: "+other+"%");

It's a very easy one:

Line 1: importing BitmapData library

Line 2: declaring a BitmapData variable called bitmap_bg containing the image linked as bg

Line 3: creating an empty movie clip where I will attach the bitmap image loaded at line 2

Line 4: attaching the bitmap, as said at line 3

Line 5: Setting a variable called precision. This is the core of the script. precision indicates the gap in pixels from the last examined pixel and the next pixel I am going to examine. The smaller precision value, the more accurate the percentage, the slower the script.

Lines 6-10: Initializing variables counting the amount of red, green and blue pixels found, and the total of pixels examined. I also count the pixels of other colors. Even if you only see a blue background, a red circle and a green heart, there are other colors due to antialiasing.

Lines 11-28: Scanning all pixels with the precision gap between one pixel and another, and incrementing the color variable according to the color found at line 13.

Lines 29-33: Formatting and showing the results

Look how results change when I play with precision

Precision: 1
Red: 8.91%
Green:7.9145%
Blue: 82.5735%
Ohter: 0.602%

Precision: 2
Red: 8.91%
Green:7.916%
Blue: 82.578%
Ohter: 0.596%

Precision: 5
Red: 8.9125%
Green:7.8625%
Blue: 82.55%
Ohter: 0.675%

Precision: 10
Red: 8.8%
Green:7.95%
Blue: 82.7%
Ohter: 0.55%

Precision: 20
Red: 8.8%
Green:8%
Blue: 82.6%
Ohter: 0.6%

As you can see, you don't need a low (and cpu expensive) precision value to obtain realistic results.

Download the source, maybe changing the image, and tell me what do you think about. Any idea for a game?

June 28, 2008 | Filed Under Actionscript 2, Flash | 5 Comments 

Win a TemplateMonster theme with TemplateMonster Lottery

If you are looking for a fresh and professional template for your personal site, Flash game portal or a site for a web design job, then you should take a look at TemplateMoster.

TemplateMonster

Now you have a chance to win one of these templates thanks to the TemplateMonster lottery.

Let's see what does it mean from the mouth (well, the keyboard) of Helen:

TemplateMonster.com is going to hold a lottery with give-away to any participant.

The lottery is going to be about the upcoming 4th of July.

And here are the details of TemplateMonster Lottery which reminds elections in its structure.

We'll expose two of TemplateMonster's website designs. In order to take part in the lottery one should vote for one design or the other.

The design which gets the most votes becomes the winner. Note the best design is chosen during two weeks period.

And here are the benefits for users to take part in our lottery:
- everyone who participates in our lottery gets the free Icon Set. All icons included into this free Icon Set also relate to patriotic and 4th of July topic;
- also everyone who participates in our lottery has a chance to get one of our special prizes.

The special prizes are:
- 1 Gift Certificate giving the opportunity to get any product from Template Monster database for free;
- two 80% discount coupons for purchasing any product from Template Monster database;
- three 50% discount coupons for purchasing any product from Template Monster database.

Note everyone who purchases any product from Template Monster during this promo will get the Icon Set that I've mentioned for free.

And now, the link: 4th July Lottery 2008.

That's it... and if you don't understand what's the point of giving away patriotic icons on July 4th, you should watch Independence Day movie.

June 25, 2008 | Filed Under Contests, Links | 9 Comments 

Looking for your experience for a case history

I need some of your experiences in order to build a case history section in this blog and for an article do be published on a paper magazine... and maybe for something else.

If you think this blog changed your way of developing and monetizing Flash games, or just made you love Flash game developing, then please leave a comment with your first name, the first letter of your last name and the Country you are from (example: Emanuele F. - Italy)

And, of course, your experience.

Thank you very much.

June 24, 2008 | Filed Under This blog in the net, Users contributions | 37 Comments 

Create a Flash game like ColorFill - part 1

If you play all successful Flash games (and you should, if you want to be a Flash game developer), surely you played ColorFill.

ColorFill

In this game, you have to fill 80% of the stage with colors while avoiding collisions with enemies.

Play the game a bit then follow this prototype

The main idea to create this game is based upon the "vertical state" of arrows. I designed the arrows as horizontal ones, but if the player presses SPACE, I rotate them by 90 degrees so the left one becomes the up one and the right one becomes the down one.

There's not any more difficulty in this first part, when I still don't fill the area once I successfully draw a line.

Some previous concepts from Create a flash draw game like Line Rider or others - part 2 are involved in order to determine collisions between the ball and the line. Read more

June 23, 2008 | Filed Under Actionscript 2, Flash, Game design | 8 Comments 

Step by step AS3 translation of Creation of a platform game with Flash - step 1.5

According to Bart de Boer, this is the step 1.5 of the Step by step AS3 translation of Creation of a platform game with Flash.

He fixed the jump issue and improved the collision engine.

As in the previous example, the file Script.as is the main class:

PLAIN TEXT
ACTIONSCRIPT:
  1. /*____________________________________________________
  2. |______________ register of functions _______________|
  3. |____________________________________________________|
  5. - main()            only calling to update_hero() (every frame)
  7. - create_hero()  creates hero as the var "Hero"
  9. - update_hero()  check collision an move
  11. - BuildMap()        load and create the level
  14. extern
  16. Data.as
  17. - Setup()         create levels
  19. collision_manager.as
  20. - Setup(size,map,hero)    setup the map
  22. - Solve_all(forecastx,forecasty)        solves the collsions and checks for a jump
  23. */
  24.  
  25.  
  26. package{                                                //The begin of an .as file
  27.     import flash.display.MovieClip;      //import some libraries
  28.     import flash.events.Event;
  29.     import flash.events.KeyboardEvent;
  30.  
  31.     public class Script extends MovieClip{        // start the script
  32.    
  33.     private const gravity:int = 1;
  34.     private const max_speed:int = 8;
  35.    
  36.     private const walkspeed:int = 4;
  37.     private const jumpspeed:int = 10;
  38.    
  39.     private var forecast_x:int;
  40.     private var forecast_y:int;
  41.    
  42.     private const start_x:int = 50;
  43.     private const start_y:int = 50;
  44.    
  45.     private var left:Boolean;
  46.     private var up:Boolean;
  47.     private var right:Boolean;
  48.     private var space:Boolean;
  49.        
  50.     private var level:Array = new Array();
  51.     private var tiles:Array = new Array();
  52.    
  53.     private var Map_data:Data = new Data;            // create a version of the Data.as
  54.     private var Hero_col:collision_manager = new collision_manager;
  55.    
  56.     private var Hero:hero = new hero;
  57.    
  58.         public function Script(){                  // the init (will only be runned once)
  59.             BuildMap();
  60.             create_hero();
  61.             addEventListener(Event.ENTER_FRAME, main);
  62.             stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
  63.             stage.addEventListener(KeyboardEvent.KEY_UP, key_up);
  64.            
  65.             Hero_col.Setup(25,level,Hero);
  66.         }
  67.        
  68.         private function main(event:Event){
  69.             update_hero();
  70.         }
  71.        
  72.         private function key_down(event:KeyboardEvent){
  73.             if(event.keyCode == 37){
  74.                 left = true;
  75.             }
  76.             if(event.keyCode == 38){
  77.                 up = true;
  78.             }
  79.             if(event.keyCode == 39){
  80.                 right = true;
  81.             }
  82.         }
  83.        
  84.         private function key_up(event:KeyboardEvent){
  85.             if(event.keyCode == 37){
  86.                 left = false;
  87.             }
  88.             if(event.keyCode == 38){
  89.                 up = false;
  90.             }
  91.             if(event.keyCode == 39){
  92.                 right = false;
  93.             }
  94.         }
  95.                                
  96.            
  97.        
  98. /*
  99. ///    ///    ///////// ///////////    ///////////
  100. ///    ///    ///         ////    ///        ///  ///
  101. ///    ///    ///         ////    ///        ///  ///
  102. //////////    ///////// //////////      ///        ///
  103. //////////    ///////// //// ///    ///      ///
  104. ///    ///    ///         ////   ///        ///  ///
  105. ///    ///    ///         ////   ///        ///  ///
  106. ///    ///    ///////// //// ///    ///////////
  107. */
  108.         private function create_hero(){
  109.             addChild(Hero);
  110.             Hero.x = start_x;
  111.             Hero.y = start_y;
  112.             Hero.x_speed = 0;
  113.             Hero.y_speed = 0;
  114.         }
  115.        
  116.         private function update_hero(){
  117.             Hero.y_speed += gravity;
  118.             if(left){
  119.                 Hero.x_speed = -walkspeed;
  120.             }
  121.             if(right){
  122.                 Hero.x_speed = walkspeed;
  123.             }
  124.             if(up && Hero_col.can_jump){
  125.                 Hero.y_speed = -jumpspeed;
  126.             }
  127.            
  128.             if(Hero.y_speed> max_speed){
  129.                 Hero.y_speed = max_speed;
  130.             }
  131.            
  132.             forecast_y = Hero.y + Hero.y_speed;
  133.             forecast_x = Hero.x + Hero.x_speed;
  134.            
  135.             Hero_col.solve_all(forecast_x, forecast_y);
  136.            
  137.            
  138.             Hero.x_speed = 0;
  139.         }
  140.    
  141.    
  142. /*
  143. |||||||||||   |||||||||||   |||||||||| ||||||||||
  144. ||||||||||||    ||||||||||||     ||||    ||||  ||||  |||
  145. ||||    ||||| |||||  ||||  ||||||||||||    ||||||||||
  146. ||||      |||||||      ||||    ||||   |||| ||||
  147. ||||        |||   |||| ||||   ||||   ||||
  148. ||||                    ||||    ||||      ||||  ||||
  149. */
  150.                
  151.         private function BuildMap(){
  152.             Map_data.Setup();                                    // setup data from extern file
  153.            
  154.             level = Map_data.level1;                                        // get data from extern file
  155.            
  156.             for(var t = 0; t <level.length; t++){
  157.                 for(var u = 0; u <level[t].length; u++){
  158.                     if(level[t][u] != 0){                           //if the data is not null
  159.                         var new_tile:platform_tile = new platform_tile;  //than build a tile
  160.                        
  161.                         addChild(new_tile);         //put it on the screen
  162.                        
  163.                         new_tile.gotoAndStop(1);
  164.                         new_tile.x = u * 25;
  165.                         new_tile.y = t * 25;
  166.                        
  167.                         tiles.push(new_tile);                        //put it in an array
  168.                     }
  169.                 }
  170.             }
  171.         }
  172.     }
  173. }
  174.  
  175. // You may not post this on any other site than: http://www.emanueleferonato.com or http://www.frozenhaddock.com. You may not claim that you wrote this code. I'm not responsible for any nuclear activity that may be caused by this script.

The level is stored in the Data.as

PLAIN TEXT
ACTIONSCRIPT:
  1. package{
  2.    
  3.     public class Data{
  4.        
  5.     public var level1:Array = new Array();
  6.         public function Setup(){
  7.             level1 = [
  8.                       [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  9.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  10.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  11.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  12.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  13.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1],
  14.                       [1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  15.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  16.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  17.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  18.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  19.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  20.                       [1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  21.                       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  22.                       [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  23.                      ]
  24.         }
  25.     }
  26. }
  27.  
  28. // You may not post this on any other site than: http://www.emanueleferonato.com or http://www.frozenhaddock.com. You may not claim that you wrote this code. I'm not responsible for any nuclear activity that may be caused by this script.

While the solve_all function contained in the collision_manager.as solves all collisions in the forecast position of the player

PLAIN TEXT
ACTIONSCRIPT:
  1. package{
  2.    
  3.     public class collision_manager{
  4.         private var Tile_size:int;      //containing the size of the tiles
  5.         private var level;          //level data container
  6.         private var forecast_x:int;   //where the player will be at the end of the frame
  7.         private var forecast_y:int;   //"                          "
  8.         public var can_jump:Boolean;        //same as in Emanuele's tutorial
  9.         private var hero;               //to store the Hero object in
  10.        
  11.         public function Setup(size,map,heroj){    //my standard setup function(init)
  12.             Tile_size = size;                  //initializing al vars
  13.             level = map;
  14.             hero = heroj;
  15.         }
  16.        
  17.         public function get_corners(point_x,point_y){            
  18.         //get the position of the four corners of the hero
  19.            
  20.             hero.downy = Math.round((point_y + 10 - Tile_size/2) / Tile_size);
  21.             hero.upy = Math.round((point_y - 10 - Tile_size/2) / Tile_size);
  22.             hero.rightx = Math.round((point_x + 5 - Tile_size/2) / Tile_size)
  23.             hero.leftx = Math.round((point_x - 5 - Tile_size/2) / Tile_size);
  24.             /*
  25.             Looks in wich tiles these four point are.
  26.             *Attention* TILES and not pixel!
  27.            
  28.             Will be used to get the position of the corners