Share
Esta es la segunda entrega de nuestro tutorial de Corona SDK Pinball Game. En el tutorial de hoy, agregaremos a nuestra interfaz y luego codificaremos 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.
Cuando el comienzo se pulsa el botón, la vista de título se interpone y se elimina, revelando la vista del juego. Hay muchas partes involucradas en esta vista, así que las dividiremos en los siguientes pasos.
Accentsconagua
función showGameView: toque (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Aquí colocamos la pared izquierda, recuerde que se dividió en partes para aplicar la física más adelante..
-- Partes de la pared izquierda l1 = display.newImage ('l1.png') l2 = display.newImage ('l2.png', 0, 214) l3 = display.newImage ('l3.png', 0, 273) l4 = display .newImage ('l4.png', 0, 387) Este código coloca la pared derecha usando el mismo método..
-- Partes de la pared derecha r1 = display.newImage ('r1.png', 238, 0) r2 = display.newImage ('r2.png', 274, 214) r3 = display.newImage ('r3.png', 291, 273 ) r4 = display.newImage ('r4.png', 195, 387) Agrega la bola y HitLines con el siguiente código:
ball = display.newImage ('ball.png', display.contentWidth * 0.5, 0) hitLine1 = display.newImage ('hitLine.png', 70, 28) hitLine2 = display.newImage ('hitLine.png', 110, 28) Los objetivos se agregan utilizando las siguientes líneas:
-- Hit balls hitBall1 = display.newImage ('hitBall.png', 160, 186) hitBall2 = display.newImage ('hitBall.png', 130, 236) hitBall3 = display.newImage ('hitBall.png', 187, 236) hitBall1.name = 'hBall' hitBall2.name = 'hBall' hitBall3.name = 'hBall' A continuación, agregamos las paletas y les damos un nombre para usarlas más tarde.
pLeft = display.newImage ('paddleL.png', 74, 425) pRight = display.newImage ('paddleR.png', 183, 425) pLeft.name = 'leftPaddle' pRight.name = 'rightPaddle' Estos botones controlarán las paletas, agregúelos usando este código:
lBtn = display.newImage ('lBtn.png', 20, 425) rBtn = display.newImage ('rBtn.png', 260, 425) lBtn.name = 'left' rBtn.name = 'right' Por último, añadimos el campo de texto de puntuación..
-- Puntuación TextField score = display.newText ('0', 2, 0, 'Marker Felt', 14) score: setTextColor (255, 206, 0) 
Probablemente te estés preguntando por qué agregamos las paredes en partes. Ya que estamos realizando colisiones de píxeles perfectos en ellos, no podemos simplemente usar el addBody método (ya que esto agregará una caja que cubre el canal alfa también), en su lugar usamos el forma Parámetro para definir un polígono para la imagen..
¿Por qué no un solo polígono??
El parámetro de forma solo acepta convexo formas y un máximo de 8 lados, Nuestro muro no es ninguno, así que simplemente lo dividimos en pedazos..
-- Partes de la pared izquierda physics.addBody (l1, 'static', shape = -40, -107, -11, -107, 40, 70, 3, 106, -41, 106) physics.addBody (l2, 'static', shape = -23, -30, 22, -30, 22, 8, 6, 29, -23, 29) physics.addBody (l3, 'static', shape = -14 , -56, 14, -56, 14, 56, -14, 56) physics.addBody (l4, 'static', shape = -62, -46, -33, -46, 61, 45, -62, 45) - Partes de la pared derecha physics.addBody (r1, 'static', shape = 10, -107, 39, -107, 40, 106, -5, 106, -41, 70 ) physics.addBody (r2, 'static', shape = -22, -30, 22, -30, 22, 29, -6, 29, -23, 9) physics.addBody (r3, ' static ', shape = -14, -56, 14, -56, 14, 56, -14, 56) physics.addBody (r4,' static ', shape = 32, -46, 61, -46, 61, 45, -62, 45)
Se utilizan métodos similares con las otras formas, excepto los círculos que usan el radio parámetro.
physics.addBody (ball, 'dynamic', radius = 8, bounce = 0.4) physics.addBody (hitLine1, 'static', shape = -20, -42, -15, -49, -6, - 46, 18, 39, 15, 44, 5, 44,) physics.addBody (hitLine2, 'static', shape = -20, -42, -15, -49, -6, -46, 18 , 39, 15, 44, 5, 44,) physics.addBody (hitBall1, 'static', radio = 15) physics.addBody (hitBall2, 'static', radius = 15) physics.addBody ( hitBall3, 'static', radius = 15) physics.addBody (pRight, 'static', shape = -33, 11, 27, -12, 32, 1) physics.addBody (pLeft, 'static ', forma = -33, 1, -28, -12, 32, 11)
Una línea simple se agrega a la parte superior de la pantalla como una pared para rebotar la pelota..
-- Top Wall local topWall = display.newLine (display.contentWidth * 0.5, -1, display.contentWidth * 2, -1) physics.addBody (topWall, 'static')
Esta función agrega los oyentes necesarios para iniciar la lógica del juego..
function gameListeners (action) if (action == 'add') entonces lBtn: addEventListener ('touch', movePaddle) rBtn: addEventListener ('touch', movePaddle) ball: addEventListener ('collision', onCollision) Runtime: addEventListener (' enterFrame ', actualizar) else lBtn: removeEventListener (' touch ', movePaddle) rBtn: removeEventListener (' touch ', movePaddle) bola: removeEventListener (' collision ', onCollision) Runtime: removeEventListener (' enterFrame ', update) end end Los botones en la pantalla activarán la rotación de las paletas. Este código maneja ese.
función movePaddle (e) si (e.phase == 'comenzó' y e.target.name == 'izquierda') luego pLeft.rotation = -40 elseif (e.phase == 'comenzado' y e.target.name == 'derecho') luego pRight.rotation = 40 final
La rotación volverá a su estado inicial cuando ya no se presione el botón..
si (e.phase == 'terminó') entonces pLeft.rotation = 0 pRight.rotation = 0 end end
La bola se lanzará cuando ocurra una colisión con la pala, pero solo si la rotación de la pala está activa. Esto evita tirar el balón cuando no se presionan los botones..
función onCollision (e): dispara si (e.phase == 'comenzó' y e.other.name == 'leftPaddle' y e.other.rotation == -40) luego ball: applyLinearImpulse (0.05, 0.05, ball .y, ball.y) elseif (e.phase == 'comenzó' y e.other.name == 'rightPaddle' y e.other.rotation == 40) luego ball: applyLinearImpulse (0.05, 0.05, ball.y , ball.y) end
La puntuación aumentará después de que ocurra una colisión con cualquier hitBall.
si (e.phase == 'terminó' y e.other.name == 'hBall') entonces score.text = tostring (tonumber (score.text) + 100) score: setReferencePoint (display.TopLeftReferencePoint) score.x = 2 audio.play (campana) extremo final
Este código verifica si la bola cae a través del espacio entre las paletas y la reinicia si es verdadera.
función de actualización (): compruebe si la bola golpeó el fondo si (bola.y> pantalla.contenido Altura) luego bola.y = 0 audio.play (zumbido) extremo fin
Para comenzar el juego inicialmente, 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 creaste anteriormente, ahora puedes crear un ícono bonito y atractivo. 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 versión de 512x512px. Sugiero crear primero la versión 512x512 y luego reducir la escala para los otros tamaños. El icono no necesita tener las esquinas redondeadas o el brillo transparente, iTunes y el iPhone lo harán por ti.
Es hora de ejecutar 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, 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!
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 haya resultado útil. Gracias por leer!
