Flash game creation tutorial - part 6a

January 24, 2007 by Emanuele Feronato
Filed Under Flash •  

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:

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

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("kira", "kira", 10000);
  2. _root.attachMovie("ground", "ground", 10002);
  3. ground._x = 275;
  4. ground._y = 200;
  5. kira.yspeed = 0;
  6. kira.yspeed = 0;
  7. kira.xspeed = 0;
  8. kira.wind = 0.00;
  9. kira.power = 0.65;
  10. kira.gravity = 0.1;
  11. kira.upconstant = 0.75;
  12. kira.friction = 0.99;
  13. kira._x = 20;
  14. kira._y = 20;
  15. kira.bubbles = 0;
  16. number = 0;
  17. scores = 0;
  18. bcollected = 0;
  19. bmissed = 0;
  20. bscore = 0;
  21. blives = 3;
  22. function bubble_on_stage() {
  23.     _root.number++;
  24.     _root.number = _root.number%100;
  25.     _root.attachMovie('item', 'item'+_root.number, _root.number);
  26.     _root['item'+_root.number]._x = random(500)+25;
  27.     _root['item'+_root.number].speed = Math.random()*2;
  28.     kind_of_item = random(1320)+1;
  29.     if (kind_of_item<1320) {
  30.         frame = 9;
  31.     }
  32.     if (kind_of_item<660) {
  33.         frame = 8;
  34.     }
  35.     if (kind_of_item<595) {
  36.         frame = 7;
  37.     }
  38.     if (kind_of_item<525) {
  39.         frame = 6;
  40.     }
  41.     if (kind_of_item<450) {
  42.         frame = 5;
  43.     }
  44.     if (kind_of_item<370) {
  45.         frame = 4;
  46.     }
  47.     if (kind_of_item<285) {
  48.         frame = 3;
  49.     }
  50.     if (kind_of_item<195) {
  51.         frame = 2;
  52.     }
  53.     if (kind_of_item<100) {
  54.         frame = 1;
  55.     }
  56.     _root['item'+_root.number].gotoAndStop(frame);
  57.     _root['item'+_root.number].onEnterFrame = function() {
  58.         this._y += this.speed+1;
  59.         if (this._y>416) {
  60.             if (this._currentframe<9) {
  61.                 _root.bmissed++;
  62.                 _root.missed.text = "Bubbles missed: "+_root.bmissed;
  63.                 if (_root.bmissed>10) {
  64.                     _root.gotoAndStop(3);
  65.                 }
  66.             }
  67.             unloadMovie(this);
  68.             _root.kira.bubbles--;
  69.         }
  70.         if (this.hit.hitTest(_root.kira.hit)) {
  71.             unloadMovie(this);
  72.             _root.kira.bubbles--;
  73.             if (this._currentframe == 9) {
  74.                 die();
  75.             } else {
  76.                 _root.bcollected++;
  77.                 _root.collected.text = "Bubbles collected: "+_root.bcollected;
  78.                 score(this._x, this._y, this._currentframe);
  79.             }
  80.         }
  81.     };
  82. }
  83. function score(x, y, number) {
  84.     speed = Math.sqrt((_root.kira.yspeed*_root.kira.yspeed)+(_root.kira.xspeed*_root.kira.xspeed));
  85.     bonus = 1;
  86.     if (speed>10) {
  87.         bonus = 2;
  88.     }
  89.     _root.scores++;
  90.     _root.scores = _root.scores%100;
  91.     _root.scores_item = 500+_root.scores;
  92.     _root.attachMovie('score', 'score'+_root.scores_item, _root.scores_item);
  93.     _root['score'+_root.scores_item]._x = x;
  94.     _root['score'+_root.scores_item]._y = y;
  95.     _root['score'+_root.scores_item].count = 0;
  96.     _root['score'+_root.scores_item].points.text = 100+number*10;
  97.     if (bonus == 2) {
  98.         _root['score'+_root.scores_item].points.text = (2*(100+number*10))+"\nSPEED BONUS";
  99.     }
  100.     _root.bscore = _root.bscore+(100+number*10)*bonus;
  101.     _root.scoretxt.text = "Score: "+_root.bscore;
  102.     _root['score'+_root.scores_item].onEnterFrame = function() {
  103.         this.count++;
  104.         this._y -= 0.5;
  105.         if (this.count>50) {
  106.             unloadMovie(this);
  107.         }
  108.     };
  109. }
  110. kira.onEnterFrame = function() {
  111.     if (this._alpha<100) {
  112.         this._alpha += 0.5;
  113.     }
  114.     if ((this.bubbles<10) and (random(50) == 1)) {
  115.         bubble_on_stage();
  116.         this.bubbles++;
  117.     }
  118.     if (Key.isDown(Key.LEFT)) {
  119.         this.xspeed -= this.power;
  120.     }
  121.     if (Key.isDown(Key.RIGHT)) {
  122.         this.xspeed += this.power;
  123.     }
  124.     if (Key.isDown(Key.UP)) {
  125.         this.yspeed = this.yspeed-this.power*this.upconstant;
  126.     }
  127.     if (Key.isDown(Key.DOWN)) {
  128.         this.yspeed = this.yspeed+this.power*this.upconstant;
  129.     }
  130.     this.xspeed = (this.xspeed+this.wind)*this.friction;
  131.     if (this.xspeed>0) {
  132.         this.kira.gotoAndStop(1);
  133.     } else {
  134.         this.kira.gotoAndStop(2);
  135.     }
  136.     this.yspeed = this.yspeed+this.gravity;
  137.     if (this.yspeed>15) {
  138.         this.yspeed = 15;
  139.     }
  140.     if (this.xspeed>15) {
  141.         this.xspeed = 15;
  142.     }
  143.     if (this.yspeed<-15) {
  144.         this.yspeed = -15;
  145.     }
  146.     if (this.xspeed<-15) {
  147.         this.xspeed = -15;
  148.     }
  149.     this._y += this.yspeed;
  150.     this._x += this.xspeed;
  151.     if (this._y<0) {
  152.         this._y += 400;
  153.     }
  154.     if (this._y>400) {
  155.         this._y -= 400;
  156.     }
  157.     if (this._x>550) {
  158.         this._x -= 550;
  159.     }
  160.     if (this._x<0) {
  161.         this._x += 550;
  162.     }
  163.     if ((_root.ground.hitTest(this._x+10, this._y, true)) or (_root.ground.hitTest(this._x-10, this._y, true)) or (_root.ground.hitTest(this._x, this._y-10, true)) or (_root.ground.hitTest(this._x, this._y+10, true))) {
  164.         die();
  165.     }
  166. };
  167. function die() {
  168.     if (_root.kira._alpha == 100) {
  169.         _root.attachMovie("explosion", "explosion", 10001);
  170.         _root.explosion._x = _root.kira._x;
  171.         _root.explosion._y = _root.kira._y;
  172.         _root.blives--;
  173.         if (_root.blives<1) {
  174.             unloadMovie(_root.kira);
  175.             unloadMovie(_root.ground);
  176.             _root.gotoAndStop(3);
  177.         }
  178.         _root.lives.text = "Lives: "+_root.blives;
  179.         _root.kira._alpha = 10;
  180.     }
  181. }
  182. stop();

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.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5 out of 5)
Loading ... Loading ...

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

29 Responses to “Flash game creation tutorial - part 6a”

  1. zproxy on January 24th, 2007 3:41 pm

    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

  2. fire_man on January 24th, 2007 8:20 pm

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

  3. WOW on January 25th, 2007 2:31 am

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

  4. Tony on January 25th, 2007 9:46 pm

    Wonderfull!!

  5. Confuzled... on January 28th, 2007 1:54 am

    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?

  6. abhilash on January 28th, 2007 5:47 pm

    this was a cool tutorial.

  7. Emanuele Feronato on January 28th, 2007 9:56 pm

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

  8. Darren Hunnam on January 29th, 2007 7:02 pm

    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!

  9. abhilash on February 2nd, 2007 1:55 pm

    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?

  10. abhilash on February 2nd, 2007 1:57 pm

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

  11. afsal on February 3rd, 2007 7:38 am

    verry good

  12. Tenzin on February 4th, 2007 11:00 am

    Interesting but pretty hard to understand….!

  13. Connor on February 6th, 2007 4:06 am

    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!

  14. Cook on February 8th, 2007 8:36 am

    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.

  15. jayj on February 8th, 2007 10:45 am

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

  16. Thomas on February 10th, 2007 5:28 pm

    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

  17. natalia on February 15th, 2007 3:23 am

    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)

  18. Mats on February 15th, 2007 7:30 pm

    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.

  19. Stefan on February 16th, 2007 11:54 pm

    best web site ever!!!!

  20. Grifo on February 21st, 2007 4:28 am

    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.

  21. Mathew on February 24th, 2007 8:22 am

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

  22. Tony Hawk on March 19th, 2007 4:21 am

    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

  23. abhilash on March 29th, 2007 6:58 pm

    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

  24. need help real quick on October 14th, 2007 6:00 pm

    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?

  25. need help real quick on October 14th, 2007 6:18 pm

    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?

  26. josh on November 9th, 2007 2:28 am

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

  27. Pilz on July 21st, 2008 8:36 pm

    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!

  28. Pilz on July 22nd, 2008 5:08 pm

    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?

Leave a Reply




Trackbacks

  1. Flash game creation tutorial - part 5.1 at Emanuele Feronato on February 9th, 2007 6:54 pm

    [...] Well, since lots of readers commented and mailed me part 6a is too hard and I should split it in pieces, that’s what I am going to do. This is the part 5.1, to be read after part 5. [...]