Share
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!
En la parte anterior de esta serie, agregamos el fondo del juego y comenzamos a animar nuestras marmotas. En esta parte final de la serie, implementaremos el juego, las opciones y la pantalla de inicio de nuestra aplicación, y luego terminaremos con un juego completo.!
Como el juego es ahora, las marmotas se animan para siempre y no parecen volver a entrar dentro de sus agujeros. Necesitamos agregar algunas claves más a nuestro secuenciaDatos para arreglar esto. Agregue lo siguiente dentro de setupGameScreen () función:
local sequenceData = name = "show", start = 2, count = 3, time = 800, loopCount = 1, loopDirection = "bounce", name = "blank", start = 1, count = 1, name = "hit1", start = 5, count = 1, name = "hit2", start = 6, count = 1, name = "hit3", start = 7, count = 1
La secuencia "en blanco" es una imagen transparente en blanco que forma parte de la hoja de sprite, y las secuencias "hit1", "hit2" y "hit3" son 3 estados "hit" diferentes de la marmota. Mira la imagen "groundhogsheet.png" para ver esto por ti mismo.
Asegúrese de configurar el loopCount igual a 1 en la secuencia "show".
Ahora cambia el siguiente bloque de código:
Accentsconagua
tempGroundHog: setSequence ("blank") tempGroundHog: addEventListener ('tap', groundHogHit); Aquí hemos establecido la secuencia en "blanco" y hemos agregado un detector de tomas al sprite de la marmota.
A continuación, elimine la siguiente línea de código:
tempGroundHog: jugar ()
Si pruebas ahora, ninguna de las marmotas debería estar animando. Pronto obtendremos una animación de marmota al azar.!
Cuando se toque la marmota, determinaremos si estaba o no fuera de su agujero. Si es así, cambiaremos su secuencia a uno de los tres estados de éxito que agregamos en el paso anterior.
Agregue lo siguiente dentro de groundHogHit () función:
local thisSprite = e.target thisSprite: removeEventListener ("sprite", groundHogSpriteListener) función local hide () thisSprite: setSequence ("blank") end if (thisSprite.sequence == "show") then local randomIndex = math.random (3 ) thisSprite: setSequence ("hit" ... randomIndex) timer.performWithDelay (1000, hide) end Aquí hacemos referencia al Sprite en el que se hizo clic e.target y elimine su Event Listener. Luego verificamos si su secuencia es igual a "mostrar". Si es así, generamos un número entre 1 y 3 y establecemos su secuencia igual a "hit" ... randomIndex. Todo lo que hace es generar las cadenas "hit1", "hit2" o "hit3". Finalmente, llamamos a la función de ocultación local después de 1000 milisegundos, que establece la secuencia de Sprites en "blanco".
los getRandomGroundHog () La función obtiene una marmota aleatoria y le permite comenzar a animar. Introduzca lo siguiente dentro de Función getRandomGroundHog ():
local randomIndex = math.random (#allGroundHogs) local randomGroundHog = allGroundHogs [randomIndex] if (randomGroundHog.sequence ~ = "blank") y luego getRandomGroundHog () else randomGroundHog: ícono ) randomGroundHog: play () end
Aquí tenemos un randomIndex desde el allGroundHogs mesa. A continuación, establecemos la randomGroundHog igual al índice. Luego verificamos si su secuencia no es igual a "en blanco", y si no es así, llamamos getRandomGroundHog () otra vez. De lo contrario, añadimos el groundHogSpriteListener configurar su secuencia para "mostrar" y reproducir la secuencia.
los groundHogSpriteListener () comprueba si la secuencia "show" ha terminado de reproducirse. Si es así, lo establece en la secuencia "en blanco". Ingrese lo siguiente dentro de groundHogSpriteListener ():
local thisSprite = event.target - "event.target" hace referencia al sprite if (event.phase == "finalizado") luego if (thisSprite.sequence == "show") entonces thisSprite: setSequence ("en blanco") final - - Final de retraso de medio segundo. Con todo lo anterior en su lugar, obtenemos una animación de marmotas al azar. Agregue lo siguiente en la parte inferior de lasetUpGameScreen () función:
groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0)
Si realiza la prueba ahora, debería ver las marmotas que salen de sus agujeros al azar. Mientras esté allí, intente hacer clic en las marmotas mientras están fuera de sus agujeros. Debería ver uno de los 3 estados de hit, y luego el estado en blanco.
Cuando haya terminado la prueba, elimine la línea que acaba de ingresar. Solo lo necesitamos para probar..
En este paso comenzaremos a configurar la pantalla de introducción. Ingrese el siguiente código dentro de setUpIntroScreen función:
media.playSound ("gameTrack.mp3", soundComplete) introScreenGroup = display.newGroup () local titleScreen = display.newImage ("titleScreen.png") local playButton = display.newImage ("playButton.png", 100.100) local optionsButton = display.newImage ("optionsButton.png", 100,170) introScreenGroup: insert (titleScreen) introScreenGroup: insert (playButton) introScreenGroup: insert (optionsButton) Aquí comenzamos la banda sonora, configuramos la pantalla de introducción y agregamos botón de play y opcionesBotón gráficos.
Ahora llama al setUpIntroScreen () función debajo de donde está llamando el setUpGameScreen () función…
setUpGameScreen () setUpIntroScreen ()
Si prueba ahora debería ver la pantalla de introducción. Necesitamos agregar Event Listeners a los botones y eso es lo que haremos en los próximos pasos.
Ingrese lo siguiente debajo del código que ingresó en el paso anterior:
playButton: addEventListener ("tap", function () transition.to (introScreenGroup, time = 300, x = -480, onComplete = function () groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) end) PlayPlaying = true final ) Cuando se presiona el botón de reproducción, animamos la pantalla de introducción a la izquierda, configuramos nuestra groundHogTimer para generar marmotas al azar, y luego establecer la está jugando variable a verdadero.
Si realiza la prueba ahora, debería poder comenzar un nuevo juego, pero también nos gustaría que algunas opciones estén disponibles. Lo haremos a continuación.
Ingrese lo siguiente debajo del código que ingresó en el paso Arriba.
optionsButton: addEventListener ("tap", function () transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = function () introScreenGroup. x = -480 end) fin) Este código anima la pantalla de opciones hacia abajo desde arriba. Cuando la animación está completa, pone el introScreenGroup fuera de la pantalla principal a la izquierda.
Si realiza la prueba ahora y presiona el botón de opciones, no verá que ocurra nada, y eso es porque todavía no hemos creado la pantalla de opciones.
Introduzca lo siguiente dentro de setUpOptionsScreen () función:
optionsScreenGroup = display.newGroup () local optionsScreen = display.newImage ("optionsScreen.png") local backButton = display.newImage ("backButton.png", 130,240) local soundOnText = display.newText ("Sound On / Off", 75,105 , native.systemFontBold, 16) local groundHogSpeedText = display.newText ("Speed", 75,145, native.systemFontBold, 16) optionsScreenGroup: inserte (optionsScreen) artículosScreenGroup: grupo (empotrado) optionsScreenGroup.y = -325 Aquí configuramos el opciones de pantalla, añade el botón de retroceso, y añadir un par de textos..
Ahora llama a esta función debajo de donde estás llamando setUpIntroScreen:
setUpIntroScreen () setUpOptionsScreen ()
Si prueba el juego ahora, debería ver la pantalla de opciones deslizarse hacia abajo desde arriba.
Utilizaremos el widget de casilla de verificación para permitir al usuario activar / desactivar el sonido. Ingrese lo siguiente en la parte superior del archivo "main.lua".
local widget = require ("widget") Para poder usar el Switch y otros widgets, primero debemos requerir el módulo "widget"
Ahora ingrese lo siguiente debajo del código que ingresó arriba en el setUpOptionsScreen.
local soundCheckBox = widget.newSwitch left = 210, top = 98, style = "checkbox", initialSwitchState = true, onPress = function (e) local check = e.target if (check.isOn) luego media.playSound ("gameTrack .mp3 ", soundComplete) else media.stopSound () end end optionsScreenGroup: insert (soundCheckBox) Esto configura nuestro widget de casilla de verificación configurando "estilo" igual a "casilla de verificación". Comprobamos si la casilla de verificación Está encendido (si está seleccionado), y si es así jugamos el "gameTrack.mp3". Si no, paramos el sonido..
Si realiza la prueba ahora y va a la pantalla de opciones, debería poder activar o desactivar el sonido.
Utilizamos un control segmentado para permitir al usuario elegir la rapidez con la que deberían aparecer los groundHogs. Ingrese lo siguiente debajo del código de la casilla de verificación que ingresó en el paso anterior:
local speedControl = widget.newSegmentedControl left = 210, top = 140, segment = "slow", "medium", "fast", segmentWidth = 50, defaultSegment = 1, onPress = function (event) local target = event. target if (target.segmentNumber == 1) luego groundHogSpeed = 1500 elseif (target.segmentNumber == 2) luego groundHogSpeed = 1000 else groundHogSpeed = 700 end end optionsScreenGroup: insert (speedControl)
Aquí creamos un control segmentado con 3 segmentos ("lento", "medio", "rápido"). Dependiendo del segmento que el usuario ha presionado, configuramos el GroundHogSpeed variable en consecuencia.
Si realiza la prueba ahora, debería ver el Control segmentado y poder seleccionar un segmento, pero debemos conectar el botón Atrás para volver a la pantalla de introducción..
los botón de retroceso nos lleva de vuelta a la pantalla de introducción. Introduzca el siguiente código debajo del paso anterior:
backButton: addEventListener ("tap", function () if (isPlaying == false) luego introScreenGroup.x = 0 end transition.to (optionsScreenGroup, time = 300, y = -325, onComplete = function () if (isPlaying = = verdadero) luego groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) end end) end) Aquí comprobamos si el juego ha comenzado. Si no, ponemos el introScreenGroup De vuelta al área de juego. Luego hacemos la transición de la pantalla de opciones. Si el juego ha comenzado, configuramos el GroundHogtimer para generar marmotas al azar.
Necesitamos poder llegar a la pantalla de opciones desde la pantalla principal del juego. Agregue lo siguiente debajo de donde está insertando el juego de fondo en el gameScreenGroup ().
gameScreenGroup: inserte (gameBackground) local optionsButton = display.newImage ("optionsButton.png", 1,270) gameScreenGroup: insert (optionsButton) Si haces la prueba ahora, deberías ver el botón de opciones en la pantalla del juego.
Ahora necesitamos conectar el botón de opciones con un EventListener. Para hacerlo, ingrese el siguiente código debajo del bucle que crea todas las marmotas.
optionsButton: addEventListener ("tap", function (e) timer.cancel (groundHogTimer) transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = function () end) end) Aquí cancelamos el groundHogTimer y la transición de nuestra pantalla de opciones hacia abajo.
Probando ahora, deberías poder acceder a la pantalla de opciones desde la pantalla del juego. También debe poder configurar las opciones como desee.
Si has jugado el tiempo suficiente para que termine la banda sonora, es posible que hayas notado que no comenzó de nuevo. Ingrese lo siguiente dentro de soundComplete () función.
media.playSound ("gameTrack.mp3", soundComplete) Esto comienza a reproducir la banda sonora una vez que se completa.
En esta serie, aprendimos cómo crear un juego divertido e interesante Whack-a-Groundhog. Al hacerlo, has aprendido a utilizar hojas de sprites y sonido. Espero que hayas encontrado este tutorial útil, y gracias por leer.!
