Share
Dit is de tweede aflevering in onze Corona SDK Honder game-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 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 lastX = titleBg.x transition.to (titleBg , time = 300, y = (display.contentHeight * 0.5) - (titleBg.height + 20), x = (display.contentWidth * 0.5) - (titleBg.width * 0.5) - 10) 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, x = lastX); 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) Deze code plaatst de achtergrondafbeelding van het spel in het werkgebied.
-- Game Achtergrond display.remove (bg) gameBg = display.newImage ('gameBg.png') 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 deel creëert vijf cirkels in het scherm op een willekeurige positie, de ik variabele wordt gebruikt om een constante te vermenigvuldigen die de cirkelskleur bepaalt, waardoor deze elke keer lichter wordt. Er wordt ook een tekstveld gemaakt en beide worden binnen een groep gehouden om ze samen te plaatsen.
-- Cirkels cirkels = display.newGroup () lokale kleur = 0 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 cg = display.newCircle (rx, ry, 21) local label = display.newText ('0', cg.x-4.2, cg.y-12.2 , native.systemFontBold, 13) cg.fillColor = color + (i * 40) cg: setFillColor (cg.fillColor) local c = display.newGroup (cg, label) c.pressed = false c.name = 'c' c .radius = 21 Hier voegen we fysica toe aan onze nieuwe cirkel.
-- Circle Physics physics.addBody (c, 'dynamic', radius = 21, bounce = 1) c: setLinearVelocity (100, 100) circles: insert (c) end
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 de score tekstvelden toe.
-- Score TextField score = display.newText ('0', 257, 4, native.systemFont, 15) score: setTextColor (150, 150, 150) local total = display.newText ('/ 100', 267, 4, native. systemFont, 15) totaal: setTextColor (150, 150, 150) gameListeners ('add') einde Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
functie gameListeners (actie) if (action == 'add') en dan voor i = 1, 5 doen cirkels [i]: addEventListener ('touch', onTouch) cirkels [i]: addEventListener ('collision', onCollision) end else voor i = 1, 5 doen cirkels [i]: removeEventListener ('touch', onTouch) cirkels [i]: removeEventListener ('collision', onCollision) end end end Deze code wordt uitgevoerd wanneer de cirkel wordt aangeraakt.
Eerst verhogen we de score.
functie onTouch (e) if (e.phase == 'started') then e.target.pressed = true - Increase Counter score.text = tostring (tonumber (score.text) + 2)
Dan de grootte van de cirkel. De cirkel zal groeien als de vinger er niet meer op zit.
-- Vergroot formaat e.target.radius = e.target.radius + 2
Verandert de kleur van zwart / grijs in rood.
-- Kleur veranderen e.target [1]: setFillColor (224, 11, 0)
We recreëren de cirkel en de eigenschappen ervan wanneer het aanraakgebeuren is geëindigd.
if (e.phase == 'ended') then e.target.pressed = false - Fysica lokaal nummer = tostring updaten (tonumber (e.target [2] .text) +2) local r = e.target.radius lokale cg = display.newCircle (e.target.x, e.target.y, r) local label = display.newText (nummer, cg.x-4.2, cg.y-12.2, native.systemFontBold, 13) cg: setFillColor (e.target [1] .fillColor) cg.fillColor = e.target [1] .fillColor local c = display.newGroup (cg, label) c.pressed = false c.name = 'c' c.radius = r circles: remove (e.target) physics.addBody (c, 'dynamic', radius = r, bounce = 1) c: setLinearVelocity (100, 100) c: addEventListener ('touch', onTouch) c: addEventListener ('botsing', onCollision) cirkels: invoegen (c) - Verplaats Tekstveld wanneer getal 2 cijfers is (tonummer (nummer)> 9) en label.x = label.x - 5 einde Hier controleren we of de score 100 punten heeft bereikt en bel a winnen waarschuwen als het waar is.
-- Controleer of de score 100 if heeft bereikt (tonumber (score.text)> = 100) en dan local bg = display.newImage ('gameBg.png') transition.from (bg, time = 500, alpha = 0, onComplete = alert ('win')) end end end Het spel gaat verloren wanneer een ingedrukte cirkel botst met een andere. De luisteraars zijn verwijderd en een verloren melding wordt gebeld.
function onCollision (e) if (e.target.pressed en e.other.name == 'c') then - Wait 0.1 seconds to stop physics timer.performWithDelay (100, function () physics.stop () end, 1 ) local r = e.target.radius local c = display.newCircle (e.target.x, e.target.y, r) c: setFillColor (224, 11, 0) gameListeners ('rmv') transition.to ( c, time = 700, xScale = 25, yScale = 25, onComplete = alert ('lost')) end end De waarschuwingsfunctie geeft een bericht weer volgens het type alarm dat wordt gebeld.
functie alert (actie) if (actie == 'win') dan local alertView = display.newImage ('won.png', 10, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) else local alertView = display.newImage ('lost.png', 10, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) einde 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!
