Flash game creation tutorial – part 6a

Welcome with the 6th part.
I have to warn you, things start getting terribly serious from now on.

First, if you haven’t done it yet, read all steps from 1st to 5th, then here we go.

Time to make a small, still unfinished, but playable game.

It’s called Kira in a Bubble.

Kira in a bubble

Play it some minutes, then come back and read the tutorial. For the (few) ones that will read until the end (or will jump straight to the end), well… a little surprise.

Before explaining how I did it, let me tell you WHAT I did.

Game features:

  • Random stuff generation (fruits or “bombs”)
  • Every kind of fruit has its score
  • Bonus points if you grab a fruit at high speed
  • When you die it’s not Game Over but you lose a life
  • When you die you are invincible for a few seconds (like in “real” acrades)
  • Well… play some more and watch it yourself… :)

The only interesting frame is the second, where the entire game engine resides. Please note that the entire game is about 180 lines… brackets included!! That’s why I love Flash, making game has never been so much fun (I remember a song… do you?).

Well, let me show you the actionscript

Line 1: I attach the “kira” object on the stage. Unlike in previous tutorial, I have no objects on the stage, I create them “on the fly” in this way. Why? Because I think it keeps the script cleaner. In order to do this, you need to select your object in the library window, right-click then “properties”, then check “Export for Actionscript” and give it a name (in my case, kira).
Look at these two screenshots:

They should explain the thing.

Line 2: Same thing for the ground

Lines 3-4: Position of the ground in the center of the game area

Lines 5-14: These are the definitions of hero’s (Kira’s) gravity, speed… as seen on previous tutorials. The only difference is that now they are declared on the main frame. Notice I have to specify Kira’s x and y position too, as I didn’t drag/dropped her on the scene like I did on previous tutorials

Lines 16-21: Some other declarations, we’ll see them in depth later on this tutorial

Now we jump to lines 110-166 because the explanation is simpler if I start from here.

Line 110: Function executed every time kira enters in a frame

Lines 111-113: If the alpha (transparency) of kira is less than 100 (fully opaque), then increment the alpha of 0.5. If you played the game, you should remember that Kira is a bit transparent when she “dies”. You’ll see later how transparency affects invulnerability.

Lines 114-117: If bubbles variable is less than 10 (the maximum amout of items – fruits or bombs – I want on the game at the same time) and a random number between 1 and 50 is equal to 1 (to give some randomness to the falling objects), then calls the bubble_on_stage (which you’ll see it will put an item on the stage) function and increments bubbles variable (because an item will be added).

Lines 118-130: Same old movement routines you havre already seen on previous tutorials

Lines 131-135: According to xspeed (horizontal speed) value, I show a frame of kira facing left or facing right.

Line 136: Already seen on previous tutorials

Lines 137-148: I want to put a limit to kira’s x and y speed. So if x or y speed are greater than 15, I will cap speed to 15 (or -15, that means the same speed in the opposite direction).

Lines 149-150: Already seen

Lines 151-162: This time I want kira’s movement to “wrap around” the stage, so if kira leaves the stage on the left, she will appear from the right… same thing if she leaves from the top, she appears from the bottom… and so on.

Line 163: This is the ground collision test. If you remember previous tutorials, you will know that the collision test with the ground was made only checking the center of the player… I mean the (_x,_y) position. This time I wanted something more accurate so I am checking 4 collision points. It’s not the best way to do it, but it’s another way to check collisions.

Line 164: If the previous collision test is true, Kira dies (oh, nooo!!!) and I call the function die

The function die() goes from line 167 to line 181 and determines the actions to do when Kira dies

Line 168: Checks if kira’s alpha is 100. Do you remember? If kira’s alpha is 100 means that is vulnerable, so she can die. If kira’s alpha is less than 100, it means that she’s still invulnerable because she died recently. You can see that if kira’s alpha is less than 100, the whole function is not executed (and kira does not die).

Lines 169-171: Attachs the explosion object on the stage and puts its center to kira’s center.

Line 172: Decrement kira’s lives. She died, so she lost a life.

Lines 173-177: Checks if kira’s lives reached zero. If true, removes kira and ground ojects from the stage and goes to frame 3 (the game over screen).

Line 178: Updates the lives text on the stage

Line 179: Sets kira’s alpha to 10. Now she is invulnerable.

Ok, it’s all for today. Next time I will explain the rest of the script, meanwhile try to understand by yourself how it’s done.

This is the complete source code, have a good time and give me feedback.

  • Hey, is there a chance you could publish those sources as a flashdevelop project?

    http://osflash.org/flashdevelop

    I am interested in a source only build, which means, no mandatory use of designers.

    Is there any such chance?:D

    cheers

  • thanks for this lesson but …… it’s very hard !!!

  • WOW

    Thanks, but I will stick with easier tutorials for now. That seems to hard for me at the moment.

  • Tony

    Wonderfull!!

  • Confuzled…

    I’m confused…
    The other tutorials were much simpler to understand, but this one was too confusing for me! Could you explain it a bit better? Please?

  • abhilash

    this was a cool tutorial.

  • Emanuele Feronato

    Confuzled: At the end of the second part, I’ll cover in depth some features I only introduced here.
    Stay tuned

  • Brilliant, looking to get a few flash games for my forum http://www.ne-forum.co.uk maybe try and get started on some next week. Thanks for the examples!

  • abhilash

    uuumm.. I think this was very hard.I should make this tutorial a bit in more detail.
    And when will be the making games like line rider next part will be released?

  • abhilash

    sorry but accidently I wrote
    “I should make this tutorial a bit in more detail.”
    but i meant to say
    “you should make this tutorial a bit in more detail.”

  • afsal

    verry good

  • Tenzin

    Interesting but pretty hard to understand….!

  • I have a question, I’m trying to make a flash game, and each level the “hero” is supposed to collect so many stars and then go to the next, and I’m trying to make it so when all the stars are collected a door will appear and when you go to that you go to the next level. The only part I’m having problem with is I can’t make the door not appear when the page loads and appear only when you get all the stars (well mainly I don’t know how to have the door not appear at first).

    Pleae help!

  • Cook

    When will you be making the tutorial 6B which explains the code from lines 22 – 109? I understand most of it and I have found your tutorials extremely useful thus far. Your work is fantastic! Thank you.

  • jayj

    very confusing. you could split it into different section and introduce all the things first

  • Pingback: Flash game creation tutorial - part 5.1 at Emanuele Feronato()

  • Thomas

    Nice tutorial. Only thing I don’t get is how you got the collision to work for all the different pieces of the ground even though they are in one movie clip. When I tried doing this I ended up with the collision checking just being a big rectangle covering all of the ground objects and all the area between them. If you know what I mean can someone help?
    Thanks

  • hello, i think it was great (even though i gave up on it)and…uhmm, how about u…uhm kind of, sort of, make a video on it so I know egg-SACTLY wat you mean
    thanks,
    (call me)

  • Mats

    Awsome tutorial, but i dont think i’m at that levle yett so i skeep back to the earlier tutorials, thansk for shaering your knowledg to us.

  • Stefan

    best web site ever!!!!

  • Grifo

    Emanuele which software would you recommend for serving a 2d mmo flash game? (java socketserver-flash conexion software, or any other maybe if you know any better)
    Thanks in advance.

  • Mathew

    So….first of all how do you make the game?

  • I have been trying to make a wall where the character (or hero) would just stop at it. I dont want it to respawn. I would appreiate an answer but i won’t mind if noone answers it

  • abhilash

    its wierd but the first time I tried this but could not get a thing to work,but after reading the other tuts(5.1,5.2..) I once again tried and it worked like magic but only one thing isn’t working, when the ball touches the friut(or bomb, nothing happens can u tell what we have to do after making different friuts on different frames??
    please help!!
    THANX
    Abhilash

  • need help real quick

    I want to know how I can attach new objects of my own. I tried but i dont know what to put for the 8000:
    _root.attachMovie(“kira”, “kira”, 8000, {_x:234, _y:159});
    can you explain what that number is for? plzz?

  • need help real quick

    K i tried this code:

    _root.attachMovie(“life”, “life”, 14000, {_x:280, _y:175});

    and when i started the game the object “life” just moved with kira, or player in my case.

    can you help me plz?

  • josh

    hey i was wondering if u could give me the actionscripting for the screen rap thaks

  • Pilz

    hy! nice work! i understand the most of it, but i have a problem with the “number declaration”:

    **Warning** Scene=Scene 1, Layer=Layer 1, Frame=1: Line 16: Case-insensitive identifier ‘number’ will obscure built-in object ‘Number’.
    number = 0;

    …thats what the “syntax check” sad… what did i wrong? and how can i fix it?

    and whats aboud the 6b tut? did u finished it?

    ok, good work @ all… best tuts ever! keep up the good work!

  • Pilz

    hi emanuele, its me again

    i have another problem that i can´t fix…
    when “kira” hit a “fruit” the “score” that should shown only sad: _level0.score501.score … if she hits an other fruit it disaper: _level0.score502.score … and so on…

    it would be nice if u cold explaining the hole “function score” between line 22 and 82…

    i think its the hardest part in this tut (for me^^)

    ps: i can´t initiate the source in flash mx
    is it broken?

  • how can i create chat with flash

  • boss

    Excellent definitions.
    send me more,how to be an animator in flash.
    send me the tricks in flash.