Share
In deze zelfstudie laat ik je zien hoe je een stuitergame kunt maken met de Corona SDK. U leert meer over de teken-API, tiptoetsen en willekeurige nummers. Het doel van dit spel is om een paddle te gebruiken om te voorkomen dat ballen de grond raken. Lees verder voor meer informatie!
We gebruiken vooraf gemaakte afbeeldingen om een opwindend spel te coderen met Lua en Corona SDK API's.
Na voltooiing gebruikt de speler het aanraakscherm op het apparaat om een paddle te besturen. De parameters in de code kunnen worden aangepast om het spel aan te passen.
Het eerste dat we moeten doen is het platform selecteren waarop we onze app willen gebruiken. Op deze manier kunnen we de grootte kiezen voor de afbeeldingen die we zullen gebruiken.
Het iOS-platform heeft de volgende kenmerken:
Omdat Android een open platform is, zijn er veel verschillende apparaten en resoluties. Enkele van de gebruikelijke schermkenmerken zijn:
In deze zelfstudie concentreren we ons op het iOS-platform met het grafische ontwerp, specifiek om te ontwikkelen voor distributie naar een iPhone / iPod touch, maar de hier gepresenteerde code is ook van toepassing op Android-ontwikkeling met de Corona SDK.
Er zal een eenvoudige en vriendelijke interface worden gebruikt. 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 dat doen met uw favoriete foto-editor.
Ik gebruikte de Grootte aanpassen ... 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.
We zullen een extern bestand gebruiken om de applicatie op meerdere apparaten op volledig scherm te laten verschijnen (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 in een andere schermresolutie wordt uitgevoerd.
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, vindt u de structuur vertrouwd.
Noodzakelijke klassenvariabelen en constanten Declare Functions contructor (Hoofdfunctie) class methods (other functions) call Hoofdfunctie
display.setStatusBar (display.HiddenStatusBar)
De bovenstaande 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 vector wordt gebruikt als achtergrond voor de applicatie-interface. De volgende regel code maakt het.
-- Graphics - [Background] local bg = display.newRect (0, 0, display.contentWidth, display.contentHeight) bg: setFillColor (52, 46, 45)
Dit is de titelweergave, het is het eerste interactieve scherm dat in onze game verschijnt. Deze variabelen slaan de componenten op:
-- [Title View] lokale titel local playBtn local creditsBtn local titleView
Deze weergave toont de credits en copyright van het spel. Deze variabele wordt gebruikt om het op te slaan:
-- [CreditsView] local creditsView
Een instructiebericht verschijnt aan het begin van het spel en wordt na 2 seconden getweend. U kunt de tijd later in de code wijzigen.
-- Instructies lokale ins
Hier zijn de cirkels of ballen. Het doel van het spel is om te voorkomen dat ze de onderkant van het scherm raken.
-- Kleurcirkels lokale kringen = display.newGroup ()
Dit is de waarschuwing die wordt weergegeven wanneer een bal de grond raakt. Het zal de score weergeven en het spel beëindigen.
-- Lokale alert melden
We gebruiken Geluidseffecten om het spelgevoel te verbeteren. De geluiden die in deze game worden gebruikt, zijn gemaakt in as3sfxr.
Accentsconagua
-- Klinkt lokaal bounceSnd = audio.loadSound ('bounce.wav') local loseSnd = audio.loadSound ('lose.wav') Dit zijn de variabelen die we zullen gebruiken. U kunt de opmerkingen in de code lezen om meer over hen te weten te komen.
-- Variabelen lokale circleTimer - voegt elke keer een nieuwe cirkel toe, lokale kleuren = 71, 241, 255, 255, 204, 0, 245, 94, 91, 0, 255, 204, 250, 140, 254, - Mogelijke kleuren voor de cirkels (R, G, B)
Vervolgens verklaren alle functies als lokaal aan het begin.
-- Lokale functies = lokale startbuttonListeners = lokale showCredits = lokale hideCredits = lokale showGameView = lokale gameListeners = lokale verplaatsingBar = lokale addCircle = lokale onCollision = lokale waarschuwing =
Tijdens deze stap maken we de functie die de spellogica initialiseert:
functie Main () - code ... einde
Nu plaatsen we de TitleView in de fase en bel een functie die de tik luisteraars naar de knoppen.
function Main () title = display.newImage ('title.png') playBtn = display.newImage ('playBtn.png', 130, 248) creditsBtn = display.newImage ('creditsBtn.png', 125, 316) titleView = display.newGroup (title, playBtn, creditsBtn) startButtonListeners ('add') end Deze functie voegt de nodige luisteraars toe aan de TitleView toetsen:
function startButtonListeners (action) if (action == 'add') then playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener ( 'tik', showCredits) einde Het credits scherm wordt getoond wanneer de gebruiker op de wat betreft knop, a tik luisteraar is toegevoegd aan de weergave credits om deze te verwijderen.
functie showCredits: tik op (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) transition.to (creditsView, time = 300, y = display. contentHeight - (creditsView.height - 40), onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) einde Wanneer het creditsscherm wordt aangebroken, wordt het uit het werkgebied geschud en verwijderd.
function hideCredits: tik op (e) transition.to (creditsView, time = 300, y = display.contentHeight + 40, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) end Wanneer de Spelen knop is aangetikt, de TitleView wordt getweend en verwijderd, waardoor de GameView. Er zijn veel onderdelen betrokken bij deze weergave, dus we zullen ze opsplitsen in de volgende paar stappen.
functie showGameView: tik op (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) De volgende regels voegen het instructiesbericht toe:
ocal ins = display.newImage ('ins.png', 160, 355) transition.from (ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transition.to ( ins, time = 200, alpha = 0.1, onComplete = function () display.remove (ins) ins = nil end) end) end) Met deze stap wordt de paddle gemaakt en op het podium geplaatst. Een naam kan later worden toegevoegd voor eenvoudiger toegang.
-- Add Bar bar = display.newRoundedRect (70, 340, 160, 10, 3) bar.name = 'bar'
Nu maken we muren rond het scherm om te voorkomen dat de ballen het podium verlaten.
-- Wanden links = display.newLine (0, 240, 0, 720) left.isVisible = false right = display.newLine (320, 240, 320, 720) right.isVisible = false bottom = display.newLine (160, 480, 480 , 480) bottom.isVisible = false
Hier is een score TextField rechtsboven op het podium maken:
-- Score score = display.newText ('0', 300, 0, 'Futura', 15) Vervolgens moeten we fysica aan onze objecten toevoegen. Hier gebruiken we de Filter eigenschap die voorkomt dat bepaalde objecten met elkaar botsen. Dit voorkomt dat onze cirkels botsen terwijl botsingen tussen de muren en paddle blijven. U kunt een eenvoudige uitleg van zijn gedrag vinden op de Corona-site.
-- Physics physics.addBody (bar, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (links, 'static', filter = categoryBits = 4, maskBits = 7) natuurkunde .addBody (rechts, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (bottom, 'static', filter = categoryBits = 4, maskBits = 7) gameListeners (' voeg ') toe De volgende functie voegt de nodige luisteraars toe om de spellogica te starten:
functie gameListeners (actie) if (action == 'add') en vervolgens bg: addEventListener ('touch', moveBar) circleTimer = timer.performWithDelay (2000, addCircle, 5) bar: addEventListener ('collision', onCollision) onderaan: addEventListener ('botsing', waarschuwing) else bg: removeEventListener ('touch', moveBar) timer.cancel (circleTimer) circleTimer = nil bar: removeEventListener ('collision', onCollision) onderaan: removeEventListener ('botsing', waarschuwing) einde Het aanraken van de achtergrond roept de volgende functie op die de beweging van de paddle afhandelt. Het volgt de vinger en blijft daar bovenop.
functie moveBar (e) if (e.phase == 'verplaatst') en vervolgens bar.x = e.x bar.y = e.y - 40 end - Houd balk 1/3 vanaf de top als (bar.y < 160) then bar.y = 160 end end
De circleTimer roept deze code. Het creëert een cirkel of bal aan de bovenkant van het scherm (die dan omlaag wordt bewogen door de zwaartekracht) en geeft het een willekeurig formaat en kleur uit onze kleuren Tafel. De kleurwaarden worden vervolgens opgeslagen in om de paddle ook te veranderen. Een kleine druk wordt toegevoegd in een willekeurige richting, berekend door de dir en r variabelen.
functie addCircle () local r = math.floor (math.random () * 12) + 13 local c = display.newCircle (0, 0, r) cx = math.floor (math.random () * (display.contentWidth - (r * 2))) cy = - (r * 2) - lokale kleur van de cirkelkleur = math.floor (math.random () * 4) + 1 c.c1 = kleuren [kleur] [1] c. c2 = kleuren [kleur] [2] c.c3 = kleuren [kleur] [3] c: setFillColor (c.c1, c.c2, c.c3) physics.addBody (c, 'dynamic', radius = r , bounce = 0.95, filter = categoryBits = 2, maskBits = 4) circles: insert (c) - Move Horizontaal lokale richting als (r < 18) then dir = -1 else dir = 1 end c:setLinearVelocity((r*2) * dir, 0 ) end
Deze functie werkt als de paddle tegen een bal botst. Het speelt een geluid, verhoogt de score en verandert de paddle-kleur.
function onCollision (e) audio.play (bounceSnd) bar: setFillColor (e.other.c1, e.other.c2, e.other.c3) score.text = tostring (tonumber (score.text) + 50) score: setTextColor (e.other.c1, e.other.c2, e.other.c3) score.x = 300 einde
De waarschuwingsfunctie maakt een waarschuwingsweergave, animeert deze en beëindigt het spel.
function alert () audio.play (loseSnd) gameListeners ('rmv') alertView = display.newImage ('alert.png', 90, 200) transition.from (alertView, time = 200, alpha = 0.1) local score TF = display.newText (score.text, 145, 253, 'Futura', 17) scoreTF: setTextColor (255, 255, 255) - Wacht 100 ms om de natuurkunde te stoppen timer.performWithDelay (100, function () physics.stop ( ) einde, 1) einde Om het spel te starten, de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:
Hoofd()
De Default.png bestand is een afbeelding die wordt weergegeven wanneer de toepassing start terwijl iOS de basisgegevens laadt die moeten worden weergegeven in het hoofdscherm. Voeg deze afbeelding toe aan uw projectbronmap en deze wordt vervolgens automatisch toegevoegd door de Corona-compilatie.
Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een goed uitziend pictogram maken. De pictogramgrootte voor het niet-retina-iPhone-pictogram is 57x57px, maar de netvliesversie is 114x114px. Houd er rekening mee dat de iTunes Store een 512x512px-versie vereist. Ik stel voor eerst de 512x512-versie te maken en vervolgens de overige formaten te verkleinen.
Het hoeft niet de afgeronde hoeken of de transparante schittering te hebben, iTunes en de iPhone doen dat voor u.
Het is tijd voor de laatste test. Open de Corona Simulator, blader naar uw projectmap en klik vervolgens op Open. Als alles werkt zoals verwacht, bent u klaar voor de laatste stap!
Ga in de Corona Simulator naar Bestand> Build en selecteer uw doelapparaat. Vul de vereiste gegevens in en klik op Bouwen. Wacht een paar seconden en uw app is gereed voor apparaattesten en / of verzending voor distributie!
In deze zelfstudie hebben we geleerd over het tekenen van API, timers, willekeurige getallen en andere vaardigheden die ongelooflijk nuttig kunnen zijn in een groot aantal games.
Experimenteer met het eindresultaat en probeer je eigen aangepaste versie van het spel te maken!
Ik hoop dat je deze tutorialserie leuk vond en vond het nuttig. Bedankt voor het lezen!
