En esta serie de tutoriales, usaremos Corona SDK para crear un juego inspirado en Frenzic. Este tutorial se centrará en la configuración de la aplicación y la estructura central en 15 pasos. Sigue leyendo!
Usando gráficos prefabricados codificaremos un juego entretenido usando js y las API de Corona SDK.
El usuario podrá jugar contra el tiempo para completar los contenedores cuadrados tocando en ellos. Llenar un recipiente con un solo color da más puntos.!
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:
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:
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..
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..
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.
Utilizaremos los efectos de sonido para mejorar la sensación del juego, puede encontrar los sonidos utilizados en este ejemplo en Soungle.com utilizando las palabras clave campana y zumbido.
Antes de escribir cualquier código, definiremos algunas opciones creando un build.settings expediente. Este archivo contiene parámetros que se aplicarán a la compilación final de su programa, así como la fuente que queremos incrustar en nuestra aplicación..
settings = iphone = plist = UIStatusBarHidden = true, UIPrerenderedIcon = true, UIAppFonts = "Orbitron.ttf",,
Se utilizará otro archivo externo para escalar la aplicación a pantalla completa en todos los dispositivos, el config.js 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",
Vamos a escribir la aplicacion!
Abra su editor js 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.js en la carpeta de tu proyecto.
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).
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.
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 TitleView.
-- Gráficos - [Fondo] local bg - [Vista de título] título local local startB créditos localesB - [TitleView Group] título localView
Las siguientes variables almacenan las vidas y los textos de puntuación, así como su valor.
-- [Score & Lives] vidas localesText vidas localesTF vidas locales puntuación localText local puntuaciónTF puntuación local
Estos gráficos tendrán un grifo escucha para mover los cuadrados a la posición predefinida, rellénalos para ganar puntos!
Otra variable se declara en este código, un grupo que almacenará todos los gráficos que se muestran en la pantalla del juego..
local arriba derecho local derecho local izquierdo local titular local - Game View Group local gameView
Tres bloques estarán disponibles en el juego, llena un contenedor con un solo color de bloque para ganar puntos de bonificación. Los bloques se agregarán al juego al azar y se almacenarán en una tabla que crearemos más adelante..
Esta pantalla 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:
-- [CreditsView] créditos locales
Estas son las variables que usaremos, lea los comentarios en el código para saber más sobre ellos, algunos de sus nombres se explican por sí mismos, por lo que no habrá comentarios allí..
local blockColor = 'orange', 'green', 'purple' --Utilizado para generar un bloque aleatorio local blocks = - Almacena todas las posiciones locales de los bloques = 5, 35 - Posiciones de los bloques disponibles con relación a ubicación actual del contenedorXPosición: se utiliza para ubicar el bloque en el estado actual de los contenedoresYPosition local eventTarget - Almacena el último contenedor tocado local timerSource --Utilizado como un id del temporizador local vive puntuación local campana local --Bell sound local bell4 Sonido para contenedores completos. Buzz local. Sonido de bizz cuando el jugador pierde un live.
Aquí está el código completo escrito en este tutorial junto con comentarios para ayudarlo a identificar cada parte:
-- Ordenar 'Frenzic' como juego - Desarrollado por Carlos Yanez - Ocultar barra de estado display.setStatusBar (display.HiddenStatusBar) - Gráficos - [Fondo] local bg - [Vista de título] título local local startB local creditsB - [ TitleView Group] local titleView - [Score & Lives] live livesText local livesTF local lives local scoreText local scoreTF local score - [GameView] local up local right local down local left local holder - [GameView Group] local gameView - - CreditsView] local credits - Variables local blockColor = 'orange', 'green', 'purple' local blocks = local position = 5, 35 local currentXPosicion actual localYPosición local localTarget local timerPuerto local local local score local bell local bell4 local buzz
En esta parte de la serie, has aprendido la interfaz y la configuración básica del juego. Manténgase atento a la segunda parte, donde manejaremos las diferentes vistas de pantalla y comenzaremos a colocar los gráficos en el escenario para construir la interfaz. Nos vemos la proxima vez!