Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. From Scratch

Crear un juego de artillería desde cero

by
Difficulty:BeginnerLength:LongLanguages:

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

En este tutorial vamos a estar construyendo un juego de tanque para dos jugadores en Multimedia Fusion 2. Incluirá un disparo personalizado de 360 grados y un terreno destructible. No necesitas ninguna experiencia previa de programación o desarrollo de juegos para seguir este tutorial, y si no tienes Multimedia Fusion 2 puedes probar la demostración gratuita.


Juega el juego


Tome turnos para disparar en el otro tanque - El Jugador Uno está a la izquierda, y el Jugador Dos está a la derecha. Usa el ratón para apuntar; Cuanto más lejos esté el cruzado de su tanque, más poderoso será el disparo. El primer jugador que recibe un disparo pierde.


Introducción

Empezaremos por configurar nuestro marco para que el juego funcione sin problemas, y luego añadiremos nuestro primer tanque. Después de eso vamos a hacer disparar algunas balas que destruyen el terreno, y finalmente se añadirá otro tanque jugador para competir.


Configuración del espacio de trabajo

Comience creando una nueva aplicación en Multimedia Fusion 2 (descargue la demo aquí si aún no la tiene) y llámela Artillery Game.

Bajo las opciones de tiempo de ejecución del juego, establezca la velocidad de fotogramas Frame Rate en 60 y el modo de visualización Display Mode en Direct3D 9. Estos son los valores de configuración estándar que utilizo en la mayoría de los juegos, ya que proporcionan una experiencia de juego fluida y aprovechan la aceleración de hardware en la computadora del reproductor.

Artillery Setup

Para este tutorial también estamos usando una resolución de 600x480 que se puede cambiar en la configuración de la ventana. Cambiar el tamaño del marco a 600x480 también.

Para hacer las cosas un poco más profesional, también desmarcaremos la barra de menús Menu bar para evitar que se muestre en nuestro juego.

Remove menu

Paso 1: Crear escena inicial

Ahora que estamos preparados y listos para ir, es hora de importar algunos activos para nuestro juego.

Puede obtener todos los gráficos que estoy usando en este tutorial desde la descarga de origen o puede dibujar sus propios si lo desea. Los gráficos que estoy usando han sido adaptados de algunos gratuitos disponibles en OpenGameArt.org

Después de guardar las imágenes en su computadora, simplemente arrástrelas una a una en el fotograma 1. Esto los importará a nuestro juego, solicitando un cuadro de diálogo para configurar el tipo de cada objeto.

Import Terrain

Comience importando el terreno. Defínalo en un objeto de fondo con su Tipo de obstáculo Obstacle Type establecido como Obstáculo Obstacle.

Set to background

Siguiente importar el Tanque del Jugador Uno como un Objeto Activo, así como la Torreta del Jugador Uno. Nombre P1Body y P1Turret respectivamente. Establezca el lugar de la torreta a (3,3), y el lugar del tanque a (16, 14). Esto asegurará que cuando colocamos la torreta en el tanque, se coloca correctamente y gira correctamente.

Sugerencia: Para colocar el lugar, primero haga clic en el icono con un ojo en él para hacerlo visible, y luego arrastre el lugar al punto deseado.
Turret Hot Spot

También importa la viñeta y la cruz como objetos activos. Vamos a importar el otro tanque más tarde. Centrar el lugar de la mira en (15,15). Desactive "Create at Start" en la viñeta, y el centro de su hotspot. Asegúrese de que la torreta del tanque esté detrás del cuerpo en orden de dibujo haciendo clic con el botón derecho en él y enviándola a la atras ToBack, bajo la opción Order.

Finalmente, cambie el color de fondo del marco a un azul claro (haga clic en Frame 1 en la barra de herramientas Área de trabajo y, a continuación, modifique la propiedad apropiada en el panel Propiedades). Utilice RGB = 115,176,217. Este color será importante más adelante cuando añadamos terreno destructible.

Organice los objetos en su marco para que parezcan similares a cómo los tengo en esta imagen.

Arrange the objects

Paso 2: disparar una bala

Aquí vamos a hacer que nuestro primer tanque dispare una bala en línea recta. Vamos a añadir la gravedad a la bala más tarde, así como una explosión cuando choca con el suelo.

En primer lugar, cree dos valores alternables para el tanque llamado DistanceToMouse y AngleToMouse: seleccione el tanque, haga clic en el icono "A-Z" en la parte superior del panel Propiedades y haga clic en "New" debajo de "Alterable Values". Los usaremos para almacenar la distancia en píxeles y el ángulo en grados con respecto al ratón, respectivamente.

Alterable Values for Tank Body

A continuación, cree cinco valores modificables para la viñeta:

  • TempX
  • TempY
  • XSpeed
  • YSpeed
  • InitialSpeed

Estos valores se utilizarán para almacenar la información de movimiento de la bala e implementar nuestro Movimiento Personalizado de 360 grados.

Es hora de escribir un código. Comenzaremos simplemente colocando la torreta y haciendo que apunte hacia el ratón.

Agregue el objeto de dirección avanzada "Advanced Direction Object" a su juego mediante Insert > New Object. Lo utilizaremos para calcular el ángulo y la distancia al ratón de nuestro tanque.

Add Advanced Direction Object

Sugerencia: Si está utilizando la demo de Multimedia Fusion 2, es posible que no tenga acceso al Objeto de dirección avanzada que está disponible en Bonus Pack 1. En este caso, para calcular el ángulo entre dos objetos, simplemente puede utilizar esta fórmula:
360-ATan2(YMouse-Y("P1Body"), XMouse-X("P1Body"))
...en lugar de:
Distance("Advanced Direction Object", X("P1Body"), Y("P1Body"), XMouse, YMouse)

A continuación, agregue el siguiente código en el Editor de eventos (obtenga a través de View > Event Editor):

+ Always
- [P1Body] Set DistanceToMouse to:
Distance("Advanced Direction Object", X("P1Body"), Y("P1Body"), XMouse, YMouse)
- [P1Body] Set AngleToMouse to:
Direction("Advanced Direction Object", X("P1Body"), Y("P1Body"), XMouse, YMouse)
- [P1Turret] Set position at (0,0) from P1Body
- [P1Turret] Set Angle To AngleToMouse("P1Body")
- [Crosshair] Set X Coordinate to XMouse
- [Crosshair] Set Y Coordinate to YMouse

Si ejecuta el juego ahora debe ver que la torreta del tanque ahora apunta hacia el retículo, y que el retículo está situado en el cursor del ratón.

Ahora disparemos una bala. Agregue el código siguiente:
+ User clicks with left button
- [Create] Create Bullet at (0,0) from P1Body
- [Bullet] Set TempX to X("Bullet")
- [Bullet] Set TempY to Y("Bullet")
- [Bullet] Set InitialSpeed to Min(DistanceToMouse("P1Body")/17.0, 15)
- [Bullet] Set XSpeed to Cos(AngleToMouse("P1Body"))*InitialSpeed("Bullet")
- [Bullet] Set YSpeed to Sin(AngleToMouse("P1Body"))*InitialSpeed("Bullet")*-1

+ Always
- [Bullet] Add XSpeed("Bullet") to TempX("Bullet")
- [Bullet] Add YSpeed("Bullet") to TempY("Bullet")
- [Bullet] Set X Position to TempX("Bullet")
- [Bullet] Set Y Position to TempY("Bullet")

Shoot Code 1
Shoot Code 2

Si ejecutas tu juego (a través del menú Ejecutar) deberías ver el tanque disparar una bala en línea recta sin gravedad.

¿Qué está haciendo este código?

Primero creamos una bala en el cuerpo del tanque. A continuación, utilizar los valores TempX y TempY para almacenar la posición actual de la viñeta. Se establece la velocidad inicial de la bala a la distancia desde el tanque hasta el ratón, con una potencia máxima de 15. (La distancia se divide por 17.0 para escalar su fuerza hacia abajo.) Estos son sólo los valores que simplemente he inventado después de algunas pruebas. Usted mismo puede jugar con estos dos valores para cambiar la rapidez con que se dispara la bala.

A continuación, calcular el XSpeed y YSpeed desde el ángulo y el poder utilizando la trigonometría. No se preocupe si no entiende las matemáticas detrás de cómo esto funciona!

Por último, en el evento Always actualizamos continuamente la posición de la viñeta almacenada en TempX y TempY añadiendo XSpeed y YSpeed respectivamente.

¿Por qué usar TempX y TempY?

Debemos almacenar nuestras posiciones intermedias en valores modificables para movimientos personalizados ya que Multimedia Fusion 2 no utiliza flotantes (números con puntos decimales) para sus coordenadas - usa números enteros.

Si intenta establecer la posición X de la bala en X("Bullet") + 0,2 verá que no se moverá a ninguna parte, ya que 0,2 se redondea a 0 y, por lo tanto, la bala se establece en su posición actual.


Paso 3: Añadir gravedad

Ahora que podemos disparar una bala, tenemos que añadir la gravedad para hacer caer la bala una vez que sale del cañón del tanque.

En primer lugar, necesitamos un lugar para almacenar algunos valores que se utilizarán a lo largo de nuestro juego, como la fuerza de la gravedad. En un juego MMF2 hay numerosos lugares para almacenar este tipo de información. Algunas personas prefieren crear un objeto específico sólo para mantener valores. En este tutorial vamos a utilizar valores globales - valores que están disponibles desde cualquier parte del juego - para mantener nuestros valores importantes.

Vaya a los valores globales de su aplicación (haga clic en la barra de herramientas Aplicación en su área de trabajo, luego seleccione el icono "A-Z" en el panel Propiedades) y cree un nuevo valor: Y_Gravity.

Sugerencia: Si desea que su código sea más legible, también podría agregar otro valor global para Max_Speed y utilizarlo en lugar de "15.0" en el que calculamos la velocidad inicial InitialSpeed de la viñeta. Esto le permitirá cambiar fácilmente la potencia máxima sin tener que editar el código en todas partes donde aparezca.

MMF2 no le permite escribir flotadores en valores globales, y como queremos que nuestra gravedad sea inferior a uno, tendremos que configurarlo en código:

Set Gravity

Ahora simplemente tenemos que añadir esta gravedad al YSpeed de la bala en cada marco.

Añada la línea:

+Always
- [Bullet] Add Y_Gravity To YSpeed

Add Gravity

Puede hacer doble clic en cualquier evento para entrar en Modo lista y cambiar el orden de las acciones de evento. Coloque la nueva línea entre las acciones existentes como he hecho aquí.

Ahora cuando se ejecuta el juego de su tanque debe disparar una bala que cae hacia el suelo.


Paso 4: destruir el terreno

A continuación tenemos que hacer la bala crear agujeros en el suelo cuando choca con él. Para ello vamos a aprovechar la función "Add to Backdrop" de Multimedia Fusion.

Add to Backdrop pega la imagen de un objeto activo en el telón de fondo permanentemente cuando el juego se está ejecutando. Puede afectar si una parte particular del fondo registra o no colisiones. Lo que vamos a hacer es tener un "agujero" forma que corta un círculo en el fondo tan grande como la animación de explosión que lo acompaña.

Añadir un agujero

Importe explosion_hole.png como Objeto Activo arrastrándolo al marco. Centrar su punto de acceso en (32, 32).

Importar explosion_graphic_1.png como otro objeto activo. Cuando se le pregunte si desea importar explosion_graphic_2.png, etc., seleccione Yes.

Import Others

Centrar los lugares en estos cuadros gráficos de la explosión también.

El código para agregar terreno destructible es bastante simple. Cuando una bala choca con el telón de fondo, sólo necesitamos crear el objeto de agujero y añadirlo al fondo.

Cree el agujero cuando el Bala colisiona con el fondo:

Collide with backdrop

Añada el agujero al fondo como "No es un obstáculo" (para que las balas puedan pasar a través de él):

Add to Backdrop
As Obstacle

También crear una explosión gráfica (uno que mostrará dónde hizo el agujero) y destruir la bala al final. También podemos destruir el agujero una vez que se ha añadido al telón de fondo:

Create explosion

Finalmente, destruye la explosión gráfica cuando ha terminado de reproducir su animación:

Destroy Explosion Animation

Si se ejecuta el juego que ahora debe tener un tanque que es capaz de apuntar y disparar el terreno, la creación de explosiones y dejar huecos.

Shoot Terrain

Paso 5: Añadir otro jugador

Finalmente vamos a agregar otro jugador a nuestro juego. Vamos a copiar el código que ya tenemos para nuestro primer tanque, y lo aplicamos a otro. También vamos a necesitar una nueva variable global para hacer un seguimiento de su turno es.

Añadir gráficos de Jugador Dos

Importe el cuerpo y la torreta del tanque de segundo jugador de la misma manera que lo hizo con el Jugador Uno. Coloque el segundo tanque en el lado derecho del marco.

Add player two

En el Event Editor, copie el código del primer tanque en el segundo, también deberá crear los valores alterables DistanceToMouse y AngleToMouse en el tanque del segundo jugador. He añadido comentarios a mi código para que sea más fácil de ver. Si te quedas atascado, solo sigue la primera parte de este tutorial de nuevo, pero hazlo por el segundo tanque.

Player Two Code

Si ejecuta el juego ahora, ambos tanques dispararán al mismo tiempo hacia la mira.

Crear nuevas variables

Cree dos nuevas variables globales llamadas CurrentPlayerTurn y TurnCooldown.

TurnCooldown se usará para evitar que los tanques disparen al mismo tiempo. Cada vez que un jugador dispara, pondremos este tiempo de reutilización en un valor pequeño, que contará hasta cero, y no permitiremos que el otro jugador dispare hasta que este valor llegue a cero.

Usaremos CurrentPlayerTurn = 0 para representar el turno de jugador Uno y CurrentPlayerTurn = 1 para representar el turno de Jugador Dos.

Bajo el código de disparo del jugador uno con el usuario hace clic con el botón izquierdo, agregue la condición CurrentPlayerCooldown = 0 para que un tanque sólo mira al ratón y es capaz de disparar cuando tiene control de giro. Para ello, utilice la condición "Compare a un valor global":

Compare Global value

También agregue la condición TurnCooldown = 0 para asegurarse de que la foto se haya enfriado antes de intentar disparar.

Agregue dos acciones más para establecer Set  TurnCooldown en un valor pequeño de 3 y CurrentPlayerTurn en 1-CurrentPlayerTurn. (Esto significa que si CurrentPlayerTurn es 0, se establecerá en 1 y, si es 1, se establecerá en 0.)

Después de hacer todo esto, esto es lo que su código debe verse como:

Set Cooldown

Duplicar el mismo código para el jugador dos, pero cambiar la condición para reflejar el turno del jugador dos con CurrentPlayerTurn = 1

Player Two Cooldown

Y finalmente agregue una condición más para bajar nuestro tiempo de reutilización siempre que sea mayor que cero:

Lower Cooldown

Si juegas el juego ahora deberías poder disparar a ambos tanques uno al otro, con cada disparo alternando el turno del tanque actual.

Two Player Tanks

Paso 6: Agregar condición al Ganar

Ahora que podemos disparar, todo lo que tenemos que hacer es añadir una manera de volar unos a otros! Esto es bastante simple. Simplemente necesitamos detectar si una explosión se sobrepone a un tanque, y si lo es, destruimos el tanque y no permitimos que nadie dispare después de eso.

Agregue el código siguiente:

+ [Explosion_Graphic] is overlapping [P1Body]
- Destroy [P1Body]
- Destroy [P1Turret]
- Set CurrentPlayerTurn to -1

+ [Explosion_Graphic] is overlapping [P2Body]
- Destroy [P2Body]
- Destroy [P2Turret]
- Set CurrentPlayerTurn to -1

He aquí cómo busca el código para el Jugador uno:

Kill each other!

Destruir a los jugadores y sus torrecillas es bastante auto-explicativo. Ponemos el CurrentPlayerTurn a -1 para que los jugadores ya no puedan disparar (ya que las condiciones requieren que CurrentPlayerTurn sea igual a 0 o 1).

Si corre su juego usted debe ser capaz de tomar turnos de disparos entre sí hasta que uno de los golpes!



Conclusion

Ahora tienes un juego de tanque de dos jugadores completamente funcional que puedes jugar con tus amigos. Desde aquí puedes agregar cosas como la velocidad del viento al azar que afecta la trayectoria de la bala, nuevas armas, sonidos, efectos de partículas ¡y mucho más!

¡Diviértete con eso!

Advertisement
Advertisement
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.