Share
En este tutorial de dos partes, usaremos Corona SDK para crear un atractivo reproductor de música. Sigue leyendo!
Usando gráficos prefabricados, codificaremos un juego entretenido usando Lua y Corona SDK.
El usuario podrá reproducir y controlar archivos de audio predefinidos, así como ver información sobre ellos.
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 de aspecto agradable y oscuro, 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.
Elija algunas canciones de su biblioteca de música y colóquelas en la carpeta de su proyecto. Aprenderemos cómo jugarlos en los próximos pasos..
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.
Se agrega una imagen marrón oscura simple como fondo para la interfaz de la aplicación.
-- Gráficos - [Fondo] local bg
La barra de información contendrá la carátula del álbum, el nombre de la canción y el artista. Se colocará en el centro del escenario..
-- [Barra de información] barra de información local progreso local barra progreso local
Se crea una variable para almacenar la imagen de la carátula del álbum, esta imagen debe estar en la carpeta del proyecto. Más sobre esto en el último paso..
-- [Marcador de imagen] local imageMarker local cdCover
El nombre de la canción y el artista son almacenados por las siguientes variables:
-- [Texto de la barra de información] título localText local byText local artistText
Esta barra muestra los botones de control, así como la barra de progreso y la duración de la canción.
-- [Barra de botones Bg] barra de botones local - [Botones] local playBtn local stopBtn local prevBtn local nextBtn - [texto de la barra de botones] local actual local total
Probablemente, XML sea la mejor manera de manejar la información de la canción, pero desafortunadamente en este punto no hay una API XML nativa en Corona. Si bien aún puede usar algunas bibliotecas de Lua como LuaXML, será más rápido crear una Tabla para contenido breve como se muestra en las siguientes líneas:
-- URL, nombre, artista, arte local song1Info = 'song1.m4a', 'Here Without You', '3 Doors Down', 's1.png' local song2Info = 'song2.m4a', 'Kriptonite', ' 3 Doors Down ',' s2.png ' local songsInfo = song1Info, song2Info local song1 = audio.loadStream (song1Info [1]) local song2 = audio.loadStream (song2Info [1]) local songs = song1, song2
Como puede ver en el código anterior, las tablas se utilizan para almacenar la información de las canciones, que luego es utilizada por el audio.loadStream () método para crear un objeto de sonido de audio.
Aquí está el código completo escrito en este tutorial junto con comentarios para ayudarlo a identificar cada parte:
-- Reproductor de audio - Desarrollado por Carlos Yanez - Ocultar barra de estado display.setStatusBar (display.HiddenStatusBar) - Gráficos - [Fondo] local bg - [Info Bar] local infoBar local progressBar local progress - [Image Marker] local imageMarker local cdCover - [Texto de la barra de información] local titleText local byText local artistText - [Button Bar Bg] local buttonBar - [Buttons] local playBtn local stopBtn local prevBtn local nextBtn - [Button Bar Text] local actual local total - - [Canciones] - URL, nombre, artista, arte local song1Info = 'song1.m4a', 'Here Without You', '3 Doors Down', 's1.png' local song2Info = 'song2.m4a' , 'Kriptonite', '3 Doors Down', 's2.png' local songsInfo = song1Info, song2Info local song1 = audio.loadStream (song1Info [1]) local song2 = audio.loadStream (song2Info [1]) local canciones = canción1, canción2
En esta parte de la serie, ha aprendido la interfaz y la configuración básica de la aplicación. Manténgase sintonizado para la segunda parte, donde manejaremos la lógica de la aplicación, el comportamiento de los botones y más. Nos vemos la proxima vez!
Accentsconagua