Shuffle an image with BitmapData – Part 3

December 7, 2007 by Emanuele Feronato
Filed Under Flash, Game design, Monetize • 11 Comments 

My tribute (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 stolen painting(in this case the Scream) that was broken into pieces (I just want you to notice that I also made a dramatic background…).

The new features I added are a minimap on the right representing a blueprint of the original painting and the “holes”… some trapdoors that open and close randomly. When a piece of the picture falls into an opened hole, it disappears. When a piece of the picture steps into a closed hole, the hole remains closed until the piece is moved.

It’s a very simple concept but I messed the instructions how to play… I’ll never get a job as a game manual writer… you better check the demo by yourself

Play the demo.

Now I am planning to add **tons** of features and powerups, about 10 levels of increasing difficulty, fancy graphics and release the game

Wanna sponsor the game?

I’ll add MochiAds in the game. However, I also would like to sell four 125×125 buttons in the game. Not in the “splash screen”, I mean into the game itself.

I am selling buttons instead of looking for a sponsor because I am publishing the source code of the game, and sponsors do not want people to see the game in progress or even worse to see the code before the game is finished

If you want to purchase a button (that will link to wherever you want), the price is $50 per button.

Maybe the game will be a flop, maybe not. Anyway, it’s up to you to risk your 50 bucks. The guiderules are the same of every link sale: no heavy images or heavy animations in the buttons, no links to gambling, porno, racist sites and so on.

You can then resell your button how many times you want until the game is ready. When it’s ready, maybe some millions people will see your button while PLAYING (not WAITING for the game to load).

If you want to purchase a button, contact me at info[at]emanueleferonato.com

That’s a very unseen way to ask for a sponsorship but… hey… I am running an experiment! Bet on my game!

Now, the source code… still uncommented but with understandable variable names. You know that once finished I’ll release the complete tutorial as usual.

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
Array.prototype.shuffle = function() {
	for (x=0; x<19; x++) {
		var from = Math.floor(Math.random()*20);
		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);
save_position = 0;
sequence.shuffle();
field = new Array();
holes = new Array();
for (x=0; x<25; x++) {
	holes[x] = 0;
	field[x] = -1;
}
for (x=1; x<=3; x++) {
	do {
		out = Math.floor(Math.random()*24)+1;
	} while ((holes[out] != 0) or (out<5));
	holes[out] = x;
	hole = _root.attachMovie("out", "out_"+x, _root.getNextHighestDepth(), {_x:(out%5)*80, _y:Math.floor(out/5)*80});
	hole.pos = x;
	_root.attachMovie("glass", "glass_"+x, _root.getNextHighestDepth(), {_x:(out%5)*80, _y:Math.floor(out/5)*80});
	hole.onEnterFrame = function() {
		moving = Math.floor(Math.random()*250);
		if (moving == 0) {
			_root["glass_"+this.pos]._alpha = 100-_root["glass_"+this.pos]._alpha;
		}
	};
}
_root.createEmptyMovieClip("tiles", _root.getNextHighestDepth());
_root.attachMovie("mini", "mini", _root.getNextHighestDepth(), {_x:410});
_root.attachMovie("magnifier", "magnifier", _root.getNextHighestDepth());
_root.attachMovie("fire", "fire", _root.getNextHighestDepth());
_root.attachMovie("border", "border", _root.getNextHighestDepth());
border.onEnterFrame = function() {
	magnifier._visible = false;
	this.gotoAndStop(1);
	if (!dragging) {
		possible_direction = "";
		if (_root._xmouse<400) {
			this._x = Math.floor(_root._xmouse/80)*80;
			this._y = Math.floor(_root._ymouse/80)*80;
			position = Math.floor(_root._xmouse/80)+5*Math.floor(_root._ymouse/80);
			if (field[position]>=0) {
				magnifier._x = 410+(field[position]%5)*40;
				magnifier._y = Math.floor(field[position]/5)*40;
				magnifier._visible = true;
			}
		}
	} 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<20; x++) {
	picture = tiles.createEmptyMovieClip("small_pic_obj_"+x, tiles.getNextHighestDepth());
	small_picture = new BitmapData(80, 80);
	picture.attachBitmap(small_picture, tiles.getNextHighestDepth());
	small_picture.copyPixels(big_picture, new Rectangle(0+(x%5)*80, 0+Math.floor(x/5)*80, 80, 80), new Point(0, 0));
	picture.id = x;
	picture.falling = false;
	picture.onEnterFrame = function() {
		if (!this.falling) {
			if (this.dir == "right") {
				position = Math.floor(this._x/80)+5*Math.floor(this._y/80);
				if ((position%5 != 4) and (field[position+1] == -1)) {
					this._x += 80;
					field[position] = -1;
					field[position+1] = this.id;
				} else {
					this.dir = "";
				}
			}
			if (this.dir == "down") {
				position = Math.floor(this._x/80)+5*Math.floor(this._y/80);
				if ((position+5<25) and (field[position+5] == -1)) {
					this._y += 80;
					field[position] = -1;
					field[position+5] = this.id;
				} else {
					this.dir = "";
				}
			}
			if (this.dir == "left") {
				position = Math.floor(this._x/80)+5*Math.floor(this._y/80);
				if ((position%5 != 0) and (position != 1) and (field[position-1] == -1)) {
					this._x -= 80;
					field[position] = -1;
					field[position-1] = this.id;
				} else {
					this.dir = "";
				}
			}
			if (this.dir == "up") {
				position = Math.floor(this._x/80)+5*Math.floor(this._y/80);
				if ((position-5>0) and (field[position-5] == -1)) {
					this._y -= 80;
					field[position] = -1;
					field[position-5] = this.id;
				} else {
					this.dir = "";
				}
			}
			position = Math.floor(this._x/80)+5*Math.floor(this._y/80);
			if ((holes[position] != 0) and (_root["glass_"+holes[position]]._alpha == 0) and (this.dir != "")) {
				this.dir = "";
				this.falling = true;
				save_position = position;
			}
		}
		if (this.falling) {
			this._width -= 2;
			this._height -= 2;
			this._x++;
			this._y++;
			this._alpha -= 2;
			if (this._width == 0) {
				this._alpha++;
				this._width = 80;
				this._height = 80;
				sequence.push(field[save_position]);
				field[save_position] = -1;
				this._x = 0;
				this._y = 0;
				this.falling = false;
			}
		}
	};
}
_root.onMouseDown = function() {
	position = Math.floor(_root._xmouse/80)+5*Math.floor(_root._ymouse/80);
	if (position == 0) {
		if (field[1] == -1) {
			picture_in = sequence.shift();
			tiles["small_pic_obj_"+picture_in].dir = "right";
		}
	} 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/80)+5*Math.floor(save_y/80);
	tiles["small_pic_obj_"+field[position]].dir = possible_direction;
	dragging = false;
};

176 lines… and I already have a level… give me feedback!

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 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.

11 Responses to “Shuffle an image with BitmapData – Part 3”

  1. Thomas on December 8th, 2007 12:04 am

    wow!

  2. styxtwo on December 8th, 2007 1:42 pm

    waaaaaaaaay to difficult.. start with smaller pictures. get the player to enjoy the game before making them pull out their hair in frustation :P

  3. styxtwo on December 8th, 2007 1:44 pm

    maybe just get them to get 2 of all the peaces in place and then building it up to mroe peaces and more difficult paintings.

    and realllllyyy needs instructions:O

  4. abhilash on December 8th, 2007 1:52 pm

    The game is too hard, chirstmas couples was better than this one, but still hte tutorial was good :)

  5. Emanuele Feronato on December 8th, 2007 2:21 pm

    this is just a demo, the game will start much easier

  6. shiv1411 on December 8th, 2007 3:40 pm

    According to me this game will again get the uninteresting tag. It is more like a typical jigsaw puzzle game.

  7. shiv1411 on December 8th, 2007 3:43 pm

    Anyways, ur business tactics are more interesting than shuffling paintings.
    =))

  8. shiv1411 on December 8th, 2007 3:47 pm

    But it looks promising however

  9. Corey on December 9th, 2007 5:01 am

    Nice Tut! The game is easy.. just takes time to get used to and hard to understand at first.

Leave a Reply




Trackbacks

  1. Shuffle an image with BitmapData : Emanuele Feronato - italian geek and PROgrammer on December 7th, 2007 9:45 pm

    [...] Emanuele Feronato on 12/1/07 in Flash December 4th update: part 2 released December 7th update: part 3 [...]

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

    [...] 7th update: part 3 [...]

flash games company