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
They can be easily customized to meet the unique requirements of your project.
3 Responses
Leave a Reply
TUTORIAL SERIES:
- Una guida completa al gioco del poker online e una selezione dei migliori casino online.
- casino online
- migliori casino online
- BlackJack online
- casinò online


(13 votes, average: 3.62 out of 5)

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…
[...] source code commented as usual, be sure to read part 2 before jumping into this [...]
It can’t be complete without the awesome music