Crear un juego de memoria basado en sonido - Creación de interfaz

En esta serie de tutoriales, te mostraré cómo crear un juego de memoria basado en sonido con el Corona SDK. Aprenderá sobre la carga y reproducción de sonidos, así como el almacenamiento de información en Lua Tables. El objetivo del juego es reproducir el sonido de nivel tocando los cuadrados de color. Sigue leyendo!


También disponible en esta serie:

  1. Crear un juego de memoria basado en sonido - Creación de interfaz
  2. Crear un juego de memoria basado en sonido - Game Logic

1. Descripción de la aplicación

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

El jugador podrá usar los botones en pantalla para reproducir la secuencia de sonido actual, puede modificar los parámetros en el código para personalizar el juego.


2. Dispositivo de destino

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 1/2 / Mini: 1024x768px, 132 ppi
  • Retina iPad: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • Retina iPhone / iPod: 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..


3. interfaz

Se utilizará una interfaz sencilla y amigable, esto implica 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..


4. Exportar Gráficos

Dependiendo del dispositivo que haya seleccionado, es posible que deba exportar los gráficos en el PPI recomendado, 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.


5. 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",

6. 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árate para escribir tu aplicación impresionante. Recuerde guardar el archivo como main.lua en la carpeta de tu proyecto.


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

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


9. 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')

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

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

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

12. Botones Cuadrados

Los botones utilizados para reproducir el sonido..

 -- Cuadrados de color local r =  local g =  local ye =  local b = 

13. Mensaje de instrucciones

Aparecerá un mensaje de instrucciones al inicio del juego, cuando el mensaje se descarte, se reproducirá la secuencia de sonido..

 -- Instrucciones locales ins

14. Botón de verificación

Este botón comparará la entrada del usuario con el nivel actual para determinar si la secuencia es correcta o no.

 -- Botón de cheque cheque local

15. alerta

Esta es la alerta que se mostrará cuando gane el juego. Completará el nivel y terminará el juego..

 -- Alerta local alertaVer

16. Sonidos

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

 -- Sonidos rs = audio.loadSound ('1.mp3') gs = audio.loadSound ('2.mp3') ye.s = audio.loadSound ('3.mp3') bs = audio.loadSound ('4.mp3' )

17. Variables

Estas son las variables que usaremos, lea los comentarios en el código para saber más sobre ellas..

 -- Niveles, modifique estas tablas para cambiar o agregar más niveles, cada letra representa un botón / sonido, es decir, r = rojo, ye = amarillo y así sucesivamente local l1 = r, ye, g, b local l2 = ye, r, b, g, b, r, g, ye - Variables local lastY local currentLevel = l1 local gameTimer local times = 1 local userInput =  - almacena los botones pulsados ​​local correct = 0

18. Declarar funciones

Declara todas las funciones como local al principio.

 -- Funciones locales principales =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local playLevel =  local onTap =  local checkInput =  local alert =  

19. constructor

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

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

20. 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 () title = display.newImage ('title.png', 73, 53) playBtn = display.newImage ('playBtn.png', 140, 245) creditsBtn = display.newImage ('creditsBtn.png', 124, 305) titleView = display.newGroup (title, playBtn, 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 la creación de niveles, la comparación de tablas y los pasos finales que se deben seguir antes de lanzar las pruebas de la aplicación, crear una pantalla de inicio, agregar un icono y, finalmente, crear la aplicación. Lee la parte final ahora!