Comunidad de diseño web y desarrollo en internet online

Movimiento de sprites tipo RPG en Flash

En este tutorial nos referiremos a la programación de videojuegos en Flash, específicamente al género RPG.

Lo que vamos a hacer aquí es conseguir que un personaje se pueda mover dependiendo si se ha apretado en el teclado: derecha , izquierda, arriba , abajo..., y que camine en esa dirección si mantenemos presionada la correspondiente flecha del teclado.

Da click sobre el personaje a la derecha y usa flechas del teclado

Cómo el proyecto que tengo pensado es grande entonces involucraría demasiado tiempo el desarrollo de personajes. Así que voy a usar plantillas que ya están (y se siguen haciendo) para RPG MAKER XP, un excelente programa por cierto.

Esta es la plantilla:

Esta plantilla tiene un tamaño de 192x256 pixels. Lo único que hemos cambiado es el fondo para que sea transparente.

Lo importamos en Flash, en el primer fotograma, lo convertimos en MC y lo instanciamos como "sprite"

En las Actions de ese fotograma le colocamos esta linea de código para que importe el archivo denominado movimientos.as que contiene el código que necesitamos para el movimiento.

 #include "movimientos.as"

Luego creamos una nueva capa (Layer) la hacemos del tipo máscara (Mask). Ahí dibujamos un rectángulo de dimensiones 48x64 pixeles, siempre en la esquina superior izquierda. Crt+Enter > Y listo.

Hasta aquí para los que solo quieren COPIAR Y PEGAR.

A continuación la explicación de como funciona todo esto  y el archivo *.as

Primero: El archivo que contiene las funciones para tratar la imagen.

Creas en el Bloq de notas  el archivo movimientos.as  o lo editas en Flash> new > ActionScript File

Ahora le colocas el siguiente script:

/*
Version:     RPG Engine version 0.1
Author:     Erick Vanegas
E-mail:  eveevansml@gmail.com
Fecha:  16/10/06
*/
var teclado:Object = new Object();
var mov;
var isrunning:Boolean = false;
var dir;
var sprite:Object;
trace(sprite);
teclado.onKeyDown = function() {
    if (Key.isDown(Key.UP)) {
        correrrun(4);
    } else if (Key.isDown(Key.LEFT)) {
        correrrun(2);
    } else if (Key.isDown(Key.RIGHT)) {
        correrrun(3);
    } else if (Key.isDown(Key.DOWN)) {
        correrrun(1);
    } else {
        detenerrun();
    }
};
Key.addListener(teclado);
//Limpiar Hilo 
var detenerrun = function () {
    isrunning = false;
    clearInterval(mov);
};
//hacer dir=algo => hacer un hilo que lleve la direccion
var correrrun = function (apuntadir:Number) {
    dir = apuntadir;
    if (!isrunning) {
        mov = setInterval(ct, 100);
    }
};
//hacer sprite se mueva 1234-234-34-4-1234                  
var correr = function () {
    if (sprite._x>0-sprite._width*(3/4)) {
        sprite._x -= 48;
    } else {
        sprite._x = 0;
    }
};
//hacer sprite vuelva a posicion inicial
var dejardecorrer = function () {
    isrunning = false;
    sprite._x = 0;
    clearInterval(mov);
};
var ct = function () {
    isrunning = true;
    //corriendo hacia abajo
    if (dir == 1) {
        sprite._y = 0;
        if (Key.isDown(Key.DOWN)) {
            correr();
        } else {
            dejardecorrer();
        }
    }
    //corriendo hacia izquierda 
    if (dir == 2) {
        sprite._y = -64;
        if (Key.isDown(Key.LEFT)) {
            correr();
        } else {
            dejardecorrer();
        }
    }
    //corriendo hacia derecha 
    if (dir == 3) {
        sprite._y = -128;
        if (Key.isDown(Key.RIGHT)) {
            correr();
        } else {
            dejardecorrer();
        }
    }
    //corriendo hacia arriba 
    if (dir == 4) {
        sprite._y = -192;
        if (Key.isDown(Key.UP)) {
            correr();
        } else {
            dejardecorrer();
        }
    }
};

var teclado:Object=new Object();    // un objeto donde se registrará las teclas presionadas
var mov;                                           
// donde guardare un hilo > luego explico
var isrunning:Boolean=false;       
// booleno que dirá si la chara (el dibujo) se esta mov
var dir;                                            //
dirección, arriba=1;izquierda:2,abajo=3...
var sprite:Object;                           //
esta se encarga de recibir el dibujo (recoredemos que este as es externo)

simplemente declaro las variables a usar.

Luego defino todas las funciones que va a tener "teclado"

teclado.onKeyDown= function(){

if(Key.isDown(Key.UP))    //si esta presionada la tecla UP <<flash la conoce como la direccional Up
    {
    correrrun(4);                    //
llamo a la funcion correrun() con el parametro 4, es decir con direccion 4
    }

    //y asi el resto de los botones LEFT,RIGHT,DOWN

}

estos métodos son llamados por que se le agregó un Lístener al teclado "KEY"

Key.addListener(teclado);

¿¿ Pero que hace la función correrun() ??

var correrrun=function(apuntadir:Number)
{
dir=apuntadir;
if(!isrunning)
mov=setInterval(ct,100);
}

Esta Función recibe un número que va a ser la dirección, luego si la chara(dibujo) no esta en movimiento (isrunnig == false); crea un hilo de la funcion ct() y la llama cada 100 milisegundos.

La función ct():

var ct=function()
{
    isrunning=true;

    if(dir==1) //corriendo hacia abajo
    {
    sprite._y=0;
        if(Key.isDown(Key.DOWN))
        {
        correr();
        }
       else
        {
        dejardecorrer();
        }
    }  

................

}

Esta función ( que es llamada cada 10 milisegundos)  hace que: > si la tecla, por ejemplo ABAJO, esta presionada (mantenida presionada): hace la variable "isrunning" verdadera, lo que indica que la imagen esta en movimiento. Luego pone la posición _y dependiendo de la direccion a la que debe mirar la imagen. Si nos fijamos bien en la chara ( la imagen), cada linea horizontal describe un movimiento. Por ejemplo, toda la primer línea horizontal hace parecer que el personaje va corriendo hacia abajo.

entonces la posición _y para correr abajo es 0 debido es la primera y la que va ir variando es su posición x, para hacer el efecto de movimiento. Entonces si la tecla esta presionada se manda a llamar a la función correr que se encarga de mover la posición _x

var correr=function()             //hacer sprite se mueva 1234-234-34-4-1234
{
if(sprite._x>0-sprite._width*(3/4))
    sprite._x-=48;
else
    sprite._x=0;
}

Es decir _x va aumentando en (3/4) del ancho de la imagen, porque son 4 tomas las que conforman el movimiento, pero cuando se alcanza la última, esta nos devuelve a la primera:

Usar flechas del teclado

Aquí observamos internamente como se da todo.

 

var ct=function()
{
    isrunning=true;

    if(dir==1) //corriendo hacia abajo
    {
    sprite._y=0;
        if(Key.isDown(Key.DOWN))
        {
        correr();
        }
       else
        {
        dejardecorrer();
        }
    }  

.....

}

El else de la función sucede cuando el boton correspondiente se deja de presionar , entonces llama a la funcion dejardecorrer()

var dejardecorrer=function() //hacer sprite vuelva a posicion inicial
{
isrunning=false;
sprite._x=0;
clearInterval(mov);
}

...haciendo que la chara regrese a su posición inicial. La variable isrunning es puesta en false indicando que no hay movimiento y destruyendo el hilo que originaba el movimiento. En fin con esto podremos crear un mundo de personajes elegibles, ya en el próximo tutorial pondré como hacer que personajes secundarios ( los que no controla el jugador) se puedan mover mediante rutinas, o aleatoriamente.

Lo mejor de todo es que existen infinidad de charas y algunas de muy alta calidad. Cabe destacar que para que esta funcione en el script debe tener el tamaño de 192x256 pixeles.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate