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

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

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

  • Thats really nice. I like it. :) I think the ball is quite to fast, but anyway; nice game!

  • Dean

    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!

  • Emanuele Feronato

    Nice ideas, Dean!

  • Fairlyn

    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

  • Emanuele Feronato

    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.

  • Fairlyn

    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 ?

  • Hamly

    Disappearing tiles, you can only move over them while visible.

  • Hamly

    ““plasma”/ghost tiles (cav only be passed when visible)”
    Sorry didn’t refresh my page before posting.

  • eblup

    hey good job. how did you make the ball look so kool. i want to change it into a pokeball!

  • eblup

    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.

  • Pebal

    Nice ;)

  • Emanuele Feronato

    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…

  • eblup

    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…

  • amorphis

    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!

  • eblup

    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.

  • lewis

    i have an idea for the new tiles
    a moving tile 1 that moves from side to side or up and down

  • Jerm

    you could make invisible tiles that could be a shortcut to the end

  • Jerm

    How about a checkpoint tile or some tiles with holes in them to make it harder.

  • Pingback: I HAD to do it… at Emanuele Feronato()

  • Jerm

    you could make a tile that moves in circles like an O

  • lewis

    good ideas!

  • flaming

    how about a tile that changes its properties every few seceonds?
    or a tile that changes your ball to a bowling ball or soemthing

  • Rick

    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?

  • Jake

    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

  • Jake

    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

  • Jake

    by the way i can spell i was just typing fast

  • Pingback: Create a Flash ball game with visual from above tutorial part 2 at Emanuele Feronato()

  • Thomas

    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.

  • jamie

    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.
    \|

  • jamie

    illistration error. but you get the basic idea

    ._ _ /|……….. _ _ _………….
    |_|_| |= jump up, |_|_|_|= jump down.
    …..\|…………………………

  • Dieter Galea

    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.

  • Jonathan

    Nice tutorial, but how can you make everything go away once it’s past the last level?

  • James

    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

  • tommy

    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

  • Pingback: Experiment: monetizing a Flash game - Part 6 : Emanuele Feronato - italian geek and PROgrammer()

  • Pingback: A Gem of Flash Game Tutorials | Newbie Game Programmers()

  • Pingback: Create a Flash ball game with visual from above tutorial part 4 : Emanuele Feronato - italian geek and PROgrammer()

  • Orava

    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.

  • Rick

    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?

  • Owais

    Vaaaaaaaaaaaaaaaallllllllllleeeeeeeeeentttttttt…….. Goooooooooooooooddddddddddddddd…

    I have no words……………
    Genious…………….man..
    Genious……
    thanks.

  • Pingback: Closing the blog : Emanuele Feronato - italian geek and PROgrammer()

  • Scott D. Purdie

    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

  • Pingback: Arch Games Webmasters - Arcade Webmasters » Game Developer tutorial List()

  • 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

  • DJ Pp

    I am the second one to rate 5 out of 5, it is that good !!!
    =D
    Cool Stuff !! LOL

  • DJ Pp

    how can i download Flash ???

  • Pingback: 35+ Flash Game Development Tutorials & FLA Files | Showcases | PelFusion.com()

  • Pingback: Cómo crear juegos en Flash, 20 formas de hacerlo | portafolio blog()

  • 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

  • Pingback: Create a Flash ball game with visual from above | Tutorial Collection()

  • Pingback: Roller – jQuery based game | YABIBO.COM - YOUR WEB WORLD()

  • Pingback: 20 Best Flash Game Tutorials to Create Your Own Flash Game | Dzine Blog()

  • Pingback: eagrapho » 20 Best Flash Game Tutorials to Create Your Own Flash Game()

  • Pingback: ?????20???Flash?? | ??????()

  • Pingback: Flash Game Development Tutorials & FLA Files()

  • MIND BLOWING PRASANTH

    HI
    what is the code for win the game or go to next level.. reply must.

  • Pingback: Como criar jogos online em flash | NR Host Blog()

  • andy

    nice tutorial and game!
    how about a tile that reeverses your movements?

  • Pingback: 8 bài h??ng d?n chuy?n PSD sang HTML | Blog thi?t k? Website()

  • 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; x53) {
    this.texture._x -= 63;
    }
    if (this.texture._x53) {
    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;
    }
    };

  • Great tutorial, it was very useful. An idea I got for a tile is a spike tile, similar to the lava tile, but it happens more quickly so you have to move fast. Another idea I got is that you could make enemies on some tiles and you have to shoot them down to get past them. Maybe you could even make some enemies to shoot you.

  • Jer

    Great tutorial, easy to understand and use. As for ideas… A checkpoint tile?
    Maybe even a seperate path that leads to a shop tile, when rolled on a screen will pop up, where you can buy upgrades, like decrease the balls speed, or something like that. As to get money for the shop… i dont know.

  • a flash lover

    If you are not the author of this selling file, i guess you should contact Envato for copyright violation:
    http://activeden.net/item/rolling-ball/451663

  • Great tutorial as always !

    For the tiles… Why not a steep slope tile ? Once the ball roll over this tile it accelerates a lot and can’t go back.

  • Pingback: 20 Frash Flash Game Tutorials For Flash Designer | 1step web design: Best for developer and designer()

  • Pavan

    My set of new types of tiles for this game
    wormhole teleports you randomly to any non empty tile
    fake tile looks like a real tile but is an empty tile in disguise
    moving tile moves in a defined path while stepped on
    invisible tile the name explains it

  • Pingback: Top 10 Game Tuts | Geeks Desk()

  • Pingback: 32 Best Action Script 3 Game Tutorials()

  • Pingback: ?????20???Flash????????????Flash?? » ?????()

  • THank you for this great and nice tuts but i m looking for fla files want to edit my games and link you have any source please share with me … regards Saira Nazma…

  • Pingback: Como criar jogos online em flash | Diretorio 10()

  • hi

    I know this is old but I was wondering, if anyone would know how to do an end code using this part? I wanna use this tutorial for a game but I need a new frame when you get to the end?