Shuffle an image with BitmapData

December 1, 2007 by Emanuele Feronato
Filed Under Flash • 15 Comments 

December 4th update: part 2 released
December 7th update: part 3 released

Today I played a bit with BitmapData because I have a concept for a future game.

Look what I did:

The only thing I have in my library is an image representing the Scream by Munch.

This one:

Scream

I linked it as "scream" of course...

Scream

...and then entered a few actionscript lines in the1st frame of the main (and only) scene:

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.display.BitmapData;
  2. import flash.geom.Rectangle;
  3. import flash.geom.Point;
  4. big_picture = BitmapData.loadBitmap("scream");
  5. _root.createEmptyMovieClip("big_pic_obj", _root.getNextHighestDepth());
  6. big_pic_obj.attachBitmap(big_picture, _root.getNextHighestDepth());
  7. pictures = new Array();
  8. sequence = new Array();
  9. for (x=0; x<25; x++) {
  10.     pictures[x] = _root.createEmptyMovieClip("small_pic_obj_"+x, _root.getNextHighestDepth());
  11.     sequence[x] = x;
  12.     small_picture = new BitmapData(100, 100);
  13.     pictures[x].attachBitmap(small_picture, _root.getNextHighestDepth());
  14.     small_picture.copyPixels(big_picture, new Rectangle(0+(x%5)*100, 0+Math.floor(x/5)*100, 100, 100), new Point(0, 0));
  15.     pictures[x]._alpha = 0;
  16. }
  17. Array.prototype.shuffle = function() {
  18.     for (x=0; x<24; x++) {
  19.         var from = Math.floor(Math.random()*25);
  20.         var to = this[x];
  21.         this[x] = this[from];
  22.         this[from] = to;
  23.     }
  24. };
  25. _root.onMouseDown = function() {
  26.     sequence.shuffle();
  27.     for (x=0; x<25; x++) {
  28.         _root["small_pic_obj_"+sequence[x]]._x = (x%5)*100;
  29.         _root["small_pic_obj_"+sequence[x]]._y = Math.floor(x/5)*100;
  30.         _root["small_pic_obj_"+sequence[x]]._alpha = 100;
  31.     }
  32. };

Let's examine those lines:

Lines 1-3: Importing required libraries

Line 4: Defining a BitmapData and load the scream in it

What is a BitmapData?

From the official Flash 8 documentation: The BitmapData class lets you create arbitrarily sized transparent or opaque bitmap images, then manipulate them in various ways at runtime. When you manipulate a BitmapData instance directly by using ActionScript, you can create very complex images without incurring the overhead of constantly redrawing the content from vector data in Flash Player. The methods of the BitmapData class support a variety of effects that are not available through the Filters tab in the Flash workspace.

Line 5: Creating an empy movie clip called big_pic_obj. I will use it to store my BitmapData

Line 6: Attaching the big_picture bitmapData to the big_pic_obj object . attachBitmap attaches a bitmap image to a movie clip.

Line 7: Creating a new array called pictures

Line 8: Creating a new array called sequence

Line 9: I decided to split the scream into 25 pieces, so I am starting a loop from 0 to 24

Line 10: Creating a new empty movie clip and storing into the pictures array

Line 11: Assigning x value to sequence[x]

Line 12: Creating a new BitmapData measuring 100x100 pixels

Line 13: Attaching the BitmapData created at line 12 to the movie clip created at line 10

Line 14: This is the core of the script: I am using the copyPixels function to copy/paste a part of the big picture into the small movieclip I created. Look how does it work: I give the source BitmapData (big_picture, the Scream picture), the rectangle of the source to copy (in this case a 100x100 square that begins at the upper left point that you will find if you divide the big picture into 25 parts). Then a point is defined. What does this point mean? It means the upper left point of the destination BitmapData (in this case small_picture) where the source image will be copied. You may think about it as an offset.

So I am defining a square into the big image and pasting it into the small movieclip. The only formula involved is the one to determine the coordinates of the upper left corner of the x-th square.

Line 15: I am leaving the small movieclip transparent at the moment.

Line 17: Time to define a prototype... a new function that will work on an array. I called it "shuffle" because I will use it to shuffle the array of pictures.

Line 18: Another loop to be executed 25 (number of tiles) times

Line 19: Generating a random number between 0 and 24

Lines 20-22: Swapping the value at the x-th position with the one at the from-th position. This is only one of a million ways to shuffle an array

Line 25: Beginning of the routine to be executed every time I press the mouse in the stage

Line 26: Shuffling the sequence array (basically: shuffling the tiles)

Line 27: Loop to be executed 25 times to scan all sequence array

Lines 28-29: Adjusting the x-th tile according to its new position into the shuffled array

Line 30: Making it visible

And... here it is!

You can shuffle the tiles pressing the mouse.

I hope this will be useful for some screen saver or for the creation of a puzzle game. I made this with a clear idea in my mind... hope you will like the final result.

Take the source code and enjoy.

There is a prototype of a game based on this "engine"... take a look here

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 2.5 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

15 Responses to “Shuffle an image with BitmapData”

  1. Eblup on December 1st, 2007 8:50 am

    hey next is flash 100! you should make a game like missle command with fireworks! or a platform ai tut!!!!!!!!!!

  2. shiv1411 on December 1st, 2007 11:27 am

    hi emanuele
    gr8 tut as usual.

    Last day I submitted my game to Newgrounds and gave my game a mochi ad.

    Now, what I see in both cases that 875 people played my game in newgrounds and at MochiAds it showed that my game had 281 ad impressions by 30th November and ZERO ad impressions by today, i.e., 1st December.

    Can you tell me whats wrong with Mochi Ads?

  3. Ed on December 1st, 2007 11:27 pm

    shiv it’s probably people who went on your game in newgrounds and didn’t actually open the game or started opening it but closed it before the preloader. I think…

    Also I heard that you get paid per 1000 views, but I’ve had over 1000 for one of my games and my earnings stayed the same.

  4. shiv1411 on December 2nd, 2007 8:38 am

    yeah Ed,
    u seem to be right but the facts are too far to believe…

    And how can my graph crash to Zero from 281?

  5. styxtwo on December 2nd, 2007 1:54 pm

    probaby because you only posted it to NG, this is a very fast site that brings your game up to 1000 views for a day. but after that time it gets buried under a lot of bad submissions and no-one will see your game anymore (the 0 views the next day). if you want more exposure try submitting it to sites like Hallpass.com

  6. styxtwo on December 2nd, 2007 1:55 pm

    Also I heard that you get paid per 1000 views, but I’ve had over 1000 for one of my games and my earnings stayed the same.

    ed what do you mean by this?

  7. Ed on December 2nd, 2007 2:07 pm

    styx,when I commented here they said that it’s pay per 1000 views:

    http://www.emanueleferonato.com/2007/10/16/mochiads-the-advertising-network-just-for-game-developers/

    Though my earnings haven’t changed since reaching 1000 views.

  8. styxtwo on December 2nd, 2007 9:26 pm

    they don’t pay you per 1000 exactly. this means you get paid:

    views/1000*eCPM = what you get(this is rounded)

    if the views increase by a little and the eCPM stays the same you will get a little more money. but if this gets rounded down it might seem like your money didn’t increase, eventhough it did. well i hope you kinda understand now ^^

  9. Ed on December 2nd, 2007 9:37 pm

    Now I’m really confused. >.>
    I’ll just have to do with my 36 cents. :/

  10. Maggie on December 3rd, 2007 3:14 am

    just played your circle game, and i played to the end of level 20. well impressed, simple but so frustrating.
    if i had paypal id buy you a beer, if you are ever in worcestershire uk, ill buy you two.

    thanks

  11. s0d4player on December 3rd, 2007 4:30 am

    Has anyone got it so it would randomly rearrange it self back to the original image?

  12. shiv1411 on December 3rd, 2007 4:08 pm

    well Ed and styx,

    I think styx is right, because I think the people forget the games if they dont become so popular within a very limited time.

    Anyways, Thx 4 ur advice!

  13. shiv1411 on December 3rd, 2007 4:10 pm

    Hey Emanuele,
    did u play my game?
    http://www.newgrounds.com/portal/view/412692

Leave a Reply




Trackbacks

  1. Shuffle an image with BitmapData - Part 2 : Emanuele Feronato - italian geek and PROgrammer on December 5th, 2007 12:00 am

    [...] prototype somehow continues the Shuffle an image with BitmapData [...]

  2. Shuffle an image with BitmapData - Part 3 : Emanuele Feronato - italian geek and PROgrammer on December 7th, 2007 9:46 pm

    [...] (learn how I am calling a clone) to Split Personalities is growing fast and well, and after the first and second steps, now I have something playable. The aim of the game is to rebuild the image of a [...]

Posts