Talking about Ball Game game, and Flash.
August 3rd update: 2nd part released
December 13th update: 3rd part released
January 16th update: 4th part released
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.
Being a ball game, I suggest you all to read the basics for a ball game movement in this tutorial.
In this one, there is no gravity but the method is the same.
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
level = new Array();
_root.attachMovie("starz", "starz", 1);
_root.createEmptyMovieClip("bricks", 2);
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
for (y=0; y<=10; y++) {
for (x=0; x<=11; x++) {
if (level[y][x] == 1) {
place_brick = bricks.attachMovie("brick", "brick_"+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*40+30, _y:y*40+30});
}
}
}
_root.attachMovie("ball", "ball", _root.getNextHighestDepth(), {_x:30, _y:30});
ball.texture.setMask(ball.ball_itself);
power = 0.4;
yspeed = 0;
xspeed = 0;
friction = 0.99;
ball.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
xspeed -= power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed += power;
}
if (Key.isDown(Key.UP)) {
yspeed -= power;
}
if (Key.isDown(Key.DOWN)) {
yspeed += power;
}
xspeed *= friction;
yspeed *= friction;
this._y += yspeed;
this._x += xspeed;
this.texture._y += yspeed;
this.texture._x += xspeed;
if (this.texture._x>53) {
this.texture._x -= 63;
}
if (this.texture._x<-53) {
this.texture._x += 63;
}
if (this.texture._y>53) {
this.texture._y -= 63;
}
if (this.texture._y<-53) {
this.texture._y += 63;
}
brick_x = Math.floor((this._x-10)/40);
brick_y = Math.floor((this._y-10)/40);
if (level[brick_y][brick_x]!=1) {
this._x = 30;
this._y = 30;
xspeed = 0;
yspeed = 0;
}
};
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. I wrote a tutorial about managing the creation of tile based levels here.
Line 2: Attaching the movie previoulsy created and linkaged as starz. The space scene you can see in the background. I made the scene with the Photoshop action to create an outer space scene.
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). As said, refer to this tutorial for more information.
Line 22: Attaching the ball. I created the ball in the same way as in Creation of realistic spheres in Flash with textures and masking tutorial.
Line 23: Masking the ball texture as explained in the tutorial mentioned above. I strongly suggest you to read if you haven't done it yet, you will learn how to create proper textures for a ball and map them to it with masking.
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, as seen here (maybe one day I'll write an ebook and say "as seen in Chapter I" - cool).
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 as seen here.
Line 59: Determining, according to ball x position, on wich x-tile we are. I need to know the ball position inside the level array because in next tutorial I will introduce special tiles. 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?
This is the game
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 remail fixed in the center of the stage, and the level must move, like in this tutorial.
Game type 2: static ball on a moving stage
level = new Array();
_root.attachMovie("starz", "starz", 1, {_x:-20, _y:-20});
_root.createEmptyMovieClip("bricks", 2);
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
for (y=0; y<=10; y++) {
for (x=0; x<=11; x++) {
if (level[y][x] == 1) {
place_brick = bricks.attachMovie("brick", "brick_"+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});
}
}
}
_root.attachMovie("ball", "ball", _root.getNextHighestDepth(), {_x:240, _y:220});
bricks._x = 240;
bricks._y = 220;
ball.texture.setMask(ball.ball_itself);
power = 0.4;
yspeed = 0;
xspeed = 0;
friction = 0.99;
ball.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
xspeed -= power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed += power;
}
if (Key.isDown(Key.UP)) {
yspeed -= power;
}
if (Key.isDown(Key.DOWN)) {
yspeed += power;
}
xspeed *= friction;
yspeed *= friction;
bricks._y -= yspeed;
bricks._x -= xspeed;
starz._x = -20+((bricks._x-240)/10);
starz._y = -20+((bricks._y-220)/10);
this.texture._y += yspeed;
this.texture._x += xspeed;
if (this.texture._x>53) {
this.texture._x -= 63;
}
if (this.texture._x<-53) {
this.texture._x += 63;
}
if (this.texture._y>53) {
this.texture._y -= 63;
}
if (this.texture._y<-53) {
this.texture._y += 63;
}
brick_x = Math.floor((bricks._x-200)/80)*-1;
brick_y = Math.floor((bricks._y-180)/80)*-1;
if (level[brick_y][brick_x] != 1) {
bricks._x = 240;
bricks._y = 220;
starz._x = -20;
starz._y = -20;
xspeed = 0;
yspeed = 0;
}
};
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 the game. I prefer this version.
And this is where this tutorial ends.
Next step will be to create different types of tiles, each with its way to affect ball movement, and a level editor.
Now I need your creativity: suggest me a type of tile I haven't already planned and your name will be in the credits.
Planned tiles at the moment are:
Icy/Sand/etc tiles: Affect ball friction
Left/Right/Up/Down spinning tiles: Increasing left/right/up/down ball speed
Glass tiles: Disappear once the ball has rolled out of them
Crystal tiles: Disappear once the ball has rolled on them (so move fast!)
Tunnel tiles: You can't see the ball because it's under the tunnel...
Spinning tiles: Increase ball speed in the direction the ball rolled on them
Invert tiles: Ball controls are inverted while on these tiles
Teleport tiles: ... need an explication?
Exit tile: ...
Now it's up to you.
Take the source codes and give me feedback.
Read part 2
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.