Search code examples
actionscript-3flashdevelop2d-games

Action Script 3, how to make characters jump?


I am creating a simple 2D platformer in Flash Develop as3 but I don't know how to create a way for my characters to jump.

Here is my code for main.as:

package 
{
 import flash.display.Bitmap;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;

/**
 * ...
 * @author Harry
 */
public class Main extends Sprite 
{
    public var StartButton:Go;
    public var FireBoy:Hero;
    public var WaterGirl:Female;
    public var Door1:Firedoor;
    public var Door2:Waterdoor;

    public function Main():void 
    {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    public function init(e:Event = null):void
    {
        StartButton = new Go();
        addChild(StartButton);
        StartButton.addEventListener(MouseEvent.CLICK, startgame);
    }

    private function startgame(e:Event = null):void 
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        // entry point
        removeChild(StartButton);

        FireBoy = new Hero ();
        stage.addChild(FireBoy);
        FireBoy.y = 495;
        //This allows movement for FireBoy
        stage.addEventListener(KeyboardEvent.KEY_DOWN, HandleHeroMove);

        WaterGirl = new Female();
        stage.addChild(WaterGirl);
        WaterGirl.x = 70;
        WaterGirl.y = 495;
        stage.addEventListener(KeyboardEvent.KEY_DOWN, HandleFemaleMove);

        Door1 = new Firedoor();
        stage.addChild(Door1);
        Door1.x = 5;
        Door1.y = 62;

        Door2 = new Waterdoor();
        stage.addChild(Door2);
        Door2.x = 100;
        Door2.y = 62;

        graphics.beginFill(0x804000, 1);
        graphics.drawRect(0, 0, 800, 40);
        graphics.endFill();

        graphics.beginFill(0x804000, 1);
        graphics.drawRect(0, 170, 600, 40);
        graphics.endFill();

        graphics.beginFill(0x804000, 1);
        graphics.moveTo(800, 200);
        graphics.lineTo(800, 700);
        graphics.lineTo(400, 700);
        graphics.lineTo(100, 700);
        graphics.endFill();

        graphics.beginFill(0x804000, 1);
        graphics.drawRect(0, 580, 800, 40);
        graphics.endFill();
    }

    //This handles FireBoys movement
    public function HandleHeroMove(e:KeyboardEvent):void
    {
        trace(e.keyCode);
        //This is for moving to the left
        if (e.keyCode == 37)
        {
            FireBoy.x = FireBoy.x - 30;
            Check_Border();
        }
        //This is for moving to the right
        else if (e.keyCode == 39)
        {
            FireBoy.x = FireBoy.x + 30;
            Check_Border();
        }
        else if (e.keyCode == 38)
        {
            FireBoy.grav = -15;
        }

    }

    //This handles WaterGirls movement
    public function HandleFemaleMove (e:KeyboardEvent):void
    {
        trace(e.keyCode);
        //This is for moving to the left
        if (e.keyCode == 65)
        {
            WaterGirl.x = WaterGirl.x - 30;
            Check_Border();
        }
        //This is for moving to the right
        else if (e.keyCode == 68)
        {
            WaterGirl.x = WaterGirl.x + 30;
            Check_Border();
        }
        else if (e.keyCode == 87)
        {
            WaterGirl.grav = -15;
        }
    }

    //This stops characters from leaving the screen
    public function Check_Border():void
    {
        if (FireBoy.x <= 0)
        {
            FireBoy.x = 0;
        }
        else if (FireBoy.x > 750)
        {
            FireBoy.x = 750;
        }
        if (WaterGirl.x <= 0)
        {
            WaterGirl.x = 0;
        }
        else if (WaterGirl.x > 750)
        {
            WaterGirl.x = 750;
        }
    }

}
}

Here is my code for Hero.as (I have identical code for Female.as):

package  
{
import flash.display.Bitmap;
import flash.display.Sprite;
/**
 * ...
 * @author Harry
 */
public class Hero extends Sprite
{
    [Embed(source="../assets/FireBoy.jpg")]
    private static const HeroFireBoy:Class;
    private var FireBoy:Bitmap;
    public var grav:int = 0;
    public var floor:int = 580;

    public function Hero() 
    {
        FireBoy = new Hero.HeroFireBoy();
        scaleX = 0.1;
        scaleY = 0.1;

        addChild(FireBoy);
    }
    public function adjust():void 
    {
        FireBoy.y += grav;
        if(FireBoy.y+FireBoy.height/2<floor)
            grav++;
        else 
        {
            grav = 0;
            FireBoy.y = floor - FireBoy.height / 2;
        }
        if (FireBoy.x - FireBoy.width / 2 < 0)
            FireBoy.x = FireBoy.width / 2;
        if (FireBoy.x + FireBoy.width / 2 > 800)
            FireBoy.x = 800 - FireBoy.width / 2;
    }

}

}

Please can you suggest exactly what code I should write and where to put it because, I can't find anything helpful and i am getting quite stressed over it.


Solution

  • One way to do is like this: in your Hero.as, you functions like jump, move_left and move_right and keep keep the coordinates within the Hero class. Then call those methods wherever you instantiate your Hero object.

    As as example in your main.as, you may execute this code when space bar or up-arrow-key is pressed to make your Hero jump:

    var hero:Hero = new Hero();
    hero.jump();
    

    If it is a simple jump on Y-axis, then you just have to change the Y-axis value. If it is both X-axis and Y-axis, like a forward jump, then you may consider Trigonometry Sine function to calculate the point on which your character should move to make it look smooth.

    You don't need identical Female.as class. What you should do is this: Create a class (probably named Character). Add jump, move_left, move_right functions to this class. And then inherit Character class in Hero.as and Female.as. (You need to Google "inheritance" to learn more about this). Then you can instantiate Hero and Female with the same code that resides in Character class.

    You may also need to override in Hero.as and Female.as:

    [Embed(source="../assets/FireBoy.jpg")]
    private static const HeroFireBoy:Class;
    

    in your Hero.as and Female.as, to assign the correct image.