Share
En este tutorial, te mostraré cómo crear un juego de rebote con Corona SDK. Aprenderá más sobre la API de dibujo, los controles táctiles y los números aleatorios. El objetivo de este juego es usar una paleta para evitar que las bolas toquen el suelo. Para aprender más, sigue leyendo.!
Usaremos gráficos prefabricados para codificar un juego emocionante con las API de Lua y Corona SDK.
Al finalizar, el jugador usará la pantalla táctil del dispositivo para controlar una paleta. Los parámetros en el código se pueden modificar para personalizar el juego..
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 las siguientes características:
Debido a que Android es una plataforma abierta, hay muchos dispositivos y resoluciones diferentes. Algunas de las características comunes de la pantalla son:
En este tutorial nos centraremos en la plataforma iOS con el diseño gráfico, específicamente para desarrollar para su distribución a un iPhone / iPod touch, pero el código que se presenta aquí se aplica al desarrollo de Android con Corona SDK también..
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..
Dependiendo del dispositivo que haya seleccionado, es posible que deba exportar los gráficos en el PPI recomendado. Puedes hacerlo con tu 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 un archivo externo para que la aplicación se convierta en 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 nuestro código como si fuera una clase. Si conoces ActionScript o Java, encontrarás 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)
El código anterior 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 vector simple como fondo para la interfaz de la aplicación. La siguiente línea de código lo crea..
-- Gráficos - [Fondo] local bg = display.newRect (0, 0, display.contentWidth, display.contentHeight) bg: setFillColor (52, 46, 45)
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 local 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 almacenarla:
-- [CreditsView] créditos localesView
Aparecerá un mensaje de instrucción al comienzo del juego y se interpondrá después de 2 segundos. Puedes cambiar la hora más adelante en el código..
-- Instrucciones locales ins
Aquí están los círculos o bolas. El objetivo del juego es evitar que toquen la parte inferior de la pantalla..
-- Círculos de color círculos locales = display.newGroup ()
Esta es la alerta que se mostrará cuando una pelota toque el suelo. Mostrará el marcador y terminará el juego..
-- Alerta local alertaVer
Usaremos efectos de sonido para mejorar la sensación del juego. Los sonidos utilizados en este juego fueron creados en as3sfxr.
Accentsconagua
-- Suena local bounceSnd = audio.loadSound ('bounce.wav') local loseSnd = audio.loadSound ('lose.wav') Estas son las variables que usaremos. Puedes leer los comentarios en el código para aprender más sobre ellos..
-- Variables local circleTimer: agrega un nuevo círculo cada vez que se llama colores locales = 71, 241, 255, 255, 204, 0, 245, 94, 91, 0, 255, 204, 250, 140, 254, - Colores posibles para los círculos (R, G, B)
A continuación, declare todas las funciones como local al principio.
-- Funciones locales principales = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local moveBar = local addCircle = local onCollision = local alert =
Durante este paso crearemos la función que inicializa la lógica del juego:
Función principal () - código ... fin
Ahora vamos a colocar el TitleView en el escenario y llamar a una función que añade el grifo oyentes a los botones.
función Main () title = display.newImage ('title.png') playBtn = display.newImage ('playBtn.png', 130, 248) creditsBtn = display.newImage ('creditsBtn.png', 125, 316) titleView = display.newGroup (title, playBtn, creditsBtn) startButtonListeners ('add') final Esta función agrega los oyentes necesarios a la TitleView botones:
function startButtonListeners (acción) if (acción == 'agregar') luego playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener 'tap', showCredits) end end end La pantalla de créditos se muestra cuando el usuario toca acerca de botón, un grifo El oyente se agrega a la vista de créditos para eliminarlo..
función showCredits: toque (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) transition.to (creditsView, time = 300, y = display. contentHeight - (creditsView.height - 40), onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end Cuando se toca la pantalla de créditos, se interpone fuera del escenario y se elimina.
función hideCredits: toque (e) transition.to (creditsView, time = 300, y = display.contentHeight + 40, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) fin Cuando el Jugar se pulsa el botón, el TitleView se interpone y se retira, revelando el GameView. Hay muchas partes involucradas con esta vista, así que las dividiremos en los siguientes pasos.
función showGameView: toque (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Las siguientes líneas agregan el mensaje de instrucciones:
ocal ins = display.newImage ('ins.png', 160, 355) transition.from (ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transition.to ( ins, time = 200, alpha = 0.1, onComplete = function () display.remove (ins) ins = nil end) end) fin Este paso crea la paleta y la coloca en el escenario. Un nombre se puede agregar más tarde para facilitar el acceso.
-- Añadir barra de barra = display.newRoundedRect (70, 340, 160, 10, 3) bar.name = 'bar'
Ahora crearemos paredes alrededor de la pantalla para evitar que las bolas salgan del escenario..
-- Paredes izquierda = display.newLine (0, 240, 0, 720) left.isVisible = false right = display.newLine (320, 240, 320, 720) right.isVisible = false bottom = display.newLine (160, 480, 480 , 480) bottom.isVisible = false
Aquí hay una puntuación Campo de texto Para crear en la parte superior derecha de la etapa:
-- Puntuación Score = display.newText ('0', 300, 0, 'Futura', 15) A continuación tenemos que añadir la física a nuestros objetos. Aquí usaremos el Filtrar propiedad que evita que ciertos objetos choquen entre sí. Esto evita que nuestros círculos colisionen mientras mantenemos colisiones entre las paredes y la paleta. Puedes encontrar una explicación simple de su comportamiento en el sitio Corona..
-- Física physics.addBody (barra, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (izquierda, 'static', filter = categoryBits = 4, maskBits = 7) física .addBody (derecha, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (bottom, 'static', filter = categoryBits = 4, maskBits = 7) gameListeners (' agregar ') fin La siguiente función agrega los oyentes necesarios para iniciar la lógica del juego:
function gameListeners (action) if (action == 'add') luego bg: addEventListener ('touch', moveBar) circleTimer = timer.performWithDelay (2000, addCircle, 5) barra: addEventListener ('collision', onCollision) bottom: addEventListener ('colisión', alerta) else bg: removeEventListener ('touch', moveBar) timer.cancel (circleTimer) circleTimer = nil bar: removeEventListener ('collision', onCollision) parte inferior: removeEventListener ('collision', alert) end end Al tocar el fondo, se llama a la siguiente función que maneja el movimiento de la paleta. Sigue el dedo y permanece encima de él..
función moveBar (e) if (e.phase == 'moved') luego bar.x = e.x bar.y = e.y - 40 final - Mantenga la barra 1/3 desde la parte superior if (bar.y < 160) then bar.y = 160 end end
los circleTimer llama a este código. Crea un círculo o bola en la parte superior de la pantalla (que luego se mueve hacia abajo por la gravedad) y le da un tamaño y color aleatorios seleccionados de nuestra colores Mesa. Los valores de color se almacenan para cambiar la paleta también. Se agrega un pequeño empujón en una dirección aleatoria calculada por el dir y r variables.
función addCircle () local r = math.floor (math.random () * 12) + 13 local c = display.newCircle (0, 0, r) cx = math.floor (math.random () * (display.contentWidth - (r * 2))) cy = - (r * 2) - Color de círculo color local = math.floor (math.random () * 4) + 1 c.c1 = colors [color] [1] c. c2 = colores [color] [2] c.c3 = colores [color] [3] c: setFillColor (c.c1, c.c2, c.c3) physics.addBody (c, 'dynamic', radius = r , rebote = 0.95, filtro = categoryBits = 2, maskBits = 4) círculos: insertar (c) --Mover horizontalmente dir. local si (r < 18) then dir = -1 else dir = 1 end c:setLinearVelocity((r*2) * dir, 0 ) end
Esta función se ejecuta cuando la paleta choca con una pelota. Reproduce un sonido, aumenta la puntuación y cambia el color de la paleta..
función onCollision (e) audio.play (bounceSnd) barra: setFillColor (e.other.c1, e.other.c2, e.other.c3) score.text = tostring (tonumber (score.text) + 50) score: setTextColor (e.other.c1, e.other.c2, e.other.c3) score.x = 300 final
La función de alerta crea una vista de alerta, la anima y finaliza el juego..
función alert () audio.play (loseSnd) gameListeners ('rmv') alertView = display.newImage ('alert.png', 90, 200) transition.from (alertView, time = 200, alpha = 0.1) puntuación localTF = display.newText (score.text, 145, 253, 'Futura', 17) scoreTF: setTextColor (255, 255, 255) - Espere 100 ms para detener la función física timer.performWithDelay (100) ) final, 1) final Para comenzar el juego, el Principal La función necesita ser llamada. Con el código anterior en su lugar, lo haremos aquí:
Principal()
los Default.png El archivo es una imagen que se muestra cuando la aplicación se inicia mientras iOS carga los datos básicos para mostrarlos en la pantalla principal. Agregue esta imagen a la carpeta de origen de su proyecto, luego se agregará automáticamente por el complemento de Corona.
Con los gráficos que creó anteriormente, ahora puede crear un ícono atractivo. El tamaño del icono para el icono de iPhone sin retina es 57x57px, pero la versión de retina es 114x114px. Tenga en cuenta que la tienda iTunes requiere una versión de 512x512px. Sugiero crear primero la versión 512x512 y luego reducir la escala para los otros tamaños..
No es necesario que tenga las esquinas redondeadas o el resplandor transparente, iTunes y el iPhone lo hacen por usted..
Es hora de la prueba final. Abra el simulador de Corona, busque la carpeta de su proyecto y luego haga clic en Abierto. Si todo funciona como se espera, estás listo para el último paso!
En el simulador de corona ir a Archivo> Construir y seleccione su dispositivo de destino. Rellene los datos requeridos y haga clic Construir. Espere unos segundos y su aplicación está lista para la prueba del dispositivo y / o el envío para su distribución!
En este tutorial, hemos aprendido cómo dibujar API, temporizadores, números aleatorios y otras habilidades que pueden ser increíblemente útiles en una gran cantidad de juegos..
Experimenta con el resultado final e intenta crear tu propia versión personalizada del juego.!
Espero que hayas disfrutado esta serie de tutoriales y te haya resultado útil. Gracias por leer!
