Share
El Corona SDK facilita el desarrollo de juegos para iPhone, iPad y Android. Corona utiliza el lenguaje de programación Lua para crear aplicaciones multiplataforma. En este tutorial, exploraremos cómo crear un fondo de desplazamiento con Corona SDK.
El Corona SDK hace que sea muy fácil crear efectos dinámicos con muy pocas líneas de código. Usando el Corona SDK, crearemos un fondo de desplazamiento 2D con gráficos que creamos en Photoshop. Este tutorial no cubrirá el diseño de un dispositivo en particular. En su lugar, el fondo de desplazamiento que creamos se puede utilizar para las plataformas iPhone, iPad o Android..
Usando Photoshop, usaremos la herramienta de forma personalizada para crear estrellas para nuestro fondo. Si bien teóricamente puedes usar cualquier forma para el fondo, este tutorial te mostrará cómo crear un fondo de "noche estrellada".
Con Photoshop abierto, cree un nuevo documento de 45x45 píxeles.
Seleccione la herramienta Forma personalizada y seleccione la estrella de 5 puntos como su forma personalizada. Si no puede encontrar la estrella de 5 puntos, es posible que deba adjuntar la lista con la lista de formas..
Después de seleccionar la estrella de 5 puntos, asegúrese de que el color de primer plano sea blanco y dibuje una estrella en una nueva capa.
Ahora que hemos dibujado una estrella, use la herramienta Guardar para Web y Dispositivos para guardar la estrella en 3 tamaños diferentes:
Star1.png 45x45 píxeles
Star2.png 30x30 pixeles
Star3.png 15x15 pixeles
Con nuestros gráficos, podemos comenzar a crear el fondo de desplazamiento. Comencemos por abrir su editor de Lua preferido y crear un nuevo documento llamado main.lua.
Nuestro primer paso es ocultar la barra de estado. La barra de estado es una barra en la parte superior de la pantalla que brinda información al usuario, como la potencia de la señal o el nivel de la batería..
display.setStatusBar (display.HiddenStatusBar);
Ahora configuraremos algunas variables para ser utilizadas a lo largo de nuestro programa..
_W = display.contentWidth; --Vuelve el ancho de la pantalla _H = display.contentHeight; --Vuelve la altura de la pantalla local starTable = - Configurar la tabla de estrellas
Después de que hayamos inicializado algunas variables globales, vamos a insertar objetos estrella en la tabla de estrellas. En esta tabla, identificamos la trayectoria de la imagen de las estrellas y la velocidad de movimiento de cada estrella. Luego insertamos la estrella en starTable.
La velocidad de movimiento se calcula en milisegundos y determinará qué tan rápido le llevará a la estrella moverse desde la parte inferior de la pantalla hasta la parte superior de la pantalla. Las estrellas más grandes se moverán ligeramente más rápido que las estrellas más pequeñas para dar una ilusión de profundidad al fondo.
function initStar () local star1 = star1.imgpath = "star1.png"; - Configure la ruta de la imagen para Star star1.movementSpeed = 10000; - Determina la velocidad de movimiento de la estrella en milisegundos table.insert (starTable, star1); --Inserte Star en starTable local star2 = star2.imgpath = "star2.png"; star2.movementSpeed = 12000; table.insert (starTable, star2); local star3 = star3.imgpath = "star3.png"; star3.movementSpeed = 14000; table.insert (starTable, star3); fin
La función getRandomStar devuelve un objeto estrella aleatorio de starTable. Una vez que la función obtiene la estrella, establecemos la ruta de la imagen, el nombre de la estrella y qué tan rápido se moverá la estrella. Aquí es cómo se ve la función completa.
function getRandomStar () local temp = starTable [math.random (1, #starTable)] local randomStar = display.newImage (temp.imgpath) physics.addBody (randomStar, isSensor = true) randomStar.myName = "star" randomStar .movementSpeed = temp.movementSpeed; randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360) starMove = transition.to (randomStar, time = randomStar.movementSpeed, y = -45, onComplete = función (self) self.parent: remove (self); self = nil; end) end
La primera línea obtiene una estrella aleatoria de la tabla de estrellas y la almacena en la variable local randomStar.
local temp = starTable [math.random (1, #starTable)]
Después de recuperar una estrella aleatoria, estableceremos la ruta de la imagen de la estrella..
local randomStar = display.newImage (temp.imgpath)
Ahora, vamos a establecer el nombre del objeto estrella a? Estrella? y la velocidad de movimiento se establecerá de acuerdo con la velocidad de la estrella aleatoria que extrajimos de la tabla de estrellas.
randomStar.myName = "star" randomStar.movementSpeed = temp.movementSpeed; - en milisegundos
El punto de inicio de la estrella será una posición X aleatoria en la parte inferior de la pantalla. La estrella también iniciará la pantalla para una transición más suave al área visible de la pantalla. También rotamos aleatoriamente cada estrella para agregar varianza al fondo.
randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360)
Una vez que se haya configurado la estrella, podemos usar el método Transition.to () para mover la estrella hacia la parte superior de la pantalla. El objeto estrella se eliminará de la memoria cuando haya alcanzado su punto de destino..
starMove = transition.to (randomStar, time = randomStar.movementSpeed, y = -45, onComplete = function (self) self.parent: remove (self); self = nil; end)
Esta función configura tres temporizadores que llamarán a la función getRandomStar para generar el objeto estrella y comenzar a mover la estrella hacia la parte superior de la pantalla.
El primer parámetro en timer.performWithDelay es el retardo, que determina cuántas veces se llamará el temporizador. El segundo parámetro es la función a la que se llamará y el último parámetro es la cantidad de veces que se llamará al temporizador. Un valor de? 0? le dice al temporizador que haga un ciclo para siempre.
function startGame () starTimer1 = timer.performWithDlay (1700, getRandomStar, 0) starTimer2 = timer.performWithDelay (2300, getRandomStar, 0) starTimer3 = timer.performWithDelay (2700, getRandomStar, 0) end
Finalmente, podemos ejecutar nuestra aplicación. El siguiente código llama a las funciones que hemos creado a lo largo del tutorial para comenzar a crear las estrellas, moverlas hacia la parte superior de la pantalla y eliminarlas cuando hayan alcanzado la barra de sensores..
initStar () startGame ()
Puede usar un fondo de desplazamiento 2D en una variedad de juegos y utilizar un fondo de desplazamiento es una manera fácil de hacer que los juegos sean más dinámicos. Intenta cambiar las estrellas por nubes, hojas o cualquier otra cosa que puedas imaginar.!
Gracias por leer!
Accentsconagua