Crea un juego de combate de aviones en Corona Interface

Lo que vas a crear

Introducción

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.

1. Nuevo proyecto

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.

2. Construir. Configuraciones

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.

3. Config.lua

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..

4. Main.lua

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.

5. Ocultar barra de estado

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)

6. Establecer puntos de anclaje predeterminados

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.

7. Generador Aleatorio De Semillas

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 ()) 

8. Requerir Storyboard

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"

9. Cargando la pantalla de inicio

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.

10. Pantalla de inicio

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.

11. Variables locales

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..

12. Eventos de Storyboard

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., crearSceneenterScene, y exitScene.

13. Crear escena

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..

14. entrar en escena

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.

15. Escena de salida

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.

16. Comenzar el juego

los empezar juego La función es simple. Tiene el storyboard cargado el nivel de juego escena.

function startGame () storyboard.gotoScene ("gamelevel") end

17. Añadiendo oyentes a la escena

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)

18. Regresa la escena

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

19. Añadiendo la escena de GameLevel

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..

Conclusión

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í..