Share
En esta serie de tutoriales, te mostraré cómo crear un juego de rompecabezas Match Shapes con el SDK de Corona. Aprenderás cómo arrastrar objetos a través de la pantalla y detectar cuándo chocan sin usar el motor de física. El objetivo del juego es hacer coincidir las formas en el escenario con su contenedor correspondiente. Sigue leyendo!
Usando gráficos prefabricados codificaremos un juego entretenido usando Lua y las API del SDK de Corona.
El jugador podrá arrastrar las formas en el escenario para que coincidan con su contenedor. Puedes modificar los parámetros en el código para personalizar el juego..
El primer paso 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, pero el código que se presenta aquí también debería aplicarse al desarrollo de Android con Corona SDK..
Usaremos una interfaz simple y amigable 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 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.
Usaremos 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",
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.
Estructuraremos el código como si fuera una clase. Si conoce ActionScript o Java, debería encontrar la estructura familiar.
Clases necesarias Variables y constantes Funciones de declarar contructor (Función principal) Métodos de clase (otras funciones) Llamada Función principal
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.
Se utiliza un gráfico simple como fondo para la interfaz de la aplicación, la siguiente línea de código la almacena.
Accentsconagua
-- Gráficos - [Fondo] local bg = display.newImage ('bg.png') 
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] título localBg local playBtn créditos localesBtn título localVer
Esta vista mostrará los créditos y derechos de autor del juego, esta variable se utilizará para almacenarlo.
-- [CreditsView] créditos localesView
Esta imagen se colocará encima de nuestro fondo anterior. Este será el fondo del juego..
-- Fondo de juego local gameBg
La siguiente variable almacenará las instrucciones gráficas..
-- Instrucciones locales ins
Las siguientes imágenes indican dónde deben colocarse las formas..
-- Formas Placeholder local sHolder local pHolder local tHolder
El jugador arrastrará las formas para colocarlas en el lugar correcto..
-- Formas del cuadrado local del pentágono local del triángulo local.
Esta es la alerta que se muestra cuando ganas el juego. Completará el nivel y terminará el juego..
-- Alerta local alertaVer
Usaremos efectos de sonido para mejorar la sensación del juego. Los sonidos utilizados en esta aplicación fueron generados por AS3SFXR..
-- Suena local correctSnd = audio.loadSound ('correct.caf') local winSnd = audio.loadSound ('win.mp3') Estas son las variables que usaremos. Lee los comentarios en el código para saber más sobre ellos..
-- Variables locales correctas = 0 - Cuenta las formas correctas colocadas
Declara todas las funciones como local al principio.
-- Funciones locales principales = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local hitTestObjects = local dragShape = local alert =
A continuación crearemos la función que inicializará la lógica del juego:
Función principal () - código ... fin
Ahora colocamos el TitleView en el escenario y llamamos a una función que agregará el grifo oyentes a los botones.
función Main () titleBg = display.newImage ('titleBg.png', 17, 35) playBtn = display.newImage ('playBtn.png', 138, 240) creditsBtn = display.newImage ('creditsBtn.png', 122, 295) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end 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 este tutorial, manejaremos la creación de niveles, la detección de colisiones y los pasos finales a seguir antes de la publicación, como la prueba de la aplicación, la creación de una pantalla de inicio, la adición de un icono y, finalmente, la creación de la aplicación. Leer la entrega final!
