Share
In deze tutorialserie leren we hoe je een space shooter-game kunt maken, net als het klassieke spel Space Defender. Lees verder!
In deze versie van Space Defender moet de speler zijn ruimte verdedigen door vijanden neer te schieten. Elke keer dat de speler met succes een vijand vernietigt, zullen ze punten verdienen en wanneer de speler 20 of 40 punten heeft bereikt, zal hun wapen een upgrade krijgen. Om dingen te mixen, verstuurt dit spel bonuspakketten die 5 punten waard zijn. Bekijk de korte video hierboven om het spel in actie te zien. Nu we meer weten over de game die we maken, laten we aan de slag gaan!
Deze space shooter-game wordt gebouwd met behulp van de Corona SDK. Hier zijn enkele dingen die u in deze zelfstudiereeks zult leren:
Als u deze zelfstudie wilt gebruiken, moet de Corona SDK op uw computer zijn geïnstalleerd. Als u de SDK niet hebt, ga dan naar www.CoronaLabs.com om een gratis account te maken en de gratis software te downloaden.
Onze eerste stap bij het opzetten van onze game is het build.settings-bestand. Dit bestand verwerkt alle buildtime-eigenschappen van onze app, zoals de richting en extra opties voor Android- en iOS-platforms. Maak een nieuw bestand met de naam build.settings en kopieer de volgende instellingen naar uw bestand.
instellingen = orientation = default = "landscapeRight", supported = "landscapeRight", "landscapeLeft", iphone = plist = UIStatusBarHidden = false, UIAppFonts = "Kemco Pixel.ttf",,
Een van de geweldige dingen aan Corona SDK is dat de taal zelfdocumenten bevat en dat de meeste instellingen in dit bestand gemakkelijk te begrijpen zijn. Laten we echter snel door deze instellingen bladeren.
Nadat we onze build time-configuraties hebben ingesteld, gaan we onze runtime-configuraties in ons config.lua-bestand instellen. In dit bestand zullen we de breedte en hoogte van ons spel instellen, het type inhoudschaal en de frames per seconde. Maak een nieuw bestand met de naam config.lua en kopieer de volgende instellingen.
toepassing = content = width = 320, height = 480, scale = "letterBox", fps = 30,,
Net als bij ons build.settings bestand, is de config.lua zelfdocumenterend behalve de schaaloptie. De schaaloptie is een functie die Corona SDK gebruikt om uw toepassing aan te passen voor verschillende schermformaten. In het geval van de letterBox-optie, vertellen we Corona om al onze inhoud op het scherm weer te geven met behoud van de beeldverhouding. Wanneer de inhoud het volledige scherm niet beslaat, geeft de app zwarte balken weer in de gebieden zonder inhoud (net zoals films kijken in breedbeeldmodus).
Voordat we onze app blijven bouwen, moeten we het hebben over afbeeldingen. Er zijn veel verschillende manieren waarop u grafische afbeeldingen voor uw spel kunt krijgen - huur een grafisch ontwerper in, huur een vriend in, teken ze zelf of koop zelfs aandelen van websites zoals https://graphicriver.net/.
Als u echter een klein budget hebt, kunt u deze afbeeldingen mogelijk niet kopen of heeft u misschien niet de tijd om ze te maken. In dit soort situaties kunt u afbeeldingen gebruiken die zijn vrijgegeven onder de Creative Commons-licentie. Met de Creative Commons-licentie kunt u afbeeldingen gebruiken die vrij beschikbaar zijn onder bepaalde beperkingen, zoals het verstrekken van toeschrijving aan de auteur.
Voor onze game gaan we artwork gebruiken onder de Creative Commons-licentie van OpenGameArt.org. De auteur die deze afbeeldingen heeft gemaakt, is VividRealtiy en hier is een directe link naar zijn werk: http://opengameart.org/content/evolutius-gfx-pack. Voordat u doorgaat, moet u de grafische set downloaden of het bestand downloaden voor deze zelfstudie.
Hoewel er onder deze licentie een heleboel websites met afbeeldingen zijn, zijn hier drie websites die ik vaak bezoek:
Nu we onze graphics hebben, kunnen we ons spel blijven maken! Om onze game voort te zetten, moeten we een nieuw bestand maken met de naam main.lua. Dit bestand zal het startpunt van onze game zijn en in feite is dit het beginpunt van elke game die met Corona wordt gemaakt. Nadat het bestand is gemaakt, opent u het in uw favoriete editor en voert u de volgende code in:
-- verberg de statusbalk display.setStatusBar (display.HiddenStatusBar)
Deze coderegel verbergt de statusbalk op iOS. Vervolgens gebruiken we Corona's storyboard-functie om ons spel te beheren. De storyboard-functie beschouwt verschillende delen van het spel als scènes om het ontwikkelaars gemakkelijker te maken om de code te beheren. Onze game bevat bijvoorbeeld drie scènes: main.lua, het menu en het gamescherm. Zodra elke scène is ingesteld, biedt Corona een zeer eenvoudige manier om van scène te veranderen. Omdat dit een enorme hindernis kan zijn voor ontwikkelaars die net met de Corona SDK beginnen, is hier een grafische weergave van de lay-out van ons spel.
Elk blauw vak geeft een afzonderlijke scène weer en de pijl tussen elke scène toont hoe we door de scènes navigeren. Simpel gezegd, we starten bij main.lua en zullen heen en weer navigeren tussen Scene 2 en Scene 3.
Het implementeren van het Storyboard in onze app is eenvoudig: u hoeft alleen de module te gebruiken en u bent klaar! Plaats de volgende code in main.lua om deze geweldige functie te integreren.
-- inclusief de Corona "storyboard" -module lokaal storyboard = vereisen "storyboard"
Vervolgens willen we naar de tweede scène gaan en we zullen de variabele storyboard gebruiken om dit te bereiken.
Accentsconagua
-- laad menuscherm storyboard.gotoScene ("menu") Nu we het main.lua-bestand hebben voltooid, gaan we het hoofdmenu bekijken!
Het hoofdmenu van onze game toont een achtergrondafbeelding, de titel van het spel en een knop Nu afspelen. Maak een nieuw bestand met de naam menu.lua en Corona's storyboard om aan de slag te gaan.
lokaal storyboard = vereisen ("storyboard") lokale scène = storyboard.newScene () Nu voegen we Corona's widgetfunctie toe om onze knop te maken. Met de widget-functie kunnen we eenvoudig veelgebruikte GUI-elementen maken, zoals knoppen in onze game.
lokale widget = vereist "widget"
Na de widgetbibliotheek zullen we een aantal variabelen vooraf definiëren voor onze game. Deze variabelen slaan de schermbreedte, schermhoogte en het midden van de schermcoördinaten op.
lokaal schermW, schermH, halfW, halfY = display.contentWidth, display.contentHeight, display.contentWidth * 0.5, display.contentHeight * 0.5
Na onze variabelen maken we onze allereerste functie genaamd scène: createScene (). Deze functie wordt aangeroepen wanneer de scène voor het eerst wordt geladen of als de scène eerder is verwijderd. Over het algemeen wordt deze functie gebruikt om alle grafische elementen aan het scherm toe te voegen.
functiescène: createScene (event) local group = self.view end
Een belangrijk kenmerk van een storyboard is de manier waarop het met objecten omgaat. Alle weergaveobjecten die we in deze scène gebruiken, worden bij de variabelegroep geplaatst. Door onze weergaveobjecten binnen deze groep te plaatsen, laten we Corona weten dat deze objecten tot deze scène behoren en wanneer de scène moet worden verwijderd, worden deze objecten ook verwijderd.
Binnen de functiescene: createScene (), gebruiken we de grafische BKG.png (deze afbeelding kwam van opengameart.org) als achtergrond voor onze game. Zodra deze is toegevoegd, centreren we de afbeelding op het scherm en voegen deze toe aan de groepsvariabele.
-- een achtergrondafbeelding weergeven local bg = display.newImageRect ("images / BKG.png", 480, 320) bg.x = halfW bg.y = halfY group: insert (bg) Vervolgens plaatsen we onze speltitel op het scherm met behulp van het aangepaste lettertype dat we hebben opgegeven in ons build.settings-bestand.
-- plaats een spelditel op het scherm lokale gametitle = display.newText ("Space Defender", 0,0, "Kemco Pixel", 40) gametitle.x = halfW gametitle.y = 100 groep: insert (gametitle) Onze laatste toevoeging aan onze eerste functie is de afspeelknop. De afspeelknop gebruikt de widgetfunctie van Corona en een gebelde evenementlistener onPlayBtnRelease. De gebeurtenislistener wordt geactiveerd wanneer de afspeelknop wordt aangeraakt. Voeg de volgende code toe binnen de scène: createScene () functie.
lokale functie onPlayBtnRelease () storyboard.gotoScene ("game", "slideLeft") end playBtn = widget.newButton label = "Nu afspelen", labelColor = default = 255, defaultFile = "images / Button.png" , overFile = "images / Button_Purple.png", width = 150, height = 60, left = 180, top = 150, font = "Kemco Pixel", fontSize = 18, onRelease = onPlayBtnRelease - gebeurtenis luisterfunctie groep: invoegen (playBtn) Na onze functie voor het maken van scènes, voegen we een functie voor enterscènes toe. Deze functie wordt geactiveerd na de functie scène creëren en verwijdert de vorige scène.
function scene: enterScene (event) local group = self.view if storyboard.getPrevious () ~ = nil then storyboard.removeScene (storyboard.getPrevious ()) einde
De laatste functie die we zullen toevoegen is de destroyScene-functie. Deze functie wordt aangeroepen wanneer de scène wordt verwijderd of vernietigd. In ons geval gebruiken we widgets en omdat widgets handmatig moeten worden verwijderd, verwijderen we de widget in onze functie voor vernietigen van scènes.
function scene: destroyScene (event) local group = self.view als playBtn dan playBtn: removeSelf () - widgets moeten handmatig worden verwijderd playBtn = nil end end
Ten slotte voegen we gebeurtenislisteners toe om de verschillende functies te bellen die we hebben ingesteld: enterScene, destroyScene en createScene.
scène: addEventListener (scène "createScene", scène): addEventListener (scène "enterScene", scène): addEventListener ("destroyScene", scène) En dat is het voor deel 1! We hebben geleerd hoe we ons project moeten opzetten, hoe we Corona's storyboard-functie kunnen implementeren, hoe we onze app kunnen starten en hoe we een menusysteem kunnen maken. Lees nu deel 2 van deze serie!
