Shuffle an image with BitmapData – Part 2
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

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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
Array.prototype.shuffle = function() {
for (x=0; x<24; x++) {
var from = Math.floor(Math.random()*25);
var to = this[x];
this[x] = this[from];
this[from] = to;
}
};
big_picture = BitmapData.loadBitmap("scream");
_root.createEmptyMovieClip("big_pic_obj",_root.getNextHighestDepth());
big_pic_obj.attachBitmap(big_picture,_root.getNextHighestDepth());
big_pic_obj._visible = false;
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);
sequence.shuffle();
field = new Array();
picture_in = 0;
_root.createEmptyMovieClip("tiles",_root.getNextHighestDepth());
_root.attachMovie("border","border",_root.getNextHighestDepth());
_root.attachMovie("fire","fire",_root.getNextHighestDepth());
border.onEnterFrame = function() {
this.gotoAndStop(1);
if (!dragging) {
this._x = Math.floor(_root._xmouse/100)*100;
this._y = Math.floor(_root._ymouse/100)*100;
}
else {
dist_x = _root._xmouse-save_x;
dist_y = _root._ymouse-save_y;
angle = Math.atan2(dist_y, dist_x)*180/Math.PI;
if (angle<45 and angle>-45) {
this.gotoAndStop(3);
possible_direction = "right";
}
if ((angle<-45) and (angle>-135)) {
this.gotoAndStop(2)
possible_direction = "up";
}
if (angle<-135 or angle>135) {
this.gotoAndStop(5)
possible_direction = "left";
}
if (angle<135 and angle>45) {
this.gotoAndStop(4)
possible_direction = "down";
}
}
};
for (x=0; x<25; x++) {
field[x] = -1;
picture = tiles.createEmptyMovieClip("small_pic_obj_"+x, tiles.getNextHighestDepth());
small_picture = new BitmapData(100, 100);
picture.attachBitmap(small_picture,tiles.getNextHighestDepth());
small_picture.copyPixels(big_picture,new Rectangle(0+(x%5)*100, 0+Math.floor(x/5)*100, 100, 100),new Point(0, 0));
picture._alpha = 0;
picture.id = x;
picture.onEnterFrame = function() {
if (this.dir == "right") {
position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
if ((position%5 != 4) and (field[position+1] == -1)) {
this._x += 100;
field[position] = -1;
field[position+1] = this.id;
}
else {
this.dir = "";
}
}
if (this.dir == "down") {
position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
if ((position+5<25) and (field[position+5] == -1)) {
this._y += 100;
field[position] = -1;
field[position+5] = this.id;
}
else {
this.dir = "";
}
}
if (this.dir == "left") {
position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
if ((position%5 != 0) and (position != 1) and (field[position-1] == -1)) {
this._x -= 100;
field[position] = -1;
field[position-1] = this.id;
}
else {
this.dir = "";
}
}
if (this.dir == "up") {
position = Math.floor(this._x/100)+5*Math.floor(this._y/100);
if ((position-5>0) and (field[position-5] == -1)) {
this._y -= 100;
field[position] = -1;
field[position-5] = this.id;
}
else {
this.dir = "";
}
}
};
}
_root.onMouseDown = function() {
position = Math.floor(_root._xmouse/100)+5*Math.floor(_root._ymouse/100);
if (position == 0) {
if (field[1] == -1) {
tiles["small_pic_obj_"+sequence[picture_in]]._alpha = 100;
tiles["small_pic_obj_"+sequence[picture_in]].dir = "right";
picture_in++;
}
}
else {
if (field[position] != -1) {
dragging = true;
save_x = border._x+50;
save_y = border._y+50;
}
}
};
_root.onMouseUp = function() {
position = Math.floor(save_x/100)+5*Math.floor(save_y/100);
tiles["small_pic_obj_"+field[position]].dir = possible_direction;
dragging = false;
}; |
And this is the source code
Come on and let’s bet how much will the final game score on NG
Read part 3.
They can be easily customized to meet the unique requirements of your project.
7 Responses to “Shuffle an image with BitmapData – Part 2”
Leave a Reply
Trackbacks
-
Shuffle an image with BitmapData : Emanuele Feronato - italian geek and PROgrammer on
December 5th, 2007 12:07 am
[...] 4th update: part 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 [...]
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)







It has an unfinished feel to it. With some fixes, this could get a clam-substitute-burger approval.
I can’t see the flash.
Right clicked it said, movie not loaded.
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…
hi Emanuele,
gr8 game and tut.
I think the game will sure lie between 3.5 to 3.75 in NG.
you should make one of thos “understanding” posts about bitmapdata… it looks like something really great (and i don’t actually get how they work xD)