Advertisement
  1. Code
  2. Games

Personalización avanzada de personajes para juegos Flash

by
Read Time:25 minsLanguages:

Spanish (Español) translation by Manuel (you can also view the original English article)

En este tutorial, nos adentraremos en la personalización de personajes de juegos Flash. El resultado puede utilizarse para proporcionar a los jugadores la posibilidad de crear un personaje único, más allá de las opciones básicas de vestimenta de la mayoría de los juegos.

Encontramos a este impresionante autor gracias a FlashGameLicense.com, ¡El lugar para comprar y vender juegos Flash!

Aprenderemos a dejar que el usuario añada colores personalizados a diferentes partes de nuestro personaje, a añadir diseños dibujados a mano a la ropa del personaje, y a modificar una animación básica para caminar que utiliza los cambios del jugador.


Avance del resultado final

Esto es lo que habrás construido al final del tutorial:

Rellena las zonas de la ropa del personaje con colores sólidos, añade detalles con el lápiz y luego dale al "play" y pulsa izquierda y derecha para verle caminar.


Paso 1: Configurar nuestra película Flash

Crea un nuevo documento Flash AS3. Ve al panel de propiedades y asegúrate de que todos los ajustes son los mismos que la imagen de abajo:


Paso 2: Configurar nuestra clase principal

A continuación creamos un nuevo archivo .as llamado CustomCharacter.as dentro del directorio de nuestro proyecto. Esta será nuestra clase principal. Introduce CustomCharacter en la configuración de publicación como la "clase principal". Asegúrate de que tu clase CustomCharacter es la siguiente.

(Consulta esta rápida introducción a la clase documental si no estás seguro de lo que estamos haciendo en este paso).


Paso 3: Creando nuestro personaje principal 

Ahora comenzaremos dibujando nuestro personaje principal. En este tutorial, es importante que nos aseguremos de tener cada parte del cuerpo en un MovieClip separado. Al hacer esto, podemos basar nuestra animación de caminar en Tweens, lo que acelerará el proceso de animación. Nuestro personaje estará formado por los siguientes objetos: una cabeza, pelo, una camisa, dos piernas y dos brazos. Puedes encontrar el personaje principal utilizado en este tutorial en el FLA fuente (el enlace de descarga está en la parte superior del tutorial). 

Por ahora, para animar al jugador a personalizar el personaje, limitaremos los colores de las partes del cuerpo del personaje a gris con contornos negros. Selecciona todo el cuerpo, pulsa F8 para convertirlo en un único MovieClip y llámalo jugador. Asegúrate de establecer el punto de registro de cada parte del cuerpo en la esquina superior izquierda. Ahora haz clic en el nuevo movieclip Player en el escenario y establece el nombre de la instancia como jugador.

Ahí lo tienes, ¡acabamos de crear nuestro personaje de jugador!


Paso 4: Crear un ColorPicker

Para empezar, necesitamos añadir el componente ColorPicker a nuestra biblioteca. Ve al panel de componentes yendo a Ventana > Componentes. Busca la clase ColorPicker y arrástrala al panel de la biblioteca.

A continuación tenemos que hacer todo el trabajo de ActionScript. Este es el aspecto que tendrá nuestra clase CustomCharacter después de nuestros nuevos cambios.

Vamos a ver esto paso a paso, empezando por la función constructora. Primero, estamos creando una nueva var llamada myColorPicker. Luego le decimos que es una instancia de la clase ColorPicker llamando = new ColorPicker(). A continuación le decimos a nuestro ColorPicker que sea cambiable e invisible, para que podamos hacer que aparezca cuando hagamos clic en el reproductor. A continuación, añadimos la clase ColorPicker al escenario, aunque no sea visible.

También añadimos dos receptores de eventos. Uno para cuando se hace clic en el reproductor, que alterna la visibilidad del ColorPicker y lo mueve a la ubicación del ratón al hacer clic, y el segundo para comprobar cuando el usuario ha seleccionado un nuevo color, ¡Para que podamos hacer el ColorPicker invisible de nuevo!


Paso 5: Distinguir entre partes del cuerpo

Desafortunadamente, no podemos usar el ColorPicker y hacer que cambie el color de un objeto. En primer lugar, necesitamos que el ColorPicker distinga sobre qué objeto se está haciendo clic, para que pueda determinar qué objeto cambiar. Para ello es necesario utilizar una de las potentes funciones MouseEvent de AS3.

Dentro de la función showPicker, podemos usar e.target para apuntar al MovieClip sobre el que realmente se está haciendo clic. Podemos bajar el alfa del objeto pulsado para confirmar con qué objeto estamos tratando. Sólo hay que añadir el código siguiente a la función showPicker().


Paso 6: ¡Preparación del color!

Ya casi estamos listos para colorear nuestros objetos. Antes de empezar, tenemos que asegurarnos de que podemos mantener los contornos de las partes de nuestro cuerpo. Para hacer esto, necesitamos identificar el área que necesita un cambio de color. Vamos a tener que ir dentro del MovieClip para cada parte del cuerpo, y seleccionar el área de relleno gris dentro del contorno.

A continuación, pulsa F8 para crear un nuevo MovieClip de este relleno gris y llámalo "_____Color" (así que para el movieclip del brazo lo llamaremos ArmColor). Finalmente, establece el nombre de instancia de cada uno de estos objetos ____Color a color. Ahora cada parte del cuerpo debe tener un MovieClip de color dentro de él.


Paso 7: Los colores (The Colors) 

Finalmente estamos añadiendo coloración a nuestra aplicación. Este es el aspecto que debería tener tu proyecto al final de este paso:

Captura de pantalla de la aplicación

¡Muy bien! Vamos a ver esto paso a paso. Para empezar, vamos a crear una nueva variable MovieClip, myChangedObject, a la que accederá nuestro programa. Esto es para que nuestra función showPicker() pueda decirle a nuestra función colorChanged() en qué MovieClip se hizo clic por última vez.

Ya que eso está fuera del camino, veamos nuestra función showPicker(). Como puedes ver, hemos añadido un pequeño comprobador para ver si el nombre del objeto sobre el que se ha hecho clic es "color". Esto es solo una comprobación para ver si el usuario ha hecho clic en el contorno del jugador, los zapatos, o cualquier otra cosa que no está destinada a ser cambiada.

A continuación estamos cambiando nuestra nueva variable myChangedObject para que sea igual al objeto sobre el que se ha hecho clic, e.target, para que nuestra función colorChanged() pueda hacer los cambios finales. Finalmente, le decimos a nuestro ColorPicker (myColorPicker) para tener el color previamente seleccionado. Si no hay ninguno, entonces será por defecto el negro.

Analicemos este pequeño trozo de código. En primer lugar, es importante saber que para tener un color preseleccionado, la clase ColorPicker tiene una variable .selectedColor. Este es un número que puede recibir un int de 6 dígitos (0xRRGGBB). En la segunda parte, estamos convirtiendo los datos del paréntesis en un uint para pasarlo al ColorPicker.

Aquí está la clave, estamos esencialmente yendo dentro de nuestro MovieClip seleccionado myChangedObject, entrando en su sección de transformación (donde se almacenan nuestros datos), entrando en los datos de colorTransform de los datos de transformación, y sacando la variable de color que contiene nuestro código RGB (que luego pasamos como el color seleccionado del selector de color). Piensa en ello como en un directorio:

myChangedObject/Datos de transformación/Color Datos de transformación/Datos de color (RGB)

¡Todavía no hemos terminado! A continuación vamos a ver nuestra función colorChanged(). Aquí, estamos creando una nueva instancia de la clase ColorTransform. A continuación, estamos estableciendo la variable de color dentro de la clase ColorTransform al color que el usuario ha seleccionado con el selector de color.

Sin embargo, tenemos que añadir un "0x" al color elegido por el ColorPicker (e.target.hexValue) para formar la variable completa que podemos pasar a nuestro ColorTransform. Esto es porque hexValue da los colores en formato de cadena "RRGGBB", y nosotros los necesitamos en formato de entero 0xRRGGBB. Como antes, estamos convirtiendo todos los datos añadidos a un nuevo uint() que el ColorTransform puede reconocer.

FINALMENTE, volvemos a entrar en: myChangedObject.transform.colorTransform excepto que esta vez, estamos cambiando REALMENTE la variable colorTransform a la nueva variable ColorTransform que acabamos de crear.

Eso ha sido confuso, pero ahora que esa parte ha terminado, podemos empezar a añadir nuevas funciones a nuestro programa.


Paso 8: Cambiar entre el lápiz y el cubo de pintura

Ahora que tenemos una aplicación funcional para colorear, pasemos a añadir alguna funcionalidad más.

A continuación, vamos a intentar que el programa dibuje directamente sobre las partes del cuerpo del jugador, para que el usuario pueda dibujar algunos diseños geniales para tu personaje. Como puedes ver arriba, he montado un panel con dos herramientas. En primer lugar, tenemos un lápiz de dibujo y a continuación una herramienta de cubo de pintura. El propósito de este tutorial no es armar la UI, pero los he incluido en la fuente. Puedes diseccionar los gráficos si quieres aprender cómo se hicieron.

Además, esto es una especie de extensión de este tutorial de Carlos Yanez, que hace un gran trabajo explicando cómo crear una aplicación de dibujo.

Al igual que en ese tutorial, tengo una interfaz que consiste en dos cubos de pintura y dos imágenes a lápiz. Una es gris y la otra es en color. El gris hará que la imagen de color sea visible para mostrar que la herramienta ha sido activada.

Una vez que se activa una herramienta, la otra se desactiva. En este paso, solo estamos trabajando en el cambio entre las herramientas. Durante los siguientes pasos, cubriremos cómo hacer funcionar la herramienta del lápiz. Este es el aspecto que debería tener nuestro código:

En primer lugar, puedes ver que hemos quitado los receptores de eventos showPicker y colorChanged, y ahora solo deben ser añadido cuando elegimos las opciones del cubo de pintura. En su lugar, hemos añadido dos receptores de eventos para cada botón, que enlazan con dos funciones que activan la herramienta sobre la que hemos pulsado. Las funciones añaden sus propios receptores de eventos y eliminan los receptores de eventos de la otra herramienta. También hacen visibles e invisibles los elementos de la interfaz correcta.

Nuestra nueva aplicación


Paso 9: Utilizar un selector de color para el lápiz

Hemos configurado la interfaz, pero nos queda una duda. ¿Cómo podemos elegir con qué color dibujar para la herramienta lápiz? La respuesta es sencilla. Podemos simplemente reposicionar nuestro selector de color para que esté al lado de la herramienta lápiz. Es bastante simple también. Solo tienes que añadir esto al final de la función enablePencil():

Para asegurarnos de que el jugador no utiliza el ColorPicker cuando seleccionas la herramienta cubo, podemos añadir esto a la función enableBucket():


Paso 10: Un conjunto de partes del cuerpo

Cada vez estamos más cerca de poder dibujar sobre nuestro personaje, pero aún nos queda trabajo por hacer. Pronto, vamos a empezar a enmascarar nuestros dibujos a clips de película dentro del personaje, para que se mantengan dentro del contorno del personaje. Para ello, primero tenemos que crear una lista de objetos que necesitan ser enmascarados. Podemos hacerlo en forma de matriz.

A diferencia de antes, vamos a tener que dar a cada parte del cuerpo un nombre de instancia, así que vuelve al clip de película del reproductor, y selecciona cada objeto uno por uno. Dale a cada objeto un nombre ("brazo1", "pierna2", "pelo", etc.). Cuando hayas terminado eso, crea una matriz en el constructor de CustomCharacter(), así:

Lamentablemente, eso no funciona como estaba previsto.

Esto se debe a que estamos intentando referenciar el clip de película del jugador antes de que se construya. Para solucionar esto, necesitamos referenciarlo también en el constructor.

Básicamente, estamos dividiendo la variable en dos partes. La primera parte está antes del constructor cuando creamos la matriz, para que sea accesible en toda la clase. La segunda está DENTRO del constructor cuando podemos asignarle un valor.

Aquí hay un fragmento de nuestra clase:


Paso 11: Crear un lienzo para dibujar

Para poder dibujar en un objeto, necesitamos utilizar la clase Figura. En primer lugar, añadir la declaración de importación a los demás al comienzo de nuestra clase principal.

Esto es lo que tienes que añadir al final de tu función constructora CustomCharacter():

Aquí hay una explicación rápida de lo que estamos haciendo. Básicamente estamos creando un bucle for que se dispara una vez por cada uno de los elementos de nuestra matriz. En el bucle, creamos una nueva instancia de la clase Figura.

Las siguientes cuatro líneas son sólo para pruebas de depuración, algo así como el dibujo de depuración de Box2D. Básicamente está mostrando cajas púrpuras alrededor de las partes del cuerpo del personaje. Lo único que hay que tener en cuenta es que estamos multiplicando la anchura y la altura de cada parte del cuerpo por 3 para obtener la anchura y la altura de nuestra caja de pruebas púrpura, de modo que sabemos que cada uno de estos "lienzos" será lo suficientemente grande para dibujar. A continuación asignamos el nombre "shapes" a cada Figura creada, y lo añadimos al elemento actual de la matriz drawableParts.


Paso 11: Enmascarar nuestras formas

Para empezar, tendremos que dar a nuestras formas una superficie para ser enmascarada también. No podemos simplemente vincularlas a nuestro clip de película de la parte del cuerpo, porque entonces se volverán invisibles. Esto es lo que podemos hacer en su lugar.

Ve al clip de película del pelo. Haz clic con el botón derecho del ratón en nuestro clip de película de color y haz clic en "Copiar". A continuación, haz clic con el botón derecho del ratón en un espacio vacío dentro de nuestro clip de película de cabello y haz clic en "Pegar en su lugar". Ahora ve a las propiedades de nuestro nuevo clip de película y establece el nombre de la instancia como maskclip. Ahora vuelve a nuestro clip de película de nuestro jugador y repite esto para cada objeto.

A continuación podemos añadir este código al final de nuestro bucle for:

Vuelve a probar la Película y como por arte de magia, nuestro jugador se vuelve de color púrpura, porque solo la zona del jugador que está sombreada está mostrando nuestros cuadros de depuración. Esto significa que nuestros dibujos permanecerán en la superficie en la que estamos dibujando.


Paso 12: Acceder a nuestro lienzo

Ahora viene la pregunta: "¿Cómo puedo acceder al lienzo myShape de cada parte del cuerpo?" Por desgracia, la respuesta no es tan sencilla. Sin embargo, puedo guiarte paso a paso. Este snippet nos enlazará directamente a nuestro myShape si lo insertamos en un MouseEvent. ¿Por qué? Bueno, sigue leyendo...

Vayamos paso a paso. Este proceso es algo así como un ratón (sí, uno de verdad) tratando de encontrar su queso (nuestro lienzo) porque tenemos que dar un montón de vueltas para encontrar lo que buscamos.

  • Primero, nos dirigimos al objetivo del MouseEvent. Este puede ser el objeto sobre el que el ratón hizo clic, se soltó, se movió, etc.
  • A continuación vamos al padre de ese objeto. Este está obligado a ser un clip de película de una parte del cuerpo (como el brazo) porque los únicos objetos sobre los que se puede hacer clic son el contorno o el relleno del Jugador (nos aseguraremos de que sea el relleno más adelante).
  • Ahora que estamos en la parte del cuerpo de clip de película, podemos usar getChildByName("Object Name Here") para acceder al objeto con el nombre dado.

Dado que previamente hemos nombrado a todos nuestros objetos Figura como shapes, llamar a getChildByName("shapes") nos dará acceso a ellos.


Paso 13: Colorear en blanco y negro

Ahora podemos empezar a dibujar sobre el jugador en blanco y negro.

Este es el aspecto que debería tener nuestra clase principal al final del tutorial. He añadido comentarios a todos los cambios que he hecho.

El propósito de este tutorial no es cubrir el dibujo en objetos de forma. Eso está completamente cubierto por el tutorial de Carlos. En este momento, solo estamos aprendiendo las técnicas para dibujar en el objeto correcto. Si estás confundido sobre cómo estamos accediendo al objeto de forma correcta, por favor, vuelve a leer el paso 12 para la explicación completa.


Paso 14: Dibujar con color

Ahora podemos pasar a dibujar con un color seleccionado del ColorPicker. Esto es bastante similar al proceso que utilizamos en la herramienta cubo.

Empecemos por añadir una nueva variable fuera de todas las funciones, pero dentro de la clase. Esto es lo que nuestro programa utilizará para almacenar el color actual del lápiz.

Ahora pasemos a nuestra función drawOnPlayer(). Centra tu atención en la línea que establece el lineStyle() de la forma que estamos dibujando. El segundo parámetro de la función debe ser "0x000000". Cambia SOLO ese parámetro por:

Esto es básicamente decirle que dibuje usando el código RBG de nuestro ColorPicker mientras añade el "0x" necesario para completar el color.

Esta es la línea de código que debería verse ahora:

Finalmente, necesitamos completar la función colorChangedPencil(), que se llama cuando se selecciona un nuevo color de lápiz. Baja a ella y añade esta línea de código:

Esto es simplemente asignar el código hexValue o RBG de nuestro ColorPicker a nuestra variable pencilColor.


Paso 15: Ampliar el panel de botones

En el siguiente paso, vamos a trabajar para añadir una nueva característica a nuestro juego. Desafortunadamente, no podemos dejar un montón de espacio de marcador de posición dentro del panel en caso de que podamos añadir otra característica. Puedes utilizar esto como una forma rápida y sucia de ampliar el panel para hacer más espacio para otros botones y herramientas para nuestra aplicación.

Paso 1: Selecciona

Selecciona todos los objetos dentro de nuestras opciones de clips películas.

Paso 2: Cambio

Mantén pulsada la tecla Shift y pulsa la tecla Izquierda para deslizar el clip de película hacia la izquierda.

Paso 3: Estirar

Utiliza la herramienta del ratón y estira las esquinas de nuestro relleno del panel (el color gris) así como nuestros contornos a través de la pantalla.

Paso 4: Reajusta

Asegúrate de modificar cualquier objeto basado en coordenadas. Por ejemplo, ahora tenemos que cambiar la ubicación del ColorPicker del lápiz porque nuestro botón de la Herramienta Lápiz se movió.


Paso 16: Restablecer nuestros datos

Como todo buen programa de dibujo, tenemos que dar al jugador una forma de reiniciar su proyecto. ¿Qué mejor que un botón de reinicio para aquellos usuarios que no pueden tomar decisiones de dibujo perfectas? Empecemos por crear un nuevo botón llamado Reiniciar y añadirlo a nuestro panel de herramientas.

Utilizaré este botón (está en el FLA):

Coloca uno en el clip de película de herramientas y dale un nombre de instancia de "reset". A continuación, añade el siguiente oyente de eventos a nuestra función constructora:

Ahora agrega esta función manejadora de eventos a nuestra clase:

Lee los comentarios en la función para una explicación paso a paso de lo que estamos haciendo


Paso 17: Integrar la animación

Si recuerdas el principio del tutorial, el objetivo de este tutorial no era crear un juego de vestir, sino crear un componente de vestir avanzado para ser utilizado en juegos. Hasta ahora hemos añadido un componente de vestimenta dinámica al personaje, que de otro modo sería estático. A continuación, nuestro objetivo es integrar una sencilla animación al caminar con nuestra personalización del jugador.

Esto es solo una demo para mostrarte lo fácil que puedes usar estas personalizaciones en un juego real.

Para empezar, he creado una animación simple con tweens. Básicamente he interpolado los clips de película de las partes del cuerpo para que parezca que el jugador está caminando. Puedes ver la animación a continuación. Recuerda que el propósito de este tutorial no es diseñar la animación real, sino aprender a integrarla con la aplicación que ya hemos construido. Sin embargo, al igual que los demás elementos de la aplicación, la animación está incluida en el código fuente.

Aquí puedes ver la línea de tiempo del clip de película del jugador.

Ahora prueba la película. El jugador debería estar animado. Puedes intentar dibujar sobre las piernas del jugador, y si has seguido las instrucciones correctamente, entonces cuando dibujes, el dibujo debería pegarse a las piernas del jugador y animarse con ellas. Más adelante explicaré en detalle el porqué.


Paso 18: Dibujar > Flujo de trabajo de animación

Si has intentado dibujar en el reproductor antes, puede que hayas tenido alguna dificultad para dibujar en las partes móviles (¡DUH!). Esto se debe a que aún no hemos implementado ningún flujo de trabajo o interfaz real. En este paso haremos todo eso para que nuestra aplicación sea totalmente utilizable.

Para empezar, vamos a añadir una línea de código a nuestro constructor para detener la animación del jugador:

A continuación, tenemos que ampliar nuestro panel de nuevo. Solo hay que seguir el paso 15 y hacer el panel un poco más largo

Ahora tenemos que añadir un botón de "reproducir animación". Al igual que los otros elementos de la interfaz de usuario, mi botón es como un interruptor. Cuando se hace clic en él, se alterna la visibilidad de otro clip de película para dar al botón la apariencia de estar iluminado. El nombre de instancia del botón es playgame mientras que el nombre de instancia del clip de película iluminado es playing. Mira el FLA o la vista previa del SWF para ver cómo encajan.

Aquí está el código que tenemos que añadir para que esto funcione... Primero añade esto a nuestro constructor para desactivar el efecto de iluminación:

A continuación añadimos este EventListener a nuestro constructor:

Finalmente, vamos a crear esta función en nuestra clase. Por el momento, esto hace solo dos cosas. En primer lugar, cambia la visibilidad de nuestro clip de película en reproducción. Luego, comprueba si el clip de película es visible. Si es así, inicia la animación de nuestro jugador. En caso contrario, detiene la animación en su primer fotograma.

Felicidades, ya has implementado un motor de animación básico en nuestro programa de personalización.


Paso 19: Algo de lógica de juego simple

Todo tiene buena pinta, pero ¿qué gracia tiene un juego sin interactividad con el usuario? En este paso vamos a añadir algo de interactividad sencilla a nuestro juego. Para empezar, descarga la clase KeyObject de Senocular aquí. Esto hará que nuestra lógica sea mucho más fácil de escribir.

Vamos a tener que hacer un cambio rápido en la clase. Ábrela. En la primera línea reemplazar el:

con:

Ahora podemos empezar importando la clase. Recuerda ponerla en el directorio de nuestra clase Main. Añade esta declaración de importación junto a las demás:

Para configurar la clase KeyObject. Solo tienes que crear una nueva clave variable así:

Y asignarlo a una nueva instancia de la clase KeyObject mientras se añade la propiedad Stage, así:

Pon esa línea de código en el constructor o, si no funciona, añade esta línea al constructor:

...y luego añade una nueva función para manejar ese evento:

Si no lo haces, es posible que el escenario no haga referencia a nada en el momento en que necesites utilizarlo.

A continuación necesitamos crear un receptor de eventos ENTER_FRAME. Sin embargo, debemos eliminarlo cuando hayamos terminado. Añade este código a tu función enableGame():

El significado de este código debería estar bastante claro para ti, así que no es necesario explicarlo.

Ahora, aquí está nuestra función enterFrame():

Prueba tu SWF, pulsando las teclas de flecha izquierda y derecha.


Paso 20: ¡Arreglar las ventanas emergentes del ColorPicker!

Como habrás notado, si tenemos la herramienta lápiz activa y estamos haciendo que el jugador se mueva, nuestro ColorPicker se sigue abriendo. ¡Aquí hay una solución rápida y sucia para eso! Simplemente haz los cambios comentados en tu función enableGame():

No tenemos que hacer nada con la herramienta cubo porque ya mueve el ColorPicker hacia la ubicación del Ratón.


Conclusión

Como puedes ver, crear una experiencia de personalización única no es tan difícil. De hecho, es una muy buena forma de permitir al jugador hacer su avatar o personaje "suyo". Realmente, solo hemos rozado la superficie de las opciones de personalización disponibles en Flash. A ver qué más se te ocurre.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.