CREACION JUEGO FLASH 1.- MOBILIDAD Y TERRENO

palabras claves para san google:

sidescrolling 2d as3 tutorial flash

movimiento1.jpg

Estoy desarrollando un juego flash y aqui comienzo a exponer lo que llevo.

recomiendo primero informarse bien acerca de:

  • cajaS de colisiones
  • action script3
  • sprites
  • sidescrolling

En esta seccion existen 2 objetos principales: el jugador (Jugador) y el terreno(piso_caja).

En esta seccion estan solucionados los siguientes temas

  1. gravedad
  2. colision irregular
  3. salto
  4. movimiento por teclado

a continuacion escribo el codigo de la clase JUGADOR.AS por partes y su descripcion:

 

-----=== JUGADOR.AS===---

package
{
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.display.MovieClip;

    public class Jugador extends MovieClip
    {
        private var carga_stand_der:Loader;
        

 //Estos son contenedores de las animaciones cargadas

private var carga_corriendo_der:Loader;
        private var carga_stand_izq:Loader;
        private var carga_corriendo_izq:Loader;
        private var carga_salto_izq:Loader;
        private var carga_salto_der:Loader;

//Estos contenedores son solo para visualizar los puntos

        public var carga_colision_arr_izq:Loader;
        public var carga_colision_arr_der:Loader;
        public var carga_colision_aba_izq:Loader;
        public var carga_colision_aba_der:Loader;

//con esto se define hacia donde esta mirando el personaje
        //izquierda = false
        private var direccion:Boolean = false;


//constructor

       public function Jugador()
        {

            trace("creado player");
            this.cargar_sprites_stand();
            this.cargar_sprites_corriendo();
            this.cargar_sprites_salto();
            this.cargar_colisiones();


        }
//esta funcion solo es usada para cargar unas cajas para visualizar los puntos
        private function cargar_colisiones():void
        {
            this.carga_colision_aba_der = new Loader  ;
            var url:String = "caja_colision_rojo.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_aba_der.load(urlReq);
            this.addChild(this.carga_colision_aba_der);
            this.carga_colision_aba_der.x = 0;
            this.carga_colision_aba_der.y=0
            ;
            this.carga_colision_aba_izq = new Loader  ;
            var url:String = "caja_colision_azul.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_aba_izq.load(urlReq);
            this.addChild(this.carga_colision_aba_izq);
            this.carga_colision_aba_izq.x = 50;
            this.carga_colision_aba_izq.y=50
            ;
            this.carga_colision_arr_der = new Loader  ;
            var url:String = "caja_colision_amar.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_arr_der.load(urlReq);
            this.addChild(this.carga_colision_arr_der);
            this.carga_colision_arr_der.x = 50;
            this.carga_colision_arr_der.y=0
            ;
            this.carga_colision_arr_izq = new Loader  ;
            var url:String = "caja_colision_verde.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_arr_izq.load(urlReq);
            this.addChild(this.carga_colision_arr_izq);
            this.carga_colision_arr_izq.x = 0;
            this.carga_colision_arr_izq.y = 50;
        }


//por cada posicion del personaje se carga una animacion swf

       private function cargar_sprites_stand():void
        {
            this.carga_stand_izq = new Loader  ;
            var url:String = "zero_stand_izq.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_stand_izq.load(urlReq);
            this.addChild(this.carga_stand_izq);
            trace("animacion stand a la izquierda cargada");

            this.carga_stand_der = new Loader  ;
            var url2:String = "zero_stand_der.swf";
            var urlReq2:URLRequest = new URLRequest(url2);
            this.carga_stand_der.load(urlReq2);
            this.addChild(this.carga_stand_der);
            trace("animacion stand a la izquierda cargada");
        }

        private function cargar_sprites_salto():void
        {
            this.carga_salto_izq = new Loader  ;
            var url:String = "zero_saltando_izq.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_salto_izq.load(urlReq);
            this.addChild(this.carga_salto_izq);
            trace("animacion stand a la izquierda cargada");

            this.carga_salto_der = new Loader  ;
            var url2:String = "zero_saltando_der.swf";
            var urlReq2:URLRequest = new URLRequest(url2);
            this.carga_salto_der.load(urlReq2);
            this.addChild(this.carga_salto_der);
            trace("animacion stand a la izquierda cargada");
        }

        private function cargar_sprites_corriendo():void
        {
            this.carga_corriendo_izq = new Loader  ;
            var url:String = "zero_corriendo_izq.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_corriendo_izq.load(urlReq);
            this.addChild(this.carga_corriendo_izq);
            trace("animacion correr a la izquierda cargada");

            this.carga_corriendo_der = new Loader  ;
            var url2:String = "zero_corriendo_der.swf";
            var urlReq2:URLRequest = new URLRequest(url2);
            this.carga_corriendo_der.load(urlReq2);
            this.addChild(this.carga_corriendo_der);
            trace("animacion correr a la derecha cargada");
        }
//para cambiar las animaciones, dependiendo de la direccion,actividad y velocidad
        public function rotar_sprites(velocidad_horizontal:Number,dir:Boolean,salto:Boolean):void
        {
            this.direccion = dir;
            this.carga_stand_izq.visible = false;
            this.carga_corriendo_izq.visible = false;
            this.carga_stand_der.visible = false;
            this.carga_corriendo_der.visible = false;
            this.carga_salto_izq.visible = false;
            this.carga_salto_der.visible = false;

            if (salto)
            {

            }
            else
            {
                if ((velocidad_horizontal < 0.1) && (velocidad_horizontal > -0.1))
                {
                    if (this.direccion)
                    {
                        this.carga_stand_der.visible = true;
                    }
                    else
                    {
                        this.carga_stand_izq.visible = true;
                    }
                }
                else
                {
                    if (velocidad_horizontal > 0)
                    {
                        this.carga_corriendo_der.visible = true;
                    }
                    else
                    {
                        this.carga_corriendo_izq.visible = true;
                    }
                }

            }
        }

    }


}

 

ahora solo falta el contenedor FLA para este juego

el nombre es por que seria la tercera version

---===PRINCIPAL03 (frame 1)===---

import flash.events.Event;

//create key.isDown hack for AS3
var jugador:Jugador2=new Jugador2();
this.jugador.cargar_jugador(15,30,15);
this.addChild(jugador);

this.jugador.y = 0;

//variable que permite guardar las teclas presionadas

var keysDown:Array = [];


//Las siguientes variables son necesarias para la movilidad horizontal

var max_velocidad_horizontal:Number = 5;
var xspeed:Number = 0;
var accelleration:Number = 1;
var friction:Number = 0.25;
var maxspeed:Number = this.max_velocidad_horizontal;
var backmaxspeed:Number = -1 * this.max_velocidad_horizontal;

//necesarias para el control vertical
var yspeed:Number = 0;
var gravity:Number = 1.25;
var yaccelleration:Number = 15;
var jumping:Boolean = false;


//maxima velocidad al caer para que al momento de realizar las DETECCION DE COLISIONES no pase demasiado rapido tras las colisiones

var max_caida:Number = -10;


//verificaciones para diferentes estados del jugador

var en_aire:Boolean = true;
var cayendo:Boolean = true;
stage.focus = stage;
//izquierda = false
var direccion:Boolean = true;

//oyentes para el teclado
stage.addEventListener(KeyboardEvent.KEY_DOWN,addKey);
stage.addEventListener(KeyboardEvent.KEY_UP,removeKey);

function addKey(event:KeyboardEvent):void
{
    keysDown[event.keyCode] = true;
}
function removeKey(event:KeyboardEvent):void
{
    keysDown[event.keyCode] = false;
}
//por varios sitios se recomienda utilizar un TIMER para controlar con eficiencia , mas que ENTERFRAME
var timer:Timer = new Timer(10);
timer.addEventListener(TimerEvent.TIMER, tick);
function tick(event:Event):void
{
    this.ciclo();
}

timer.start();
//cada una de las funciones creadas, se ejecutara en forma de rutina
function ciclo()
{
//sila velocidad vertical es negativa... el jugador esta cayendo
    if (this.yspeed < 0)
    {
        this.cayendo = true;
    }
    else
    {
        this.cayendo = false;
    }
    this.jugador.rotar_sprites(this.xspeed,this.direccion,this.yspeed);
// se pregunta si el personaje se mueve horizontalmente
    this.mover_horizontal();

    this.texto3.text = "jumping: " + jumping;
    this.texto2.text = "yspeed: " + this.yspeed;
    this.texto1.text = this.jugador.x + "," + this.jugador.y;

//si esta en el aire... no puede saltar

    if (en_aire)
    {
        this.caer();
        this.jumping = false;
    }
    else
    {

        this.saltar();
    }
    this.comprobar_piso();

}

//si estoy saltando, no puedo volver a saltar, por otro lado, sumo altura si lo estoy haciendo

function saltar():void
{
    if (jumping)
    {
        jugador.y -=  yspeed;
        if (this.en_aire)
        {
            jumping = false;
        }
    }
    else if ((keysDown[Keyboard.UP])&&(this.en_aire==false))
    {
        jumping = true;
        yspeed = yaccelleration;
    }
    if (jumping == false)
    {
        this.yspeed = 0;
    }
}


// la gravedad se hace siempre presente

function caer()
{
    if (this.yspeed < this.max_caida)
    {

    }
    else
    {
        yspeed -=  gravity;
    }
    jugador.y -=  yspeed;
}

//verifica si la caja de colision del jugador, hace contacto con el objeto del terreno
function comprobar_piso()
{

    var choca1:Boolean = this.piso_caja.hitTestPoint((this.jugador.x+this.jugador.carga_colision_aba_izq.x),(this.jugador.y+this.jugador.carga_colision_aba_izq.y),true);
    var choca2:Boolean = this.piso_caja.hitTestPoint((this.jugador.x+this.jugador.carga_colision_aba_der.x),(this.jugador.y+this.jugador.carga_colision_aba_der.y),true);
 

//si hace contacto, el jugador no esta cayendo

    if ((choca1) && (choca2))
    {
        if (this.cayendo)
        {
            this.en_aire = false;
        }

    }
    else
    {
        this.en_aire = true;
        this.jumping = false;
    }
}

//al presionar el teclado en direccion izquierda o derecha, se le suma aceleracion al jugador en el eje X (horizontal)

function mover_horizontal():void
{

    if ((keysDown[Keyboard.RIGHT])&&(xspeed < maxspeed))
    {
        jugador.x +=  xspeed;
        xspeed +=  accelleration;
        this.direccion = true;
    }
    else if ((keysDown[Keyboard.LEFT])&&(xspeed > backmaxspeed))
    {
        jugador.x +=  xspeed;
        xspeed -=  accelleration;
        this.direccion = false;
    }

//se le suma velocidad al jugador se mueva o no, lo que importa es la velocidad que varia de un maximo hasta 0
    jugador.x +=  xspeed;
    if (xspeed > 0)
    {
        xspeed -=  friction;
    }
    else if (xspeed < 0)
    {
        xspeed +=  friction;
    }
}

PROBLEMAS POR SOLUCIONAR

  1. limites horizontales y verticales
  2. terreno con curvas
  3. exactitud al momento de hacer contacto con el piso

 

aqui adjunto los archivos para probar lo que llevo hecho

movimiento.rar

package
{
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.display.MovieClip;

    public class Jugador extends MovieClip
    {
        private var carga_stand_der:Loader;
        private var carga_corriendo_der:Loader;
        private var carga_stand_izq:Loader;
        private var carga_corriendo_izq:Loader;
        private var carga_salto_izq:Loader;
        private var carga_salto_der:Loader;

        public var carga_colision_arr_izq:Loader;
        public var carga_colision_arr_der:Loader;
        public var carga_colision_aba_izq:Loader;
        public var carga_colision_aba_der:Loader;


        //izquierda = false
        private var direccion:Boolean = false;
        public function Jugador()
        {

            trace("creado player");
            this.cargar_sprites_stand();
            this.cargar_sprites_corriendo();
            this.cargar_sprites_salto();
            this.cargar_colisiones();


        }

        private function cargar_colisiones():void
        {
            this.carga_colision_aba_der = new Loader  ;
            var url:String = "caja_colision_rojo.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_aba_der.load(urlReq);
            this.addChild(this.carga_colision_aba_der);
            this.carga_colision_aba_der.x = 0;
            this.carga_colision_aba_der.y=0
            ;
            this.carga_colision_aba_izq = new Loader  ;
            var url:String = "caja_colision_azul.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_aba_izq.load(urlReq);
            this.addChild(this.carga_colision_aba_izq);
            this.carga_colision_aba_izq.x = 50;
            this.carga_colision_aba_izq.y=50
            ;
            this.carga_colision_arr_der = new Loader  ;
            var url:String = "caja_colision_amar.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_arr_der.load(urlReq);
            this.addChild(this.carga_colision_arr_der);
            this.carga_colision_arr_der.x = 50;
            this.carga_colision_arr_der.y=0
            ;
            this.carga_colision_arr_izq = new Loader  ;
            var url:String = "caja_colision_verde.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_colision_arr_izq.load(urlReq);
            this.addChild(this.carga_colision_arr_izq);
            this.carga_colision_arr_izq.x = 0;
            this.carga_colision_arr_izq.y = 50;
        }
        
        private function cargar_sprites_stand():void
        {
            this.carga_stand_izq = new Loader  ;
            var url:String = "zero_stand_izq.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_stand_izq.load(urlReq);
            this.addChild(this.carga_stand_izq);
            trace("animacion stand a la izquierda cargada");

            this.carga_stand_der = new Loader  ;
            var url2:String = "zero_stand_der.swf";
            var urlReq2:URLRequest = new URLRequest(url2);
            this.carga_stand_der.load(urlReq2);
            this.addChild(this.carga_stand_der);
            trace("animacion stand a la izquierda cargada");
        }

        private function cargar_sprites_salto():void
        {
            this.carga_salto_izq = new Loader  ;
            var url:String = "zero_saltando_izq.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_salto_izq.load(urlReq);
            this.addChild(this.carga_salto_izq);
            trace("animacion stand a la izquierda cargada");

            this.carga_salto_der = new Loader  ;
            var url2:String = "zero_saltando_der.swf";
            var urlReq2:URLRequest = new URLRequest(url2);
            this.carga_salto_der.load(urlReq2);
            this.addChild(this.carga_salto_der);
            trace("animacion stand a la izquierda cargada");
        }

        private function cargar_sprites_corriendo():void
        {
            this.carga_corriendo_izq = new Loader  ;
            var url:String = "zero_corriendo_izq.swf";
            var urlReq:URLRequest = new URLRequest(url);
            this.carga_corriendo_izq.load(urlReq);
            this.addChild(this.carga_corriendo_izq);
            trace("animacion correr a la izquierda cargada");

            this.carga_corriendo_der = new Loader  ;
            var url2:String = "zero_corriendo_der.swf";
            var urlReq2:URLRequest = new URLRequest(url2);
            this.carga_corriendo_der.load(urlReq2);
            this.addChild(this.carga_corriendo_der);
            trace("animacion correr a la derecha cargada");
        }

        public function rotar_sprites(velocidad_horizontal:Number,friccion:Number,dir:Boolean,salto:Boolean):void
        {
            this.direccion = dir;
            this.carga_stand_izq.visible = false;
            this.carga_corriendo_izq.visible = false;
            this.carga_stand_der.visible = false;
            this.carga_corriendo_der.visible = false;
            this.carga_salto_izq.visible = false;
            this.carga_salto_der.visible = false;

            if (salto)
            {

            }
            else
            {
                if ((velocidad_horizontal < 0.1) && (velocidad_horizontal > -0.1))
                {
                    if (this.direccion)
                    {
                        this.carga_stand_der.visible = true;
                    }
                    else
                    {
                        this.carga_stand_izq.visible = true;
                    }
                }
                else
                {
                    if (velocidad_horizontal > 0)
                    {
                        this.carga_corriendo_der.visible = true;
                    }
                    else
                    {
                        this.carga_corriendo_izq.visible = true;
                    }
                }

            }
        }

    }


}
Comentarios de este artículo en RSS
Cerrar