Crea un juego inspirado en Lunar Lander - Creación de interfaz

En esta serie de tutoriales, aprenderás cómo crear un juego inspirado en Lunar Lander. El objetivo del juego es agarrar las estrellas en la pantalla y luego aterrizar de forma segura en el lugar indicado. Sigue leyendo!


Paso 1: Descripción general de la aplicación

Usando gráficos prefabricados codificaremos un juego entretenido usando Lua y las API del SDK de Corona.

El jugador podrá golpear un disco arrastrando la paleta en la pantalla. Puedes modificar los parámetros en el código para personalizar el juego..


Paso 2: Dispositivo objetivo

Lo primero que tenemos que hacer es seleccionar la plataforma en la que queremos ejecutar nuestra aplicación. De esta manera podremos elegir el tamaño de las imágenes que usaremos..

La plataforma iOS tiene las siguientes características:

  • iPad 1/2: 1024x768px, 132 ppi
  • Ipad 3: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone 4 / iPod Touch: 960x640px, 326 ppi
  • iPhone 5 / iPod Touch: 1136x640, 326 ppi

Debido a que Android es una plataforma abierta, hay muchos dispositivos y resoluciones diferentes. Algunas de las características de pantalla más comunes son:

  • Asus Nexus 7 Tablet: 800x1280px, 216 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

En este tutorial, nos centraremos en la plataforma iOS con el diseño gráfico, específicamente el desarrollo para la distribución a un iPhone / iPod touch, pero el código que se presenta aquí también debe aplicarse al desarrollo de Android con Corona SDK..


Paso 3: Interfaz

Se utilizará una interfaz sencilla y amigable. Incluirá múltiples formas, botones, mapas de bits y más..

Los recursos gráficos de la interfaz necesarios para este tutorial se pueden encontrar en la descarga adjunta..

Fuente Freedom (gratis para uso comercial). Gráficos de luna y cohete de openclipart.org.


Paso 4: Exportar Gráficos

Dependiendo del dispositivo que haya seleccionado, es posible que deba exportar los gráficos en el PPI recomendado. Puedes hacerlo en tu editor de imágenes favorito..

Usé el Ajustar el tamaño ... Funciona en la aplicación Preview en Mac OS X.

Recuerde dar a las imágenes un nombre descriptivo y guardarlas en la carpeta de su proyecto.


Paso 5: Sonido

Usaremos efectos de sonido para mejorar la sensación del juego. Los sonidos utilizados en esta aplicación fueron generados por AS3SFXR..


Paso 6: Configuración de la aplicación

Se utilizará un archivo externo para hacer que la aplicación pase a pantalla completa en todos los dispositivos, el config.lua expediente. Este archivo muestra el tamaño de pantalla original y el método utilizado para escalar ese contenido en caso de que la aplicación se ejecute en una resolución de pantalla diferente.

 application = content = width = 320, height = 480, scale = "letterbox",

Paso 7: Main.lua

Vamos a escribir la aplicacion!

Abra su editor de Lua preferido (cualquier editor de texto funcionará, pero no tendrá resaltado de sintaxis) y prepárese para escribir su increíble aplicación. Recuerde guardar el archivo como main.lua en la carpeta de tu proyecto.


Paso 8: Estructura del código

Estructuraremos nuestro código como si fuera una clase. Si conoce ActionScript o Java, debería encontrar la estructura familiar.

 Clases necesarias Variables y constantes Declare Funciones constructor (función principal) métodos de clase (otras funciones) llamada función principal

Paso 9: Ocultar barra de estado

 display.setStatusBar (display.HiddenStatusBar)

Este código oculta la barra de estado. La barra de estado es la barra en la parte superior de la pantalla del dispositivo que muestra la hora, la señal y otros indicadores.


Paso 10: Importar Física

Usaremos la biblioteca de física para manejar las colisiones. Use este código para importar la biblioteca de física:

 física local = requiere ('física') physics.start ()

Paso 11: Multitouch

También usaremos la biblioteca multitáctil para manejar múltiples dedos en la pantalla. Usa este código para importarlo:

 -- Sistema multitouch.activate ('multitouch')

Paso 12: Antecedentes

Se utiliza un gráfico simple como fondo para la interfaz de la aplicación, la siguiente línea de código la almacena.

 -- Gráficos - [Fondo] local bg = display.newImage ('bg.png')

Paso 13: Vista del título

Esta es la vista de título, será la primera pantalla interactiva que aparecerá en nuestro juego. Estas variables almacenan sus componentes:

 -- [Vista de título] título localBg local playBtn créditos localesBtn título localVer

Paso 14: Vista de créditos

Esta vista mostrará los créditos y derechos de autor del juego, esta variable se utilizará para almacenarlo.

 -- [CreditsView] créditos localesView

Paso 15: Game Pad

Esta imagen se colocará encima de nuestro fondo anterior. Las siguientes líneas almacenan los gráficos para el pad en pantalla.

 -- [Fondo del juego] local gameBg - [Pad] local arriba local izquierda local derecha

Paso 16: Lunas

Estos son los gráficos de lunas, referenciados en las siguientes variables. La luna más grande será utilizada como el punto de aterrizaje..

 -- [Lunas] local m1 local m2 local m3 local bigM

Paso 17: Estrellas

Los artículos a recoger. Cuatro artículos deben ser recogidos antes de aterrizar.

 -- Estrellas locales s1 locales s2 locales s3 locales s4

Paso 18: Cohete

Este es el gráfico que controlará el jugador, usando el teclado en la pantalla.

 -- Cohete (jugador) cohete local

Paso 19: Punto de aterrizaje

El indicador de punto de aterrizaje se activa cuando se recogen las cuatro estrellas.


Paso 20: Variables

Estas son las variables que usaremos. Lea los comentarios en el código para saber más sobre cómo encajarán.

 -- Variables flecha local estrellas locales = 0 - estrellas recopiladas dirección local - dirección actual local hitMoon = falso - utilizado para la detección de colisiones en la actualización local starHit local hitStar = falso - utilizado para la detección de colisiones en la actualización local hitGoal = falso - usado para la detección de colisiones en la actualización local completa

Paso 21: Declarar funciones

Declara todas las funciones como local al principio.

 -- Funciones locales principales =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local movePlayer =  local update =  local onCollision = 

Paso 22: Constructor

A continuación, crearemos la función que inicializará toda la lógica del juego:

 Función principal () - código ... fin

Paso 23: Añadir vista de título

Ahora colocamos el TitleView en el escenario y llamamos a una función que agregará el grifo oyentes a los botones.

 función Main () titleBg = display.newImage ('titleBg.png', display.contentCenterX - 100.5, 20.5) creditsBtn = display.newImage ('creditsBtn.png', 14, display.contentHeight - 57) titleView = display.newGroup ( titleBg, creditsBtn) startButtonListeners ('add') end

La próxima vez…

En esta parte de la serie, has aprendido la interfaz y la configuración básica del juego. En la siguiente y última parte de la serie, manejaremos las acciones del control del juego, la detección de colisiones y los pasos finales a seguir antes del lanzamiento, como la prueba de aplicaciones, la creación de una pantalla de inicio, la adición de un icono y, finalmente, la construcción de la aplicación Estén atentos para la parte final!