Share
En esta serie de tutoriales de dos partes, aprenderás cómo crear un juego de Pinball. El objetivo del juego es golpear la bola usando las paletas para aumentar la puntuación. Sigue leyendo!
Usando gráficos prefabricados codificaremos un juego entretenido usando Lua y las API del SDK de Corona.
El jugador podrá golpear una pelota con los botones en el escenario. Puedes modificar los parámetros en el código para personalizar el juego..
Lo primero que tenemos que hacer es seleccionar la plataforma en la que queremos ejecutar nuestra aplicación, de esa manera podremos elegir el tamaño para las imágenes que usamos.
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 utilizará una interfaz sencilla y amigable, esto implica 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.
Se utilizará 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 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.
Usaremos la biblioteca de física para manejar las colisiones. Usa este código para importarlo:
Accentsconagua
física local = requiere ('física') physics.start () 
Se utiliza un gráfico simple como fondo para la interfaz de la aplicación, la siguiente línea de código la almacena.
-- Gráficos - [Fondo] local bg = display.newImage ('bg.png') 
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 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
Las paredes donde la pelota podrá rebotar..
Ya que usaremos la física para crear exactamente los mismos polígonos, dividiremos cada lado en cuatro partes. Las partes están marcadas con líneas rojas..
-- [Muros] local l1 local l2 local l3 local l4 local r1 local r2 local r3 local r4
Este es el gráfico de la pelota, referenciado en la siguiente variable..
-- Bola local
Añadiremos algunos obstáculos en el juego, estos serán ellos..
-- [Hit Lines] hitLine1 local hitLine2 local
Estas bolas son el objetivo del pinball, golpearlas aumentará nuestra puntuación..
-- [Hit Balls] local hitBall1 local hitBall2 local hitBall3
Paleta izquierda y derecha. Solía golpear la pelota
-- [Paletas] pLeft local pRight local
Estos botones moverán las paletas haciendo rebotar la pelota..
-- [Botones de la paleta] local lBtn local rBtn
Se agrega una variable de puntuación para mostrarla más tarde en la pantalla..
-- Puntuación local
Las siguientes líneas almacenan una referencia para los archivos de sonido..
local bell = audio.loadSound ('bell.caf') local buzz = audio.loadSound ('buzz.caf') Esta es la variable que usaremos, lea los comentarios en el código para saber más sobre esto..
-- Variables locales lastY - usadas para recordar el título de la posición bmp
Declara todas las funciones como local al principio.
-- Funciones locales principales = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local movePaddle = local onCollision = local update =
A continuación, crearemos la función que inicializará toda 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 ('title.png', display.contentCenterX - 97, 96) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 30, display.contentCenterY + 10) creditsBtn = display.newImage ('creditsBtn.png', display.contentCenterX - 44.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end 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 el botón Acerca de, 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) lastY = titleBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 50)) transition.to (creditsView, time = 300, y = (display.contentHeight * 0.5) + 35, 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 + 25, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) transition.to (titleBg, time = 300, y = lastY); fin 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 la serie, manejaremos el movimiento de la paleta, la detección de colisiones y los pasos finales que se deben tomar antes de lanzar la prueba, como la aplicación, crear una pantalla de inicio, agregar un icono y, finalmente, crear la aplicación. Estén atentos para la parte final!
