Create a Flash ball game with visual from above tutorial

Posted by Emanuele Feronato on 06/14/07 in 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

PLAIN TEXT
ACTIONSCRIPT:
  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. 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

PLAIN TEXT
ACTIONSCRIPT:
  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 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

If you liked this post buy me a beer (or two)

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

del.icio.us tag this | permalink | trackback url

43 Comment(s)

  1. Frederik J | Jun 14, 2007 | Reply

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

  2. Dean | Jun 14, 2007 | Reply

    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!

  3. Emanuele Feronato | Jun 14, 2007 | Reply

    Nice ideas, Dean!

  4. Fairlyn | Jun 14, 2007 | Reply

    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

  5. Emanuele Feronato | Jun 14, 2007 | Reply

    Good! You guys have lot of ideas… hope we’ll get to Newgrounds frontpage…

  6. Michael | Jun 14, 2007 | Reply

    Nice game, and it’s even cooler when you understand how it works, lol.

    I really like Dean’s ideas. :)

    Once again, great tutorial.

  7. Frederik J | Jun 14, 2007 | Reply

    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.

  8. Fairlyn | Jun 14, 2007 | Reply

    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 ?

  9. Hamly | Jun 14, 2007 | Reply

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

  10. Hamly | Jun 14, 2007 | Reply

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

  11. eblup | Jun 15, 2007 | Reply

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

  12. eblup | Jun 15, 2007 | Reply

    hey i cant open youre sourse file what is wrong

  13. djmashedman | Jun 15, 2007 | Reply

    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.

  14. Pebal | Jun 15, 2007 | Reply

    Nice ;)

  15. Emanuele Feronato | Jun 15, 2007 | Reply

    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…

  16. eblup | Jun 16, 2007 | Reply

    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…

  17. amorphis | Jun 20, 2007 | Reply

    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!

  18. eblup | Jun 21, 2007 | Reply

    hey when is youre next tut.
    can youre next tut be how to make a above view train follow a track

  19. djmashedman | Jun 21, 2007 | Reply

    amorphis - why are you doing a school project on something you do not know much about?
    Pretty stupid, if you ask me.

  20. lewis | Jun 21, 2007 | Reply

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

  21. Jerm | Jun 23, 2007 | Reply

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

  22. Jerm | Jun 23, 2007 | Reply

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

  23. Jerm | Jun 27, 2007 | Reply

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

  24. lewis | Jun 29, 2007 | Reply

    good ideas!

  25. flaming | Jul 14, 2007 | Reply

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

  26. Rick | Jul 20, 2007 | Reply

    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 ;)

  27. miff | Jul 30, 2007 | Reply

    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?

  28. Jake | Aug 2, 2007 | Reply

    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

  29. Jake | Aug 2, 2007 | Reply

    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

  30. Jake | Aug 2, 2007 | Reply

    by the way i can spell i was just typing fast

  31. Thomas | Aug 16, 2007 | Reply

    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.

  32. jamie | Aug 17, 2007 | Reply

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

  33. jamie | Aug 17, 2007 | Reply

    illistration error. but you get the basic idea

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

  34. Dieter Galea | Aug 23, 2007 | Reply

    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

  35. computergeek67 | Sep 17, 2007 | Reply

    Hey, Emanuele, can I post this tutorial on my tutorial forum? I’ll give you credit, of course.

  36. Jonathan | Sep 18, 2007 | Reply

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

  37. James | Sep 22, 2007 | Reply

    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

  38. tommy | Nov 12, 2007 | Reply

    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

  39. Orava | Feb 1, 2008 | Reply

    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.

  40. Rick | Feb 14, 2008 | Reply

    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?

  41. Owais | Mar 8, 2008 | Reply

    Vaaaaaaaaaaaaaaaallllllllllleeeeeeeeeentttttttt…….. Goooooooooooooooddddddddddddddd…

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

  42. Scott D. Purdie | May 6, 2008 | Reply

    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

  43. gregory | Jun 21, 2008 | Reply

    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

7 Trackback(s)

  1. Jun 24, 2007: I HAD to do it… at Emanuele Feronato
  2. Aug 3, 2007: Create a Flash ball game with visual from above tutorial part 2 at Emanuele Feronato
  3. Dec 5, 2007: Experiment: monetizing a Flash game - Part 6 : Emanuele Feronato - italian geek and PROgrammer
  4. Dec 17, 2007: A Gem of Flash Game Tutorials | Newbie Game Programmers
  5. Jan 16, 2008: Create a Flash ball game with visual from above tutorial part 4 : Emanuele Feronato - italian geek and PROgrammer
  6. Apr 1, 2008: Closing the blog : Emanuele Feronato - italian geek and PROgrammer
  7. May 13, 2008: Arch Games Webmasters - Arcade Webmasters » Game Developer tutorial List

Post a Comment