Share
Esta es la segunda entrega del tutorial Corona SDK Match Shapes. En el tutorial de hoy, agregaremos a la interfaz y la interacción del juego programando el algoritmo de coincidencia de formas. 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) transition.to (creditsView, time = 300, y = display. contentHeight - 25, 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) fin Cuando el Jugar 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) Este código coloca la imagen de fondo del juego en el escenario..
-- Fondo del juego gameBg = display.newImage ('gameBg.png', 10, 350) Los marcadores de posición son gráficos de fondo que se utilizan para representar a dónde se deben arrastrar las formas reales. Las siguientes líneas las crean y las colocan en el escenario..
-- Marcadores de posición sHolder = display.newImage ('sHolder.png', 15, 130) pHolder = display.newImage ('pHolder.png', 115, 130) tHolder = display.newImage ('tHolder.png', 215, 130) Un mensaje de instrucciones será animado cuando el juego comience. Puede cambiar el tiempo que aparece cambiando el PerformWithDelay () código.
-- Instrucciones ins = display.newImage ('instructions.png', 45, 270) transition.from (ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transition.to ( ins, time = 200, alpha = 0.1, onComplete = function () display.remove (ins) ins = nil end) end) fin Las formas que se utilizarán se crean en las siguientes líneas de código.
-- Formas square = display.newImage ('square.png', 240, 386) pentagon = display.newImage ('pentagon.png', 32, 386) triangle = display.newImage ('triangle.png', 131, 386) square .name = 'square' pentagon.name = 'pentagon' triangle.name = 'triangle' gameListeners () final Esta función agrega los oyentes necesarios para iniciar la lógica del juego..
function gameListeners () function gameListeners () square: addEventListener ('touch', dragShape) triángulo: addEventListener ('touch', dragShape) pentágono: addEventListener ('touch', dragShape) end Usaremos una función excelente y útil para la detección de colisiones sin física. Puede encontrar el ejemplo y la fuente original en CoronaLabs Code Exchange.
función hitTestObjects (obj1, obj2) local left = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin derecho local = obj1.contentBounds.xMin> = obj2.contentBounds.xMin y obj1.contentBounds.xMin <= obj2.contentBounds.xMax local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin local down = obj1.contentBounds.yMin> = obj2.contentBounds.yMin y obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end
Esta es la función principal de este juego: controla el arrastre del objeto al verificar la posición del objeto y moverlo a la posición del evento..
función dragShape (e) si (e.phase == 'comenzó') luego lastX = ex - e.target.x lastY = ey - e.target.y elseif (e.phase == 'moved') luego e.target .x = ex - lastX e.target.y = ey - lastY
Esta última función también contiene código que verifica si la forma está en el lugar correcto. Esta es la parte cuadrada..
elseif (e.target.name == 'cuadrado' y e.phase == 'terminó' y hitTestObjects (e.target, sHolder)) luego e.target.x = 60.5 e.target.y = 175 e.target: removeEventListener ('touch', dragShape) correcto = correcto + 1 audio.play (correctSnd) El mismo método se utiliza para el triángulo. Si la forma correcta se coloca en el lugar correcto, se elimina el oyente de arrastre de forma.
elseif (e.target.name == 'triángulo' y e.phase == 'terminó' y hitTestObjects (e.target, tHolder)) luego e.target.x = 260 e.target.y = 169 e.target: removeEventListener ('touch', dragShape) correcto = correcto + 1 audio.play (correctSnd) Esta es la parte del pentágono. Si la forma correcta toca el lugar correcto cuando el toque el evento finaliza, la forma se alinea con el centro del marcador de posición.
elseif (e.target.name == 'pentágono' y e.phase == 'terminó' y hitTestObjects (e.target, pHolder)) luego e.target.x = 160 e.target.y = 172 e.target: removeEventListener ('touch', dragShape) correct = correct + 1 audio.play (correctSnd) end Finalmente, verificaremos si las tres formas se han colocado correctamente, y luego reproduciremos un sonido y llamaremos una alerta si es correcto.
si (e.phase == 'terminó' y correcto == 3) entonces audio.stop () audio.play (winSnd) alert () end end end
La función de alerta crea una vista de alerta, la anima y finaliza el juego..
función alert () alertView = display.newImage ('win.png', 95, 270) transition.from (alertView, time = 200, alpha = 0.1) end Para comenzar el juego, el Principal La función necesita ser llamada. Con el código anterior en su lugar, podemos hacerlo aquí:
Principal()
El archivo Default.png es una imagen que se muestra cuando inicia la aplicación mientras que iOS carga los datos básicos para mostrar la pantalla principal. Añade esta imagen a la carpeta de origen de tu proyecto. Será automáticamente agregado por el compilador Corona..
Usando los gráficos creados anteriormente, ahora puedes crear un ícono 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 resplandor transparente, iTunes y el iPhone lo harán por ti.
Es hora de 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 último paso!
En el simulador de corona, ve 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!
En esta serie, aprendió sobre el arrastre de objetos y la detección de colisiones sin utilizar el motor de física. Esto puede reducir el consumo de memoria de la aplicación y aumentar el rendimiento. Puedes experimentar con el resultado final e intentar hacer tu versión personalizada del juego.!
Espero que hayas disfrutado esta serie de tutoriales y te haya resultado útil. Gracias por leer!
