Esta es la segunda entrega de nuestro tutorial de física de Corona SDK. En el tutorial de hoy, agregaremos a nuestra interfaz y nuestra interacción con el juego. Sigue leyendo!
Asegúrese de leer la primera parte del tutorial para comprender completamente y prepararse para este tutorial.
Esta función agrega los oyentes necesarios a la TitleView botones.
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 acerca de botón. UNA 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', -130, display.contentHeight-140) transition.to (creditsView, time = 300, x = 65, 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) playBtn.isVisible = true creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil end) end
Cuando el jugar se pulsa el botón, la vista de título se interpola y se elimina para revelar la vista del juego. Hay muchas partes involucradas en esta vista, así que las dividiremos en el siguiente paso.
función showGameView: toque (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end)
Las siguientes líneas agregan el mensaje de instrucciones. Lo mostraremos durante dos segundos y luego desapareceremos..
-- Instrucciones Mensaje local ins = display.newImage ('ins.png', 32, 182) transition.from (ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transición. to (ins, time = 200, alpha = 0.1, onComplete = function () display.remove (ins) ins = nil end) end) end) lvlImg = display.newImage ('level.png', 202, 2 )
Este código crea un rectángulo en la parte inferior del escenario para usar como piso.
-- Floor local floor = display.newRect (0, 320, 480, 1)
Esta parte maneja la creación de nivel. Comienza creando las cajas en el escenario. Aprenderemos más sobre esta función en los siguientes pasos..
-- Cuadros de nivel addBox ('g', 60, 272) addBox ('s', 148, 284) addBox ('s', 148, 248) addBox ('s', 148, 212) addBox ('s', 148, 176) addBox ('n', 297, 272) addBox ('n', 297, 224) addBox ('n', 297, 176) addBox ('w', 148, 164)
Este código añade la bola al nivel..
-- Ball ball = display.newImage ('ball.png', 234, 138) ball.name = 'ball'
Aquí añadimos física al suelo y al balón..
-- Añadir Física physics.addBody (piso, 'estática') physics.addBody (ball, 'dynamic', radius = 12) final
La siguiente función utiliza tres parámetros para crear un objeto de cuadro. Puede especificar el tipo de casilla en el primer parámetro y su posición en los dos siguientes. Con este método, puede crear niveles complejos utilizando solo unas pocas líneas de código. Agregará física al nuevo cuadro, así como también a un oyente de tap..
función addBox (tipo, X, Y) local b = display.newImage (tipo… 'Box.png', X, Y) physics.addBody (b, 'dynamic') si (tipo ~ = 'g') entonces b: addEventListener ('tap', removeBox) elseif (type == 'g') luego b: addEventListener ('collision', onCollision) end end
Esta función elimina el cuadro de destino cuando se toca.
Función removeBox (e) display.remove (e.target) end
Usaremos este código para ver si la bola choca con el cuadro de portería y llamaremos una alerta si es verdad..
función onCollision (e) if (e.other.name == 'ball') luego display.remove (ball) alert () end end end
La función de alerta crea una vista de alerta, la anima y finaliza el juego..
función alerta (acción) gameListeners ('rmv') si (acción == 'pierde') entonces alertView = display.newImage ('lose.png', 110, 218) else alertView = display.newImage ('win.png', 110, 218) end transition.from (alertView, time = 200, alpha = 0.1) end
Para comenzar el juego, el Principal La función necesita ser llamada. Lo haremos con el siguiente código en su lugar..
Principal()
los default.png archivo es una imagen que se mostrará justo al iniciar la aplicación. El compilador de Corona lo agregará automáticamente cuando lo agregue a la carpeta de origen de su proyecto.
Usando los gráficos que creaste anteriormente, puedes crear un bonito icono. El tamaño del icono para el icono del iPhone sin retina es 57x57px, pero la versión retina es 114x114px y la tienda de iTunes requiere una 512x512px versión. Sugiero crear el 512x512 Versión primero y reducción para los otros tamaños..
No necesita tener esquinas redondeadas o un resplandor transparente. iTunes y el iPhone lo harán por ti..
Es hora de hacer la prueba final. Abra el simulador de Corona, busque la carpeta de su proyecto y 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 el envío para su distribución!
En esta serie, aprendimos sobre el comportamiento de la física, escuchas de tap y colisiones. Estas son habilidades que pueden ser realmente útiles en una gran cantidad de juegos..
Experimenta con el resultado final e intenta crear tu propia versión personalizada del juego.!
Espero que les haya gustado esta serie y la hayan encontrado útil. Gracias por leer!