Share
En esta serie de tutoriales, aprenderemos a crear un juego de disparos en el espacio al igual que el juego clásico Defender del espacio. Sigue leyendo!
En esta versión de Space Defender, el jugador tendrá que defender su espacio disparando a los enemigos. Cada vez que el jugador destruye exitosamente a un enemigo, ganará puntos y cuando el jugador haya alcanzado 20 o 40 puntos, su arma recibirá una mejora. Para mezclar las cosas, este juego enviará paquetes de bonos que valen 5 puntos. Para ver el juego en acción, mira el video corto de arriba. Ahora que sabemos más sobre el juego que estamos creando, comencemos!
Este juego de disparos en el espacio se construirá utilizando el SDK de Corona. Estas son algunas de las cosas que aprenderá en esta serie de tutoriales:
Para utilizar este tutorial, deberá tener instalado el Corona SDK en su computadora. Si no tiene el SDK, diríjase a www.CoronaLabs.com para crear una cuenta gratuita y descargar el software gratuito..
Nuestro primer paso para configurar nuestro juego es el archivo build.settings. Este archivo maneja todas las propiedades de tiempo de compilación de nuestra aplicación, como la orientación y las opciones adicionales para las plataformas Android e iOS. Cree un nuevo archivo llamado build.settings y copie la siguiente configuración en su archivo.
settings = orientación = default = "landscapeRight", support = "landscapeRight", "landscapeLeft", iphone = plist = UIStatusBarHidden = false, UIAppFonts = "Kemco Pixel.ttf",,
Una de las mejores cosas de Corona SDK es que el idioma se auto-documenta y la mayoría de las configuraciones en este archivo deben ser fáciles de entender. Sin embargo, vamos a caminar rápidamente a través de estos ajustes.
Una vez que hayamos establecido nuestras configuraciones de tiempo de compilación, vamos a configurar nuestras configuraciones de tiempo de ejecución en nuestro archivo config.lua. En este archivo, configuraremos el ancho y la altura de nuestro juego, el tipo de escalado del contenido y los cuadros por segundo. Cree un nuevo archivo llamado config.lua y copie la siguiente configuración.
application = content = width = 320, height = 480, scale = "letterBox", fps = 30,,
Similar a nuestro archivo build.settings, config.lua se auto-documenta a excepción de la opción de escala. La opción de escala es una función que utiliza Corona SDK para adaptar su aplicación a diferentes tamaños de pantalla. En el caso de la opción letterBox, le estamos diciendo a Corona que muestre todo nuestro contenido en la pantalla mientras mantenemos la relación de aspecto. Cuando el contenido no cubre toda la pantalla, la aplicación mostrará barras negras en las áreas sin contenido (como en ver películas en modo de pantalla panorámica).
Antes de continuar construyendo nuestra aplicación, necesitamos hablar de gráficos. Hay muchas formas diferentes de obtener gráficos para su juego: contratar un diseñador gráfico, contratar a un amigo, dibujarlos usted mismo o incluso comprar gráficos de valores de sitios web como https://graphicriver.net/.
Sin embargo, si tiene un presupuesto reducido, es posible que no pueda comprar estos gráficos o que no tenga tiempo para crearlos. En este tipo de situaciones, puede utilizar gráficos que se han publicado bajo la licencia de Creative Commons. La licencia creative commons le permite utilizar gráficos que están disponibles de forma gratuita bajo ciertas restricciones, como proporcionar atribución al autor.
Para nuestro juego, usaremos ilustraciones bajo la licencia de Creative Commons de OpenGameArt.org. El autor que creó estos gráficos es VividRealtiy y aquí hay un enlace directo a su trabajo: http://opengameart.org/content/evolutius-gfx-pack. Antes de continuar, asegúrese de descargar el conjunto de gráficos o descargar el archivo para este tutorial.
Si bien hay una gran cantidad de sitios web con gráficos bajo esta licencia, aquí hay tres sitios que visito a menudo:
¡Ahora que tenemos nuestros gráficos, podemos continuar haciendo nuestro juego! Para continuar nuestro juego, tenemos que crear un nuevo archivo llamado main.lua. Este archivo será el punto de inicio de nuestro juego y, de hecho, es el punto de inicio de cada juego hecho con Corona. Una vez creado el archivo, ábralo en su editor favorito e ingrese el siguiente código:
-- ocultar la barra de estado display.setStatusBar (display.HiddenStatusBar)
Esta línea de código ocultará la barra de estado en iOS. A continuación, usaremos la función de guión gráfico de Corona para administrar nuestro juego. La función del guión gráfico trata diferentes partes del juego como escenas para facilitar a los desarrolladores la administración del código. Por ejemplo, nuestro juego tiene tres escenas: main.lua, el menú y la pantalla del juego. Una vez que se configura cada escena, Corona proporciona una manera muy fácil de moverse entre escenas. Dado que esto puede ser un gran obstáculo para los desarrolladores que comienzan con el Corona SDK, aquí hay una representación gráfica del diseño de nuestro juego..
Cada cuadro azul representa una escena individual y la flecha entre cada escena muestra cómo navegaremos a través de las escenas. En pocas palabras, comenzamos en main.lua y navegaremos entre la escena 2 y la escena 3.
Implementar el Storyboard en nuestra aplicación es simple: ¡solo necesita el módulo y listo! Coloque el siguiente código en main.lua para incorporar esta gran característica.
-- incluir el módulo "storyboard" de Corona storyboard local = require "storyboard"
A continuación, querremos pasar a la segunda escena y usaremos la variable del guión gráfico para lograr esto..
Accentsconagua
-- cargar menú pantalla storyboard.gotoScene ("menu") Ahora que hemos completado nuestro archivo main.lua, abordemos el menú principal!
El menú principal de nuestro juego mostrará una imagen de fondo, el título del juego y un botón Jugar ahora. Para comenzar, crea un nuevo archivo llamado menu.lua y el guión gráfico de Corona que se muestra.
guión gráfico local = requiere ("guión gráfico") escena local = guión gráfico.newScene () Ahora agregaremos la función de widget de Corona para crear nuestro botón. La función de widget nos permite crear fácilmente elementos de GUI comunes, como botones en nuestro juego.
local widget = require "widget"
Después de la biblioteca de widgets, vamos a predefinir algunas variables para nuestro juego. Estas variables almacenarán el ancho de la pantalla, la altura de la pantalla y la mitad de las coordenadas de la pantalla.
pantalla localW, pantallaH, halfW, halfY = display.contentWidth, display.contentHeight, display.contentWidth * 0.5, display.contentHeight * 0.5
Después de nuestras variables, crearemos nuestra primera función llamada escena: createScene (). Esta función se llama cuando la escena se carga por primera vez o si la escena se ha eliminado previamente. En términos generales, esta función se usa para agregar todos los elementos gráficos a la pantalla.
escena de la función: createScene (evento) local group = self.view end
Una característica importante de un guión gráfico es la forma en que maneja los objetos. Todos los objetos de visualización que usamos dentro de esta escena se colocarán con el grupo de variables. Al colocar nuestros objetos de visualización dentro de este grupo, le informamos a Corona que estos objetos pertenecen a esta escena y cuando es necesario eliminar la escena, estos objetos también se eliminarán..
Dentro de la escena de la función: createScene (), usaremos el gráfico BKG.png (este gráfico proviene de opengameart.org) como fondo para nuestro juego. Una vez que se agrega, centraremos el gráfico en la pantalla y lo insertaremos en la variable de grupo.
-- muestra una imagen de fondo local bg = display.newImageRect ("images / BKG.png", 480, 320) bg.x = halfW bg.y = halfY group: insert (bg) A continuación, colocamos el título de nuestro juego en la pantalla utilizando la fuente personalizada que especificamos en nuestro archivo build.settings.
-- coloque un título de juego en la pantalla local gametitle = display.newText ("Space Defender", 0,0, "Kemco Pixel", 40) gametitle.x = halfW gametitle.y = 100 group: insert (gametitle) Nuestra última adición a nuestra primera función es el botón de reproducción. El botón de reproducción usará la función de widget de Corona y un detector de eventos llamado onPlayBtnRelease. El detector de eventos se activará cuando se toque el botón de reproducción. Agregue el siguiente código dentro de escena: createScene () función.
función local onPlayBtnRelease () storyboard.gotoScene ("game", "slideLeft") end playBtn = widget.newButton label = "Play Now", labelColor = default = 255, defaultFile = "images / Button.png" , overFile = "images / Button_Purple.png", width = 150, height = 60, left = 180, top = 150, font = "Kemco Pixel", fontSize = 18, onRelease = onPlayBtnRelease - función de detector de eventos grupo: insertar (PlayBtn) Después de nuestra función de crear escena, agregaremos una función de entrar en escena. Esta función se activará después de la función crear escena y eliminará la escena anterior.
escena de la función: enterScene (evento) grupo local = self.view if storyboard.getPrevious () ~ = nil then storyboard.removeScene (storyboard.getPrevious ()) end end
La última función que agregaremos es la función destroyScene. Esta función se activará cuando la escena se elimine o destruya. En nuestro caso, estamos usando widgets y como los widgets deben eliminarse manualmente, eliminamos el widget dentro de nuestra función de destruir escena.
escena de la función: destroyScene (evento) grupo local = self.view si playBtn luego playBtn: removeSelf () - los widgets deben eliminarse manualmente playBtn = nil end end
Finalmente, agregamos detectores de eventos para llamar a las diferentes funciones que configuramos: enterScene, destroyScene y createScene.
scene: addEventListener ("createScene", scene) scene: addEventListener ("enterScene", scene) scene: addEventListener ("destroyScene", scene) ¡Y eso es todo por la Parte 1! Hemos aprendido cómo configurar nuestro proyecto, cómo implementar la función de guión gráfico de Corona, cómo iniciar nuestra aplicación y cómo crear un sistema de menús. Lee la Parte 2 de esta serie ahora!
