Cristalab

Movimientos de personajes en Juegos RPG tipo Zelda

Por: AXM + 06.11.2007

En este tip voy a explicarles como realizar los movimientos de un personaje en un juego RPG, debido a que me encuentro realizando un juego de este estilo y queria mostrarles la forma en la que lo he realizado. Más adelante voy a publicar otro tip de como manejar los obstáculos y las colisiones.

Este es el ejemplo del movimiento:


(pulsar en el fondo verde y mover las flechas para que se mueva la niña)


Cada postura del personaje corresponde a un fotograma del MovieClip que contiene a la niña.

La explicación está en el código. Voy a comentar el código para que quede lo más claro posible.

Código :

package
{
   import flash.display.MovieClip;
   import flash.events.KeyboardEvent; // Clase que permite detectar cuando una tecla se pulsa
   import flash.ui.Keyboard; // Clase que se necesita para reconocer las teclas pulsadas
   import flash.events.TimerEvent; // Clase que perminte crear temporizadores
   import flash.utils.Timer;

   public class JuanitaCaminando extends MovieClip  // Esta es la clase del juego
   {
      // 4 Boleanos que permiten saber cuales flechas estan pulsadas
      // Cuando de pulsa se pone en true y cuando se suelta en false
      private var pulsadoLeft      :Boolean   = false;
      private var pulsadoRight   :Boolean   = false;
      private var pulsadoDown      :Boolean   = false;
      private var pulsadoUp      :Boolean   = false;
      
      // 2 Boleanos que indican el que estado esta juanita
      private var caminando      :Boolean   = false;
      private var parada         :Boolean   = true;

      // Numero que indica hacia donde esta mirando juanita.
      // Se utiliza para el movimiento y para la postura.
      // Esta basado en las agujas de reloj.
      // EJEM: Cuando direccion es 300 (osea 3:00), juanita se mueve a la derecha
      // Cuando direccion es 130 (osea 1:30), juanita se mueve a la diagonal derecha
      private var direccion      :uint;      
                                    
      private   var velocidad      :uint       = 4; // pixeles que se desplaza juanita
      
      // Hay dos Timer para que el movimiento sea mas fluido...
      // y para que el personaje se quede parada viendo en diagonal.
      private var tiempoParaGirar   :Timer      = new Timer(50, 0);
      private var tiempoParaMover   :Timer      = new Timer(20, 0);
      
      public function JuanitaCaminando()
      {
         // listener que aviza cuando se pulsa una tecla
         stage.addEventListener(KeyboardEvent.KEY_DOWN,      pulsarTecla);
         // listener que aviza cuando se suelta una tecla
         stage.addEventListener(KeyboardEvent.KEY_UP,      soltarTecla);
         tiempoParaGirar.addEventListener(TimerEvent.TIMER,   giraJuanita);
         // activando temporizador que actualiza la postura de juanita.
         // Ejecuta la funcion giraJuanita que esta mas abajo
         tiempoParaGirar.start();
         
         tiempoParaMover.addEventListener(TimerEvent.TIMER, moverJuanita);
         
      }
      
      // Funcion que se ejecuta cuando se pulsa una tecla
      private function pulsarTecla(e:KeyboardEvent):void
      {
         // Segun la tecla que se pulse se activan los boleanos.
         // investigar sobre switch en la ayuda de flash
         switch(e.keyCode)
         {
            case Keyboard.LEFT:
               pulsadoLeft      = true;
               break;
            case Keyboard.RIGHT:
               pulsadoRight   = true;
               break;
            case Keyboard.UP:
               pulsadoUp      = true;
               break;
            case Keyboard.DOWN:
                pulsadoDown   = true;
               break;
            default:
               break;
         }
         // Condicional que activa el temporizador que actualiza el movimiento de juanita
         if (caminando == false)
         {
            tiempoParaMover.start(); // Se ejecuta moverJuanita();
         }
         // Esto hace que solo se active cuando se pulsa la tecla.
         // y no siempre que este presionada
         caminando = true;
      }
      
      private function soltarTecla(e:KeyboardEvent):void
      {
         // lo mismo que la funcion pulsarTecla pero al revez
         switch(e.keyCode)
         {
            case Keyboard.LEFT:
               pulsadoLeft      = false;
               break;
            case Keyboard.RIGHT:
               pulsadoRight   = false;
               break;
            case Keyboard.UP:
               pulsadoUp      = false;
               break;
            case Keyboard.DOWN:
                pulsadoDown   = false;
               break;
            default:
               break;
         }
         // Condicional que desactiva el temporizador, cuando todas...
         // .. las teclas estan sueltas
         if (pulsadoLeft      == false   &&
            pulsadoRight   == false   &&
            pulsadoUp      == false   &&
            pulsadoDown      == false   )
            {
               caminando = false;
               tiempoParaMover.stop(); // No se ejecuta moverJuanita();
            }
      }
      
      // Funcion que controla la postura de juanita.
      private function giraJuanita(e:TimerEvent):void
      {
         if (caminando == true)
         {
            // Caminado 12:00
            // Dependiendo de las teclas pulsadas,..
            // y si no ha sido antes verdadero este condicional...
            // el MC llamado juanita va a un fotograma llamado caminando1200
            // que corresponde a la postura correspondiente
            if (pulsadoLeft      == false   &&
               pulsadoRight   == false   &&
               pulsadoUp      == true      &&
               pulsadoDown      == false   &&
               direccion      != 1200)
               {
                  juanita.gotoAndStop("caminando1200");
                  direccion      = 1200; // Esto hace que solo se ejecute una vez
               }
            // Caminado 1:30
            if (pulsadoLeft      == false   &&
               pulsadoRight   == true      &&
               pulsadoUp      == true      &&
               pulsadoDown      == false   &&
               direccion      != 130)
               {
                  juanita.gotoAndStop("caminando130");
                  direccion      = 130;
               }
            // Caminado 3:00
            if (pulsadoLeft      == false   &&
               pulsadoRight   == true      &&
               pulsadoUp      == false   &&
               pulsadoDown      == false   &&
               direccion      != 300)
               {
                  juanita.gotoAndStop("caminando300");
                  direccion      = 300;
               }
            // Caminado 4:30
            if (pulsadoLeft      == false   &&
               pulsadoRight   == true      &&
               pulsadoUp      == false   &&
               pulsadoDown      == true      &&
               direccion      != 430)
               {
                  juanita.gotoAndStop("caminando430");
                  direccion      = 430;
               }
            // Caminado 6:00
            if (pulsadoLeft      == false   &&
               pulsadoRight   == false   &&
               pulsadoUp      == false   &&
               pulsadoDown      == true      &&
               direccion      != 600)
               {
                  juanita.gotoAndStop("caminando600");
                  direccion      = 600;
               }
            // Caminado 7:30
            if (pulsadoLeft      == true      &&
               pulsadoRight   == false   &&
               pulsadoUp      == false   &&
               pulsadoDown      == true      &&
               direccion      != 730)
               {
                  juanita.gotoAndStop("caminando730");
                  direccion      = 730;
               }
            // Caminado 9:00
            if (pulsadoLeft      == true      &&
               pulsadoRight   == false   &&
               pulsadoUp      == false   &&
               pulsadoDown      == false   &&
               direccion      != 900)
               {
                  juanita.gotoAndStop("caminando900");
                  direccion      = 900;
               }
            // Caminado 10:30
            if (pulsadoLeft      == true      &&
               pulsadoRight   == false   &&
               pulsadoUp      == true      &&
               pulsadoDown      == false   &&
               direccion      != 1030)
               {
                  juanita.gotoAndStop("caminando1030");
                  direccion      = 1030;
               }
            parada = false;
         }
         // Este else hace que cuando se detenga juanita, quede en la postura adecuada
         else if(parada == false)
         {
            parada      = true;
            switch(direccion)
            {
               case 1200:
                  juanita.gotoAndStop("parada1200");
                  break;
               case 130:
                  juanita.gotoAndStop("parada130");
                  break;
               case 300:
                  juanita.gotoAndStop("parada300");
                  break;
               case 430:
                  juanita.gotoAndStop("parada430");
                  break;
               case 600:
                  juanita.gotoAndStop("parada600");
                  break;
               case 730:
                  juanita.gotoAndStop("parada730");
                  break;
               case 900:
                  juanita.gotoAndStop("parada900");
                  break;
               case 1030:
                  juanita.gotoAndStop("parada1030");
                  break;
               default:
                  break;
            }
            direccion   = 0; // Para que no patine, si se oprime rapido la tecla.
         }         
      }
      
      private function moverJuanita(e:TimerEvent):void
      {
         // Dependiendo de la postura, camina hacia una direccion o otra.
         // Esta es la mejor opcion cuando se trabaja con colicoines.
         switch(direccion)
         {
            case 1200:
               juanita.y -= velocidad;
               break;
            case 130:
               // Lo de velocidad-1 es para que no vaya mas...
               // ... rapido en diagonal que hacia los lados
               juanita.x += velocidad-1;
               juanita.y -= velocidad-1;
               break;
            case 300:
               juanita.x += velocidad;
               break;
            case 430:
               juanita.x += velocidad-1;
               juanita.y += velocidad-1;
               break;
            case 600:
               juanita.y += velocidad;
               break;
            case 730:
               juanita.x -= velocidad-1;
               juanita.y += velocidad-1;
               break;
            case 900:
               juanita.x -= velocidad;
               break;
            case 1030:
               juanita.x -= velocidad-1;
               juanita.y -= velocidad-1;
               break;
            default:
               break;
         }
      }
   }
}


Descargar Archivos

La niña tierna la saque de http://www.spriters-resource.com. Una web que colecciona Sprites de juegos de varias consolas.

Hay mas web que coleccionan sprites de juegos:
http://www.retrogamezone.co.uk/
http://www.videogamesprites.net/
http://laalianza.forogratis.es/index.php/
http://timesprites.orgfree.com/
http://www.gsarchives.net/index2.php

Etiquetas actionscript_3

Comentarios | Enviar un comentario
Wow AXM, esto si que es un gran tip Sonrisa , en lo que pueda lo voy a probar.
Gracias por compartir tu código miau
Por: psycho-vnz
Excelente aporte, me va a resultar muy útil para una aplicación que empezaré a desarrollar en estos días... Sonrisa
Por: Blackdragon
AXM, en donde se enlaza la clase JuanitaCaminando con el mc que esta en el swf? Confundido
Por: psycho-vnz
Me preguntas que como se conecta JuanitaCaminando.as con el fla?. En la clase del documento. En Flash CS3 le das afuera del escenario por ejemplo y en la pestaña de propiedades buscas un campo de texto. Hay pones JuanitaCaminando.

No hago mas. No se si era eso. Si no pregunta otra vez a ver si le atino.
Por: AXM
Nice Tip. Buen código, optimizable an algunos aspectos de POO cómo el separar el código en varios objetos (un para controlar los eventos, otro para controlar movimientos y poder aplicarlo a otros personajes..) y no tenerlo todo puesto en la main class.
Por: Zguillez
Que buen tutorial!!!
Por: D- virus_blog
Felicidades!!!, excelente aporte con AS3 Thumbs up
Por: Otaku RzO
excelente, pero opino lo mismo q Zguillez
Por: eldervaz
Excelente tip miau
Por: XKlibur
Órale! Sí está muy bueno!
Por: Rafeo_blog
Bug encontrado:

Si mientras mueves el personaje con las teclas del cursor, pulsas al mismo tiempo el botón derecho del ratón, el personaje sigue andando sin control, a menos que lo muevas en todas direcciones, y entonces se para.

Un saludo Riendo

Guiño
Por: May Quarantine_blog
oaw
Por: Super Taldo_blog
May Quarantine, oye tienes razón, no me había fijado
Por: AXM
Excelente!!! Lo que estaba buscando...
Precisamente hace unos días puse un post el problema de la respuesta del teclado al mover un personaje: con esto queda solucionado el asunto!!!
Saludos.
Por: ExGaul_blog
me gusta y quisiera descargarlo pero no se como yo le pondria un 1000 de calificacion

nombre: erivan
Por: erivan_blog
ExGaul chebre que te haya servido.

Erivan debajo del codigo esta el link, busca
Por: AXM
interesante,
hace rato hice una clase para el movimiento de sprite desde un png o jpg,
vos a posteralo en cuanto lo encuentre ok
Por: eveevans_blog
y Como hacer lo en flash 8 gracias
fer_bolivia@hotmail.com
Por: Fernando_blog
Zguillez, elder ¿algún ejemplillo de lo que dicen? ...supongo qué....... ¿se refieren a separar cada función en otros documentos .as ?

Muy buen tip Thumbs up estaremos esperando las colisiones Muy Feliz.
Por: IP anónimo_blog
tengo un problema lo que pasa es que los Sprites vienen todos Juntos y por eso no puedo poner a mi personaje a caminar como le hago?

Gracias de Antemano
Por: sonicodx1
woow.... me lleba la cachetona... que diablos se supone que hace falta estudiar para hacer todo eso?? está exelente y en esta página he encontrado un monton de códigos que me ha ayudado muchísimo... agradecido a ti y a todos los que han compartido acá sus tutoriales
Por: knarrenheinz_blog
jueguen a gladiatus aqui les dejo el link de reclutamiento (;
Por: raul_blog
q enbole leer todo es muy aburrido yo ya se todo eso
Por: jgkjgn gdkjg_blog
Esto es bastante interesante....Exelente Tip... miau
Por: Angel_of_the_Death
Muchas gracias y felicitaciones por tu aporte.

Perdona la molestia pero podrias explicarme como hacer para que un personaje solamente se mueva horizontalmente pero que pueda saltar verticalmente.

De nuevo mil gracias
Por: Nestor Fabio Montoya_blog
hola queria saber q parte del codigo quitar para q solo haga los movimientos pero solo en el centro, no se si me explico.
q solo haga q camina pero sin moverse del lugar ni que recorra todo el flash
Por: Joelf
hola como ago para jugar porque muevo las flechas pero se queda en el mismo lugar y es aburido sino bueno chau besitos.
p.d. areglen ese juegos porfavor.
Por: camila_blog
no manches!! esta muy chido el tutorial!!!
oye de casualidad tienes entre tus archivos algún ejemplo o guía para hacer un memorama con flash? porfa!!! mandame un ejemplo para memorama:

mmmn_jhls@hotmail.com
Por: LMN-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.