Comunidad de diseño web y desarrollo en internet online

componer los movimientos de un personaje

Citar            
MensajeEscrito el 07 Ene 2012 10:36 pm
(J) Componer los movimientos de un personaje
====================================================================================
El concepto de estado, es muy importante cuando estamos realizando un juego . Esto es debido a que nuestros personajes, tanto nuestro protagonista como los enemigos a algunas determinadas acciones del juego pasan de un estado a otro en función de las acciones que realicemos y la propia lógica del juego.
Cuando pensamos en la forma de moverse de nuestro personaje, sin darnos cuenta ya hemos realizado una aproximación a los posibles estados de nuestro personaje, andar hacia la derecha, hacia la izquierda, parar, saltar y morir. Tendremos tantos estados como necesitemos en el fluir de nuestro programa.

So os fijaís en la linea de tiempo del movieclip soldado_mc (figura 1 o en el fichero fuente), observareís como hemos generado 7 capas en las que hemos ido generando varios fotogramas clave. Estos fotogramas clave, contienen las imagenes que hemos ido generando a partir del Sprite que vimos en el capítulo anterior.
Por ejemplo la capa andarizquierda contiene la secuencia de fotogramas

La capa andarizquierda, comienza a tener fotogramas clave, a partir del fotograma 15 de la linea de tiempo. Cada fotograma clave, contiene una de las imagenes mostradas anteriormente, ademas, los separa un fotograma (que no es clave), y que repite la imagen. Realmente hemos utilizado esta técnica para conseguir una animación con una frecuencia que nos agradaba, en base a la velocidad de animación general del fichero, que en este caso es de 12fps.
El codigo fuente (ActionScript), correspondiente al fotograma 15 de la capa Acciones es el siguiente:

status="izqandar";
if(jumping){stopAllSounds();}

Como podeís observar, simplemente define la variable status con el valor izqandar.
Por otro lado para todos los sonidos que hubiesen si estamos saltando, ya comentaremos esto.

La variable status, es muy importante en el clip_mc, porque en todo momento contiene el estado en el que se encuentra nuestro personaje. El estado es muy importante, porque así sabremos que es lo que está haciendo nuestro personaje en todo momento. Si esta andando hacia la izquierda, si esta parado, si está saltando.... Por tanto la técnica que hemos utilizado, es la de refundir, en un único clip de película, todos los estados posibles de nuestro personaje, tanto en lo relativo a animación de movimientos como en acciones que puede realizar. Las diferentes animaciones en las que hemos utilizado Sprites, observareís que no están superpuestas, ya que nos desplazaremos a un segmento u otro de la lienea de tiempo del clip, en función del estado de nuestro personaje. Así en una única película, tenemos toda la lógica de movimientos de nuestro personaje.

Los fotogramas de esta capa los utilizamos, para simular un fluir mas agradable en las animaciones cuando estando en un estado cambiamos a otro, por ejemplo cuando andamos hacia la izquierda y de repente, cambiamos a andar a la derecha, se produce un fluir similar a un giro para cambiar de un estado a otro.
En esta capa coinciden varios estados transitorios, como izquierda y derecha. Además es en esta capa, en concreto en el fotograma uno, donde se encuentra el estado inicial de nuestro personaje, que no debemos confundir con el estado paradofrente.

Para la capa de acciones, tenemos la costumbre de crear una capa independiente para introducir todo el código asociado a un número de fotograma en la linea de tiempo. De hecho en el primer fotograma, además están todas las funciones propias del clip de película _mc Hemos declarado acciones (en ActionScript) en once fotogramas de esta capa. La lógica principal y la definición de funciones, están en el primer fotogrma. Previo a ello, vamos a ver el código del resto de fotogramas, que es mucho mas sencillo.

Nota: Los fotogramas que inician estados los hemos etiquetado con un nombre, así nos será mas fácil referirnos a ellos en lugar de por el número de fotograma.

Código ActionScript del fotograma 3:
gotoAndPlay("izqandar");
status="izquierda";

En este código correspondiente al fotograma 3, tan solo establecemos el estado (con status) del personaje a izquierda, en realidad es un estado transitorio. Seguidamente saltamos la cabeza lectora de la película al fotograma etiquetado como izqandar

Código ActionScript del fotograma 7:
gotoAndPlay("derandar");
status="derecha";

Similar al anterior, pero referente a la intención de andar a la derecha.

Código ActionScript del fotograma 8:
if (status=="frente") {gotoAndPlay("derecha");}
if (status=="paradofrente") {gotoAndPlay("derecha");}
if (status=="derandar") {gotoAndPlay("frente");}

Si, nos fijamos en la imagen del fotograma 8 (capa de giro), realmente, podemos observar, que se trata de un estado en la animación transitorio, de ahí, que hallamos, establecido que debemos hacer, en función del estado desde el que procede nuestro personaje.
Es decir, si nuestro status es el de frente, que esl el status inicial, y alcanzamos este fotograma, será para inmediatamente continuar hacia el fotograma marcado como derecha, (el fotograma anterior). Como vimos, desde este fotograma (el 7) cambiaremos de status y continuaremos hacia andarderecha. Lo mismo sucede si nuestro status es el de paradofrente.
Sin embargo, si estamos andando hacia la derecha y alcanzamos este fotograma, nuestro siguiente paso será el de detenernos, estado paradofrente.

Los códigos fuente para los fotogramas 15 y 24 que están estrechamente ligados, son respectivamente los siguientes:
status="izqandar";
if(jumping){stopAllSounds();}


gotoAndPlay("izqandar");

Efectivamente no necesitan mas comentarios que los de establecer el estado de nuestro personaje a izqandar.
Cuando acabamos con la animación de los fotogramas 15 al 24, volvemos a empezar y retornamos al fotograma 15.
Realmente, esto tiene una explicación, y es que hemos planteado nuestro juego, para que cuando el usuario, pulse sobre la flecha izquierda, o derecha, nuestro personaje, no parará de moverse en esa dirección, hasta que no pulsemos la tecla de flecha abajo, que es la tecla para parar a nuestro personaje.
Esto lo hemos hecho así por simplicidad, pero también lo podriamos haber realizado, de modo que el personaje, solo se moviera cuando mantenemos pulsada una tecla, no obstante, no es significativo.

Los códigos fuente para los fotogramas 27 y 36 realizan la misma función pero en el movimiento a la derecha:
status="derandar";
if(jumping){stopAllSounds();}


gotoAndPlay("derandar");

Código ActionScript del fotograma 40:
stop();
status="paradofrente";

Simplemente para al personaje, no contiene animación y establece el status paradofrente

Los códigos fuente para los fotogramas 45 y 54 son los relativos a la animación de muerte:
status="muerto";

stop();

A diferencia del movimiento a derecha e izquierda, aquí no repetimos la animación y en el fotograma 54 la paramos con la sentencia stop(); No vamos a tener a nuestro personaje muriendo continuamente.
====================================================================================
BUENO ESO ES TODO AMIGOS,
ESPERO QUE LES SIRVA!! :D

Por Mtz

1 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 08 Ene 2012 12:29 am
Mtz, debes usar capturas de imagenes o ejemplos de lo que estas explicando. No es venir y vomitar un paso a paso sin ni siquiera explicar que es lo que vas a enseñar. se mas didactico menos apresurado.

movido a aportes

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.