Share
Dit is de tweede aflevering in onze Corona SDK Bubble Popping-spelzelfstudie. In de tutorial van vandaag zullen we aan onze interface toevoegen door de interactie met het spel te coderen. Lees verder!
Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen en voor te bereiden.
Deze functie voegt de benodigde luisteraars toe aan de TitleView toetsen.
Accentsconagua
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 aftitelingscherm wordt weergegeven wanneer de gebruiker op de knop Over tikt, 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) lastY = titleBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 30)) transition.to (creditsView, time = 300, y = (display.contentHeight * 0.5) + 35, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end Wanneer het creditsscherm wordt aangebroken, wordt het uit het werkgebied geschud en verwijderd.
functie hideCredits: tik op (e) transition.to (creditsView, time = 300, y = display.contentHeight + 25, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) transition.to (titleBg, time = 300, y = lastY); einde Wanneer de Begin 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 splitsen.
functie showGameView: tik op (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Vervolgens voegen we de muren toe aan het podium. Ze worden gemaakt met behulp van de teken-API.
-- Wanden links = display.newLine (0, 240, 0, 720) right = display.newLine (320, 240, 320, 720) top = display.newLine (160, 0, 480, 0) bottom = display.newLine (160 480, 480, 480)
Dit onderdeel creëert vijf bellen in het scherm op een willekeurige positie.
bubbles = display.newGroup () voor i = 1, 5 do local rx = 21 + math.floor (math.random () * (display.contentWidth - 42)) local ry = 21 + math.floor (math.random ( ) * (display.contentHeight - 42)) local b = display.newImage ('bubble.png', rx, ry) b.name = 'bubble' Hier voegen we fysica toe aan onze nieuwe bubbel.
-- Bubble Physics physics.addBody (b, 'dynamic', radius = 21, bounce = 1) b: setLinearVelocity (100, 100) bubbels: invoegen (b) einde
En doe hetzelfde met onze muren.
-- Walls Physics physics.addBody (links, 'static') physics.addBody (right, 'static') physics.addBody (top, 'static') physics.addBody (bottom, 'static')
Nu voegen we het niveau, de popping en de vereiste bubbeltekstvelden toe.
-- Level TextField level = display.newImage ('level.png', 2, 0) levelN = display.newText ('1', 54, 5, native.systemFont, 15) levelN: setTextColor (255, 255, 255) - Popped TextField popped = display.newImage ('popped.png', 126, 0) poppedN = display.newText ('0', 187, 5, native.systemFont, 15) poppedN: setTextColor (255, 255, 255) - Vereist TextField required = display.newImage ('required.png', 231, 0) requiredN = display.newText ('4', 306, 5, native.systemFont, 15) requiredN: setTextColor (255, 255, 255) bullets = display.newGroup () end Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
functie gameListeners (actie) if (action == 'add') en vervolgens bg: addEventListener ('tap', createBullets) else bg: removeEventListener ('tap', createBullets) Runtime: removeEventListener ('enterFrame', update) end end Deze code wordt uitgevoerd wanneer op de achtergrond wordt getikt.
Eerst maken we de grafische opsommingstekens.
functie createBullets (e) voor i = 1, 4 do local bullet = display.newImage ('bullet.png', e.x, e.y) Dan geven we het een richting door de lineaire snelheid in te stellen.
-- Stel richting in als (i == 1) dan bullet.x = bullet.x - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (-150, 0) end --links als ( i == 2) en vervolgens bullet.x = bullet.x + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (150, 0) end - right if (i == 3) then bullet.y = bullet.y - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, -150) end --up if (i == 4) then bullet.y = bullet.y + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, 150) einde --down bullet: addEventListener ('botsing', onCollision) opsommingstekens: invoegen (opsommingsteken) bg: removeEventListener ('tap', createBullets) end Runtime: addEventListener ('enterFrame', update) end De botsingen worden afgehandeld door de volgende functie. Er wordt een geluid gespeeld, de score wordt verhoogd en de bubbel van het scherm wordt verwijderd.
function onCollision (e) if (e.other.name == 'bubble') then audio.play (pop) display.remove (e.other) poppedN.text = tostring (tonumber (poppedN.text) + 1) end end
Deze code verwijdert elke kogel die uit het zicht is.
functie-update (e) - Controleer voor offstage-opsommingstekens voor i = 1, opsommingstekens.numKinderen doen if (opsommingstekens [i] ~ = nihil) en dan if (opsommingstekens [i] .x < 0 or bullets[i].x > 320 of kogels [i] .y < 0 or bullets[i].y > 480) en vervolgens display.remove (opsommingstekens [i]) aan het einde
Hier controleren we of de gepofte bubbels de vereiste hoeveelheid hebben bereikt en bellen met een winnen waarschuwen als het waar is.
-- Controleer of de vereiste bubbels zijn uitgeknipt als (bullets.numChildren == 0 en tonumber (poppedN.text)> = tonumber (requiredN.text)) en meld vervolgens ('win') elseif (bullets.numChildren == 0 en tonumber (poppedN. tekst) < tonumber(requiredN.text)) then alert('lose') end end De waarschuwingsfunctie geeft een bericht weer in overeenstemming met het type alarm dat wordt opgeroepen (niveau voltooid of mislukt).
functie alert (actie) gameListeners ('rmv') if (actie == 'win') en local alertView = display.newImage ('won.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) else local alertView = display.newImage ('lost.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) end end Om het spel te starten, de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:
Hoofd()
Het bestand Default.png is een afbeelding die juist 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 en deze wordt automatisch toegevoegd door de Corona-compileermachine.
Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een mooi en goed uitziend pictogram maken. De pictogramgrootte voor het niet-retina-iPhone-pictogram is 57x57px, maar de netvliesversie is 114x114px en de iTunes-winkel heeft een 512x512px-versie nodig. 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 zullen dat voor je doen.
Het is tijd om de laatste test te doen. Open de Corona Simulator, blader naar uw projectmap en klik vervolgens op Openen. 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!
Experimenteer met het eindresultaat en probeer je aangepaste versie van het spel te maken!
Ik hoop dat je deze tutorialserie leuk vond en het nuttig vond. Bedankt voor het lezen!
