Corona SDK Crear un juego de Whack-a-Mole - Configuración de la aplicación

En esta serie de tutoriales, aprenderás cómo crear tu propia versión del clásico juego Whack-a-Mole. Sin embargo, en lugar de usar lunares, nuestras desafortunadas criaturas elegidas serán los gusanos. 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á tocar los gusanos en la pantalla y obtener puntos.


Paso 2: Dispositivo objetivo

Lo primero que debemos 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 estas características:

  • iPad: 1024x768px, 132 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • Iphone 4: 960x640px, 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:

  • Google Nexus One: 480x800px, 254 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • HTC Evo: 480x800px, 217 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, esto implica múltiples formas, botones, mapas de bits y más. El gráfico del gusano utilizado en este tutorial se descargó desde aquí bajo un Creative Commons Licencia.

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


Paso 4: Exportar Gráficos

Dependiendo del dispositivo que haya seleccionado, es posible que deba exportar los gráficos en la ppi recomendada, puede hacerlo en su 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, puede encontrar el sonido utilizado en este ejemplo en Soungle.com usando la palabra clave golpear.


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. Funciones. Conductor. (Función principal). Métodos de clase (otras funciones).

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: MovieClip Library

 local movieclip = require ('movieclip')

Se usarán gráficos animados en este juego, la biblioteca de clips de Corona hará esto mucho más fácil.


Paso 11: Antecedentes

Se utiliza un degradado marrón 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 ('gameBg.png')

Paso 12: Vista del título

Esta es la Vista del título, será la primera pantalla interactiva que aparecerá en nuestro juego, estas variables almacenan sus componentes.

 título local juego localBtn créditos localesBtn título localVer

Paso 13: Créditos

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

 créditos localesvista

Paso 14: Puntuación

El valor de puntuación será manejado por la siguiente variable.

 puntaje local

Paso 15: Gusanos

Las siguientes variables se utilizan para almacenar los gráficos de los gusanos y el último gusano que ha sido visible.

 local w1 local w2 local w3 local w4 local w5 local w6 local w7 local w8 gusanos locales local lastWorm = 

Paso 16: Revisión de Código

Aquí está el código completo escrito en este tutorial junto con comentarios para ayudarlo a identificar cada parte:

 -- Whack A Worm Game - Desarrollado por Carlos Yanez - Ocultar barra de estado display.setStatusBar (display.HiddenStatusBar) - Import MovieClip local movieclip = require ('movieclip') - Graphics - [Background] local bg = display.newImage ('gameBg.png') - [Vista de título] título localBg juego localBtn créditos localesBtn título localVer - [Créditos] crédito localView - [Puntuación] puntaje local - [Gusanos] local w1 local w2 local w3 local w4 local w5 local w6 local w7 local w8 gusanos locales local lastWorm = 

La próxima vez…

En esta parte de la serie, ha aprendido la interfaz y la configuración básica de la aplicación. Manténgase sintonizado para la segunda parte, donde manejaremos la lógica de la aplicación, el comportamiento de los botones y más. Nos vemos la proxima vez!