Crea un juego de batido de Groundhog - Creación de interfaz

En esta serie de tutoriales crearemos un juego de Whack-a-Groundhog. El objetivo del juego es tocar las marmotas antes de que desaparezcan. Sigue leyendo!


1. Pantalla de introducción

La pantalla de introducción permitirá al usuario configurar algunas opciones o comenzar a jugar el juego.


2. Pantalla de opciones

La pantalla de opciones permitirá al usuario activar / desactivar la música y elegir a qué velocidad aparecen las marmotas.


3. Pantalla de juego

La pantalla del juego es donde tiene lugar toda la acción. Las marmotas salen de sus agujeros al azar,
y el jugador intenta "golpearlos" antes de volver a entrar. El jugador también puede acceder a la pantalla de opciones desde aquí también..


4. Nuevo proyecto

Abre el simulador de corona y elige "Nuevo proyecto".

En la pantalla que sigue, elija la siguiente configuración:

Presione el "Siguiente", luego elija abrir en editor. Esto abrirá "Main.lua"en tu editor de texto predeterminado.


5. Configuración del proyecto

Abierto "Config.lua"y elimine todo. Actualice el archivo con lo siguiente:

 application = content = width = 320, height = 480, scale = "letterBox", fps = 30,

Esto establece el ancho, altura, escala y FPS predeterminados del proyecto. Los "buzón"la configuración de escala significa que la aplicación se escalará en ambas direcciones de la manera más uniforme posible. Si es necesario, el juego mostrará" Letter Boxed ", como se ve en algunas películas en DVD o con aplicaciones antiguas en un iPhone 5.


6. Ocultar la barra de estado

No queremos que se muestre la barra de estado en nuestra aplicación, así que ingrese lo siguiente en "Main.lua":

 display.setStatusBar (display.HiddenStatusBar);

7. Variables locales

Estas son todas las variables que usaremos en este juego. Lee los comentarios para entender para qué sirve cada uno..

 local allGroundHogs =  - Tabla para contener todas las marmotas local groundHogXPositions = 240,410,280,145,429,80,208,366 local groundHogYPositions = 259,259,209,184,166,118,91,99 local gameScreenGroup - grupo que contiene la pantalla del juego local introScreenGroup. screen local optionsScreenGroup: grupo que contiene las opciones local screenPlaying = false: si el jugador inició el juego o no local groundHogTimer: temporizador que se usa para generar marmotas locales groundHogSpeed ​​= 1500

8. SetUpIntroScreen ()

los setUpIntroScreen () Esta función se utiliza para configurar la primera pantalla que se le presentará al usuario..

 función setUpIntroScreen () final

9. SetUpOptionsScreen ()

los setUpOptionsScreen () La función se encarga de configurar la pantalla de opciones..

 función setUpOptionsScreen () fin

10. SetUpGameScreen ()

los setUpGameScreen () La función configura la pantalla del juego..

 función setUpGameScreen () final

11. GetRandomGroundHog ()

los getRandomGroundHog () La función selecciona una marmota aleatoria para aparecer en uno de los agujeros..

 función getRandomGroundHog () final

12. GroundHogSpriteListener ()

Esta función se utiliza para saber cuándo ha terminado la animación de la marmota..

 función groundHogSpriteListener (evento) final

13. GroundHogHit ()

los GroundHogHit (e) La función se utiliza para saber cuándo el jugador ha tocado una marmota..

 función groundHogHit (e) final

14. SoundComplete ()

Cuando la música se detiene, usamos esta función para volver a empezar..

 función soundComplete () final

15. Configurando el juego de fondo

En este paso comenzaremos a configurar la pantalla del juego. Ingrese el siguiente código dentro de setUpGameScreen () Función que ingresaste en el paso anterior.

 gameScreenGroup = display.newGroup () local gameBackground = display.newImage ("background.png", true); gameScreenGroup: insert (gameBackground)

En la parte inferior de "main.lua", ingrese lo siguiente:

 setUpGameScreen ()

Si pruebas ahora deberías ver el fondo del juego..


16. Configuración de la hoja de imágenes

Las marmotas se animan usando una hoja de sprites. Introduzca lo siguiente debajo de la línea gameScreenGroup: insert (gameBackground) que ingresaste en el paso anterior.

 opciones locales = ancho = 142, altura = 91, numFrames = 7 local imageSheet = graphics.newImageSheet ("groundhogsheet.png", opciones)

los opciones variable es una tabla que contiene las opciones para la hoja de imagen. los anchura y altura son el ancho y el alto de las imágenes en "groundhogsheet.png", y el NumFrames es igual al número de imágenes en el .png


17. Datos de secuencia

Ahora que tenemos nuestro imageSheet Configuración podemos configurar las animaciones. Los datos de animación (secuencia) se mantienen en una variable. secuenciaDatos. Introduzca lo siguiente debajo del código de arriba.

 local sequenceData = name = "show", start = 2, count = 3, time = 1000, loopCount = 0, loopDirection = "bounce"

Aquí nombramos la secuencia "show", la comienzo es el "marco" de la imageSheet que la secuencia comienza y contar es el número de cuadros en la secuencia.

los loopCount es cuántas veces quieres que se reproduzca la secuencia. Cero significa para siempre, y la direccion de bucle Es como quieres que se reproduzca la secuencia. La opción de rebote significa jugar hacia adelante, luego hacia atrás..


18. Groundhog Sprites

Con el imageSheet y secuenciaDatos Configuración, podemos colocar nuestras marmotas y animarlas. Ingrese el siguiente código debajo de secuenciaDatos ingresaste en el paso anterior.

 local tempGroundHog for i = 1, #groundHogXPositions do tempGroundHog = display.newSprite (imageSheet, sequenceData) tempGroundHog.x = groundHogXPositions [i] tempGroundHog.y = groundHogYPositions [i] tempGroundHog: setSequence ("parche") table.insert (allGroundHogs, tempGroundHog) tempGroundHog: play () end

Cada vez que a través del bucle creamos un nuevo tempGroundHog Sprite, establece su X un y posiciones, configure la secuencia en "show", insértela en el juegoScreenGroup, y luego insertarlo en el allGroundHogs mesa.

Si realiza la prueba ahora, debería ver todas las animaciones de la marmota en reproducción. Sin embargo, parece un poco mal, y eso es algo que arreglaremos en la próxima parte de esta serie.!


Conclusión

Esto pone fin a la primera parte de esta serie. En la siguiente parte terminaremos la animación de la marmota y completaremos la lógica del juego. Gracias por leer y estad atentos.!