Create a Flash game like PixelField – part 2

September 5, 2008 • Actionscript 2, Flash, Game design by Emanuele Feronato • 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 ...
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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 3 comments

  1. xavi-v

    on September 10, 2008 at 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. Create a Flash game like PixelField - part 3 : Emanuele Feronato

    on September 11, 2008 at 11:59 am

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

  3. Jai

    on September 16, 2008 at 5:50 am

    It can’t be complete without the awesome music

< >