Share
Lo que vas a crearEn la primera parte de esta serie, logramos mostrar la pantalla de inicio y pudimos hacer la transición a la nivel de juego pantalla. En este tutorial, continuamos donde lo dejamos y comenzamos a implementar el juego..
Abierto gamelevel.lua, el archivo que creamos en el primer tutorial, y agregue lo siguiente debajo de la línea escena local = storyboard.newScene ().
local playerSpeedY = 0 local playerSpeedX = 0 local playerMoveSpeed = 7 local playerWidth = 60 local playerHeight = 48 local bulletWidth = 8 local bulletHeight = 19 local islandHeight = 81 local islandOnight = 80Generación local = 0 - Contiene todas las balas que el jugador dispara a los enemigos locales. Boletas = - Guarda las balas de "todos" los planos enemigos islas locales = - Contiene todas las islas local planeGrid = - Contiene 0 o 1 (11 de ellas para hacer un sistema de cuadrícula) local enemyPlanes = - Mantiene todos los aviones enemigos en livesImages = - Mantiene todas las imágenes de "vida libre" local numberOfLives = 3 local freeLifes = - Contiene todo el ingame vidas libres local playerIsInvincible = false local gameOver = false local numberOfTicks = 0 - Un número que se incrementa en cada cuadro del juego local islandGroup - Un grupo que contiene todas las islas local planeGroup - Un grupo que contiene todos los aviones, balas, etc. p local layer local planeSoundChannel - SoundChannel para el plano sonido local firePlayerBulletTimer local generatorIslandTimer local fireEnemyBulletsTimer local generaFreeLifeTimer local rectUp - El control "arriba" en el DPAD local RectDown - El "abajo" control en el DPAD local rectLey - El "izquierdo" control en el DPAD rectRight local - El control "correcto" en el DPAD
La mayoría de estos son autoexplicativos, pero he incluido comentarios para aclarar. De aquí en adelante, todo el código se debe insertar sobre la línea. escena de retorno.
Accentsconagua
crearScene Comience agregando el crearScene función para main.lua. los crearScene La función se llama cuando la vista de la escena aún no existe. Agregaremos los objetos de visualización del juego en esta función..
escena de la función: createScene (evento) grupo local = self.view end scene: addEventListener ("createScene", escena)configuración de fondofunción setupBackground () local background = display.newRect (0, 0, display.contentWidth, display.contentHeight) background: setFillColor (0,0,1) scene.view: insert (background) end
En configuración de fondo, Creamos un fondo azul usando los objetos Display. nuevoRecto método. los setFillColor El método toma valores RGB, como porcentajes. Invocar el configuración de fondo funcionar en crearScene Como se muestra abajo.
escena de la función: createScene (evento) grupo local = self.view setupBackground () end
grupos de configuración los grupos de configuración la función crea una instancia de la grupo de islas y grupo de aviones grupos, y los inserta en la escena ver. El GroupObject es un tipo especial de objeto de visualización en el que puede agregar otros objetos de visualización. Es importante agregar primero el grupo de islas al ver para asegurarse de que las islas están por debajo de los planos.
función setupGroups () islandGroup = display.newGroup () planeGroup = display.newGroup () scene.view: insert (islandGroup) scene.view: insert (planeGroup) end
Invocar el grupos de configuración funcionar en crearScene Como se muestra abajo.
escena de la función: createScene (evento) grupo local = self.view setupBackground () setupGroups () end
setupDisplay los setupDisplay La función dibuja un rectángulo negro en la parte inferior de la pantalla y se inserta. dpad y avión imágenes en el ver.
función setupDisplay () local tempRect = display.newRect (0, display.contentHeight-70, display.contentWidth, 124); tempRect: setFillColor (0,0,0); scene.view: inserte (tempRect) local logo = display.newImage ("logo.png", display.contentWidth-139, display.contentHeight-70); scene.view: inserte (logotipo) local dpad = display.newImage ("dpad.png", 10, display.contentHeight - 70) scene.view: insert (dpad) endDe nuevo, invoca esta función en crearScene Como se muestra abajo.
escena de la función: createScene (evento) grupo local = self.view setupBackground () setupGroups () setupDisplay () end
setupPlayer los setupPlayer La función simplemente agrega la imagen del jugador a la pantalla. El objeto Display viene con dos propiedades de solo lectura, contenido ancho y contenidoHeight, Representando el ancho y alto original del contenido en píxeles. Estos valores están predeterminados al ancho y alto de la pantalla, pero pueden tener otros valores si está usando la escala de contenido en config.lua. Usamos estas propiedades para alinear al jugador en la escena..
function setupPlayer () player = display.newImage ("player.png", (display.contentWidth / 2) - (playerWidth / 2), (display.contentHeight - 70) -playerHeight) player.name = "Player" scene.view : insertar (jugador) final Invocar el setupPlayer funcionar en crearScene.
escena de la función: createScene (evento) grupo local = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () end
setupLivesImages los setupLivesImages La función configura seis imágenes de vida y las coloca en la parte superior izquierda de la pantalla. Luego insertamos estas imágenes en el vidasImágenes mesa, para que podamos hacer referencia a ellos más tarde. Por último, nos aseguramos de que solo las tres primeras imágenes sean visibles.
función setupLivesImages () para i = 1, 6 do local tempLifeImage = display.newImage ("life.png", 40 * i - 20, 10) table.insert (livesImages, tempLifeImage) scene.view: insert (tempLifeImage) if i> 3) luego tempLifeImage.isVisible = false; fin extremo finlos setupLivesImages La función también se invoca en el crearScene función.
escena de la función: createScene (evento) grupo local = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () end
setupDPad los setupDPad La función configura los cuatro rectángulos. rectUp, rectDown, rectLeft, y rectRight. Los colocamos con cuidado sobre la imagen del dpad, los configuramos para que no sean visibles y nos aseguramos de que isHitTestable la propiedad se establece en cierto.
Si configura los objetos de visualización para que no sean visibles, inicialmente no podrá interactuar con ellos. Sin embargo, al configurar el isHitTestable propiedad a cierto, este comportamiento está anulado.
función setupDPad () rectUp = display.newRect (34, display.contentHeight-70, 23, 23) rectUp: setFillColor (1,0,0) rectUp.id = "up" rectUp.isVisible = false; rectUp.isHitTestable = true; scene.view: insert (rectUp) rectDown = display.newRect (34, display.contentHeight-23, 23,23) rectDown: setFillColor (1,0,0) rectDown.id = "down" rectDown.isVisible = false rectDown.isHitTestable = true; scene.view: insert (rectDown) rectLeft = display.newRect (10, display.contentHeight-47,23, 23) rectLeft: setFillColor (1,0,0) rectLeft.id = "left" rectLeft.isVisible = false; rectLeft.isHitTestable = true; scene.view: insertar (rectLeft) rectRight = display.newRect (58, display.contentHeight-47, 23,23) rectRight: setFillColor (1,0,0) rectRight.id = "right" rectRight.isVisible = false; rectRight.isHitTestable = true; scene.view: inserte (rectRight) final
Lo has adivinado. Esta función también se invoca en crearScene.
escena de la función: createScene (evento) grupo local = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () end
resetPlaneGrid los resetPlaneGrid función restablece el planeGrid Mesa e inserciones de once ceros. los planeGrid la tabla imita once puntos en el eje x, en los que se puede colocar un plano enemigo. Esto tendrá más sentido una vez que comencemos a generar aviones enemigos..
function resetPlaneGrid () planeGrid = para i = 1, 11 do table.insert (planeGrid, 0) end end
Invoca esta función en crearScene.
escena de la función: createScene (evento) grupo local = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () resetPlaneGrid () end
enterScene Ahora que todos los objetos de visualización están en su lugar, es hora de agregar escuchas de eventos, temporizadores, etc. Si recuerdas la parte anterior de este tutorial, la enterScene La función es un buen lugar para configurar estos. Comience insertando el siguiente fragmento de código.
escena de la función: enterScene (evento) grupo local = self.view end scene: addEventListener ("enterScene", escena) Cuando ingresamos a esta escena, necesitamos eliminar la escena anterior. Agregue el siguiente código a la enterScene función para hacer esto.
local previousScene = storyboard.getPrevious () storyboard.removeScene (previousScene)Al ingresar a una nueva escena, se puede hacer referencia a la escena anterior en la que se encontraba llamando al
obtenerAnterior sobre el guión gráfico objeto. Lo eliminamos por completo del guión gráfico llamando quitarScene sobre el guión gráfico objeto.Agregue el siguiente código debajo del código que ingresó en el paso anterior. Este fragmento de código agrega escuchas táctiles a cada uno de los rectángulos, invocando mover plano Con cada toque. Echemos un vistazo a esto mover plano funcionar en el siguiente paso.
rectUp: addEventListener ("touch", movePlane) rectDown: addEventListener ("touch", movePlane) rectLeft: addEventListener ("touch", movePlane) rectRight: addEventListener ("touch", movePlane)mover plano los mover plano La función es responsable de ajustar la velocidad de los aviones. Verificamos si la fase del evento táctil es igual a empezó, lo que significa que el jugador ha tocado pero no ha vuelto a levantar su dedo. Si esto es cierto, configuramos la velocidad y la dirección según el rectángulo que se tocó. Si la fase del evento táctil es igual a terminó, entonces sabemos que el jugador ha levantado su dedo, lo que significa que ajustamos la velocidad a 0.
función movePlane (evento) si evento.fase == "comenzó" luego si (evento.target.id == "arriba") entonces playerSpeedY = -playerMoveSpeed finaliza si (evento.target.id == "abajo") entonces playerSpeedY = playerMoveSpeed end if (event.target.id == "left") luego playerSpeedX = -playerMoveSpeed end if (event.target.id == "right") luego playerSpeedX = playerMoveSpeed end elseif event.phase == "finalizado" then playerSpeedX = 0 playerSpeedY = 0 end end
Vamos a añadir un poco de sonido a nuestro juego. Agregue el siguiente fragmento de código a la enterScene función. Carga y juega planesound.mp3. Estableciendo el bucles propiedad a -1, el sonido se repetirá por siempre. Si desea obtener más información sobre el audio en Corona, asegúrese de consultar la documentación..
local planeSound = audio.loadStream ("planesound.mp3") planeSoundChannel = audio.play (planeSound, loops = -1)enterFrame EventoTambién agregamos un detector de eventos de tiempo de ejecución llamado enterFrame que llamará elgameLoop función. La frecuencia con la que el enterFrame el evento ocurre depende del valor de cuadros por segundo (FPS) que configuró en config.lua. En nuestro ejemplo, se llamará 30 veces por segundo. Añadir este detector de eventos en el enterScene función.
Tiempo de ejecución: addEventListener ("enterFrame", gameLoop)gameLoop En el gameLoop En la función, actualizamos las posiciones de sprite y realizamos cualquier otra lógica que deba tener lugar en cada fotograma. Si estás interesado en leer más sobre el tema de los bucles de juego, Michael James Williams escribió un excelente artículo que explica cómo funciona un bucle de juego común. Agregue el siguiente fragmento de código.
función gameLoop () movePlayer () final
mover jugador los mover jugador La función gestiona el movimiento del plano del jugador. Movemos el avión de acuerdo a la playerSpeedX y PlayerSpeedY valores, que o bien serán 7 o 0, Dependiendo de si el jugador está tocando el DPad o no. Vuelve a consultar el mover plano funciona si esto no está claro. También realizamos algunas comprobaciones de límites, asegurándonos de que el avión no pueda moverse fuera de la pantalla.
function movePlayer () player.x = player.x + playerSpeedX player.y = player.y + playerSpeedY si (player.x < 0) then player.x = 0 end if(player.x > display.contentWidth - playerWidth) luego player.x = display.contentWidth - playerWidth end if (player.y < 0) then player.y = 0 end if(player.y > display.contentHeight - 70- playerHeight) luego player.y = display.contentHeight - 70 - playerHeight end end
Si prueba el juego ahora, debería poder navegar el avión alrededor de la pantalla usando la DPad.
Esto cierra el segundo tutorial de esta serie. En la próxima entrega de esta serie, continuaremos con el juego. Gracias por leer y nos vemos allí..
