Shuffle an image with BitmapData - Part 2

December 5, 2007 by Emanuele Feronato
Filed Under Flash, Game design •  

December 7th update: part 3 released

This prototype somehow continues the Shuffle an image with BitmapData tutorial.

But the real aim of this code is beginning to create a game like Split Personalities, a game released for the Spectrum in 1986

Split personalities

The game play revolves around assembling a number of pictures of famous people from the eighties which include Ronald Reagan, Margaret Thatcher, Charles & Diana and Clive Sinclair amongst others. Each famous face is split into a number of square pieces which are fed into the frame one at a time, on demand but in a random order. All you have to do is assemble the face by correctly positioning all the pieces in the frame! Complete a face to move on to the next level.

In my version, I am going to replace the famous people pictures with famous paintings.

So, move the square over the "fire" tile to release a piece of the painting to the right, then drag/drop it around the game field.

At the moment, the gameplay ends here but... hey... it's just a 127 lines prototype... let me code another... let's say 255 lines and you'll enjoy playing it.

Really

Meanwhile, this is the actionscript that moves everything (sorry, it's still uncommented and unexplained but I'll release a complete tutorial as usual, meanwhile try to understand how does it work)

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.display.BitmapData;
  2. import flash.geom.Rectangle;
  3. import flash.geom.Point;
  4. Array.prototype.shuffle = function() {
  5.     for (x=0; x<24; x++) {
  6.         var from = Math.floor(Math.random()*25);
  7.         var to = this[x];
  8.         this[x] = this[from];
  9.         this[from] = to;
  10.     }
  11. };
  12. big_picture = BitmapData.loadBitmap("scream");
  13. _root.createEmptyMovieClip("big_pic_obj",_root.getNextHighestDepth());
  14. big_pic_obj.attachBitmap(big_picture,_root.getNextHighestDepth());
  15. big_pic_obj._visible = false;
  16. sequence = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24);
  17. sequence.shuffle();
  18. field = new Array();
  19. picture_in = 0;
  20. _root.createEmptyMovieClip("tiles",_root.getNextHighestDepth());
  21. _root.attachMovie("border","border",_root.getNextHighestDepth());
  22. _root.attachMovie("fire","fire",_root.getNextHighestDepth());
  23. border.onEnterFrame = function() {
  24.     this.gotoAndStop(1);
  25.     if (!dragging) {
  26.         this._x = Math.floor(_root._xmouse/100)*100;
  27.         this._y = Math.floor(_root._ymouse/100)*100;
  28.     }
  29.     else {
  30.         dist_x = _root._xmouse-save_x;
  31.         dist_y = _root._ymouse-save_y;
  32.         angle = Math.atan2(dist_y, dist_x)*180/Math.PI;
  33.         if (angle<45 and angle>-45) {
  34.             this.gotoAndStop(3);
  35.             possible_direction = "right";
  36.         }
  37.         if ((angle<-45) and (angle>-135)) {
  38.             this.gotoAndStop(2)
  39.             possible_direction = "up";
  40.         }
  41.         if (angle<-135 or angle>135) {
  42.             this.gotoAndStop(5)
  43.             possible_direction = "left";
  44.         }
  45.         if (angle<135 and angle>45) {
  46.             this.gotoAndStop(4)
  47.             possible_direction = "down";
  48.         }
  49.     }
  50. };
  51. for (x=0; x<25; x++) {
  52.     field[x] = -1;
  53.     picture = tiles.createEmptyMovieClip("small_pic_obj_"+x, tiles.getNextHighestDepth());
  54.     small_picture = new BitmapData(100, 100);
  55.     picture.attachBitmap(small_picture,tiles.getNextHighestDepth());
  56.     small_picture.copyPixels(big_picture,new Rectangle(0+(x%5)*100, 0+Math.floor(x/5)*100, 100, 100),new Point(0, 0));
  57.     picture._alpha = 0;
  58.     picture.id = x;
  59.     picture.onEnterFrame = function() {
  60.         if (this.dir == "right") {
  61.             position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
  62.             if ((position%5 != 4) and (field[position+1] == -1)) {
  63.                 this._x += 100;
  64.                 field[position] = -1;
  65.                 field[position+1] = this.id;
  66.             }
  67.             else {
  68.                 this.dir = "";
  69.             }
  70.         }
  71.         if (this.dir == "down") {
  72.             position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
  73.             if ((position+5<25) and (field[position+5] == -1)) {
  74.                 this._y += 100;
  75.                 field[position] = -1;
  76.                 field[position+5] = this.id;
  77.             }
  78.             else {
  79.                 this.dir = "";
  80.             }
  81.         }
  82.         if (this.dir == "left") {
  83.             position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
  84.             if ((position%5 != 0) and (position != 1) and (field[position-1] == -1)) {
  85.                 this._x -= 100;
  86.                 field[position] = -1;
  87.                 field[position-1] = this.id;
  88.             }
  89.             else {
  90.                 this.dir = "";
  91.             }
  92.         }
  93.         if (this.dir == "up") {
  94.             position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
  95.             if ((position-5>0) and (field[position-5] == -1)) {
  96.                 this._y -= 100;
  97.                 field[position] = -1;
  98.                 field[position-5] = this.id;
  99.             }
  100.             else {
  101.                 this.dir = "";
  102.             }
  103.         }
  104.     };
  105. }
  106. _root.onMouseDown = function() {
  107.     position = Math.floor(_root._xmouse/100)+5*Math.floor(_root._ymouse/100);
  108.     if (position == 0) {
  109.         if (field[1] == -1) {
  110.             tiles["small_pic_obj_"+sequence[picture_in]]._alpha = 100;
  111.             tiles["small_pic_obj_"+sequence[picture_in]].dir = "right";
  112.             picture_in++;
  113.         }
  114.     }
  115.     else {
  116.         if (field[position] != -1) {
  117.             dragging = true;
  118.             save_x = border._x+50;
  119.             save_y = border._y+50;
  120.         }
  121.     }
  122. };
  123. _root.onMouseUp = function() {
  124.     position = Math.floor(save_x/100)+5*Math.floor(save_y/100);
  125.     tiles["small_pic_obj_"+field[position]].dir = possible_direction;
  126.     dragging = false;
  127. };

And this is the source code

Come on and let's bet how much will the final game score on NG

Read part 3.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

» 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.

6 Responses to “Shuffle an image with BitmapData - Part 2”

  1. Shadow Scythe on December 5th, 2007 1:28 am

    It has an unfinished feel to it. With some fixes, this could get a clam-substitute-burger approval.

  2. Kevin on December 5th, 2007 9:58 am

    I can’t see the flash.
    Right clicked it said, movie not loaded.

  3. Emanuele Feronato on December 5th, 2007 11:07 am

    Fixed! Thank you for reporting

    Shadow: the game is way to be finished… it will be ready before the end of the week, I hope…

  4. shiv1411 on December 5th, 2007 12:36 pm

    hi Emanuele,
    gr8 game and tut.
    I think the game will sure lie between 3.5 to 3.75 in NG.

Leave a Reply




Trackbacks

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

    [...] 4th update: part 2 [...]

  2. Shuffle an image with BitmapData - Part 3 : Emanuele Feronato - italian geek and PROgrammer on December 7th, 2007 9:42 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 [...]