Corona SDK een analoge klok-app maken

In deze zelfstudie ontdekken we de mogelijkheden van de Corona SDK en gebruiken we de Lua-programmeertaal om meer te leren over het ontwikkelen van een eenvoudige platformonafhankelijke toepassing.


Gerelateerde Corona SDK-zelfstudies:

  • Inleiding tot Corona SDK: eenvoudige ontwikkeling van meerdere platformen
  • Corona SDK: een analoge klok-app maken
  • Corona SDK: maak een Accelerometer-gestuurde toepassing

Kort overzicht

Met behulp van de Corona API's maken we een standaard analoge klok. De grafische afbeeldingen zijn PNG's die worden geëxporteerd vanuit de beeldeditor van uw keuze en vervolgens worden aangedreven door Lua. U leert ook hoe u uw toepassing kunt testen met behulp van de simulator en uw app kunt bouwen voor apparaattesten.

Selecteer doelapparaat

Het eerste dat u hoeft te doen, is het platform selecteren waarop u uw app wilt uitvoeren, op deze manier kunt u de grootte kiezen voor de afbeeldingen die u wilt gebruiken.

Het iOS-platform heeft deze kenmerken:

  • iPad: 1024x768px, 132 ppi
  • iPhone / iPodTouch: 320 x 480 px, 163 ppi
  • Iphone 4: 960x640 px, 326 ppi

Voor Android is het een beetje anders, omdat het een open platform is, kunt u veel verschillende schermresoluties tegenkomen:

  • Nexus One: 480x800px, 254 ppi
  • Droid: 854x480 px, 265 ppi
  • HTC Legend: 320 x 480 px, 180 ppi

In deze zelfstudie gebruiken we het iPhone / iPodTouch-platform.

Interface

Dit is de grafische interface die we gaan gebruiken. Als u het Tuts + -netwerk volgt, merkt u misschien dat dit de grafische weergave in mijn zelfstudie is. Maak een analoge klok-screensaver met Screentime voor Flash. Als je wilt, kun je die tutorial volgen om de afbeeldingen te maken of download je eenvoudig het projectbestand van dit bericht.

PNG's exporteren

Afhankelijk van het apparaat dat u hebt geselecteerd, moet u de grafische afbeeldingen in de aanbevolen PPI exporteren. U kunt dat doen in uw favoriete foto-editor. Ik gebruikte de Grootte aanpassen ... functie in de Preview-app in Mac OS X.

Vergeet niet om de afbeeldingen een beschrijvende naam te geven en deze in uw projectmap op te slaan.

Code!

Tijd om onze applicatie te schrijven!

Open de gewenste Lua-editor (elke teksteditor werkt, maar u zult geen syntaxmarkering krijgen). Bereid je nu voor op het schrijven van je eerste geweldige app!

Achtergrond

Het eerste wat we zullen doen is de klokachtergrond toevoegen:

lokale achtergrond = display.newImage ("background.png")

Deze regel maakt de lokale variabele achtergrond en gebruikt de tonen API om de opgegeven afbeelding aan het werkgebied toe te voegen. Standaard wordt de afbeelding toegevoegd aan 0,0.

Klokhanden weergeven

We herhalen het proces met de wijzers van de klok en de afbeeldingen in het midden van de klok, en plaatsen ze in het midden van het podium:

local hourHand = display.newImage ("hourHand.png", 152, 185) local minuteHand = display.newImage ("minuteHand.png", 152, 158) local center = display.newImage ("center.png", 150, 230 ) local secondHand = display.newImage ("secondHand.png", 160, 155)

Referentiepunt

Om de afbeeldingen correct te positioneren, passen we het referentiepunt aan om afbeeldingen te verplaatsen ten opzichte van het midden onderaan:

hourHand: setReferencePoint (display.BottomCenterReferencePoint) minuteHand: setReferencePoint (display.BottomCenterReferencePoint) secondHand: setReferencePoint (display.BottomCenterReferencePoint)

Startpositie

Hier stellen we de beginpositie van de wijzers in. Wacht, deden we dat niet al? Ja, maar deze keer stellen we de rotatie in volgens de systeemtijd:

local timeTable = os.date ("* t") - Retourneert een tabel met het uur, de minuten en de seconden op het oproepmoment - Stel de rotatie in volgens de timeTable-waarden hourHand.rotation = timeTable.hour * 30 + (timeTable .min * 0.5) - De uren worden gescheiden door 30 graden, plus 0,5 graden per minuut minuteHand.rotation = timeTable.min * 6 - 6 graden scheidt de minuten en seconden secondHand.rotation = timeTable.sec * 6

Geheugenpraktijken

De rooster variabele zal slechts één keer worden gebruikt bij het starten van de applicatie, dus het is niet nodig om het in het geheugen te bewaren. Om het geheugen vrij te geven dat door de variabele wordt gebruikt (wat bijna niets is, maar je MOET wennen om niet-gebruikte vars of objecten dealloceren), hebben we de waarde ervan op nul, op deze manier zorgt garbage collection ervoor:

timeTable = nihil

MoveHands-functie

De volgende regels coderen de handrotatie van de wijzers, het is dezelfde code als eerder, alleen deze keer gewikkeld in een functie die elke seconde wordt uitgevoerd door een timer:

lokale functie moveHands (e) local timeTable = os.date ("* t") --get time again, every second hourHand.rotation = timeTable.hour * 30 + (timeTable.min * 0.5) minuteHand.rotation = timeTable.min * 6 secondHand.rotation = timeTable.sec * 6 end - de lokale variabele wordt hier vernietigd

timer

De timer, het voert elke seconde uit en voert de gespecificeerde functie uit, dit is de moveHands functie die we in de laatste stap hebben gemaakt. De tijden waarop het wordt uitgevoerd, worden ingesteld door de derde parameter, 0 is oneindig.

timer.performWithDelay (1000, moveHands, 0)

Test in Simulator

Dat zal onze app voltooien! Sla het bestand op als Main.lua in uw projectmap en start de Corona Simulator. Een open dialoog verschijnt. Selecteer uw projectmap en (hopelijk) zie uw app werken!

Icoon

Als alles werkt zoals verwacht, zijn we bijna klaar om de app uit te breiden voor apparaattesten. Er is nog één ding nodig: ons toepassingspictogram.

U kunt een mooi en goed uitziend pictogram maken met behulp van de afbeeldingen die u eerder hebt gemaakt. De pictogramgrootte voor de iPhone-pictogrammen is 57x57px, maar de iTunes Store gebruikt een afbeelding van 512x512 px, dus het is beter om uw pictogram in dit formaat te maken en vervolgens naar het pictogram te verkleinen.

Het hoeft niet de afgeronde hoeken of de transparante schittering te hebben - iTunes en de iPhone zullen dit automatisch voor u doen.

Build for Device

Als u klaar bent met uw pictogram, plaatst u het in uw projectmap en bereidt u het voor op build.

U hebt een ontwikkelaarsaccount nodig om een ​​app voor de iPhone te maken. Je moet de instructies in het Apple Development Program volgen om er een te krijgen en vervolgens een ontwikkelaarcertificaat te installeren.

Wanneer u klaar bent, opent u de Corona-simulator opnieuw, maar gebruikt u deze keer de Open voor Build optie in de het dossier menu.

U wordt gevraagd om uw project en het platform te selecteren om de toepassing voor te bouwen.

Hierna verschijnt een nieuw venster waarin u uw toepassing een naam kunt geven, het versienummer kunt selecteren en de identiteit van de ontwikkelaar kunt selecteren.

druk de bouwen knop wanneer klaar en bereid je voor op je apparaat te testen!

Conclusie

Gefeliciteerd met je eerste iPhone-app met de Corona SDK!

U kunt zien hoe eenvoudig het is om de Corona API's en de Lua-programmeertaal te gebruiken. Probeer je eigen apps te maken en wacht op meer basale tot geavanceerde zelfstudies!

Bedankt voor het lezen van deze tutorial. Hopelijk heb je het nuttig gevonden!