Advertisement
  1. Code
  2. Games

Jugando con colisiones elásticas

Scroll to top
Read Time: 15 min
This post is part of a series called You Do The Math.
Creating Generative Art with HYPE
Euclidean Vectors in Flash

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

En este tutorial crearemos un juego donde el objetivo es evitar que otros objetos colisionen con el cursor. No usaremos los métodos hitTestObject() integrados de Flash; en cambio, escribiremos nuestras propias rutinas de detección de colisiones.

Tutorial republicado

Cada pocas semanas, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores a lo largo de la historia del sitio. Este tutorial se publicó por primera vez en febrero de 2011.


Vista previa del resultado final

Echemos un vistazo al resultado final para el que trabajaremos:


Paso 1: Comienza

Crear un nuevo archivo Flash (ActionScript 3.0)

Flash collision game tutorial

Establezca las dimensiones del escenario a 500x500 px y FPS a 32.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

Paso 2: la clase Ball

Esta clase contendrá todos los datos relacionados con una pelota. Una pelota tiene _mass, _radius, _xSpeed ​​y _ySpeed. Así que haremos una propiedad para cada uno. En el constructor pasamos la masa, el ángulo y la velocidad de la pelota. Debido a que la clase se vinculará a un objeto de visualización, podemos recuperar el radio de nuestra bola dividiendo el ancho del objeto de visualización por 2. La _xSpeed ​​y _ySpeed ​​pueden calcularse utilizando funciones simples de seno y coseno.

Para obtener más información sobre estas funciones trigonométricas Math.sin() y Math.cos(), consulte esta sugerencia rápida.


Paso 3: Proporcionando Getters y Setters

En nuestra clase Ball proporcionamos getters y setters para nuestras propiedades.


Paso 4: Función de actualización

Esta función actualiza las propiedades xey de nuestra bola de acuerdo con _xSpeed y _ySpeed. Implementaremos esta función en nuestra clase Ball.


Paso 5: la clase completada

Terminaremos nuestra clase Ball en este paso.


Paso 6: mostrar objetos para nuestra clase Ball

En los archivos fuente incluí un inicio FLA que contiene todos los elementos de la biblioteca que necesita. Puedes dibujarlos tú mismo si quieres, por supuesto. Asegúrese de que su FLA tenga los siguientes objetos de visualización:

Flash collision game tutorial

(Nota del editor: es un error tipográfico: "ennemyball" debería decir "enemyball").


Paso 7: Vinculación de nuestros objetos de biblioteca

La clase Ball que acabamos de crear tiene que estar vinculada al Sprite enemyball en la biblioteca.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

El Sprite playerball debe tener Ball como clase base y PlayerBall como clase.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

El clip de película score debe tener una clase Score.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

Paso 8: la clase de la aplicación (clase de documento)

La clase Application contendrá toda la lógica del juego. Importamos todas las clases que necesitamos. Como puede ver, usaremos TweenMax.

A continuación definimos nuestras variables de campo. La primera variable de campo es ballPlayer.

Debido a que la clase base de nuestro Playerball Sprite es Ball, podemos almacenar esta Clase en la variable ballPlayer. Esto hace que sea más fácil verificar las colisiones entre el ballPlayer y las pelotas enemigas.

La segunda variable de campo es una matriz que contendrá todas nuestras bolas enemigas. La tercera variable es el temporizador que se usará para realizar el ciclo principal del juego. El cuarto y último campo es una instancia de nuestro objeto de la biblioteca Score que se usará para mostrar el tiempo transcurrido del juego. En el constructor llamamos a la función init() que explicaré en el siguiente paso.

¡No olvides vincular la clase document!.

Flash collision game tutorial

Paso 9: La función init()

Eche un vistazo a este código:

En las primeras cuatro líneas, inicializamos nuestras variables de campo.

A continuación, nos aseguramos de que nuestra etapa esté alineada con la esquina superior izquierda y no se escale.

Ocultamos el cursor del mouse Nuestro cursor será reemplazado por el Sprite playerball . Luego llamamos a la función setBackground (explicada en el siguiente paso).

Centramos nuestro score en la pantalla y lo agregamos a la lista de visualización. Para actualizar la posición de ballPlayer, adjuntamos un evento MouseEvent.MOUSE_MOVE al escenario.

La función updatePlayerBall (explicada en el paso 11) manejará este evento MouseEvent. A continuación, agregamos ballPlayer a la lista de visualización.

El temporizador se usará para mostrar el tiempo del juego. Adjuntamos un oyente TimerEvent.TIMER a nuestro temporizador, que activará la función updateTime() (explicada en el Paso 12) cada 10 milisegundos.

Finalmente, agregamos un MouseEvent.CLICK a nuestro escenario. La función startGame (explicada en el paso 13) comenzará nuestro juego.


Paso 10: función setBackground()

Esta función agrega un fondo degradado radial a la lista de visualización. Para dibujar un degradado en un Sprite debe definir el tipo de degradado, los colores que desea usar, los valores alfa de los colores, las relaciones (esto define la distribución de los colores) y el método de dispersión.

Para obtener más información, consulte esta sugerencia rápida sobre degradados.


Paso 11: Función updatePlayerBall()

Esta función actualiza la posición de ballPlayer según la posición del mouse.


Paso 12: función updateTime()

Calculamos el tiempo en segundos y lo colocamos dentro del cuadro de texto de nuestro Sprite score. Cada 5000 ms (cinco segundos) agregamos una nueva pelota al juego.


Paso 13: función startGame()

El juego se inicia haciendo clic en el escenario. Primero eliminamos el oyente para el clic de escenario, de modo que no podemos comenzar el juego varias veces. Agregamos tres bolas al juego llamando a la función addBall() (explicada en el siguiente paso) tres veces. Comenzamos nuestro temporizador que actualizará nuestro tiempo de juego.

Finalmente, agregamos un evento ENTER_FRAME a nuestra etapa. La función gameLoop() (explicada en el Paso 15) actualizará la posición de nuestras bolas enemigas.


Paso 14: Función addBall()

Primero hacemos una nueva instancia de nuestra clase Ball. Posicionamos la ball aleatoriamente en el escenario con un alfa de 0 y lo agregamos a la lista de visualización.

A continuación, volvemos a conectar el alfa a 1. (Utilizo TweenMax, está incluido en los archivos de origen. También puede usar el motor de interpolación Flash incorporado). La segunda interpolación no es realmente una interpolación. Simplemente espera un segundo y la función onComplete empuja la ball hacia nuestra matriz de eballs. De esta forma, la función gameLoop() (explicada en el siguiente paso) puede manejar el resto.


Paso 15: Función gameLoop()

Cada cuadro pasará por esta función.

Comenzamos iterando a través de todas nuestras bolas enemigas.

El segundo for-loop comprueba las colisiones entre las bolas enemigas. El ciclo comienza en 'i + 1'. De esta forma no verificamos las colisiones.

A continuación, verificamos si ballPlayer golpea la bola enemiga. Si es así, el juego está terminado. Luego actualizamos la posición de nuestra bola enemiga.

Nos aseguramos de que las bolas permanezcan en la pantalla del juego llamando a la función checkBounds() (explicada más adelante).


Paso 16: función collision()

Esta función verifica si un par determinado de bolas está colisionando.

Primero calculamos la distancia xy la distancia y entre las dos bolas. Usando el Teorema de Pitágoras (ver el siguiente diagrama) calculamos la distancia absoluta entre ellos. Si la distancia es menor o igual a la suma de los radios de las bolas, tenemos una colisión.

Flash collision game tutorial

Paso 17: Función doCollision()

Esta función calculará las nuevas velocidades x e y de las bolas según la velocidad y el ángulo de la colisión. Advertencia: matemática;)

Primero calculamos la distancia horizontal entre las dos bolas y luego la distancia vertical entre las bolas. Con estas distancias (y un poco más de trigonometría) podemos calcular el ángulo entre las bolas (ver diagrama).

Flash collision game tutorial

Luego calculamos lo que llamo la magnitud de cada bola. (Tenemos un vector xspeed y un vector yspeed, la magnitud es la suma de esos). Luego calculamos el ángulo de cada bola (similar al cálculo del ángulo anterior).

Luego rotamos las nuevas velocidades x e y de cada bola. Lo que realmente estamos haciendo es rotar el sistema de coordenadas. Al rotar nuestros ejes tenemos una colisión 1D. (Ver el siguiente diagrama).

Flash collision game tutorial

Newton dice que la cantidad total de energía cinética en un sistema cerrado es constante. Ahora usamos estas fórmulas:

  • v1 = (u1*(m1-m2) + 2*m2*u2)/(m1+m2)
  • v2 = (u2*(m2-m1) + 2*m1*u1)/(m1+m2)

dónde:

v1 = final xSpeedBall 1

v2 = final xSpeedBall 2

m1 = masa de bola 1

m2 = masa de bola 2

u1 = velocidad inicial de bola 1

u2 = velocidad inicial de bola 2

Las velocidades y no cambian ya que es una colisión 1D.

Con estas fórmulas podemos calcular el xSpeed ​​y el ySpeed ​​de cada bola.

Ahora tenemos las nuevas velocidades x e y en nuestro sistema de coordenadas giradas. El último paso es convertir todo a un sistema de coordenadas normal. Usamos Math.PI/2 porque el ángulo entre xSpeed ​​y ySpeed ​​debe ser siempre de 90 grados (pi/2 radianes).

Para encontrar más información sobre colisiones elásticas, visite hoomanr.com.


Paso 18: Función endOfGame()

Esto se ejecuta cuando el juego termina.

Primero, detengamos el temporizador. Mostramos el mouse nuevamente A continuación, eliminamos los detectores de eventos MOUSE_MOVE y ENTER_FRAME. Finalmente hacemos que todas las bolas en el escenario sean invisibles.


Paso 19: función checkBounds()

Esta función asegura que las bolas permanezcan dentro de la pantalla del juego. Entonces, si la pelota golpea el lado superior o inferior, invertimos la velocidad y ySpeed. si la pelota golpea el lado izquierdo o el derecho de la pantalla invertimos la xSpeed. Utiliza una lógica similar a la función de detección de colisión de bolas para comprobar si los bordes de la pelota golpean un borde de la pantalla.


Paso 20: la completa clase de la aplicación

Hemos completado nuestra clase de Aplicación. ¡Ahora tenemos un juego funcionando!

Conclusión

Eso es todo por este tutorial. Por supuesto, podrías agregar la posibilidad de reiniciar el juego, pero eso no debería ser demasiado difícil. Este ejemplo básico de colisiones elásticas se puede utilizar para juegos más grandes como un juego de billar o similar.

Espero que les haya gustado este tutorial, ¡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.