Dit is de tweede aflevering in onze Corona SDK Sound Memory zelfstudie. In de tutorial van vandaag voegen we toe aan onze interface en de interactie met het spel. Lees verder!
Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen en voor te bereiden.
Deze functie voegt de nodige luisteraars toe aan de Titelweergave 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
De credits scherm wordt getoond wanneer de gebruiker op de Wat betreft knop, een tik luisteraar is toegevoegd aan de creditsweergave om het te verwijderen.
functie showCredits: tik op (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) lastY = title.y transition.to (title, time = 300 , y = display.contentHeight * 0.5 - title.height - 25) transition.to (creditsView, time = 300, y = display.contentHeight * 0.5 + creditsView.height, onComplete = function () creditsView: addEventListener ('tap ', hideCredits) end) end
Wanneer de credits scherm wordt afgeluisterd, het wordt uit het werkgebied geschud en verwijderd.
functie hideCredits: tik op (e) transition.to (creditsView, time = 300, y = display.contentHeight, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits) display .remove (creditsView) creditsView = nil end) transition.to (title, time = 300, y = lastY); einde
Wanneer de Spelen op de knop is getikt, de titelweergave is getweend en verwijderd waardoor de gameweergave wordt onthuld. Er zijn veel onderdelen betrokken bij deze weergave, dus we zullen ze in de volgende stappen opsplitsen.
functie showGameView: tik op (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end)
Deze code plaatst de afbeeldingen van de spelknoppen in het werkgebied.
-- Voeg vierkanten toe r.gfx = display.newImage ('red.png', 75, 155) g.gfx = display.newImage ('green.png', 165, 155) ye.gfx = display.newImage ('yellow.png ', 75, 245) b.gfx = display.newImage (' blue.png ', 165, 245) r.gfx.name =' r 'g.gfx.name =' g 'ye.gfx.name =' ye 'b.gfx.name =' b '
De volgende regels zullen de instructies bericht, laat het gedurende twee seconden zien en laat het vervolgens vervagen.
-- Instructies Bericht local ins = display.newImage ('message.png', 61, 373) 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 gameTimer = timer.performWithDelay (500, playLevel, #currentLevel) end) end) end)
Deze knop wordt gebruikt om de gebruikersinvoer te testen en ervoor te zorgen dat deze gelijk is aan de niveau-geluiden. Het is standaard onzichtbaar.
-- Check Button check = display.newImage ('checkBtn.png', 135, 406) check.isVisible = false
Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
functie gameListeners (actie) if (action == 'add') dan r.gfx: addEventListener ('tap', onTap) g.gfx: addEventListener ('tap', onTap) ye.gfx: addEventListener ('tap', onTap ) b.gfx: addEventListener (tik op, onTap) check: addEventListener ('tap', checkInput) anders r.gfx: removeEventListener ('tap', onTap) g.gfx: removeEventListener ('tap', onTap) ye. gfx: removeEventListener ('tap', onTap) b.gfx: removeEventListener ('tap', onTap) check: removeEventListener ('tap', checkInput) gameTimer = nul einde
Deze functie leest de huidig niveau variabele om te bepalen welk niveau u wilt spelen. Het gebruikt ook een overgang om visueel naar de knop te wijzen die bij het geluid hoort. Wanneer de niveaureactie is voltooid, wordt de controleren knop wordt zichtbaar.
function playLevel () if (times <= #currentLevel) then transition.from(currentLevel[times].gfx, time = 200, alpha = 0.1) audio.play(currentLevel[times].s) times = times + 1 end if(times == #currentLevel+1) then check.isVisible = true gameListeners('add') end end
Als u op de knoppen in het midden drukt, wordt deze functie aangeroepen. Het zal een geluid afspelen en de waarde ervan opnemen in de gebruikers invoer tafel. Deze tabel wordt gebruikt in de volgende functie om de geluiden te vergelijken.
function onTap (e) if (e.target.name == 'r') then table.insert (userInput, r.gfx) audio.play (rs) transition.from (e.target, time = 200, alpha = 0.1) elseif (e.target.name == 'g') en vervolgens table.insert (userInput, g.gfx) audio.play (gs) transition.from (e.target, time = 200, alpha = 0.1 ) elseif (e.target.name == 'ye') en vervolgens table.insert (userInput, ye.gfx) audio.play (ye.s) transition.from (e.target, time = 200, alpha = 0.1 ) elseif (e.target.name == 'b') en vervolgens table.insert (userInput, b.gfx) audio.play (bs) transition.from (e.target, time = 200, alpha = 0.1) einde einde
Deze functie vergelijkt de namen van de knoppen die zijn ingedrukt met de niveautabel en roept een waarschuwing op met het bijbehorende bericht.
functie checkInput (e) check.isVisible = false voor i = 1, #currentLevel do if (userInput [i] .name == currentLevel [i] .gfx.name) en corrigeer = correct + 1 end-end if (correct == #currentLevel) en vervolgens alert ('win') else alert ('lose') end end
De alarm functie maakt een waarschuwingsweergave, animeert het en beëindigt het spel.
functie alert (actie) gameListeners ('rmv') if (action == 'lose') then alertView = display.newImage ('lose.png', 110, 218) else alertView = display.newImage ('win.png', 110, 218) einde overgang. Vanaf (alertView, time = 200, alpha = 0.1) einde
Om het spel te starten, de Hoofd functie moet worden gebeld. We doen dat hier met de bovenstaande code op zijn plaats.
Hoofd()
De Default.png bestand is een afbeelding die goed wordt weergegeven wanneer u de toepassing start terwijl de iOS de basisgegevens laadt om het hoofdscherm weer te geven. Voeg deze afbeelding toe aan uw projectbronmap; het wordt automatisch toegevoegd door de Corona-compileermachine.
Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een leuk pictogram maken. De pictogramgrootte voor een iPhone zonder retina-display is 57x57px, maar de retina-versie is 114x114px en de iTunes Store heeft een 512x512px-versie nodig. Ik raad aan eerst de 512x512-versie te maken en de overige formaten te verkleinen.
iTunes en de iPhone creëren de afgeronde hoeken en transparante verblinding.
Het is tijd om de laatste test te doen. Open de Corona Simulator, blader naar uw projectmap en klik op Openen. Als alles werkt zoals verwacht, bent u klaar voor de laatste stap!
Ga in de Corona Simulator naar Bestand en bouwen en selecteer uw doelapparaat. Vul de vereiste gegevens in en klik op bouwen. Wacht een paar seconden en uw app is klaar voor apparaattesten en / of verzending voor distributie!
In deze serie hebben we geleerd over het laden van geluid, het spelen en het vergelijken van tabellen. Dit zijn vaardigheden die heel nuttig kunnen zijn in een groot aantal spellen.
Je kunt met het eindresultaat experimenteren en proberen je aangepaste versie van het spel te maken!
Ik hoop dat je deze tutorialserie leuk vond en vond het nuttig. Bedankt voor het lezen!