Emanuele Feronato http://www.emanueleferonato.com italian geek and PROgrammer Fri, 04 Jul 2008 15:41:18 +0000 http://wordpress.org/?v=2.5.1 en The importance of REAL random results http://www.emanueleferonato.com/2008/07/03/the-importance-of-real-random-results/ http://www.emanueleferonato.com/2008/07/03/the-importance-of-real-random-results/#comments Thu, 03 Jul 2008 15:39:52 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=303 I was wondering if functions in various languages used to return random values, such as AS2 Math.random() or Php rand() are returning real random values or just a sequence of numbers someone can predict.

So I asked the question to someone that is facing this problem for a long time: Matt from CasinoInLinea.

That’s what he said:

Random results are very important in many computer applications. From online casino games, through video arcades, image processing to data security & encryption software and many other types of applications.

Since computers are 100% predictable: The same actions, performed at a specific order, will always lead to the same results. This means that generating true random numbers is not an easy task. For a function to produce a random number, one of the variables must have a different value every time.

A series of numbers is truly random if it completely unpredictable. In other words, if we have absolutely no way of knowing what the next number is in a series of N numbers, then the series is completely random. On the other hand, if we can determine the next number according to a specific formula, (i.e. Fibonacci, a linear or parabolic function etc), then the series is a function, and is not random at all. As odd as it may seem, computer functions also have interim statuses. A function can be highly random, (i.e. it’s difficult BUT POSSIBLE to predict the next number). It all depends on the capability of the RNG (random Number Generator) algorithm.

Applications like online casino software and security related programs (i.e. password generators, data encryption and more) demand the highest randomness possible. Imagine a roulette table in which a player can predict where the ball falls next, or a password generating software that generates predictable “random” passwords. Both scenarios present a major security breach for the software operators.

So how do random functions produce random numbers? Here are a few common ways:

The computer’s clock
That’s the easiest, cheapest and least secure method. The computer clock offers an ever changing value that always increases with time. Therefore, it is possible to integrate the absolute time value into the random function to produce random results. (The time value is a 2 * 16 bit, double word binary value) that contains years, months, days, hours, minutes & seconds).

Random keyboard or mouse sequence
Some applications (e.g. client-based password generators) resort to a more creative way of producing a random value. They ask the user to provide a sequence of keyboard strokes or a random mouse curosr movement over a specific screen area (or a combination of both). The keystrokes and/or mouse movements are then compiled to a series of values, which are then compiled to a single, random number. This method is excellent at giving the user a distinct sense of control. Its major drawback is that it cannot be used in automated processes (e.g. command line batch executions).

Hardware-based RNG
For applications where randomness is crucial, such as online casino software or encryption software, RNG extension cards can be installed on server machines. These offer faster, more secure random numbers, which are virtually inpredictable. When randomness is of outmost importance, Hardware based is the best solution, although the most expensive one.

Having said all that, when you develop your next computer game, be it browser or client based, you should not worry too much about random numbers – feel free to use your development environment’s native random functions (which probably use the computer’s clock). The gaming experience is unlikely to be affected by it.

If you’re still serious about random numbers, and demand nothing but the best, this website provides more in-depth information about using random number genreators.

If you liked this post buy me a beer (or two)

]]> http://www.emanueleferonato.com/2008/07/03/the-importance-of-real-random-results/feed/ Make a game like Lumines with Flash http://www.emanueleferonato.com/2008/07/02/make-a-game-like-lumines-with-flash/ http://www.emanueleferonato.com/2008/07/02/make-a-game-like-lumines-with-flash/#comments Wed, 02 Jul 2008 10:42:35 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=302 I have to admit it... I got completely addicted to this game... so I decided to make my own Flash version.

If you don't know what is Lumines, it's a casual game you can download from Steam.

Lumines

The game is simple: control squares made by 2x2 bricks of different colors falling from the top like in Tetris... as you create 2x2 squares in same color, the vertical time line wipes them away from left to right.

In this first part, I'll create the game field, and the square made by 2x2 bricks, that can be moved and rotated with arrow keys.

There is nothing really hard... but I couldn't make the entire 2x2 square as a single movieclip because later in the game the square can "break" if it falls over existring bricks.

So every 2x2 square is formed by four movieclips.

There is only one object in the library at the moment... a movieclip linked as brick that contains the graphics for the empty grid at frame 1 and the graphics for colored bricks at frames 2-5

Then, I wanted the bricks to move and rotate when the player taps (press and released) arrow keys, not just when he presses them.

The code is completely commented:

PLAIN TEXT
ACTIONSCRIPT:
  1. // declaring some setup variables
  2. // number of horizontal cells
  3. grid_width = 16;
  4. // number of vertical cells
  5. grid_height = 10;
  6. // size of the cell
  7. tile_size = 30;
  8. // offset in pixels fron the left side of the stage
  9. x_offset = 10;
  10. // offset in pixels from the top side of the stage
  11. y_offset = 10;
  12. // number of different colors that can be displayed in a brick
  13. different_colors = 3;
  14. // boolean values saying if I should wait for the left (or right, up...) key to be released
  15. // this is used to make the player move bricks tapping arrow keys instead of just pressing them
  16. wait_left = false;
  17. wait_right = false;
  18. wait_up = false;
  19. wait_down = false;
  20. // array containing the game field data
  21. field = new Array();
  22. // array containing the bricks I can move
  23. moveable_bricks = new Array();
  24. // initializing and drawing the play field
  25. for (x=0; x<grid_width; x++) {
  26.     field[x] = Array();
  27.     for (y=0; y<grid_height; y++) {
  28.         field[x][y] = 0;
  29.         // look how I determine cells position according to tile size and offsets
  30.         cell = _root.attachMovie("brick", "brick_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:x*tile_size+x_offset, _y:(y+2)*tile_size+y_offset});
  31.         // first frame = empty cell
  32.         cell.gotoAndStop(1);
  33.     }
  34. }
  35. // placing the four bricks
  36. for (x=0; x<4; x++) {
  37.     // again, look how I determine bricks position according to tile size and offsets
  38.     brk = _root.attachMovie("brick", "brick_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:(grid_width/2+(x%2))*tile_size+x_offset, _y:y_offset+tile_size*Math.floor(x/2)});
  39.     // setting a random color for the brick (frames 2 to different_colors+1)
  40.     brk.gotoAndStop(Math.floor(Math.random()*different_colors)+2);
  41.     // saving brick position
  42.     // 0: up left
  43.     // 1: up right
  44.     // 2: bottom left
  45.     // 3: bottom right
  46.     brk.pos = x;
  47.     // saving the depth of the brick into the moveable_bricks array
  48.     // if you look how did I assign brick names, you'll see that I can determine a brick name
  49.     // starting from its depth. It's simply "brick_"+<the_depth>
  50.     moveable_bricks[x] = brk.getDepth();
  51. }
  52. // main function, to be executed at every frame
  53. _root.onEnterFrame = function() {
  54.     // this is how I detect if a key was tapped:
  55.     // when it's pressed, I wait for it to be released (in this case: not pressed)
  56.     // thanks to the wait_<direction> variable
  57.     if (Key.isDown(Key.LEFT)) {
  58.         wait_left = true;
  59.     } else {
  60.         if (wait_left) {
  61.             // if the left key has been tapped, move the four bricks on the left
  62.             for (x=0; x<4; x++) {
  63.                 // this "if" is used to determine if the bricks are still inside the game field
  64.                 if ((_root["brick_"+moveable_bricks[x]]._x-x_offset)/tile_size-_root["brick_"+moveable_bricks[x]].pos%2>0) {
  65.                     _root["brick_"+moveable_bricks[x]]._x -= tile_size;
  66.                 }
  67.             }
  68.             // reset variable, now I must wait again for a key to be pressed
  69.             wait_left = false;
  70.         }
  71.     }
  72.     // same routine for the right key
  73.     if (Key.isDown(Key.RIGHT)) {
  74.         wait_right = true;
  75.     } else {
  76.         if (wait_right) {
  77.             for (x=0; x<=3; x++) {
  78.                 if ((_root["brick_"+moveable_bricks[x]]._x-x_offset)/tile_size-_root["brick_"+moveable_bricks[x]].pos%2<14) {
  79.                     _root["brick_"+moveable_bricks[x]]._x += tile_size;
  80.                 }
  81.             }
  82.             wait_right = false;
  83.         }
  84.     }
  85.     // when the DOWN arrow is pressed, I must rotate the bricks clockwise
  86.     // block 0: moves to the right and becomes block 1
  87.     // block 1: moves down and becomes block 3
  88.     // block 2: moves up and becomes block 0
  89.     // block 3: moves to the left and becomes block 2
  90.     if (Key.isDown(Key.DOWN)) {
  91.         wait_down = true;
  92.     } else {
  93.         if (wait_down) {
  94.             for (x=0; x<4; x++) {
  95.                 switch (_root["brick_"+moveable_bricks[x]].pos) {
  96.                 case 0 :
  97.                     _root["brick_"+moveable_bricks[x]].pos = 1;
  98.                     _root["brick_"+moveable_bricks[x]]._x += tile_size;
  99.                     break;
  100.                 case 1 :
  101.                     _root["brick_"+moveable_bricks[x]].pos = 3;
  102.                     _root["brick_"+moveable_bricks[x]]._y += tile_size;
  103.                     break;
  104.                 case 2 :
  105.                     _root["brick_"+moveable_bricks[x]].pos = 0;
  106.                     _root["brick_"+moveable_bricks[x]]._y -= tile_size;
  107.                     break;
  108.                 case 3 :
  109.                     _root["brick_"+moveable_bricks[x]].pos = 2;
  110.                     _root["brick_"+moveable_bricks[x]]._x -= tile_size;
  111.                     break;
  112.                 }
  113.             }
  114.             wait_down = false;
  115.         }
  116.     }
  117.     // when the UP arrow is pressed, I must rotate the bricks counter-clockwise
  118.     // block 0: moves down the right and becomes block 2
  119.     // block 1: moves to the left and becomes block 0
  120.     // block 2: moves to the right and becomes block 3
  121.     // block 3: moves up and becomes block 1
  122.     if (Key.isDown(Key.UP)) {
  123.         wait_up = true;
  124.     } else {
  125.         if (wait_up) {
  126.             for (x=0; x<4; x++) {
  127.                 switch (_root["brick_"+moveable_bricks[x]].pos) {
  128.                 case 0 :
  129.                     _root["brick_"+moveable_bricks[x]].pos = 2;
  130.                     _root["brick_"+moveable_bricks[x]]._y += tile_size;
  131.                     break;
  132.                 case 1 :
  133.                     _root["brick_"+moveable_bricks[x]].pos = 0;
  134.                     _root["brick_"+moveable_bricks[x]]._x -= tile_size;
  135.                     break;
  136.                 case 2 :
  137.                     _root["brick_"+moveable_bricks[x]].pos = 3;
  138.                     _root["brick_"+moveable_bricks[x]]._x += tile_size;
  139.                     break;
  140.                 case 3 :
  141.                     _root["brick_"+moveable_bricks[x]].pos = 1;
  142.                     _root["brick_"+moveable_bricks[x]]._y -= tile_size;
  143.                     break;
  144.                 }
  145.             }
  146.             wait_up = false;
  147.         }
  148.     }
  149. };

and here it is the result: move and rotate the square with arrow keys.

here it is the source code for you to experiment.

If you liked this post buy me a beer (or two)

]]> http://www.emanueleferonato.com/2008/07/02/make-a-game-like-lumines-with-flash/feed/ Playing with getPixel http://www.emanueleferonato.com/2008/06/28/playing-with-getpixel/ http://www.emanueleferonato.com/2008/06/28/playing-with-getpixel/#comments Sat, 28 Jun 2008 19:16:12 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=301 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?

If you liked this post buy me a beer (or two)

]]> http://www.emanueleferonato.com/2008/06/28/playing-with-getpixel/feed/ Win a TemplateMonster theme with TemplateMonster Lottery http://www.emanueleferonato.com/2008/06/25/win-a-templatemonster-theme-with-templatemonster-lottery/ http://www.emanueleferonato.com/2008/06/25/win-a-templatemonster-theme-with-templatemonster-lottery/#comments Wed, 25 Jun 2008 14:36:54 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=299 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.

If you liked this post buy me a beer (or two)

]]> http://www.emanueleferonato.com/2008/06/25/win-a-templatemonster-theme-with-templatemonster-lottery/feed/ Looking for your experience for a case history http://www.emanueleferonato.com/2008/06/24/looking-for-your-experience-for-a-case-history/ http://www.emanueleferonato.com/2008/06/24/looking-for-your-experience-for-a-case-history/#comments Tue, 24 Jun 2008 20:27:12 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=300 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.

If you liked this post buy me a beer (or two)

]]> http://www.emanueleferonato.com/2008/06/24/looking-for-your-experience-for-a-case-history/feed/ Create a Flash game like ColorFill - part 1 http://www.emanueleferonato.com/2008/06/23/create-a-flash-game-like-colorfill-part-1/ http://www.emanueleferonato.com/2008/06/23/create-a-flash-game-like-colorfill-part-1/#comments Mon, 23 Jun 2008 14:31:44 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=298 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.

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. // flag indicating if I pressed space
  3. space_pressed = false;
  4. // vertical_arrow = true: arrows are horizontal
  5. // vertical_arrow = false: arrows are vertical
  6. vertical_arrow = false;
  7. // flag indicating if I pressed space
  8. clicked = false;
  9. // enemy's random angle movement
  10. angle = Math.random()*360;
  11. // enemy and arrows speeds
  12. speed = 5;
  13. // booleans that states if the left or right arrows touched the border of the stage
  14. left_touch = false;
  15. right_touch = false;
  16. // x and y speeds of the enemy
  17. xspeed = speed*Math.cos(angle*0.0174532925);
  18. yspeed = speed*Math.sin(angle*0.0174532925);
  19. // enemy collision detection precision
  20. precision = 16;
  21. // attaching the ball = the enemy
  22. _root.attachMovie("ball","ball",1,{_x:250, _y:200});
  23. // creating the empty movieclip that will contain all drawings
  24. _root.createEmptyMovieClip("line",2);
  25. // attaching the left arrow
  26. _root.attachMovie("left_arrow","left_arrow",3);
  27. // attaching the right arrow
  28. _root.attachMovie("right_arrow","right_arrow",4);
  29. // function to be executed for the left arrow
  30. left_arrow.onEnterFrame = function() {
  31.     // if I did not click the mouse
  32.     if (!clicked) {
  33.         // if I am not in "vertical mode"...
  34.         if (!vertical_arrow) {
  35.             // place the arrow
  36.             this._y = _root._ymouse;
  37.             this._x = _root._xmouse-15;
  38.             this._rotation = 0;
  39.         }
  40.         // if I am in "vertical mode"....
  41.         else {
  42.             // place the arrow
  43.             this._y = _root._ymouse-15;
  44.             this._x = _root._xmouse;
  45.             this._rotation = 90;
  46.         }
  47.     }
  48.     // if I clicked the mouse....
  49.     else {
  50.         // if the arrow did not touch the edge of the stage...
  51.         if (!left_touch) {
  52.             // if I am not in "vertical mode"...
  53.             if (!vertical_arrow) {
  54.                 // moving the arrow
  55.                 this._x -= speed;
  56.                 // checking if the arrow touched the left edge of the stage
  57.                 if (this._x<8) {
  58.                     this._x = 8;
  59.                     left_touch = true;
  60.                 }
  61.             }
  62.             // if I am in "vertical mode"...
  63.             else {
  64.                 // moving the arrow
  65.                 this._y -= speed;
  66.                 // checking if the arrow touched the upper edge of the stage
  67.                 if (this._y<8) {
  68.                     this._y = 8;
  69.                     left_touch = true;
  70.                 }
  71.             }
  72.         }
  73.     }
  74. };
  75. // same concept for the right arrow
  76. right_arrow.onEnterFrame = function() {
  77.     if (!clicked) {
  78.         if (!vertical_arrow) {
  79.             this._y = _root._ymouse;
  80.             this._x = _root._xmouse+15;
  81.             this._rotation = 0;
  82.         }
  83.         else {
  84.             this._y = _root._ymouse+15;
  85.             this._x = _root._xmouse;
  86.             this._rotation = 90;
  87.         }
  88.     }
  89.     else {
  90.         if (!right_touch) {
  91.             if (!vertical_arrow) {
  92.                 this._x += speed;
  93.                 if (this._x>492) {
  94.                     this._x = 492;
  95.                     right_touch = true;
  96.                 }
  97.             }
  98.             else {
  99.                 this._y += speed;
  100.                 if (this._y>392) {
  101.                     this._y = 392;
  102.                     right_touch = true;
  103.                 }
  104.             }
  105.         }
  106.     }
  107. };