Share
Esta es la segunda entrega de nuestro tutorial del juego Corona SDK Bubble Popping. En el tutorial de hoy, agregaremos a nuestra interfaz codificando la interacción del juego. Sigue leyendo!
Asegúrese de revisar la parte 1 de la serie para comprender completamente y prepararse para este tutorial.
Esta función agrega los oyentes necesarios a la TitleView botones.
Accentsconagua
function startButtonListeners (acción) if (acción == 'agregar') luego playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener 'tap', showCredits) end end end La pantalla de créditos se muestra cuando el usuario toca el botón Acerca de, un grifo El oyente se agrega a la vista de créditos para eliminarlo..
función showCredits: toque (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) lastY = titleBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 30)) transition.to (creditsView, time = 300, y = (display.contentHeight * 0.5) + 35, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end Cuando se toca la pantalla de créditos, se interpone fuera del escenario y se elimina.
función hideCredits: toque (e) transition.to (creditsView, time = 300, y = display.contentHeight + 25, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) transition.to (titleBg, time = 300, y = lastY); fin Cuando el comienzo se pulsa el botón, la vista de título se interpola y se elimina, revelando la vista del juego. Hay muchas partes involucradas en esta vista, así que las dividiremos en los siguientes pasos.
función showGameView: toque (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) A continuación añadimos las paredes al escenario. Se crean utilizando la API de dibujo..
-- Paredes a la izquierda = display.newLine (0, 240, 0, 720) a la derecha = display.newLine (320, 240, 320, 720) top = display.newLine (160, 0, 480, 0) bottom = display.newLine (160) 480, 480, 480)
Esta parte crea cinco burbujas en la pantalla en una posición aleatoria..
bubbles = display.newGroup () para i = 1, 5 do local rx = 21 + math.floor (math.random () * (display.contentWidth - 42)) ry local = 21 + math.floor (math.random ( ) * (display.contentHeight - 42)) local b = display.newImage ('bubble.png', rx, ry) b.name = 'bubble' Aquí añadimos la física a nuestra nueva burbuja..
-- Bubble Physics physics.addBody (b, 'dynamic', radius = 21, bounce = 1) b: setLinearVelocity (100, 100) bubbles: insert (b) end
Y hacer lo mismo con nuestros muros..
-- Walls Physics physics.addBody (izquierda, 'estática') physics.addBody (derecha, 'estática') physics.addBody (arriba, 'estática') physics.addBody (abajo, 'estática')
Ahora agregamos los campos de texto de nivel, burbujas y requeridos..
-- Level TextField level = display.newImage ('level.png', 2, 0) levelN = display.newText ('1', 54, 5, native.systemFont, 15) levelN: setTextColor (255, 255, 255) - Popped TextField popped = display.newImage ('popped.png', 126, 0) poppedN = display.newText ('0', 187, 5, native.systemFont, 15) poppedN: setTextColor (255, 255, 255) - Campo de texto requerido requerido = display.newImage ('required.png', 231, 0) requiredN = display.newText ('4', 306, 5, native.systemFont, 15) requiredN: setTextColor (255, 255, 255) bullets = display.newGroup () end Esta función agrega los oyentes necesarios para iniciar la lógica del juego..
function gameListeners (action) if (action == 'add') luego bg: addEventListener ('tap', createBullets) else bg: removeEventListener ('tap', createBullets) Runtime: removeEventListener ('enterFrame', update) end end Este código se ejecuta cuando se toca el fondo.
Primero creamos los gráficos de bala..
función createBullets (e) para i = 1, 4 do local bullet = display.newImage ('bullet.png', e.x, e.y) Luego le damos una dirección ajustando la velocidad lineal.
-- Establezca la dirección si (i == 1) entonces bullet.x = bullet.x - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (-150, 0) end --left if ( i == 2) entonces bullet.x = bullet.x + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (150, 0) end --right si (i == 3) entonces bullet.y = bullet.y - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, -150) final --up si (i == 4) luego bullet.y = bullet.y + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, 150) end - down bullet: addEventListener ('collision', onCollision) bullets: insert (bullet) bg: removeEventListener ('tap', createBullets) end Runtime: addEventListener ('enterFrame', actualización) end Las colisiones son manejadas por la siguiente función. Se reproduce un sonido, la puntuación aumenta y elimina la burbuja de la pantalla..
función onCollision (e) if (e.other.name == 'bubble') entonces audio.play (pop) display.remove (e.other) poppedN.text = tostring (tonumber (poppedN.text) + 1) end end end
Este código eliminará cualquier bala que esté fuera de la vista..
función de actualización (e): compruebe si hay viñetas fuera del escenario para i = 1, bullets.numChildren haga si (bullets [i] ~ = nil) entonces if (bullets [i] .x < 0 or bullets[i].x > 320 o balas [i] .y < 0 or bullets[i].y > 480) luego display.remove (bullets [i]) end end end end end
Aquí verificamos si las burbujas reventadas han alcanzado la cantidad requerida y llamamos a ganar alerta si es cierto.
-- Verifique si se hicieron estallar las burbujas requeridas si (bullets.numChildren == 0 y tonumber (poppedN.text)> = tonumber (requiredN.text)) luego alert ('win') elseif (bullets.numChildren == 0 y tonumber (poppedN. texto) < tonumber(requiredN.text)) then alert('lose') end end La función de alerta muestra un mensaje según el tipo de alerta llamada (nivel completado o fallado).
función alert (acción) gameListeners ('rmv') if (action == 'win') entonces alertView local = display.newImage ('won.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) else local alertView = display.newImage ('lost.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, retraso = 500) fin final Para comenzar el juego, el Principal La función necesita ser llamada. Con el código anterior en su lugar, lo haremos aquí:
Principal()
El archivo Default.png es una imagen que se mostrará justo al iniciar la aplicación, mientras que iOS carga los datos básicos para mostrar la pantalla principal. Agregue esta imagen a su carpeta de origen del proyecto, se agregará automáticamente por el complemento de Corona.
Usando los gráficos que creó antes, ahora puede crear un ícono agradable y atractivo. El tamaño del icono para el icono del iPhone sin retina es de 57x57px, pero la versión de la retina es de 114x114px y la tienda de iTunes requiere una versión de 512x512px. Sugiero crear primero la versión 512x512 y luego reducir la escala para los otros tamaños..
No es necesario que tenga las esquinas redondeadas o el brillo transparente, iTunes y el iPhone lo harán por usted..
Es hora de hacer la prueba final. Abra el simulador de Corona, busque la carpeta de su proyecto y luego haga clic en Abrir. Si todo funciona como se espera, estás listo para el paso final!
En el simulador de corona ir a Archivo> Construir y seleccione su dispositivo de destino. Rellene los datos requeridos y haga clic construir. Espere unos segundos y su aplicación estará lista para la prueba del dispositivo y / o el envío para su distribución!
Experimenta con el resultado final y trata de hacer tu versión personalizada del juego.!
Espero que les haya gustado esta serie de tutoriales y les resulte útil. Gracias por leer!
