Cree un juego Brick Breaker con Corona SDK configuración de la aplicación

En esta serie de tutoriales, construiremos un juego Brick Breaker desde cero utilizando el SDK de Corona. El objetivo de este juego es controlar una paleta tipo pong para golpear una bola contra una pila de ladrillos hasta que todos se rompan..


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

El propósito de este juego es usar una paleta para golpear una bola en una pila de ladrillos hasta que todos los ladrillos se rompan sin permitir que la pelota pierda la paleta y salga volando de la pantalla. Si tiene éxito, el usuario avanzará a un nuevo nivel, de lo contrario el juego terminará.


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 mostrará una interfaz vistosa y colorida, que 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..


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: Main.lua

Es hora de escribir nuestra aplicación!

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


Paso 6: 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 7: 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 8: Carga el motor de física

Haremos uso del potente motor Box2D integrado en Corona, use este código para incluirlo en su aplicación:

 --Motor de Física física local = requiere 'física' physics.start () physics.setGravity (0, 0) - Establezca la gravedad en 0 ya que no la necesitaremos

Paso 9: Variables del juego y constantes

Estas son las variables y constantes básicas que usaremos, lea los comentarios en el código para obtener más información sobre ellas..

 local BRICK_W = 41 - ancho de ladrillo local BRICK_H = 21 - altura de ladrillo local OFFSET = 23 --un desplazamiento usado para centrar los ladrillos local W_LEN = 8 - la longitud de los niveles, solo se deben crear 8 ladrillos horizontales en el escenario SCORE_CONST local = 100 - la cantidad que se agrega a la puntuación cuando se golpea un ladrillo puntuación local = 0 - almacena la puntuación actual local bricks = display.newGroup () - mantiene todos los ladrillos de nivel local xSpeed ​​= 5 local ySpeed ​​= -5 local xDir = 1 - x dirección local yDir = 1 local gameEvent = "- almacena eventos del juego (ganar, perder, terminado) local currentLevel = 1

Paso 10: Pantalla de menú

Esta es la pantalla principal de la aplicación, será la primera vista interactiva que aparecerá en nuestro juego. Estas variables almacenan el fondo y los componentes de la pantalla de menú..

 local background = display.newImage ('bg.png') menu localScreen local mScreen local startB local aboutB

Presta especial atención a la línea con display.newImage ('bg.png'). Este es el responsable de mostrar la imagen de fondo inicial en la pantalla..


Paso 11: Acerca de la pantalla

La pantalla Acerca de mostrará los créditos, el año y los derechos de autor del juego. Esta variable se utilizará para almacenar una referencia a la vista:

 local sobre pantalla

Paso 12: Pantalla de juego

Esta es la pantalla del juego, se creará cuando el comienzo se pulsa el botón.

Variables para almacenar la pantalla del juego:

 local paleta local ladrillo local bola

Paso 13: Puntuación y nivel de texto

Variables locales que almacenan los campos de texto de puntuación / nivel y los valores numéricos de puntuación / nivel:

 puntuación localTexto puntuación localNum nivel localText nivel localNum

Paso 14: Pantalla de alerta

Esta pantalla aparecerá cuando el juego haya sido decidido. El mensaje le dirá al jugador que gana o pierde.

La pantalla de alerta se almacena por las siguientes variables:

 local alertScreen local alertBg local box local localTF local msgTF

Paso 15: Niveles

Todos nuestros niveles se almacenarán en tablas (la versión Lua de una matriz).

Esta es esencialmente una tabla que contiene una tabla. Podría declarar esto en una sola línea, pero, con el formato correcto, el espaciado le permite ver la forma en que tomarán los niveles:

 niveles locales =  niveles [1] = 0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0, 0, 0,0,1,1,0,0,0, 0,0,0,1,1,0,0,0, 0,1,1,1,1,1,1,0 , 0,1,1,1,1,1,1,0, 0,0,0,1,1,0,0,0, 0,0,0,1,1,0, 0,0, 0,0,0,0,0,0,0,0, niveles [2] = 0,0,0,0,0,0,0,0, 0 , 0,0,1,1,0,0,0, 0,0,1,0,0,1,0,0, 0,0,0,0,0,1,0,0 , 0,0,0,0,1,0,0,0, 0,0,0,1,0,0,0,0, 0,0,1,0,0,0 , 0,0, 0,0,1,1,1,1,0,0, niveles [3] = 0,0,0,0,0,0,0,0,  0,0,0,0,0,0,0,0, 0,0,0,1,1,0,0,0, 0,1,0,0,0,0,1, 0, 0,1,1,1,1,1,1,0, 0,1,0,1,1,0,1,0, 0,0,0,0,0, 0,0,0, 0,0,0,1,1,0,0,0, 0,0,0,0,0,0,0,0, niveles [4] =  0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0, 1,1,1,1,1,1,1 , 1, 1,0,0,0,0,0,0,1, 1,0,0,0,0,0,0,1, 1,0,0,0,0 , 0,0,1, 1,0,0,0,0,0,0,1,1, 1,0,0,0,0,0,0,1, 1,1,1 , 1,1,1,1,1,

En las tablas multidimensionales de arriba, 1's están representando el espacio en la etapa donde se colocará un ladrillo, y la 0's son solo espacios vacíos. Más adelante, los números serán leídos por una función que colocará un ladrillo en la vista del juego. Hemos agregado cuatro arriba, pero puedes agregar tantos como quieras!


La próxima vez?

Ya has visto la interfaz y la configuración básica de nuestro juego. Manténgase atento a la segunda parte de esta serie, donde agregaremos interactividad a la interfaz y detección de colisiones entre los gráficos de nuestros juegos..