Share
Esta es la segunda entrega de nuestro tutorial de Corona SDK Lunar Lander. En el tutorial de hoy, agregaremos a nuestra interfaz y 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 titleBg: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else titleBg: 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 eliminar esto..
función showCredits: toque (e) 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) fin Cuando se toca la pantalla de créditos, se interpone fuera del escenario y se elimina.
función hideCredits: tap (e) creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap', hideCredits) display. eliminar (creditsView) creditsView = nil end) end 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 a las lunas en el escenario..
-- Moons m1 = display.newImage ('moon.png', 386, 156) m2 = display.newImage ('moon.png', 252, 99) m3 = display.newImage ('moon.png', 131, 174) m1 .name = 'moon' m2.name = 'moon' m3.name = 'moon' Una luna más grande se utiliza como el punto de aterrizaje. Usa el siguiente código para colocarlo:
-- Big Moon bigM = display.newImage ('moonBig.png', 10, 53) bigM.name = 'moon' El punto de aterrizaje está representado por un gráfico de flecha. Se crea una propiedad de nombre para ayudar a identificar estos elementos cuando ocurre una colisión.
-- Arrow arrow = display.newImage ('arrow.png', 44, 24) arrow.name = 'goal' A continuación, añadimos el cohete. Este será nuestro elemento controlado por el usuario..
-- Rocket rocket = display.newImage ('rocket.png', 409.5, 114) El siguiente código colocará las estrellas en la pantalla:
-- Estrellas s1 = display.newImage ('star.png', 341, 146) s2 = display.newImage ('star.png', 273, 48) s3 = display.newImage ('star.png', 190, 234) s4 = display.newImage ('star.png', 37, 135) s1.name = 'star' s2.name = 'star' s3.name = 'star' s4.name = 'star' Para mover el Rocket en la pantalla necesitaremos una plataforma de juego, este código se encargará de eso. UNA grifo El oyente se agregará más tarde a cada botón para manejar el movimiento..
-- Controles up = display.newImage ('dirBtn.png', 404, 246) left = display.newImage ('dirBtn.png', 10, 246) right = display.newImage ('dirBtn.png', 84, 246) arriba .name = 'up' left.name = 'left' right.name = 'right' up.rotation = 90 right.rotation = 180 Aquí añadimos la física a los elementos gráficos..
-- Añadir Física physics.addBody (m1, 'static', radius = 35) physics.addBody (m2, 'static', radius = 35) physics.addBody (m3, 'static', radius = 35) physics.addBody (bigM, 'static', radius = 40) physics.addBody (arrow, 'static') physics.addBody (rocket, 'dynamic') rocket.isFixedRotation = true rocket.isAwake = false --prevents initial sonido de explosión physics.addBody (s1, 'static', radius = 12) physics.addBody (s2, 'static', radius = 12) physics.addBody (s3, 'static', radius = 12) physics.addBody (s4, 'static', radius = 12) arrow.isSensor = true s1.isSensor = true s2.isSensor = true s3.isSensor = true s4.isSensor = true
Esta función agrega los oyentes necesarios para iniciar la lógica del juego..
function gameListeners () up: addEventListener ('touch', movePlayer) left: addEventListener ('touch', movePlayer) right: addEventListener ('touch', movePlayer) Runtime: addEventListener ('enterFrame', update) rocket: addEventListener ('collision ', onCollision) end La variable de dirección se cambia con esta función, esto hará que el cohete gire en la dirección presionada.
función movePlayer (e) si (e.phase == 'comenzó' y e.target.name == 'arriba') luego dir = 'up' elseif (e.phase == 'terminó' y e.target.name = = 'arriba') luego dir = 'none' elseif (e.phase == 'comenzó' y e.target.name == 'izquierda') luego dir = 'left' elseif (e.phase == 'comenzó' y e.target.name == 'right') luego dir = 'right' elseif (e.phase == 'end' y e.target.name == 'left') luego dir = 'none' elseif (e.phase == 'terminó' y e.target.name == 'derecho') luego dir = 'ninguno' fin final
Estas líneas mueven el cohete según la dirección establecida por el mover jugador función creada en el paso 13.
función de actualización (e) - Movimiento de cohete si (dir == 'arriba') luego cohete: setLinearVelocity (0, -80) elseif (dir == 'left') luego cohete: setLinearVelocity (-100, 0) elseif (dir == 'derecho') luego cohete: setLinearVelocity (100, 0) final
El siguiente código escucha un conjunto de variables en verdadero cuando se produce una colisión entre el cohete y la luna, el valor de la variable se cambia por onCollision Función que se creará más adelante..
Cuando sea cierto, el cohete se colocará en su posición original y se pondrá en un estado de reposo para evitar una colisión con la luna debajo de él..
-- Rocket-Moon Collision if (hitMoon) entonces rocket.x = 421.5 rocket.y = 134 hitMoon = false rocket.isAwake = false end
Un método similar se utiliza en la detección de colisiones de cohetes y estrellas..
-- Rocket-Star Collision if (hitStar) luego display.remove (starHit) stars = stars + 1 hitStar = false end
El nivel se completará cuando el jugador haya recogido las cuatro estrellas y aterrice en la luna más grande. El siguiente código maneja ese.
-- Goal if (hitGoal and stars == 4) entonces rocket.x = 52 rocket.y = 35 physics.stop () display.remove (arrow) audio.play (goal) hitGoal = false complete = display.newImage ('complete. png ') elseif (hitGoal and stars ~ = 4) y luego hitGoal = false end Esta función se ejecuta cuando el cohete choca con otro cuerpo. El nombre del cuerpo se comprueba para realizar la acción correcta. Básicamente, se reproduce un sonido y una variable se establece en verdadero (para el actualizar función para ver) según el nombre del otro cuerpo.
función onCollision (e) if (e.other.name == 'moon') luego hitMoon = true audio.play (explo) elseif (e.other.name == 'star') luego audio.play (star) starHit = e.other hitStar = true elseif (e.other.name == 'goal') luego hitGoal = true end end
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!
