Create a Flash game like PixelField – part 2

September 5, 2008 by Emanuele Feronato
Filed Under Actionscript 2, Flash, Game design • 3 Comments 

Here we are with the second part of Create a Flash game like PixelField.

In this step we’ll see how to draw a level.

The game is obviously a tile based one, and I like how tiles are a bit smaller than the real tile size, to leave a little gap between tiles and make a lighter layout.

Everything is explained in the source code, but it’s interesting to notice how lines 75-76 does the same thing as lines 39-46 of the previous script but satellite rotation seems delayed.

I also would like to thank Tony Pa (the author) for telling us friction and speed_scale values in order to make the gameplay close to the original game.

Another variable that can affect gameplay introduced in this version is satellite_distance, that determines the distance from the big square and the satellite.

Here it is the source code:

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

// size of the tile, in pixels
// notice that the size of the tile movieclip is less than 20 to leave a gap between tiles
// like in the original game
tilesize = 20;
// map generation (the most boring part, obviously)
map = new Array();
map[0] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
map[1] = [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1];
map[2] = [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1];
map[3] = [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1];
map[4] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[5] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[6] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[7] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[8] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[9] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[10] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[11] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[12] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[13] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[14] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[15] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
map[16] = [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1];
map[17] = [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1];
map[18] = [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1];
map[19] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
// player start position
start_x = 5;
start_y = 10;
// creation of the mc that will contain level tiles
_root.createEmptyMovieClip("level", _root.getNextHighestDepth());
// drawing the level
for (x=0; x<map.length; x++) {
	for (y=0; y<map[0].length; y++) {
		if (map[x][y]) {
			level.attachMovie("wall", "wall_"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:y*tilesize, _y:x*tilesize});
		}
	}
}
// friction, speed scale and satellite distance
// playing with these variables will affect gameplay
friction = 0.97;
speed_scale = 0.006;
satellite_distance = 50;
// movieclip where I will draw the four elastics
_root.createEmptyMovieClip("drawing", _root.getNextHighestDepth());
// big square, the "player"
_root.attachMovie("big_square", "big_square", _root.getNextHighestDepth());
//attaching the four satellites
for (x=0; x<=3; x++) {
	_root.attachMovie("square", "square_"+x, _root.getNextHighestDepth());
}
// placing the elements on stage
// the elements are the big square and the four satellites
place_elements();
// main function, to be executed at every frame
_root.onEnterFrame = function() {
	drawing.clear();
	drawing.lineStyle(1, 0x000000, 50);
	for (x=0; x<=3; x++) {
		// determining where SHOULD be the x-th satellite without elasticity
		should_be_x = big_square._x+satellite_distance*Math.cos((big_square._rotation+45+90*x)*0.0174532925);
		should_be_y = big_square._y+satellite_distance*Math.sin((big_square._rotation+45+90*x)*0.0174532925);
		// determining the distance between the point where it SOULD BE and where it IS
		dist_x = (should_be_x-_root["square_"+x]._x)*speed_scale;
		dist_y = (should_be_y-_root["square_"+x]._y)*speed_scale;
		// adding elasticity... refer to http://www.emanueleferonato.com/2007/09/01/controlling-a-ball-like-in-flash-elasticity-game-tutorial/
		_root["square_"+x].xspeed += dist_x;
		_root["square_"+x].yspeed += dist_y;
		_root["square_"+x].xspeed *= friction;
		_root["square_"+x].yspeed *= friction;
		_root["square_"+x]._x += _root["square_"+x].xspeed;
		_root["square_"+x]._y += _root["square_"+x].yspeed;
		_root["square_"+x]._rotation = big_square._rotation;
		drawing.moveTo(big_square._x, big_square._y);
		drawing.lineTo(_root["square_"+x]._x, _root["square_"+x]._y);
		// checking collision between the each satellite and the level
		if (level.hitTest(_root["square_"+x]._x, _root["square_"+x]._y, true)) {
			// if true, then redraw the elements
			place_elements();
		}
	}
	big_square._rotation += 2;
};
// moving the big square if the player pressed mouse button
_root.onMouseDown = function() {
	big_square._x = _root._xmouse;
	big_square._y = _root._ymouse;
};
// function used to place emlements on stage
// unlike the previous version, the satellites start without elastic effect
function place_elements() {
	for (x=0; x<=3; x++) {
		big_square._x = start_x*tilesize;
		big_square._y = start_y*tilesize;
		_root["square_"+x]._x = big_square._x+satellite_distance*Math.cos((big_square._rotation+45+90*x)*0.0174532925);
		_root["square_"+x]._y = big_square._y+satellite_distance*Math.sin((big_square._rotation+45+90*x)*0.0174532925);
		_root["square_"+x].xspeed = 0;
		_root["square_"+x].yspeed = 0;
	}
}

And here it is the result

Download the source code.

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

3 Responses to “Create a Flash game like PixelField – part 2”

  1. xavi-v on September 10th, 2008 6:22 pm

    you know how there are dynamic lines to the little squares. would anyone know how to add a curve to that so that it looks like it is always sagging down. I want to make a flame thrower for a game that im making and i want to add a hose from the gun to the tank of napalm.
    please help me someone…

  2. Jai on September 16th, 2008 5:50 am

    It can’t be complete without the awesome music

Leave a Reply




Trackbacks

  1. Create a Flash game like PixelField - part 3 : Emanuele Feronato on September 11th, 2008 11:59 am

    [...] source code commented as usual, be sure to read part 2 before jumping into this [...]

flash games company