Share
In deze tweedelige zelfstudie gebruiken we de Corona SDK om een aantrekkelijke muziekspeler te bouwen. Lees verder!
Met behulp van vooraf ontworpen grafische afbeeldingen coderen we een vermakelijk spel met Lua en de Corona SDK
De gebruiker kan vooraf gedefinieerde audiobestanden afspelen en besturen en informatie daarover bekijken.
Het eerste wat we moeten doen is het platform selecteren waar we onze app binnen willen laten, op deze manier kunnen we de grootte kiezen voor de afbeeldingen die we zullen gebruiken.
Het iOS-platform heeft deze kenmerken:
Omdat Android een open platform is, zijn er veel verschillende apparaten en resoluties. Een paar van de meest voorkomende schermkenmerken zijn:
In deze zelfstudie concentreren we ons op het iOS-platform met het grafische ontwerp, dat specifiek wordt ontwikkeld voor distributie naar een iPhone / iPod touch, maar de hier gepresenteerde code moet ook van toepassing zijn op Android-ontwikkeling met de Corona SDK.
Een donkere, mooi ogende interface wordt weergegeven, dit omvat meerdere vormen, knoppen, bitmaps en meer.
De interface grafische hulpmiddelen die nodig zijn voor deze tutorial zijn te vinden in de bijgevoegde download.
Afhankelijk van het apparaat dat u hebt geselecteerd, moet u mogelijk de afbeeldingen in de aanbevolen PPI exporteren, u kunt dit doen in uw favoriete afbeeldingseditor.
Ik gebruikte de Pas grootte aan? functie in de Preview-app op Mac OS X.
Vergeet niet om de afbeeldingen een beschrijvende naam te geven en deze in uw projectmap op te slaan.
Kies een paar nummers uit je muziekbibliotheek en plaats deze in je projectmap. We zullen leren hoe we ze moeten spelen in de volgende stappen.
Een extern bestand zal worden gebruikt om de applicatie op verschillende apparaten op volledig scherm weer te geven, de
config.lua het dossier. Dit bestand toont de oorspronkelijke schermgrootte en de methode die wordt gebruikt om die inhoud te schalen in het geval de app wordt uitgevoerd in een andere schermresolutie.
toepassing = content = width = 320, height = 480, scale = "letterbox",
Laten we de applicatie schrijven!
Open de Lua-editor van uw voorkeur (elke teksteditor werkt, maar u hoeft geen syntax te markeren) en bereid u voor op het schrijven van uw geweldige app. Vergeet niet om het bestand op te slaan als main.lua in je projectmap.
We zullen onze code structureren alsof het een Klasse is. Als u ActionScript of Java kent, zou u de structuur vertrouwd moeten vinden.
Necesary Classes Variabelen en constanten Declare Functions contructor (Hoofdfunctie) class methods (other functions) call Hoofdfunctie
display.setStatusBar (display.HiddenStatusBar)
Deze code verbergt de statusbalk. De statusbalk is de balk boven op het scherm van het apparaat die de tijd, het signaal en andere indicatoren toont.
Een eenvoudige donkerbruine afbeelding wordt toegevoegd als achtergrond voor de applicatie-interface.
-- Afbeeldingen - [Achtergrond] lokale bg
De informatiebalk bevat de albumhoes, de naam van het nummer en de artiest. Het wordt in het midden van het podium geplaatst.
-- [Info balk] lokale infoBar lokale voortgangBar lokale voortgang
Er wordt een variabele gemaakt om de albumillustratiekopie op te slaan, deze afbeelding moet zich in de projectmap bevinden. Meer hierover in de laatste stap.
-- [Image Marker] local imageMarker local cdCover
De naam van het nummer en de artiest worden opgeslagen door de volgende variabelen:
-- [Info Bar Text] lokale titelTekst local byText local artistText
Deze balk geeft de bedieningsknoppen weer, evenals de voortgangsbalk en de duur van de song.
-- [Knoppenbalk Bg] lokale knopBar - [Knoppen] lokale playBtn lokale stopBtn local prevBtn local nextBtn - [Knoppenbalktekst] lokaal huidig lokaal totaal
XML is waarschijnlijk de beste manier om de informatie over het nummer te verwerken, maar helaas is er op dit moment geen native XML API in Corona. Hoewel je nog steeds enkele Lua-bibliotheken zoals LuaXML kunt gebruiken, zal het sneller zijn om een tabel voor korte inhoud te maken zoals getoond in de volgende regels:
-- URL, Naam, Artiest, Art 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]) lokale nummers = song1, song2
Zoals je in de bovenstaande code kunt zien, worden tabellen gebruikt om de liedjesinformatie op te slaan, die later door de audio.loadStream () methode om een audio streming-object te maken.
Hier is de volledige code die in deze zelfstudie is geschreven, samen met opmerkingen om u te helpen bij het identificeren van elk onderdeel:
-- Audio Player - Ontwikkeld door Carlos Yanez - Verberg statusbalk display.setStatusBar (display.HiddenStatusBar) - Graphics - [achtergrond] local bg - [Info Bar] lokale infoBar lokale voortgangBar lokale voortgang - [Image Marker] lokaal imageMarker local cdCover - [Info Bar Text] lokale titelTekst local byText local artistText - [Button Bar Bg] local buttonBar - [Buttons] local playBtn local stopBtn local prevBtn local nextBtn - [Button Bar Text] lokaal huidig lokaal totaal - - [Songs] - URL, Naam, Artiest, Art 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]) lokaal nummers = song1, song2
In dit deel van de serie hebt u de interface en de basisinstellingen van de toepassing geleerd. Houd ons in de gaten voor deel twee, waar we de logica van de applicatie, het gedrag van knoppen en meer zullen behandelen. Tot de volgende keer!
Accentsconagua