Create a Flash ball game with visual from above tutorial
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
They can be easily customized to meet the unique requirements of your project.
56 Responses to “Create a Flash ball game with visual from above tutorial”
Leave a Reply
Trackbacks
-
I HAD to do it… at Emanuele Feronato on
June 24th, 2007 1:37 am
[...] This is the comment I received from amorphis some days ago about the creation of a flash ball game with visual from above. [...]
-
Create a Flash ball game with visual from above tutorial part 2 at Emanuele Feronato on
August 3rd, 2007 6:33 pm
[...] I suggest you to read part 1 before reading this post. Here I will start adding features to our game as said in the I Had to do it post. [...]
-
Experiment: monetizing a Flash game - Part 6 : Emanuele Feronato - italian geek and PROgrammer on
December 5th, 2007 2:37 pm
[...] don’t know at this time if this will work or not… I know of a clone of my Create a Flash ball game with visual from above tutorial sold for $400 without buying me a beer so maybe it’s a bad idea… but come on! An [...]
-
A Gem of Flash Game Tutorials | Newbie Game Programmers on
December 17th, 2007 4:24 pm
[...] Create a Flash ball game with visual from above tutorial – Part 1 :: Part 2 :: Part 3 [...]
-
Create a Flash ball game with visual from above tutorial part 4 : Emanuele Feronato - italian geek and PROgrammer on
January 16th, 2008 11:06 pm
[...] steps 1, 2 and 3 before [...]
-
Closing the blog : Emanuele Feronato - italian geek and PROgrammer on
April 1st, 2008 1:32 pm
[...] one of the biggest software house in the world saying that Tileball and its clones generated from this tutorial have the same concept of a next-to-be-released triple-A [...]
- Arch Games Webmasters - Arcade Webmasters » Game Developer tutorial List on May 13th, 2008 7:33 pm
-
35+ Flash Game Development Tutorials & FLA Files | Showcases | PelFusion.com on
April 28th, 2009 8:37 am
[...] 34. Flash Ball Game [...]
-
Cómo crear juegos en Flash, 20 formas de hacerlo | portafolio blog on
June 11th, 2009 9:51 pm
[...] de la gallina y los huevos en Flash. 14. Como crear un juego de una mini carrera en Flash. 15. Como hacer un juego de bola escurridiza en Flash. 16. Como hacer un juego de pelea en Flash. 17. Como crear un juego de rompecabezas sencillo en [...]
-
Create a Flash ball game with visual from above | Tutorial Collection on
July 1st, 2009 5:57 am
[...] View Tutorial No Comment var addthis_pub="izwan00"; BOOKMARK This entry was posted on Wednesday, July 1st, 2009 at 9:27 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
Posts
- Rick Triqui: my first PlayCrafter game
- Prototype of a Flash game like Meeblings
- Games for the game developers!
- The art of debugging
- How to embed a text file in Flash
- Create a Flash game in minutes with PlayCrafter
- Upgrade your Flash CS4 to 10.0.2
- Play Mazeroll, my latest Box2D game
- Triqui MochiAds Arcade plugin for WordPress Released!!
- The MochiAds funnel
- Flash game creation tutorial - part 1
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Create a flash draw game like Line Rider or others - part 1
- Create a Flash Racing Game Tutorial
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash artillery game - step 1
- Create a flash draw game like Line Rider or others - part 5
- Flash game creation tutorial – part 5.2




(4.9 out of 5) - Flash game creation tutorial – part 3




(4.86 out of 5) - Creation of a platform game with Flash – step 2




(4.84 out of 5) - Create a survival horror game in Flash tutorial – part 1




(4.82 out of 5) - Create a flash artillery game – step 1




(4.82 out of 5) - Create a Flash Racing Game Tutorial




(4.8 out of 5) - Create a flash artillery game – step 2




(4.75 out of 5) - New tile based platform engine – part 6 – ladders




(4.74 out of 5) - Flash game creation tutorial – part 2




(4.73 out of 5) - The experiment – one year later




(4.7 out of 5)


Thats really nice. I like it. :) I think the ball is quite to fast, but anyway; nice game!
Nice tutorial. I always find your work helpful, and it has inspired me to start developing my own game. Thanks a million!! How about a trampoline tile that bounces you across a gap to another tile, or picking up a bonus that puts rails around the maze for a period of time. Great job as usual & thanks for the tutorials!
Nice ideas, Dean!
how about a “switch” tile that activates a few other tiles for a few seconds
moving tiles (you didn’t have these right ?)
slippery tile (the ball continues in the specified direction and don’t react to input (is this what you meant by ice tiles ?))
“tutorial” tiles (displays a message when rolled over)
seems interesting so far
Good! You guys have lot of ideas… hope we’ll get to Newgrounds frontpage…
Nice game, and it’s even cooler when you understand how it works, lol.
I really like Dean’s ideas. :)
Once again, great tutorial.
I got one :)
A lava tile. That shines every 3 seconds. If you hit it, shining, you’ll die!
And a tile or bonus, that gives you one ekstra life.
windmill (pushes the player away from it when hre is in one of the adjacent tiles)
inviciple tiles (reflections show where they are every x seconds)
“plasma”/ghost tiles (cav only be passed when visible)
how about unlockable balls ?
helium ball(beach ball ?) (can be off cource for x second before being game over) or (stays afloat after being pushed away by the windmill(could be useful for secret/bonus areas)) should not make the glass tiles break
iron ball (is immune to the windmill, but can’t pass the glass tile due to heawy weight)
“enemy” balls trying to push you off ?
cannon/laser shooting at you trying to force you off the tiles
laser blockades that have to be shut off ?
Disappearing tiles, you can only move over them while visible.
““plasmaâ€/ghost tiles (cav only be passed when visible)”
Sorry didn’t refresh my page before posting.
hey good job. how did you make the ball look so kool. i want to change it into a pokeball!
hey i cant open youre sourse file what is wrong
He made a tutorial on how to make a ball look like that.
As for tiles -
bouncy tile – basically bounces your ball and makes it go all over the place.
speed tile – speeds up/slows down your tile
extra lives tile – in a hard to reach place, ie.at the end of a very windy and small bit.
‘bigger tile’/smaller ball tile – again, in a hard to reach place.
The latter could also be a tile that either -
makes your ball smaller or tiles bigger
OR
makes your ball bigger or tiles smaller.
But it could be random, and sometimes compulsory.
And you could always have smaller tile tiles just before a tricky bit, just to be mean.
Nice ;)
At this time I coded the following tiles:
Direction spin tiles: tiles that spins the ball in one of the four directions
Spin tile: Spins the ball in the direction the ball already has
Vanishing tile: When the ball rolls over, the tile starts vanishing until it disappears
Passive tile: The ball does not react to input and there is no friction
Beam tiles: Every 3 seconds they are letal for the ball for 1 second
I think I’ll publish the tut very soon, just let me add about 10 more tile types…
i made a pokeball! it is amasing. o and ideas for tiles ummm…
moveing: the tiles move side to side…
spining: the tiles Spin around…
moveing and spining: the tiles spin and move side to side…
Could you just pleaseeeeeee upload some of the new types of tiles you have coded in order to see how do you place them among the normal ones and how do you make the ball interact with them because I am building a project for school and I am really short of time, and believe me very very very desperate :(((((((! So, if you could just give one example how to create the “weird” tile, how to place it among the other normal ones and how to make the ball interact with it I would be very very very grateful!!!!!!!
Thank you very much in front!
P.S. You are a live savior if you do me this favor!
hey when is youre next tut.
can youre next tut be how to make a above view train follow a track
amorphis – why are you doing a school project on something you do not know much about?
Pretty stupid, if you ask me.
i have an idea for the new tiles
a moving tile 1 that moves from side to side or up and down
you could make invisible tiles that could be a shortcut to the end
How about a checkpoint tile or some tiles with holes in them to make it harder.
you could make a tile that moves in circles like an O
good ideas!
how about a tile that changes its properties every few seceonds?
or a tile that changes your ball to a bowling ball or soemthing
Looks great but I’m also unable to extract the zip file with the source. Could you check and upload the source again in case the file was corrupted or something? thanks
(and great tutorial as usual ;)
First, you are great person really. And sorry for my bed English.
I’m live in Serbia, and really love to spare my time with AS and Flash.
I download your tiled ball i do some mod to your code to look like this http://www.borcafe.com/tileball2.swf , your and mine work is http://www.borcafe.com/tileball2.rar.
Send me a email iv been interesting for OOP in flash about year, so tell me the my direction ok?
how about a button block that you have to go down a long passage to push then go back and you can pass a laser block or something, so the buton disables the laser
or a checkpoint block so peopl edont get too frusterated playing this game, because these types of games can get very frusterating if someone keeps dying in the same spot or a pickup that once the person dies it will place them back in the center of the block they died on and they are completely stopped
by the way i can spell i was just typing fast
I think a good think would to have a sort of “falling off” animation, so it doesn’t just immediately go back to the start.
how about a jump tile that acts as a draw bridge. when the tile is up(one ends visualy larger) you can jump a gap to another set of tiles.
_ _ /| _ _ _
|_|_| |= jump up, |_|_|_|= jump down.
\|
illistration error. but you get the basic idea
._ _ /|……….. _ _ _………….
|_|_| |= jump up, |_|_|_|= jump down.
…..\|…………………………
hey, thanks for the tutorial, how can i make a function, that when the ball goes on the last tile, a new ‘map’ of bricks will come? kind of lvl 2
Hey, Emanuele, can I post this tutorial on my tutorial forum? I’ll give you credit, of course.
Nice tutorial, but how can you make everything go away once it’s past the last level?
nice man i love ur other one the tunnel thingy anyways how bout
death tile: kills u when u roll on it
triangle tiles:half a square
hexagon tiles:hexagon tiles
wall tiles:tile with a wall on any sides
gift/item tiles:give u a random/fixed powerup!
Powerups:
Shield:Protects u from a death tile
Slow:slows u down for a while
Fast:speeds u up for a while
Invert:reverses ur directions
wind:wind pushes you in a direction
hey i got a quistion how do u make it to where the ball rolles like that when u roll its like ur relly rolling a ball how to i do that with just basic onClipEvent stuff
oh and i got an idea for a tile
you should make a level where theres a big gap
in the maze and there 1 tile that moves from the right side teh the gap letting u go ferther in the maze and then u have to go on it win its on ur side to go across but the right side of the gap tile should be doing somthing that will make the ball die so u have to waint on time to go on the moving tile
im just guessin things
but anyways i would really like to know how to make the ball roll like its a rolling ball
thanks
Is it possible to plant buttons to this?
i’m doing a RPG guide for a game and i just need to make it somehow moveable (20 classes and no space for them all in single Non-moving screen)
i got a movieclip and only a movieclip moving…
the buttons just stayed there…
(and if possible without the array thing, i don’t get it at all ;S)
thanks for help.
QUESTION:
(Hello there, great tut btw)
If I use the code;
…
place_brick = bricks.attachMovie(”brick”, “brick_”+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*40+30, _y:y*40+30});
…
to place tile movieclips, Im successful in placing the tiles…
but, what name do I use afterwards for each tile if I want to affect the movieclip, such as changing the alpha of a specific tile or use a .gotoAndPlay to start an animation inside that clip?
Vaaaaaaaaaaaaaaaallllllllllleeeeeeeeeentttttttt…….. Goooooooooooooooddddddddddddddd…
I have no words……………
Genious…………….man..
Genious……
thanks.
Hi Really nice tutorial but i had a question about the code. The line
brick_x = Math.floor((bricks._x-200)/80)*-1;
I was wondering how do you know to use those values, 200, 80 and -1? Sorry if its a silly question.
Thanks
i want to create a ball game bacause in my life ive expierienced many ball games and i liked them all like the two versions of hamster bal, gyroball, metal ball, and across the line ball
I am the second one to rate 5 out of 5, it is that good !!!
=D
Cool Stuff !! LOL
how can i download Flash ???
Here is my list of ideas you could make:
how about an explosion tile that explodes you or a upgrade/downgrade tile that when you roll over it it makes you bigger or smaller, or a mystery tile that does something random, or a time bomb tile that when you roll over it it lays a time bomb on all the tiles you hit for ten seconds then explodes, or an invisible tile that makes you invisible for 3 seconds, or a trap tile that when you roll over it guns start firing at you