Share
In questo tutorial in due parti, utilizzeremo il Corona SDK per creare un lettore musicale attraente. Continuare a leggere!
Usando la grafica premade codificheremo un gioco divertente usando Lua e il Corona SDK
L'utente sarà in grado di riprodurre e controllare i file audio predefiniti e di vedere le informazioni su di essi.
La prima cosa che dobbiamo fare è selezionare la piattaforma in cui vogliamo far funzionare la nostra app, in questo modo potremo scegliere la dimensione per le immagini che useremo.
La piattaforma iOS ha queste caratteristiche:
Perché Android è una piattaforma aperta, ci sono molti diversi dispositivi e risoluzioni. Alcune delle caratteristiche dello schermo più comuni sono:
In questo tutorial ci concentreremo sulla piattaforma iOS con il design grafico, in particolare lo sviluppo per la distribuzione su un iPhone / iPod touch, ma il codice presentato qui dovrebbe applicarsi anche allo sviluppo Android con il Corona SDK.
Verrà visualizzata un'interfaccia dall'aspetto scuro, che include più forme, pulsanti, bitmap e altro ancora.
Le risorse grafiche dell'interfaccia necessarie per questo tutorial sono disponibili nel download allegato.
A seconda del dispositivo selezionato, potrebbe essere necessario esportare la grafica nel PPI consigliato, è possibile farlo nell'editor di immagini preferito.
Ho usato il Regola dimensioni? funzione nell'app Anteprima su Mac OS X.
Ricordarsi di assegnare alle immagini un nome descrittivo e salvarle nella cartella del progetto.
Scegli alcuni brani dalla tua libreria musicale e inseriscili nella cartella del tuo progetto. Impareremo come suonarli nei prossimi passi.
Verrà utilizzato un file esterno per rendere l'applicazione disponibile a schermo intero su tutti i dispositivi
config.lua file. Questo file mostra le dimensioni originali dello schermo e il metodo utilizzato per ridimensionare il contenuto nel caso in cui l'app venga eseguita con una risoluzione dello schermo diversa.
application = content = width = 320, height = 480, scale = "letterbox",
Scriviamo l'applicazione!
Apri il tuo editor Lua preferito (qualsiasi editor di testo funzionerà, ma non avrai l'evidenziazione della sintassi) e preparati a scrivere la tua fantastica app. Ricordarsi di salvare il file come main.lua nella cartella del tuo progetto.
Struttureremo il nostro codice come se fosse una classe. Se conosci ActionScript o Java, dovresti trovare la struttura familiare.
Necesary Classes Variable and Constants Declare Funzione contructor (funzione principale) metodi di classe (altre funzioni) chiamata Main function
display.setStatusBar (display.HiddenStatusBar)
Questo codice nasconde la barra di stato. La barra di stato è la barra in cima allo schermo del dispositivo che mostra l'ora, il segnale e altri indicatori.
Viene aggiunta una semplice immagine marrone scuro come sfondo per l'interfaccia dell'applicazione.
-- Grafica - [Sfondo] locale bg
La barra delle informazioni conterrà la copertina dell'album, il nome del brano e l'artista. Sarà posizionato al centro del palco.
-- [Barra informazioni] informazioni localiBar progresso localeBar progresso locale
Viene creata una variabile per memorizzare l'immagine artistica dell'album, questa immagine deve essere nella cartella del progetto. Maggiori informazioni su questo nell'ultimo passaggio.
-- [Image Marker] local imageMarker local cdCover
Il nome del brano e l'artista sono memorizzati dalle seguenti variabili:
-- [Testo barra informazioni] title localeText locale byText local artistText
Questa barra mostra i pulsanti di controllo, nonché la barra di avanzamento e la durata della canzone.
-- [Button Bar Bg] local buttonBar - [Buttons] local playBtn local stopBtn local prevBtn local nextBtn - [Button Bar Text] locale attuale locale totale
XML sarà probabilmente il modo migliore per gestire le informazioni sulla canzone, ma sfortunatamente a questo punto non c'è un'API XML nativa in Corona. Mentre è ancora possibile utilizzare alcune librerie Lua come LuaXML, sarà più veloce creare una tabella per i contenuti brevi come mostrato nelle righe seguenti:
-- URL, nome, artista, canzone locale Art1Info = '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]) canzoni locali = song1, song2
Come puoi vedere nel codice qui sopra, le tabelle vengono utilizzate per memorizzare le informazioni sui brani, che vengono in seguito utilizzati da audio.loadStream () metodo per creare un oggetto audio streming.
Ecco il codice completo scritto in questo tutorial insieme ai commenti per aiutarti a identificare ogni parte:
-- Audio Player - Sviluppato da Carlos Yanez - Nascondi barra di stato display.setStatusBar (display.HiddenStatusBar) - Grafica - [Sfondo] local bg - [Barra informazioni] informazioni localiBar progresso localeBar progresso locale - [Image Marker] local imageMarker local cdCover - [Info Bar Text] local titleText locale byText local artistText - [Button Bar Bg] local buttonBar - [Buttons] local playBtn local stopBtn local prevBtn local nextBtn - [Button Bar Text] locale attuale locale total - - [Songs] - URL, nome, artista, canzone locale Art1Info = '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
In questa parte della serie hai imparato l'interfaccia e la configurazione di base dell'applicazione. Restate sintonizzati per la seconda parte in cui gestiremo la logica dell'applicazione, il comportamento dei pulsanti e altro ancora. Arrivederci alla prossima!
Accentsconagua