Share
Esta es la segunda entrega de nuestro tutorial del juego Corona SDK Unblock Puzzle. En el tutorial de hoy, agregaremos a nuestra interfaz creando los elementos interactivos del juego de desbloqueo. 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 + 40)) 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) Este código coloca la imagen de fondo del juego en el escenario:
-- Game BG gameBg = display.newImage ('gameBg.png', 10, 10) A continuación añadimos el campo de texto de movimientos al escenario. Esto contará el número de movimientos realizados por el jugador..
-- Movimientos Movimientos del campo de texto = mostrar.nuevoText ('0', 211, 66, display.systemFont, 16) movimientos: setTextColor (224, 180, 120) Esta parte crea los bloques definidos en la variable Nivel usando un doble para declaración.
-- Crear nivel hblocks = display.newGroup () vblocks = display.newGroup () para i = 1, # l1 do para j = 1, # l1 [1] do si (l1 [i] [j] == 1) luego local v = display.newImage ('vrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) v: addEventListener ('touch', dragV) vblocks: insert (v) elseif ( l1 [i] [j] == 2) luego local h = display.newImage ('hrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) h: addEventListener (' toque ', arrastre H) hblocks: inserte (h) elseif (l1 [i] [j] == 3) luego s = display.newImage (' square.png ', 10 + (j * 50) -50, 120 + ( i * 50) -49) s: addEventListener ('touch', dragH) end end end end gameListeners ('add') end Esta función agrega los oyentes necesarios para iniciar la lógica del juego..
función gameListeners (acción) if (acción == 'agregar') luego Runtime: addEventListener ('enterFrame', actualizar) else Runtime: removeEventListener ('enterFrame', actualizar) end end end La siguiente función maneja el arrastre horizontal de los bloques..
función dragH (e) e.target.lastX = 0 local currentX = 0 local initX = 0 si (e.phase == 'comenzó') entonces e.target.lastX = ex - e.target.x initX = e.target .x movement.text = tostring (tonumber (movement.text) + 1) elseif (e.phase == 'moved') luego e.target.x = ex - e.target.lastX currentX = e.target.x - - Calcular dirección si (initX < currentX) then dir = 'hl' --horizontal-left elseif(initX > currentX) entonces dir = 'hr' --horizontal-end end end end end
Ahora creamos la función de arrastre vertical..
función dragV (e) e.target.lastY = 0 actual localY = 0 local initY = 0 si (e.phase == 'comenzó') entonces e.target.lastY = ey - e.target.y initY = e.target .y movement.text = tostring (tonumber (movement.text) + 1) elseif (e.phase == 'moved') luego e.target.y = ey - e.target.lastY currentY = e.target.y - - Calcular dirección si (initY < currentY) then dir = 'vu' --Vertical-upwards elseif(initY > currentY) luego dir = 'vd' --vertical-downward end end end 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 el sitio web de Intercambio de Código de CoronaLabs.
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
Este código limita el movimiento creando bordes virtuales..
actualización de la función (e) - Bordes verticales para i = 1, vblocks.numChildren do (vblocks [i] .y> = 370) luego vblocks [i] .y = 370 elseif (vblocks [i] .y <= 170) then vblocks[i].y = 170 end
Aquí manejamos las colisiones entre los bloques verticales y horizontales..
-- Hit Test si (hitTestObjects (vblocks [i], hblocks [i]) y dir == 'vu') luego vblocks [i] .y = hblocks [i] .y + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) y dir == 'vd') luego vblocks [i] .y = hblocks [i] .y - 75 end if (hitTestObjects (vblocks [i], hblocks [i]) y dir == 'hr' ) luego hblocks [i] .x = vblocks [i] .x + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) y dir == 'hl') luego hblocks [i] .x = vblocks [i ] .x - 75 end if (hitTestObjects (s, vblocks [i])) entonces sx = vblocks [i] .x - 50 end
Este código limita el movimiento horizontalmente creando bordes virtuales..
-- Bordes horizontales para j = 1, hblocks.numLos niños hacen if (hblocks [j] .x> = 260) luego hblocks [j] .x = 260 elseif (hblocks [j] .x <= 60) then hblocks[j].x = 60 end end -- Square if(s.x >= 320) luego display.remove (s) display.remove (vblocks) display.remove (hblocks) alert () elseif (s.x <= 35) then s.x = 35 end end
La función de alerta detiene el juego, muestra un mensaje y elimina a los oyentes activos.
función alert () gameListeners ('rmv') local alertView = display.newImage ('alert.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82) extremo 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()
los Default.png El archivo es una imagen que se mostrará justo al iniciar la aplicación mientras el 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 compilador de Corona.
Usando los gráficos que creaste anteriormente, ahora puedes crear un ícono bonito 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 necesita tener las esquinas redondeadas o el 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 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!
En este tutorial, aprendiste a hacer que nuestra interfaz cobrara vida al permitir que el usuario interactúe con las piezas del juego. ¡Experimenta con el resultado final e intenta crear tu propia versión personalizada del juego! Espero que les haya gustado esta serie de tutoriales y les haya resultado útil. Gracias por leer!
