Create a Flash ball game with visual frome above

computergeek67 · Create a Flash ball game with visual frome above

*Note: I did not make this tutorial. It is from Emanuele Feronato's tutorial called "Create a Flash ball game with visual from above"

This tutorial does not cover anything new (well, this first part of this tutorial) but shows you how to create a Flash ball game with a visual from above and some decent graphics.

In this tutorial I'll cover two types of gameplay: one with the ball that runs on a static stage, and one with a fixed ball with a scrolling stage. We'll see the pros and cons of both type of games.

First of all, let's start with the aim of the game: you have to take your ball to the exit of each level avoiding any kind of traps.

In this first part, there isn't any exit nor traps, just walkable tiles. So, at the moment the game will sound like "try not to fall off the tiles".

Game type 1: moving ball on a static stage
PLAIN TEXT
ACTIONSCRIPT:

Spoiler:

Code:

1.
level = new Array();
2.
_root.attachMovie("starz", "starz", 1);
3.
_root.createEmptyMovieClip("bricks", 2);
4.
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
5.
level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
6.
level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
7.
level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
8.
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
9.
level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
10.
level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
11.
level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
12.
level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
13.
level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
14.
level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
15.
for (y=0; y<=10; y++) {
16.
for (x=0; x<=11; x++) {
17.
if (level[y][x] == 1) {
18.
place_brick = bricks.attachMovie("brick", "brick_"+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*40+30, _y:y*40+30});
19.
}
20.
}
21.
}
22.
_root.attachMovie("ball", "ball", _root.getNextHighestDepth(), {_x:30, _y:30});
23.
ball.texture.setMask(ball.ball_itself);
24.
power = 0.4;
25.
yspeed = 0;
26.
xspeed = 0;
27.
friction = 0.99;
28.
ball.onEnterFrame = function() {
29.
if (Key.isDown(Key.LEFT)) {
30.
xspeed -= power;
31.
}
32.
if (Key.isDown(Key.RIGHT)) {
33.
xspeed += power;
34.
}
35.
if (Key.isDown(Key.UP)) {
36.
yspeed -= power;
37.
}
38.
if (Key.isDown(Key.DOWN)) {
39.
yspeed += power;
40.
}
41.
xspeed *= friction;
42.
yspeed *= friction;
43.
this._y += yspeed;
44.
this._x += xspeed;
45.
this.texture._y += yspeed;
46.
this.texture._x += xspeed;
47.
if (this.texture._x>53) {
48.
this.texture._x -= 63;
49.
}
50.
if (this.texture._x<-53) {
51.
this.texture._x += 63;
52.
}
53.
if (this.texture._y>53) {
54.
this.texture._y -= 63;
55.
}
56.
if (this.texture._y<-53) {
57.
this.texture._y += 63;
58.
}
59.
brick_x = Math.floor((this._x-10)/40);
60.
brick_y = Math.floor((this._y-10)/40);
61.
if (level[brick_y][brick_x]!=1) {
62.
this._x = 30;
63.
this._y = 30;
64.
xspeed = 0;
65.
yspeed = 0;
66.
}
67.
};

Does it look too long? I guess not, because you'll see how easy it can be if you follow all the steps.

Line 1: Declaration of level, the array that contains level data. Levels in this game will be tile based.

Line 2: Attaching the movie previously created and linkaged as starz. The space scene you can see in the background.

Line 3: Creating a new empty movie clip (bricks) that will contain level tiles.

Lines 4-14: Defining the mapping of the level. In this case, the ones mean a walkable tile while the zeros a hole. You cannot walk over holes.

Lines 15-21: Scanning all the array and attaching movieclips previously linkaged as brick into the bricks movieclip (the one created at line 3).

Line 22: Attaching the ball.

Line 23: Masking the ball texture.

Lines 24-27: Defining power, speed and friction as explained in here. Being a game with the visual from above, there is no gravity, and at the moment there is no wind too.

Line 28: This is the main function, to be called at every frame.

Lines 29-40: Adjusting ball x and y speed according to the key the player presses.

Lines 41-42: Applying friction to x and y speed.

Lines 43-44: Adjusting ball position according to its speed.

Lines 45-58: Adjusting texture position to simulate the rolling effect.

Line 59: Determining, according to ball x position, on wich x-tile we are. In the formula I involved the ball radius (10) and tile size (40).

Line 60: Same thing with y position.

Lines 61-66: If the position of the ball in level array is different than 1 (solid tile) then start the death sequence: the ball is moved ad its starting position and both x and y speeds are set to zero.

That's it! Wasn't it easy?

The second step is making the tiles bigger (otherwise the game may be frustrating) and have a larger, scrollable stage.

To have a scrollable background, the ball must remain fixed in the center of the stage.

Game type 2: static ball on a moving stage
PLAIN TEXT
ACTIONSCRIPT:

Spoiler:

Code:

1.
level = new Array();
2.
_root.attachMovie("starz", "starz", 1, {_x:-20, _y:-20});
3.
_root.createEmptyMovieClip("bricks", 2);
4.
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
5.
level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
6.
level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
7.
level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
8.
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
9.
level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
10.
level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
11.
level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
12.
level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
13.
level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
14.
level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
15.
for (y=0; y<=10; y++) {
16.
for (x=0; x<=11; x++) {
17.
if (level[y][x] == 1) {
18.
place_brick = bricks.attachMovie("brick", "brick_"+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});
19.
}
20.
}
21.
}
22.
_root.attachMovie("ball", "ball", _root.getNextHighestDepth(), {_x:240, _y:220});
23.
bricks._x = 240;
24.
bricks._y = 220;
25.
ball.texture.setMask(ball.ball_itself);
26.
power = 0.4;
27.
yspeed = 0;
28.
xspeed = 0;
29.
friction = 0.99;
30.
ball.onEnterFrame = function() {
31.
if (Key.isDown(Key.LEFT)) {
32.
xspeed -= power;
33.
}
34.
if (Key.isDown(Key.RIGHT)) {
35.
xspeed += power;
36.
}
37.
if (Key.isDown(Key.UP)) {
38.
yspeed -= power;
39.
}
40.
if (Key.isDown(Key.DOWN)) {
41.
yspeed += power;
42.
}
43.
xspeed *= friction;
44.
yspeed *= friction;
45.
bricks._y -= yspeed;
46.
bricks._x -= xspeed;
47.
starz._x = -20+((bricks._x-240)/10);
48.
starz._y = -20+((bricks._y-220)/10);
49.
this.texture._y += yspeed;
50.
this.texture._x += xspeed;
51.
if (this.texture._x>53) {
52.
this.texture._x -= 63;
53.
}
54.
if (this.texture._x<-53) {
55.
this.texture._x += 63;
56.
}
57.
if (this.texture._y>53) {
58.
this.texture._y -= 63;
59.
}
60.
if (this.texture._y<-53) {
61.
this.texture._y += 63;
62.
}
63.
brick_x = Math.floor((bricks._x-200)/80)*-1;
64.
brick_y = Math.floor((bricks._y-180)/80)*-1;
65.
if (level[brick_y][brick_x] != 1) {
66.
bricks._x = 240;
67.
bricks._y = 220;
68.
starz._x = -20;
69.
starz._y = -20;
70.
xspeed = 0;
71.
yspeed = 0;
72.
}
73.
};

Main changes are at lines 45-46 where I move the bricks movieclip instead of ball one, and 47-48 where I add a little parallax scrolling to background space scene.

Ball's position on the level, at lines 63-64, is no long determined by ball position but by bricks position, since the ball is fixed.

And this is where this tutorial ends.

*Note: I did not make this tutorial. It is from Emanuele Feronato's tutorial called "Create a Flash ball game with visual from above"