Advertisement
  1. Code
  2. Games

Da en el objetivo con un misil mortífero

Scroll to top
Read Time: 13 min
This post is part of a series called You Do The Math.
Gravity in Action
Circular Motion in AS3: Make One Moving Object Orbit Another

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Este tutorial lo guiará mediante la adición de mortíferos y certeros misiles guiados al arsenal de su próximo juego.


Vista previa del resultado final

Echemos un vistazo al resultado final para el que trabajaremos:


Paso 1: configure el documento FLA

Cree un nuevo conjunto de documentos de Flash para ActionScript 3.0. Usaré las dimensiones de 600x400 y una velocidad de cuadro de 30 FPS. Guarde el archivo con un nombre de su elección.

Create a .FLA documentCreate a .FLA documentCreate a .FLA document

Paso 2: crea una clase de documento

Además del FLA, también necesitamos crear una clase de documento. Crea un nuevo archivo Actionscript y agrega este código:

Guarde este archivo en el mismo directorio que nuestro FLA. Nómbrelo Main.as.


Paso 3: Enlace la clase Main con el FLA

Para compilar el código de la clase Main, necesitamos vincularlo con la FLA. En el panel Propiedades de FLA, al lado Class, ingrese el nombre de la clase de documento, en este caso, Principal.

Link the Main class with the FLA

Luego, guarde los cambios en el FLA.


Paso 4: dibuja un misil

Necesitamos un gráfico de misiles que se muestre al disparar. Puede importar un mapa de bits o dibujar una forma allí mismo en Flash. Usaré una forma pequeña en este ejemplo.

Draw a missile shape or import a missile bitmap.

Lo que es importante aquí es que tienes que hacer que el punto del misil se dirija hacia la derecha, ya que ese es el punto de origen de la rotación. Por lo tanto, 0 ° significa que apunta directamente hacia la derecha, -90 ° significa hacia arriba, 90 ° significa hacia abajo y 180 ° hacia la izquierda. Más adelante necesitaremos rotar el misil según su dirección.


Paso 5: Crea un MovieClip para el misil

Una vez que tenga el gráfico de misiles, selecciónelo y presione F8 para crear un Clip de película. Llámalo Missile ("Misil"), asegúrate de que el Punto de registro esté en el centro y marca la casilla "Exportar para ActionScript".

Create a MovieClip out of the missile you drew.Create a MovieClip out of the missile you drew.Create a MovieClip out of the missile you drew.

Terminará con un Misil MovieClip en la Biblioteca.

Missile MovieClip in the Library.

Si tiene una instancia de Misiles en el escenario, elimínela. Vamos a agregar el Misil MovieClip por código.


Paso 6: apuntar

Lo primero que debe saber un misil de orientación es dónde se encuentra el objetivo. Primero vamos a establecer la rotación del misil según la posición del cursor del mouse. Trabajemos con el evento enterFrame para una actualización de rotación constante.

Agregue una instancia de Missile al escenario, la colocaré en el centro (300, 200). Luego calcule la distancia desde el misil al cursor del mouse (lo estoy almacenando en las variables targetX y targetY). Finalmente, el ángulo del misil será la arcotangente de ambos puntos (targetX, targetY). El resultado que obtendrás será en radianes, pero la rotación funciona en grados, por lo que tendrás que hacer la conversión multiplicando por 180 / Pi. (Para ver por qué, consulte este artículo).

(¿No estás seguro de qué es Math.atan2 ()? Mira este artículo sobre trigonometría.

Si Publicas (Ctrl + Enter) el documento en este punto, debería obtener algo como esto:

Mueva su mouse cerca del misil para verlo girar.


Paso 7: buscar

Tenemos la rotación, ahora necesitamos el movimiento. El misil tiene que buscar el objetivo, sin importar si es un objetivo constante o en movimiento. Lo que haremos es calcular el movimiento de acuerdo con la rotación actual del misil. Establezcamos un valor para la velocidad y hagamos la persecución de misiles después del cursor del mouse.

Incluiremos un par de nuevas variables para calcular la velocidad (vx, vy). Cuando el misil apunta hacia la derecha, su ángulo es inferior a 90 ° y superior a -90 °, por lo que siempre es menor que el valor absoluto de 90 °. Cuando está apuntando hacia la izquierda, su ángulo tiene un valor absoluto superior a 90 °. Esto determinará vx de acuerdo con la velocidad, entonces vy será la diferencia de velocidad y vx.

Obtendrás un misil persiguiendo tu cursor.

Puede usar una velocidad diferente si lo desea.


Paso 8: Crea un lanzador de misiles

Los misiles no salen de la nada, se disparan desde los lanzadores de misiles. Hagamos un MovieClip que represente un cañón (usaré un rectángulo simple) y asígnele el nombre Cannon. Voy a agregar una instancia de Cannon por código, así que voy a mantener el escenario vacío.

Cannon MovieClip in the Library.

Paso 9: Disparar

Ahora, en lugar de agregar un misil, solo voy a agregar un cañón, y se agregará un misil en la posición del cañón cuando haga clic en el escenario. Agregaremos un booleano para verificar si el misil se ha disparado, y también una nueva función para disparar después del clic.

Esto es lo que obtendrás:

Esto no se ve bien Tenemos que hacer que el cañón gire también o forzar al misil a ir hacia arriba inmediatamente después de recibir el disparo. Como la opción n. ° 1 es el enfoque más fácil, tomaremos la opción n. ° 2.


Paso 10: menos precisión para una mejor apariencia

Si el cañón es vertical, esperaríamos que el misil se lanzara hacia arriba y luego se encaminara hacia su objetivo. El enfoque que usaré para lograr esto es dar al misil un ángulo inicial de -90 ° (apuntando hacia arriba), y girar suavemente para seguir el curso del cursor del mouse. Agregaremos una variable ease para determinar la suavidad o nitidez de la rotación. Luego crearemos otra variable para hacer un seguimiento de la rotación real que apunta directamente al objetivo, mientras que la rotación del misil cambiará de acuerdo con ease que establezcamos (ease = 1 se comportará como antes, cualquier cosa más alta hará un giro más suave )

Como la mitad de los valores de rotación son negativos, en algunos casos tendremos que calcularlos contra 360 para obtener la diferencia real entre el ángulo objetivo y la rotación del misil.

Echale un vistazo:

Observe lo que sucede cuando saca su mouse del SWF, y cómo esto es diferente del ejemplo anterior.


Paso 11: Impactos de misiles, explosiones de misiles

Además del Clip Missile, necesitamos una animación de explosión. En mi caso, haré un MovieClip por separado con una simple interpolación de un círculo que se expande. Lo estoy exportando como Explosion. Presione O para seleccionar la Herramienta Oval, y mantenga presionada la tecla Mayús mientras dibuja el óvalo para obtener un círculo.

The circle inside its own Movie Clip with a Bevel filter.The circle inside its own Movie Clip with a Bevel filter.The circle inside its own Movie Clip with a Bevel filter.

Para un efecto visual más agradable, pondré el círculo dentro de otro clip de película propio y le daré un filtro Bevel para obtener un color más oscuro en la parte inferior y un color más claro en la parte superior. A continuación, iré al cuadro 10 y presionaré F6 para crear un Keyframe, luego haré clic derecho entre el fotograma 1 y 10 y crearé un Tween clásico. De vuelta en el cuadro 10, presione Q para seleccionar la herramienta Transformación libre y ampliar el círculo.

Enlarge the circle in a Classic Tween.Enlarge the circle in a Classic Tween.Enlarge the circle in a Classic Tween.

Luego, cree otro Classic Tween para el cuadro 20, agregaré un efecto de filtro Blur.

Add a Blur filter in a Classic Tween.Add a Blur filter in a Classic Tween.Add a Blur filter in a Classic Tween.

Finalmente, haz que desaparezca en un último Tween clásico en el fotograma 30 con un efecto de color Alpha yendo a 0.

Alpha color effect set to 0 in a Classic Tween.

Paso 12: limpiar el escenario

La animación de explosión debe eliminarse después de que termine, o se repetirá indefinidamente. Agregue una nueva capa y presione F6 en el último cuadro, luego presione F9 para abrir el panel Actions y agregue este código:

Esto hará que la instancia de Explosion se elimine después de que la animación haya terminado.

The Explosion instance will remove itself.The Explosion instance will remove itself.The Explosion instance will remove itself.

Paso 13: Explotar

Ahora cuando el misil se encuentra con el cursor, lo reemplazaremos con una instancia de Explosión. Solo necesitamos agregar un nuevo condicional en la función playGame().

Echale un vistazo:


Paso 14: algo más para explotar

Perseguir el cursor del mouse fue entretenido, pero no tiene sentido en un juego; necesitamos hacer un objetivo Voy a dibujar un grupo de círculos para formar un clip Target (Objetivo).

Create and export a Target Movie Clip.

Paso 15: dispara al objetivo

Ahora agregaremos una instancia Target para que el misil tenga un objetivo más tangible. Reemplazaremos cualquier referencia del cursor del mouse por la posición del objetivo. Además, no probaremos un punto de golpe, sino un objeto.

El método hitTestObject() solo busca una superposición entre los cuadros delimitadores de los dos objetos (es decir, los cuadros azules que aparecen cuando hace clic en una instancia del objeto en el escenario), así que tenga cuidado con eso; no es una detección de colisión perfecta para píxeles. Sin embargo, hace bien el trabajo aquí.

Puede intentar colocar el objetivo en diferentes lugares, así como en el cañón.


Paso 16: objetivo en movimiento

Ya vimos que el misil perseguirá un objetivo en movimiento, como el cursor del mouse, así que ahora hagamos que la instancia Target se mueva un poco.

Esto no es física realista, solo voy a hacer que el objetivo rebote verticalmente. Elegiré un punto de referencia como el nivel del suelo y agregaré un valor de gravedad para afectar al objetivo. Y para hacerlo más dinámico, aumentaré la velocidad del misil a 15.

Si publicas esto ahora, debería obtener un objetivo en movimiento.


Conclusión

Ya sea que desee un misil de orientación preciso o prefiera una animación sin problemas, puede obtener ambos resultados según este ejemplo. Ahora tienes una nueva arma para agregar en tu arsenal, tal vez podrías intentar hacer un juego similar a Worms, o incluso usar el algoritmo en algo que no sea un misil, como un extraño mosquito que sigue a tu personaje.

Espero que hayas encontrado este tutorial útil. ¡Gracias por leer!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.