Crear un juego de rompecabezas basado en la física - Creación de interfaz

En esta serie de tutoriales, te mostraré cómo crear un juego de rompecabezas basado en la física en Corona SDK. Aprenderás sobre la manipulación física y los controles táctiles. El objetivo del juego es meter la bola en el contenedor tocando las casillas correctas. Sigue leyendo!


También disponible en esta serie:

  1. Crear un juego de rompecabezas basado en la física - Creación de interfaz
  2. Crear un juego de rompecabezas basado en la física - Agregar interacción

1. Descripción de la aplicación

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

El jugador podrá usar la pantalla táctil del dispositivo para eliminar las cajas del escenario. Puedes modificar los parámetros en el código para personalizar el juego..


2. Dispositivo de destino

Primero vamos a seleccionar la plataforma en la que queremos ejecutar nuestra aplicación. Esto nos permitirá elegir el tamaño de las imágenes que usaremos..

La plataforma iOS tiene las siguientes 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

Dado que Android es una plataforma abierta, hay muchos dispositivos y resoluciones diferentes. Estas son algunas de las características de pantalla más comunes..

  • 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 su distribución a un iPhone / iPod touch. 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 involucra 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. Puedes hacerlo en tu editor de imágenes favorito..

Usé el Ajustar el tamaño ... función en el Avance aplicación 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 que la aplicación se muestre en pantalla completa en todos los dispositivos. Este es 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 y prepárese para escribir su increíble aplicación. 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 un Clase. Si usted sabe ActionScript o Java, Encontrarás 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. Importar Física

Usaremos la biblioteca de física para manejar las colisiones. Usa el código de abajo para importarlo.

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

10. Antecedentes

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

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

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

12. Créditos de vista

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

 -- [CreditsView] créditos localesView

13. cajas

Las cajas crean el nivel. Hay tres tamaños en esta aplicación.


14. Mensaje de instrucciones

Aparecerá un mensaje de instrucciones al comienzo del juego. Se interpone entre dos segundos.

 -- Instrucciones locales ins

15. bola

Este es el gráfico de la pelota. El objetivo del juego es poner este objeto en el cuadro de gol..

 -- Bola local bola

16. Cuadro de gol

Este código almacena el gráfico de la casilla objetivo..

 -- Goal Box local gBox

17. alerta

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

 -- Alerta local alertaVer

18. los sonidos

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

 -- Suena local win = audio.loadSound ('win.caf')

19. Variables

Estas son las variables que usaremos. Lee los comentarios en el código para aprender más sobre ellos..

 -- Variables locales lvlImg - almacena el título de la imagen del nivel actual

20. Declarar funciones

Declara todas las funciones como local al principio.

 -- Funciones locales principales =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local addBox =  local removeBox =  local onCollision =  local alert = 

21. constructor

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

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

22. Añadir vista de título

Ahora colocamos el TitleView en la etapa y llamar a una función que agregará la grifo oyentes a los botones.

 función Main () titleBg = display.newImage ('titleBg.png', 84, 12) playBtn = display.newImage ('playBtn.png', 220, 150) creditsBtn = display.newImage ('creditsBtn.png', 204, 202) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') final

La próxima vez…


En esta parte de la serie, aprendimos sobre 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 detección de colisiones y los pasos finales antes del lanzamiento. Pasaremos por las pruebas de aplicaciones, creando una pantalla de inicio, agregando un ícono y, por último, construyendo la aplicación. Estén atentos para la parte final!