Corona SDK Crea un juego de sopa de letras

En esta serie de tutoriales, aprenderás cómo crear un juego de sopa de letras minimalista. El objetivo de este juego es permitir al jugador elegir palabras de un conjunto de letras mezcladas. Sigue leyendo!


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

Usando gráficos creados previamente, codificaremos un juego entretenido utilizando Lua y las API del SDK de Corona..

El jugador podrá dibujar una línea en el escenario para resaltar una palabra. 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 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.

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: 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 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árese para escribir su increíble aplicación. Recuerde guardar el archivo como main.lua en la carpeta de tu proyecto.


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

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


Paso 9: Fondo del juego

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] - [Fondo del juego] local gameBg = display.newImage ('bg.png')

Paso 10: 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] local titleBg título local local startBtn local aboutBtn - [TitleView Group] título localView

Paso 11: Acerca de la vista

Esta vista mostrará los créditos, la versión y los derechos de autor del juego. Esta variable se utilizará para almacenarla:

 -- [CreditsView] local sobre

Paso 12: Lista de palabras

La lista de palabras a buscar y las ya encontradas serán almacenadas por las siguientes líneas.

 -- [Campo de texto Lista de palabras] palabras localesLista local actualWords

Paso 13: Vista del juego

La vista del juego está compuesta por los TextFields que almacenan las letras individuales, la línea que se usa para resaltar las palabras y la alerta que se usa cuando se completa el juego. Agrega las siguientes líneas a tu código para manejar estos elementos.

 -- [Letter Texfields Container] local tfs = display.newGroup () - [Línea de selección] línea local local = display.newGroup () - [Alert] local alert

Paso 14: Variables

Estas son las variables que usaremos. Lea los comentarios en el código para saber más sobre ellos. Algunos de sus nombres son autoexplicativos, por lo que no habrá comentarios allí..

 -- Lista de palabras para encontrar L1 local = 'IPHONE', 'ANDROID', 'CORONA', 'MÓVIL', 'JUEGOS' - Tabla multidimensional, se usa como un 'mapa' para mostrar las palabras en el Etapa local L1 Mapa = 0, 0, 'I', 0, 0, 0, 'G', 0, 0, 0, 0, 0, 'P', 0, 0, 0, 'A', 0, 0, 0, 0, 0, 'H', 0, 0, 0, 'M', 0, 0, 0, 0, 'M', 'O', 'B', 'I ',' L ',' E ', 0, 0, 0, 0, 0,' N ', 0, 0, 0,' S ', 0, 0, 0, 0, 0,' E ', 0, 0, 0, 0, 0, 0, 0, ' C ',' O ',' R ',' O ',' N ',' A ', 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 'A', 'N', 'D', 'R', 'O', 'I', 'D', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 alfabeto local = 'A', 'B', 'C', 'D', 'E', ' F ',' G ',' H ',' I ',' J ',' K ',' L ',' M ',' N ',' O ',' P ',' Q ',' R ' , 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' local correcto = 0 - Número de palabras encontradas

Paso 15: Revisión de Código

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

 -- Juego de sopa de letras - Desarrollado por Carlos Yanez - Ocultar barra de estado display.setStatusBar (display.HiddenStatusBar) - Gráficos - [Fondo] - [Fondo del juego] local gameBg = display.newImage ('bg.png') - - [Vista de título] título localBg título local local startBtn acerca deBtn - [Grupo de vista de título] título localVista - [Vista de credito] local sobre - [Campo de texto de la lista de palabras] palabras locales localWords actual - [Contenedor de letra Texfields] local tfs = mostrar .newGroup () - [Línea de selección] líneas locales líneas locales = display.newGroup () - [Alerta] alerta local - Variables locales L1 = 'IPHONE', 'ANDROID', 'CORONA', 'MOBILE', 'GAMES' local L1Map = 0, 0, 'I', 0, 0, 0, 'G', 0, 0, 0, 0, 0, 'P', 0, 0, 0 ' A ', 0, 0, 0, 0, 0,' H ', 0, 0, 0,' M ', 0, 0, 0, 0,' M ',' O ',' B ' , 'I', 'L', 'E', 0, 0, 0, 0, 0, 'N', 0, 0, 0, 'S', 0, 0, 0, 0, 0 , 'E', 0, 0, 0, 0, 0, 0, 0, 'C', 'O', 'R', 'O', 'N', 'A', 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 'A', 'N', 'D', 'R', 'O', 'I', 'D', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 alfabeto local = 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', ' J ',' K ',' L ',' M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ' , 'W', 'X', 'Y', 'Z' local correcto = 0

La próxima vez…

En esta parte de la serie, has aprendido la interfaz y la configuración básica del juego. 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!