Welkom bij de nieuwste aflevering in de Endless Runner-serie. In de tutorial van vandaag leer je hoe je een gamemenu maakt met behulp van de Director Class. Laten we beginnen!
Gefeliciteerd met het zover komen in de serie! Het is een lange run geweest, maar nu hebben we een volledig functioneel spel en hopelijk een basiskennis van hoe je je eigen componenten kunt toevoegen om alles uit te breiden. De stap die we nu gaan doen, is ons kleine niveau in een menusysteem te veranderen, zodat het als een volledig spel aanvoelt.
We gaan dit doen met behulp van de regisseursklasse, een ongelooflijk goed gemaakte kleine bibliotheek van Ricardo Rauber die al het werk voor je gaat doen. Als je eenmaal ziet hoe belachelijk eenvoudig het is, kun je dit snel implementeren in elk project.
Het eerste dat je hoeft te doen is hier naar toe gaan en de nieuwste versie van de les downloaden. Wanneer u het downloadt, krijgt u veel bestanden. Het wordt geleverd met veel meer dan alleen de regisseursklasse, inclusief voorbeelden, sjablonen en extra functies die je leven gemakkelijker kunnen maken, dus kijk gerust naar alles wat het te bieden heeft. Als je niet alle leuke extraatjes wilt, kun je eenvoudig de bestanden voor deze tutorial downloaden en vanaf daar pakken.
Nu we het director.lua-bestand hebben, plaatst u het in dezelfde map als uw main.lua. Over uw main.lua-bestand gesproken, ga je gang en hernoem het. Het maakt niet uit waarnaar je het aanpast, want we gaan het uiteindelijk toch verwijderen. Nadat je dit hebt gedaan ga je drie nieuwe bestanden maken in die map. Noem ze main.lua, menu.lua en game.lua. De basis van hoe dit gaat werken is dat main.lua wordt gebeld om het spel te starten. Het zal de basis van ons programma worden, terwijl menu.lua en game.lua zullen werken als componenten (displayGroups) die worden weergegeven binnen een displayGroup binnen de main.lua zelf, op dezelfde manier als alle verschillende displays groepen in onze game worden allemaal vastgehouden en weergegeven vanuit de schermweergaveGroep in onze huidige game.
Dus laten we eerst ons nieuwe main.lua-bestand instellen. Open het en plop deze code daar in:
display.setStatusBar (display.HiddenStatusBar) - door Corona te vertellen dat hij "regisseur" vereist, zeggen we dat hij alles in dat bestand moet opnemen, - ons gemakkelijke toegang tot zijn functies verschaft. Dit is - ook hoe u functies zou opnemen of - "klassen" die u in externe bestanden hebt gemaakt. local director = require ("director") local mainGroup = display.newGroup () local main = function () - hiermee wordt een weergave gemaakt die we gebruiken om de andere scènes in te laden, zodat ons spel vordert - technisch we blijven in het main.lua-bestand - en laden alleen nieuwe views of scènes erin mainGroup: insert (director.directorView) - we vertellen de regisseur dat hij de eerste scène moet laden die - de menudirecteur wordt: changeScene ("menu") end - ben zeker om de hoofdfunctie hoofd te roepen ()
Dus dat is het! Neem de opmerkingen weg en je ziet dat het slechts 5 regels kost om de regisseursles in gebruik te nemen. Zoals in de opmerkingen staat, is de manier waarop dit werkt in feite main.lua begint eerst, maar dan in plaats van dat de stroom van het spel binnen het main.lua-bestand wordt gedicteerd, laten we de regisseursklasse het overnemen. We maken een display.newGroup en reserveren dit als onze hoofdweergave. Dus wanneer de game daadwerkelijk wordt geladen, wordt alles wat je ziet feitelijk bekeken vanuit het main.lua-bestand in deze weergavegroep. Behoorlijk, hè! Dus als je die weergave erin invoegt, hoeven we de regisseur alleen maar te vertellen welke scène hij moet laden en die brengt ons daar automatisch naartoe. Makkelijk genoeg, toch?
Het volgende dat we hiervoor moeten doen om echt te werken, is om een menuscène te hebben. De code is heel eenvoudig en de meeste hebben we al gezien, dus ik ga eerst het hele bestand plaatsen en vervolgens de paar dingen die nieuw zijn uitleggen. Laten we menu.lua openen en zien hoe eenvoudig het is om een eenvoudig menusysteem te maken. Kopieer het volgende in je menu.lua:
--deze regel is vereist, zodat de regisseur weet dat dit een scène is die in zijn weergavemodule kan worden geladen (..., package.seeall) - we moeten toegang hebben tot de registerklasse van - dus zorg ervoor dat u include this here local director = require ("director") local sprite = require ("sprite") - alles dat u deze scène wilt laten doen, moet - opgenomen in de nieuwe functie. Telkens wanneer de regisseur - een nieuwe scène laadt, zal hij hier kijken om uit te zoeken wat hij moet laden. new = function (params) - deze functie zal worden teruggestuurd naar de regisseur local menuDisplay = display.newGroup () - alles van hier beneden naar de return-regel maakt de scène dus ... gekke lokale achtergrond = weergeven .newImage ("background.png") background.x = 240 background.y = 160 local spriteSheet = sprite.newSpriteSheet ("monsterSpriteSheet.png", 100, 100) local monsterSet = sprite.newSpriteSet (spriteSheet, 1, 7) sprite .add (monsterSet, "running", 1, 6, 600, 0) local monster = sprite.newSprite (monsterSet) monster: prepare ("running") monster: play () monster.x = 60 monster.y = 200 local monster2 = sprite.newSprite (monsterSet) monster2: prepare ("running") monster2: play () monster2.x = 420 monster2.y = 200 monster2.xScale = monster2.xScale * -1 local title = display.newImage ("title .png ") title.x = 240 title.y = 80 lokale playButton = display.newImage (" playButton.png ") playButton.x = 240 playButton.y = 220 menuDisplay: insert (achtergrond) menuDisplay: insert (monster) menuDisplay : Inser t (monster2) menuDisplay: invoegen (titel) menuDisplay: invoegen (playButton) - dit wordt opgeroepen als playButton wordt aangeraakt - het enige dat dat wel is is de overgang - van deze scène naar de gamescène - te noemen, " downFlip "is de --naam van de overgang die de regisseur gebruikt lokale knopknopListener (event) regisseur: changeScene (" game "," downFlip ") retourneert true end - dit is een iets andere manier om aanraking te detecteren, maar het is werkt - goed voor knoppen. Voeg eenvoudig de eventListener toe aan het weergaveobject - dat is de knop die de gebeurtenis "touch" verzendt, die de functie --buttonListener elke keer dat het displayObject wordt aangeraakt roept. playButton: addEventListener ("touch", buttonListener) - de weergavegroep opnieuw weergeven aan het einde return-menuDisplay-einde
Een ding dat hier nieuw is, is de regel regisseur: changeScene (). Het is vrij rechttoe rechtaan omdat het precies doet wat je zou denken. Ik wilde echter wijzen op de tweede parameter, de "downFlip". Er zijn veel ingebouwde overgangen die ervoor kunnen zorgen dat je spel er helemaal uit ziet bij het schakelen tussen scènes, het hangt er alleen maar vanaf hoe je je spel eruit wilt laten zien. Hier is een beeld van onze lopende overgang.
Zorg ervoor dat je enkele van de verschillende overgangen uitprobeert om de overgang te vinden die het beste werkt voor je spel. Je vindt er een volledige lijst van in het director.lua-bestand. Kijk maar naar alle verschillende effecten en geef ze een werveling. Een paar voorbeelden die u snel kunt proberen als u niet wilt gaan graven zijn "crossfade", "overfromtop" en "flipFromBottom" om er maar een paar te noemen! Dus, afgezien daarvan, is er weinig dat je nog niet eerder hebt gezien. Al dat spul is gewoon een goedkoop klein menuscherm aan het maken. Er zijn een aantal dingen waar je rekening mee moet houden in elke scène die de regisseur nodig heeft. De eerste is:
module (..., package.seeall)
Eenvoudigweg. U hebt die exacte regel nodig bovenaan elk * .lua-bestand dat de regisseur als een scène gaat gebruiken. Hierna heeft u de nieuwe functie () die wordt aangeroepen bij het invoeren van de scène en alles wat u de scène wilt laten doen, moet hier worden opgenomen. Het eerste dat u hoeft te doen is een displayObject maken dat wordt teruggestuurd naar de regisseur die moet worden weergegeven en zorg er dan voor dat u het terugstuurt aan het einde van de nieuwe functie. Dat is alles. Klinkt eenvoudig? Dat is omdat het is! De regie-klas maakt het echt zo gemakkelijk. Zolang uw afbeeldingen op de juiste plek staan voor de menuscène, moet u het bestand main.lua kunnen uitvoeren en zonder problemen opstarten..
Tot nu toe hebben we ons hoofdbestand en ons hoofdmenu-bestand verzorgd. Het laatste dat we moeten doen, is een aantal wijzigingen aanbrengen in ons spelbestand. Dit gaat ook gemakkelijk zijn. Open het bestand game.lua en voeg de volgende code toe:
module (..., package.seeall) local director = require ("director") new = function (params) local gameDisplay = display.newGroup () --paste code here return gameDisplay end
Dat zijn de barebones van wat je nodig hebt voor een scène. Overigens is dit alles wat je nodig hebt om je oude main.lua-bestand in je game.lua-bestand te krijgen. Als je dat eenmaal daar hebt, hoef je alleen je hele oude main.lua-bestand te kopiëren en het hier te plakken waar hier de plakcode staat. Doe dat en je bent klaar ... bijna. We gaan ook enkele wijzigingen aanbrengen in de manier waarop we ons game-overbericht weergeven. In plaats van één grote knop, gaan we deze opdelen in verschillende kleinere knoppen die ons laten kiezen om het spel opnieuw te starten of terug te gaan naar het menu. Laten we beginnen met het maken van enkele van die veranderingen (merk op dat gameOver.png is gewijzigd om te passen in de lay-out van de nieuwe knoppen.) De afmetingen van de afbeelding zijn nog steeds dezelfde, dus u zou er geen andere aanpassingen aan moeten doen). De eerste veranderingen zullen zijn om de nieuwe knoppen in het spel toe te voegen.
Voeg deze code toe aan de plaats waar we alle andere afbeeldingen bovenaan het bestand toevoegen:
local yesButton = display.newImage ("yesButton.png") yesButton.x = 100 yesButton.y = 600 local noButton = display.newImage ("noButton.png") noButton.x = 100 noButton.y = 600
Voeg ze dan ook allebei toe aan het scherm. Voeg deze toe na de rest van de invoegbladen op het scherm, zodat ze bovenop al het andere verschijnen:
scherm: insert (yesbutton) scherm: insert (noButton)
Het volgende dat u wilt doen is naar de aangeraakte functie () gaan en de eerste if / else-instructie verwijderen, zodat deze er zo uitziet:
function touched (event) if (monster.isAlive == true) then if (event.phase == "started") then if (event.x < 241) then if(onGround) then monster.accel = monster.accel + 20 end else for a=1, blasts.numChildren, 1 do if(blasts[a].isAlive == false) then blasts[a].isAlive = true blasts[a].x = monster.x + 50 blasts[a].y = monster.y break end end end end end end
Door dit te doen, maakt het de aangeraakte functie er een die puur omgaat met in-game interacties. We gaan de logica verplaatsen die het spel opnieuw opstart naar zijn eigen functie. Voeg deze functies toe onder de aangeraakte functie ():
functie noListener (event) director: changeScene ("menu", "downFlip") retourneren true end function yesListener (event) restartGame () retourneren true end
Dus, vrij rechttoe rechtaan, en hetzelfde dat we nu al verschillende keren hebben gedaan. Schiet vervolgens naar de onderkant van de code waar we onze evenementlisteners toevoegen en voeg nog twee luisteraars toe:
yesButton: addEventListener ("touch", yesListener) noButton: addEventListener ("touch", noListener)
Dus, de laatste paar dingen die we moeten doen is rekening houden met de veranderingen in positie van de twee knoppen wanneer ons monster sterft en wanneer we het spel resetten. Dit zijn de toevoegingen die we moeten toevoegen om te zorgen dat ze correct werken. Voeg in de functie restartGame () dit toe:
noButton.x = 100 noButton.y = 600 yesButton.x = 100 yesButton.y = 600
Ga vervolgens naar de functie checkCollisions (), waar u deze regels verschillende keren zou moeten zien:
gameOver.x = display.contentWidth * .65 gameOver.y = display.contentHeight / 2
Voeg dit blok toe recht onder elke instantie van dat (het moet in totaal 4 zijn, één voor elke weg om te sterven):
yesButton.x = display.contentWidth * .65 - 80 yesButton.y = display.contentHeight / 2 + 40 noButton.x = display.contentWidth * .65 + 80 noButton.y = display.contentHeight / 2 + 40
Zodra je al deze veranderingen hebt aangebracht, zou je in staat moeten zijn om het spel te starten vanuit main.lua en in staat te zijn om van je hoofdmenu naar je spel te gaan, te sterven en dan te kiezen of je opnieuw wilt spelen of terug wilt gaan naar het menu. Dus, ervan uitgaande dat alles goed is, is dat het einde, we hebben nu ons spel verplaatst naar een menusysteem met behulp van de regisseursklasse! We zijn daar heel snel doorheen gegaan, met als reden dat er niet echt veel nieuwe content was. Als u problemen ondervindt met een van de stappen, laat het me dan weten in de opmerkingen en ik help u graag verder. De nieuwe map in het downloadbare bestand bevat ook het voltooide product, zodat u dit altijd als referentie kunt gebruiken. Hopelijk is deze tutorialserie nuttig geweest voor jou om je te laten beginnen met game-ontwikkeling met de Corona SDK, omdat je kunt zien dat het proces in het algemeen heel eenvoudig is. De Corona SDK is krachtig en zeer gebruiksvriendelijk zodra u de basisbeginselen bereikt. Hopelijk kun je nu verder gaan en geweldige games spelen.
Er zal nog een tutorial voor deze serie zijn, maar het spel verandert sowieso niet, maar zal zich concentreren op het indienen van je game bij de app store, want dat is altijd een avontuur als je het voor de eerste keer doet. Dus fijne codering en bedankt voor het volgen!