Crear un juego de rompecabezas basado en la física - Agregar interacción

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!


También disponible en esta serie:

  1. Crear un juego de rompecabezas basado en la física - Creación de interfaz
  2. Crear un juego de rompecabezas basado en la física - Agregar interacción

Donde dejamos…

Asegúrese de leer la primera parte del tutorial para comprender completamente y prepararse para este tutorial.


1. Iniciar los oyentes del botón

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

2. Mostrar créditos

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

3. Ocultar créditos

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

4. Mostrar vista del juego

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)

5. Mensaje de instrucciones

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 )

6. piso

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)

7. Cajas de nivel

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)

bola 8

Este código añade la bola al nivel..

 -- Ball ball = display.newImage ('ball.png', 234, 138) ball.name = 'ball'

9. la física

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

10. Añadir función de caja

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

11. Quitar la caja

Esta función elimina el cuadro de destino cuando se toca.

 Función removeBox (e) display.remove (e.target) end

12. Colisiones

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

13. alerta

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

14. Llamar a la función principal

Para comenzar el juego, el Principal La función necesita ser llamada. Lo haremos con el siguiente código en su lugar..

 Principal()

15. Pantalla de carga

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.


16. Icono

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


17. Pruebas en simulador

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!


18. Construir

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!


Conclusió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!