Share
Dit is de tweede aflevering in onze Corona SDK Unblock Puzzle spel-zelfstudie. In de tutorial van vandaag zullen we aan onze interface toevoegen door de interactieve elementen van het deblokkeringsspel te maken. 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 + 40)) 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) Deze code plaatst de achtergrondafbeelding van het spel op het podium:
-- Game BG gameBg = display.newImage ('gameBg.png', 10, 10) Vervolgens voegen we het tekstveld van de bewegingen toe aan het werkgebied. Dit telt het aantal zetten gedaan door de speler.
-- Bewegingen Tekstveld bewegingen = display.newText ('0', 211, 66, display.systemFont, 16) bewegingen: setTextColor (224, 180, 120) Met dit onderdeel worden de blokken gemaakt die in de variabele Niveau zijn gedefinieerd met een dubbele waarde voor uitspraak.
-- Creëren Niveau hblocks = display.newGroup () vblocks = display.newGroup () voor i = 1, # l1 do voor j = 1, # l1 [1] do if (l1 [i] [j] == 1) dan lokaal v = display.newImage ('vrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) v: addEventListener ('touch', dragV) vblocks: insert (v) elseif ( l1 [i] [j] == 2) en lokaal h = display.newImage ('hrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) h: addEventListener (' tik op ', dragH) hblocks: invoegen (h) elseif (l1 [i] [j] == 3) en dan s = display.newImage (' square.png ', 10 + (j * 50) -50, 120 + ( i * 50) -49) s: addEventListener ('touch', dragH) end end end gameListeners ('add') end Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
functie gameListeners (actie) if (action == 'add') dan Runtime: addEventListener ('enterFrame', update) else Runtime: removeEventListener ('enterFrame', update) end end De volgende functie zorgt voor de horizontale slepen van de blokken.
functie dragH (e) e.target.lastX = 0 lokale currentX = 0 local initX = 0 if (e.phase == 'started') en dan e.target.lastX = ex - e.target.x initX = e.target .x movements.text = tostring (tonumber (movements.text) + 1) elseif (e.phase == 'moved') dan e.target.x = ex - e.target.lastX currentX = e.target.x - - Bereken richting als (initX < currentX) then dir = 'hl' --horizontal-left elseif(initX > currentX) en vervolgens dir = 'hr' - horizontaal-rechts, end end
Nu maken we de verticale sleepfunctie.
functie dragV (e) e.target.lastY = 0 lokale currentY = 0 local initY = 0 if (e.phase == 'started') en dan e.target.lastY = ey - e.target.y initY = e.target .y movements.text = tostring (tonumber (movements.text) + 1) elseif (e.phase == 'moved') dan e.target.y = ey - e.target.lastY currentY = e.target.y - - Bereken richting als (start < currentY) then dir = 'vu' --Vertical-upwards elseif(initY > currentY) then dir = 'vd' --Vertical-downwards end end end
We zullen een uitstekende en nuttige functie gebruiken voor collision detection zonder physics. U kunt het originele exemplaar en de originele bron vinden op de CoronaLabs Code Exchange-website.
function hitTestObjects (obj1, obj2) local left = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin local right = obj1.contentBounds.xMin> = obj2.contentBounds.xMin en obj1.contentBounds.xMin <= obj2.contentBounds.xMax local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin local down = obj1.contentBounds.yMin> = obj2.contentBounds.yMin en obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end
Deze code beperkt de beweging door virtuele randen te maken.
functie-update (e) - Verticale randen voor i = 1, vblocks.numChildren do if (vblocks [i] .y> = 370) en vblocks [i] .y = 370 elseif (vblocks [i] .y <= 170) then vblocks[i].y = 170 end
Hier behandelen we de botsingen tussen de verticale en horizontale blokken.
-- Druk op Test als (hitTestObjects (vblocks [i], hblocks [i]) en dir == 'vu') en dan vblocks [i] .y = hblocks [i] .y + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) en dir == 'vd') en vervolgens vblocks [i] .y = hblocks [i] .y - 75 end if (hitTestObjects (vblocks [i], hblocks [i]) en dir == 'hr' ) hblocks dan [i] .x = vblocks [i] .x + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) en dir == 'hl') en hblocks [i] .x = vblocks [i ] .x - 75 end if (hitTestObjects (s, vblocks [i])) en dan sx = vblocks [i] .x - 50 end end
Deze code beperkt de beweging horizontaal door virtuele randen te maken.
-- Horizontale randen voor j = 1, hblocks.num Kinderen doen if (hblocks [j] .x> = 260) en hblocks [j] .x = 260 elseif (hblocks [j] .x <= 60) then hblocks[j].x = 60 end end -- Square if(s.x >= 320) en display.remove (s) display.remove (vblocks) display.remove (hblocks) alert () elseif (s.x <= 35) then s.x = 35 end end
De waarschuwingsfunctie stopt het spel, geeft een bericht weer en verwijdert de actieve luisteraars.
function alert () gameListeners ('rmv') local alertView = display.newImage ('alert.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82) endend 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 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, deze wordt automatisch toegevoegd door de Corona-compiler.
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!
In deze tutorial heb je geleerd hoe je onze interface tot leven kunt brengen door de gebruiker in staat te stellen met de stukken van de game te werken. 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!
