En esta breve serie, te mostraré cómo crear un juego de combate de aviones que recuerda al antiguo juego de arcade de 1942. En el camino, aprenderá sobre la funcionalidad del guión gráfico de Corona, los temporizadores, cómo mover un personaje y un poco de trigonometría..
Los gráficos utilizados en este tutorial fueron creados por Ari Feldman y proporcionados bajo la Licencia Pública Común, lo que significa que son de uso gratuito. Asegúrese de revisar el SpriteLib de Ari Feldman. Empecemos.
Abra el simulador de corona, haga clic en Nuevo proyecto, y configure el proyecto como se muestra a continuación. Seleccione una ubicación para guardar su proyecto y haga clic en DE ACUERDO. Esto creará una carpeta con una serie de iconos y tres archivos que son importantes para nosotros, main.lua, config.lua, y build.settings. Vamos a echar un vistazo a cada archivo en los siguientes pasos.
los build.settings El archivo es responsable de las propiedades de tiempo de compilación del proyecto. Abra este archivo, elimine su contenido y llénelo con el siguiente fragmento de código.
configuraciones = orientación = predeterminado = "retrato", admitido = "retrato",,
En build.settings, estamos configurando la orientación predeterminada y restringiendo la aplicación para que solo admita una orientación vertical. Puedes aprender que otras configuraciones puedes incluir en build.settings explorando la documentación de la corona.
los config.lua El archivo maneja la configuración de la aplicación. Como hicimos con build.settings, abra este archivo, elimine su contenido y agregue el siguiente código.
application = content = width = 768, height = 1024, scale = "letterbox", fps = 30,
Esto establece el ancho y la altura predeterminados de la pantalla, utiliza buzón para escalar las imágenes, y establece los cuadros por segundo para 30
.
Puedes aprender qué otras propiedades puedes establecer en config.lua Revisando la Documentación de la Corona..
los main.lua archivo es el archivo que la aplicación carga primero y utiliza para iniciar la aplicación. Estaremos usando main.lua para establecer algunas configuraciones predeterminadas para la aplicación y Guión gráfico Módulo para cargar la primera pantalla..
Si no está familiarizado con el módulo Storyboard de Corona, le recomiendo que lea la documentación rápidamente. En resumen, Storyboard es la solución integrada para la creación y gestión de escenas ("pantallas") en Corona. Esta biblioteca proporciona a los desarrolladores una manera fácil de crear y hacer la transición entre escenas individuales.
No queremos que la barra de estado aparezca en nuestra aplicación. Agregue el siguiente fragmento de código a main.lua para ocultar la barra de estado.
display.setStatusBar (display.HiddenStatusBar)
Para establecer el anclaje predeterminado (puntos de registro) agregue lo siguiente a main.lua.
display.setDefault ("anchorX", 0) display.setDefault ("anchorY", 0)
los anchorX
y ancla
las propiedades especifican dónde desea que esté el punto de registro de sus objetos de visualización. Tenga en cuenta que el valor va desde 0.0
a 1.0
. Por ejemplo, si desea que el punto de registro sea el centro del objeto de visualización, debe establecer ambas propiedades en 0.5
.
Nuestro juego utilizará Lua's. math.random
Función para generar números aleatorios. Para asegurarse de que los números son realmente aleatorios cada vez que se ejecuta la aplicación, debe proporcionar un valor semilla. Si no proporciona un valor semilla, la aplicación generará la misma aleatoriedad cada vez que.
Un buen valor semilla es el de Lua. os.time
Función, ya que será diferente cada vez que se ejecute la aplicación. Agregue el siguiente fragmento de código a main.lua.
math.randomseed (os.time ())
Antes de poder utilizar el módulo Storyboard, primero debemos exigirlo. Agregue lo siguiente a main.lua.
guión gráfico local = requiere "guión gráfico"
Ingrese el siguiente fragmento de código debajo de la línea en la que solicitó el módulo Storyboard.
storyboard.gotoScene ("inicio")
Esto hará que la aplicación pase a la pantalla llamada comienzo, que también es un archivo Lua, start.lua. No necesita adjuntar la extensión de archivo al llamar al gotoScene
función.
Crear un nuevo archivo Lua llamado start.lua En el directorio principal del proyecto. Este será un archivo de guión gráfico, lo que significa que debemos requerir el módulo de guión gráfico y crear una escena de guión gráfico. Agregue el siguiente fragmento de código a start.lua.
guión gráfico local = requiere ("guión gráfico") escena local = guión gráfico.newScene ()La llamada a
nuevoScene
hace start.lua parte del guión gráfico de la aplicación. Esto significa que se convierte en una pantalla dentro del juego, a la que podemos llamar métodos de guión gráfico en.Solo necesitamos una variable local, botón de inicio
, en la parte principal de start.lua. Esta variable local se utiliza para hacer referencia al botón de inicio en esta escena.
botón de inicio local
Es importante entender que las variables locales en el fragmento principal solo se llaman una vez, cuando la escena se carga por primera vez. Al navegar por el guión gráfico, por ejemplo, invocando métodos como gotoScence
, Las variables locales ya estarán inicializadas..
Es importante recordar esto si desea que las variables locales se reinicialicen cuando navegue de regreso a una escena en particular. La forma más sencilla de hacerlo es eliminar la escena del guión gráfico llamando al removeScence
método. La próxima vez que navegue a esa escena, se volverá a cargar automáticamente. Ese es el enfoque que vamos a tomar en este tutorial..
Si se ha tomado el tiempo de leer la Documentación en los guiones gráficos a los que he vinculado anteriormente, habrá notado que la documentación incluye una plantilla que contiene todos los eventos posibles del guión gráfico. Los comentarios son muy útiles ya que indican qué eventos aprovechar para inicializar activos, temporizadores, etc..
La plantilla puede parecer un poco abrumadora al principio. Sin embargo, para este tutorial, solo estamos interesados en tres eventos., crearScene
, enterScene
, y exitScene
.
Agrega lo siguiente al fragmento de start.lua.
escena de la función: createScene (evento) local group = self.view local background = display.newRect (0, 0, display.contentWidth, display.contentHeight) background: setFillColor (0, .39, .75) group: insert (background) local bigplane = display.newImage ("bigplane.png", 0,0) group: insert (bigplane) startbutton = display.newImage ("startbutton.png", 264,670) group: insert (startbutton) end
Este método se llama cuando la vista de la escena aún no existe. Aquí es donde debe inicializar los objetos de visualización y agregarlos a la escena. los grupo
la variable está apuntando a autoevaluación
, el cual es un GroupObject
para toda la escena.
Luego dibujamos un rectángulo para el fondo. Corona Monitor
objeto viene con algunos métodos de dibujo, tales como newCircle
, nueva línea
, y, como se muestra en el fragmento anterior, nuevoRecto
. Tambien invocamos setFillColor
Para darle al rectángulo un color azulado. Los parámetros que pasamos son porcentajes..
Luego insertamos el fondo
en el grupo. Es importante insertar objetos de visualización en el grupo de la vista para asegurarse de que se eliminan cuando se elimina la vista principal. Finalmente, crea el botón de inicio y agrégalo al grupo también. los monitor
objeto tiene el nueva imagen
método, que toma como parámetros el camino a la imagen y la X
y y
Valores para la posición de la imagen en pantalla..
los enterScene
El método se llama inmediatamente después de que la escena se haya movido en la pantalla. Aquí es donde puede agregar escuchas de eventos, temporizadores de inicio, cargar audio, etc. Agregue el siguiente fragmento de código debajo del código que agregó en el paso anterior.
escena de la función: enterScene (evento) startbutton: addEventListener ("tap", startGame) fin
En enterScene
, estamos agregando un detector de eventos a la botón de inicio
, que llamará el empezar juego
Funciona cuando los usuarios tocan el botón de inicio.
los exitScene
Se llama al método cuando la escena está a punto de moverse fuera de la pantalla. Aquí es donde quieres deshacer lo que sea que establezca en el enterScene
método, como eliminar escuchas de eventos, detener temporizadores, descargar audio, etc. Agregue el siguiente fragmento de código debajo del código que agregó en el paso anterior.
escena de la función: exitScene (evento) startbutton: removeEventListener ("tap", startGame) fin
Todo lo que hacemos en el exitScene
método es eliminar el detector de eventos que agregamos a la botón de inicio
.
los empezar juego
La función es simple. Tiene el storyboard cargado el nivel de juego escena.
function startGame () storyboard.gotoScene ("gamelevel") end
Habiendo agregado el crearScene
, enterScene
, y exitScene
Métodos, debemos registrar la escena para escuchar estos eventos. Ingrese el siguiente fragmento de código para hacer esto.
scene: addEventListener ("createScene", scene) scene: addEventListener ("enterScene", scene) scene: addEventListener ("exitScene", scene)
Lo último que debes asegurarte de hacer en un guión gráfico es devolver la escena, porque es un módulo..
escena de retorno
Antes de que podamos probar nuestro progreso, necesitamos agregar el nivel de juego escena. Cree un nuevo archivo Lua en el directorio principal del proyecto y asígnele un nombre gamelevel.lua. Agregue el siguiente fragmento de código al archivo que acaba de crear.
guión gráfico local = requiere ("guión gráfico") escena local = storyboard.newScene () escena devuelta
Como vimos anteriormente, primero necesitamos el módulo de guión gráfico, creamos una nueva escena y devolvemos la escena. los nivel de juego La escena es la escena en la que implementaremos la jugabilidad del juego..
Esto cierra la primera parte de esta serie. En la siguiente parte de esta serie, comenzaremos a implementar el juego del juego. Gracias por leer y te veré allí..