Author Topic: Basic Game Tutorial  (Read 76007 times)

darthlupi

  • Active Member
  • ***
  • Posts: 241
  • Karma: +0/-0
  • All Smiles
    • View Profile
    • LupiGames.com
Re: Basic Game Tutorial
« Reply #40 on: Tue, Aug 18, 2009 »
Alright!  We completed the next section, and at this point there should be enough detailed information for you to be able to create your own little game.

IX: Spawning Enemies
Sure, you can populate your levels with pre-placed enemies, but what if you want your enemies to constantly flood onto the screen? Well, we're going to add some enemy spawn-points to do just that!

1. First thing to do is to create a new class named Spawner that extends FlxSprite, and imports all of Flixel, as usual.

Code: [Select]
package com.Tutorial
{
    import com.adamatomic.flixel.*;
    
    public class Spawner extends FlxSprite
    {

2. Create and embed a new image to represent the Spawner on the screen.  In this example we are using an image that looks like a doorway to the BEYOND.



Code: [Select]
       [Embed(source = '../../data/Spawner.png')] private var ImgSpawner:Class;

3. As you should know by now, we are going to need to declare some variabless.  This Class will need variables  to reference the Player, the Enemies, and EnemyStars that are all created in the PlayState.  Also , we are setting up another counter for Enemy creation.

Code: [Select]
       private var _p:Player;
        private var _e:FlxArray;    
        private var _eStars:FlxArray;        
        private var _create_counter:Number = 5;

4. Now we setup our Constructor allowing for the passing of the Player, Enemies FlxArray, and EnemyStars arrays from the PlayState to the private variables we declared above.

Code: [Select]
 
        public function Spawner(X:Number, Y:Number, Enemies:FlxArray,ThePlayer:Player,Stars:FlxArray):void
        {
            super(ImgSpawner, X, Y, true, true);
            _e = Enemies;
            _p = ThePlayer;
            _eStars = Stars;
        }


5. The update function should be VERY familiar to you by this point.  So  familiar, in fact, the following explanation may induce vomiting.  As you can see, we are overriding FlxSprite's update function, calling the parent Class FlxSprite's update function, and then we have a counter that runs every five seconds and calls the function spawn to create new baddies!
  
Code: [Select]
 
        override public function update():void
        {
            super.update();
            
            if (_create_counter > 0)
            {
                _create_counter -= FlxG.elapsed;
            }    
            if(_create_counter <= 0)
            {
                _create_counter = 5;
                spawn();
            }            
        }
 
 

6. The spawn function works very similiar to the ninja star creating functions you setup for the Player and Enemy Classes.  It loops through all indexes in the _e FlxArray which will contain all of the enemies, and then either resets them if they are there and exist is false, or it adds a new Enemy to that array!


Code: [Select]
   
        private function spawn():void
        {
            for (var i:uint = 0; i < _e.length; i++)
            {
                if(!_e[i].exists)
                {
                    _e[i].reset(x, y);
                    return;
                }
            }
            var enemy:Enemy = new Enemy(x, y , _p,_eStars);
            _e.add(PlayState.lyrSprites.add(enemy) );    
        }        
        
    }
    
}


If you are a super genius, then you will rememb that we never added a reset function the Enemy class!  How can we reset the Enemy in this Spawner Class if it doesn't exist?  Why, we create the reset function!

1. Add this to  your Enemy class after the last function. That last function should be the override of the kill function.

Code: [Select]
       public function reset(X:Number, Y:Number):void
        {
            x = X;
            y = Y;
            dead = false;
            exists = true;
            visible = true;
            play("normal");
        }


Finally, in order to create the Spawner object you will need to modify the PlayState class, so go ahead and open up your PlayState class for editing and do the following:

1.  We will first want to declare a new FlxArray to contain any Spawners you would like to create.

Code: [Select]
       private var _spawners:FlxArray;

2.  The last thing to modify in the PlayState class is adding a Spawner to a layer.  We need to pass in the FlxArray that contains the Enemies, the variable representing the Player, and finally the FlxArray that holds the EnemyStars.  To do this we have to add the following the very end of the PlayState constructor.

Code: [Select]
           _spawners = new FlxArray;
            _spawners.add(lyrStage.add(new Spawner(432, 320, _e,_p,_eStars)));  

Run it, and enjoy the many new enemies!

This is what your final Spawner class will look like:

Code: [Select]
package com.Tutorial
{
    import com.adamatomic.flixel.*;
    
    public class Spawner extends FlxSprite
    {
        [Embed(source = '../../data/Spawner.png')] private var ImgSpawner:Class;
        
        private var _p:Player;
        private var _e:FlxArray;    
        private var _eStars:FlxArray;        
        private var _create_counter:Number = 5;
        
        public function Spawner(X:Number, Y:Number, Enemies:FlxArray,ThePlayer:Player,Stars:FlxArray):void
        {
            super(ImgSpawner, X, Y, true, true);
            _e = Enemies;
            _p = ThePlayer;
            _eStars = Stars;
        }
        
        override public function update():void
        {
            super.update();
            
            if (_create_counter > 0)
            {
                _create_counter -= FlxG.elapsed;
            }    
            if(_create_counter <= 0)
            {
                _create_counter = 5;
                spawn();
            }              
            
        }
        
        private function spawn():void
        {
            for (var i:uint = 0; i < _e.length; i++)
            {
                if(!_e[i].exists)
                {
                    _e[i].reset(x, y);
                    return;
                }
            }
            var enemy:Enemy = new Enemy(x, y , _p,_eStars);
            _e.add(PlayState.lyrSprites.add(enemy) );    
        }        
        
    }
    
}
« Last Edit: Tue, Aug 18, 2009 by darthlupi »
To take care of that not so fresh feeling: #flixel on irc.freenode.net.

Use your favorite IRC client or  http://webchat.freenode.net/

mhughson

  • Member
  • **
  • Posts: 8
  • Karma: +0/-0
    • View Profile
    • matthughson.com
Re: Basic Game Tutorial
« Reply #41 on: Wed, Aug 19, 2009 »
Sorry if this was covered already (didn't read the whole thread) but why not post a SWF file of the game after each stage of the tutorial?  I don't really want to do the whole tutorial, but I'm curious what this thing actually looks like!

Nice work either way though!

SeiferTim

  • Contributor
  • ****
  • Posts: 253
  • Karma: +0/-0
    • View Profile
    • Tim's World
Re: Basic Game Tutorial
« Reply #42 on: Wed, Aug 19, 2009 »
We're planning on posting the final version into the first thread after we finish the last section.

luc

  • Member
  • **
  • Posts: 97
  • Karma: +0/-0
  • no ablo anything except french
    • View Profile
    • scribbles
Re: Basic Game Tutorial
« Reply #43 on: Sun, Sep 6, 2009 »
Really nice tutorial.
I had no problem following it. I'm no coder at all, just trying from time to time.

Just found two typos :
on the Tilemaps chapter in the final example code there's an extra character

Code: [Select]
public function PlayState():void
        {
            super();
            
            lyrStage = new FlxLayer;
here ------>   &nbsp;   lyrSprites = new FlxLayer;

and chapter 8 on Keeping Scores. part 3 an underscore is missing
Code: [Select]
here -----> "_" scoreDisplay = new FlxText(FlxG.width - 50, 2, 48, 40, FlxG.score.toString(), 0xffffffff, null, 16, "right");
            _scoreDisplay.scrollFactor.x = _scoreDisplay.scrollFactor.y = 0;
            lyrHUD.add(_scoreDisplay);

> would be nice to learn about the process to create an element to trigger. Like a "finish line" in order to load a following stage or a specific tile/platform which is giving points by jumping on it.
> persistent Hi-Scores table (Kongregate api might help if I don't know about programming?)
> how to add sounds.
> How to force the scrolling of the stage (like in Canabalt).

even now it's pretty complete to build simple games.
I will dig the forums and try to figure things out on my own, at least I can mode the graphics :)
Thanks a lot for sharing such usefull ground base knowledge !
« Last Edit: Wed, Sep 9, 2009 by luc »

Rolpege

  • Guest
Re: Basic Game Tutorial
« Reply #44 on: Mon, Sep 7, 2009 »
How about adding support for multiple levels?

ricardo_sdl

  • Member
  • **
  • Posts: 11
  • Karma: +0/-0
    • View Profile
Re: Basic Game Tutorial
« Reply #45 on: Mon, Sep 7, 2009 »
I couldn't use the mappy to create the tileset in the part IV of the tutorial. I've got an alert message saying:
libpng12.dll and zlib.dll missing for PNG.
BMP file is compressed.
BMP file is not correct clour depth.
I tried to use the png provided in the tutorial. Anyone can help me?
Thanks in advance.


ricardo_sdl

  • Member
  • **
  • Posts: 11
  • Karma: +0/-0
    • View Profile
Re: Basic Game Tutorial
« Reply #47 on: Tue, Sep 8, 2009 »
I'm using ubuntu here (8.10) and I'm running the mappy on wine. Has anyone created one file for the the tutorial that I can download? Thanks!

patrickespake

  • Guest
Source code download
« Reply #48 on: Fri, Sep 11, 2009 »
Hi,

Do you can available the source code for download?

Thanks.

SeiferTim

  • Contributor
  • ****
  • Posts: 253
  • Karma: +0/-0
    • View Profile
    • Tim's World
Re: Basic Game Tutorial
« Reply #49 on: Fri, Sep 11, 2009 »
No... the idea is that you could follow through the tutorial and build the source yourself. At the end of each section, the complete source for any modified files should be there that you could copy/paste if you want...

jellybit

  • Guest
Re: Basic Game Tutorial
« Reply #50 on: Thu, Sep 17, 2009 »
I sent a private message, but then I checked my outbox and it says there are no messages sent.  I'm thinking there could be an error with the forum so I'll post this here.

I'm following the Basic Game Tutorial (THANK YOU VERY MUCH FOR THIS, SEIFERTIM!), but I think I've run into a couple of errors that I've fixed.  I say "I think" because it's possible I missed an instruction.  The first issue is that in Part II, the tutorial has the user type this line:

Code: [Select]
super(320,420,MenuState,2,0xff000000,true,0xffffffff);
The 420 should be 240, I believe, because the code has it double itself into 480.  Also, it has the user type in this line:

Code: [Select]
public class Tutorial
when it should be this line:

Code: [Select]
public class Tutorial extends FlxGame
This error is a big deal because I couldn't even run the code without adding that "extends FlxState" to the end.  It should be noted that in the full code list at the end of the section, this part is correct (which is how I figured out my problem).  I see other people have had problems running, and this may be why.

Also, a very minor error in this part:

Quote
Now we are going make use of the fact that we extended FlxGame with the Tutorial class.  To do that we are going to need to call super().  What super() does, without and other function specified, is call the constructor of the class you are extending.

Did you mean "another" instead of "and other"?  Also, is it important at all that it's called "super"?  Was that just a random name or does it do other things?  Maybe those last questions are outside of the scope of the tutorial, but it helps me to remember the function.

Thanks again for the tutorial, SeiferTim!  I'll keep going with it.  I'm just starting on Part III.

EDITED: Corrected the "extends FlxGame" lines in my own correction post.
« Last Edit: Fri, Sep 18, 2009 by Jellybit »

Merve

  • Guest
Re: Basic Game Tutorial
« Reply #51 on: Thu, Sep 17, 2009 »
You're right about the first comment (at least it's correct in the copy/paste code at the bottom of that segment) but wrong about the menustate code.
Here's the quote:
OKay, here's the next part of the tutorial!
3:  Next, we want this class to extend FlxState. Remember extending a class that you imported allows your to make a new Class based off of the one you are extending. Change
Code: [Select]
public class MenuState to say:
     
Code: [Select]
public class MenuState extends FlxState

jellybit

  • Guest
Re: Basic Game Tutorial
« Reply #52 on: Fri, Sep 18, 2009 »
Darnit!  Sorry and thanks.  That was my mistake.  What I MEANT to say was that it only says to type (again in Part II):

Code: [Select]
public class Tutorial
when it should be

Code: [Select]
public class Tutorial extends FlxGame
This gave me errors and refused to run until I saw in the full code that it extends FlxGame.
« Last Edit: Fri, Sep 18, 2009 by Jellybit »

new-at-flying

  • Guest
Re: Basic Game Tutorial
« Reply #53 on: Sat, Sep 19, 2009 »
Hi, I don't understand step 10:

10: Next, we need to make this class (Tutorial) into a sort of copy of the FlxGame class. To do this, we make this class an 'extension' of the FlxGame class.

How do you do that? How do you make this extention?

Gigaclon

  • Member
  • **
  • Posts: 87
  • Karma: +0/-0
    • View Profile
Re: Basic Game Tutorial
« Reply #54 on: Sat, Sep 19, 2009 »
change
Code: [Select]
public class Tutorialinto
Code: [Select]
public class Tutorial extends FlxGame

new-at-flying

  • Guest
Re: Basic Game Tutorial
« Reply #55 on: Sun, Sep 20, 2009 »
change
Code: [Select]
public class Tutorialinto
Code: [Select]
public class Tutorial extends FlxGame

I did do that, I get this:

Code: [Select]
\src\Tutorial.as(8): col: 35 Error: The definition of base class FlxGame was not found.
public class Tutorial extends FlxGame
^
Build halted with errors (fcsh).

Merve

  • Guest
Re: Basic Game Tutorial
« Reply #56 on: Sun, Sep 20, 2009 »
Did you import the flixel package? If you didn't then it doesn't know what a FlxGame is  ;)

Code: [Select]
import com.adamatomic.flixel.*;

new-at-flying

  • Guest
Re: Basic Game Tutorial
« Reply #57 on: Sun, Sep 20, 2009 »
Did you import the flixel package? If you didn't then it doesn't know what a FlxGame is  ;)

Code: [Select]
import com.adamatomic.flixel.*;

I did, this is my code...

Code: [Select]
package  
{
    import com.adamatomic.flixel.*;
    import com.Tutorial.MenuState;
    
    [SWF(width="640", height="480", backgroundColor="#000000")]
    [Frame(factoryClass="Preloader")]
    public class Tutorial extends FlxGame
    {
        
        public function Tutorial():void
        {
            super(320,240,MenuState,2,0xff000000,true,0xffffffff);
            help("Jump", "Shoot", "Nothing");
        }
        
    }
    
}

Can someone who did this tutorial already post me the source, to see where I'm going wrong..?
« Last Edit: Sun, Sep 20, 2009 by new-at-flying »

Gigaclon

  • Member
  • **
  • Posts: 87
  • Karma: +0/-0
    • View Profile
Re: Basic Game Tutorial
« Reply #58 on: Sun, Sep 20, 2009 »
Where is that file. By default it looks for the packages by looking in the current directory. Try placing the file in the flixel directory or copying the com folder from the flixel directory into the same directory as the file

new-at-flying

  • Guest
Re: Basic Game Tutorial
« Reply #59 on: Mon, Sep 21, 2009 »
Ok i got it sorted.