Share
Welkom bij de tweede zelfstudie in onze serie over het bouwen van een compleet nieuw spel met de Corona SDK. In dit gedeelte gaan we in op hoe je snel een basisniveau voor achtergrondschuiven kunt krijgen. Open je teksteditor en laten we aan de slag gaan!
Als je de eerste zelfstudie in deze serie nog niet hebt gezien, kun je deze heel snel bekijken voordat je doorgaat naar deze. Als je een beetje ervaring hebt met coderen, dan zul je snel door de hele eerste tut heen springen, maar als je dat nog niet hebt gedaan, dan is het de moeite waard om eens naar de basisbeginselen van het programmeren met Lua en de Corona SDK.
Dus het eerste dat we moeten behandelen, is het build.settings-bestand. Dit is een bestand dat moet worden gebruikt in dezelfde map als het bestand main.lua en dat is wat we gebruiken om sommige van onze toepassingsspecificaties in te stellen. Afhankelijk van het platform waarmee u werkt (Android of iOS), wordt uw build.settings-bestand gebruikt om verschillende dingen in te stellen. Android-ontwikkelaars hebben bijvoorbeeld te maken met hun toepassingsmanifestbestand en hun rechten, terwijl iOS-ontwikkelaars hun * .plist-bestand zorgen moeten maken. In het build.settings-bestand worden veel van die toepassingsniveau-instellingen behandeld. Een van de leuke dingen aan de Corona SDK is dat we onze build.settings van Android en iOS kunnen combineren in hetzelfde build.settings-bestand. Op deze manier hoeft u, als u op beide soorten apparaten werkt, niet meerdere build.settings-bestanden te beheren. Voor onze doeleinden gebruiken we momenteel alleen het build.settings-bestand om onze apparaatoriëntatie in te stellen. Maak dus een nieuw bestand met de naam build.settings in dezelfde map waarin u uw main.lua-bestand gaat plaatsen en plaats deze code erin:
--Merk op dat je opmerkingen in dit gedeelte kunt gebruiken als ook settings = orientation = default = "landscapeRight", supported = "landscapeRight", "landscapeLeft",,
Dit geeft ons een landschapsgericht apparaat op zowel iOS- als Android-apparaten. De code is vrij eenvoudig en we zullen meer instellingen bespreken die je in toekomstige tutorials wilt gebruiken, maar voor nu is dit alles wat we nodig hebben om verder te gaan. Als je dieper in jezelf wilt graven, kun je hier alle build.settings-opties vinden. Om ervoor te zorgen dat het bestand werkte, laten we een snelle test uitvoeren in de simulator. Open uw main.lua-bestand en plaats deze code daarin:
--Deze regel verwijdert de statusbalk aan de bovenkant van het scherm, - sommige apps wilt u misschien behouden, maar niet voor games! display.setStatusBar (display.HiddenStatusBar) local testRect = display.newRect (0,0,50,50) testRect: setFillColor (150,0,0);
Dus, na het samenstellen van dat alles, als je build.settings op de juiste plaats staat, zou je iets moeten hebben dat er zo uitziet:
Als het apparaat rechtop staat (portretmodus) en niet op zijn kant legt zoals hierboven (landschapsmodus), is er iets misgegaan. Hopelijk is dat niet het geval, omdat bovenstaande code alles is wat er is. Dus nu dat uit de weg is, kunnen we verder gaan met het op gang brengen van ons spel. Het doel van elk van de tutorials is dat we een nieuw werkgedeelte hebben. Elk bouwt voort op de laatste, maar na elke iteratie heb je iets dat speelbaar zou moeten zijn.
Het eerste dat we willen gaan doen, is ons niveau in beweging krijgen. We gaan verschillende lagen in ons spel hebben die op verschillende snelheidsniveaus gaan scrollen. Dit gaat ons de illusie geven van wat we graag parallax scrollen noemen. Wanneer je het programma in de simulator uitvoert, ga je gang en selecteer je de iPhone voor nu (als je dit nog niet hebt gedaan). Verander dit door naar te gaan Venster> Weergave als> iPhone in de simulator. De items zijn ontworpen voor een apparaat met een resolutie van 480x320 px. Er zijn natuurlijk manieren om ervoor te zorgen dat het werkt voor alle resoluties, maar voor onze testdoeleinden, blijf je gewoon bij de iPhone-simulator. Ga je gang en plaats deze code in je programma:
Accentsconagua
--neemt de weergavebalk aan de bovenkant van het scherm weg.setStatusBar (display.HiddenStatusBar) - voegt een afbeelding toe aan ons spel gecentreerd op x- en y-coördinaten local backbackground = display.newImage ("images / background.png") backbackground. x = 240 backbackground.y = 160 local backgroundfar = display.newImage ("images / bgfar1.png") backgroundfar.x = 480 backgroundfar.y = 160 Om dit te laten werken, moet je doorgaan en de afbeeldingen die ik heb geleverd gebruiken. Om ervoor te zorgen dat de code werkt zoals ze is, moet u de afbeeldingen in een map plaatsen met de naam afbeeldingen. De map images moet zich in dezelfde map bevinden als uw bestand main.lua en build.settings. Zodra je dat doet, zou je een scherm moeten krijgen dat er als volgt uitziet:
Merk op hoe de backgroundfar-afbeelding zich voor backbackground bevindt? Stel je voor dat je verschillende platen op elkaar stapelt. Hoe meer je stapelt, hoe meer je hebt over die eerste plaat waarop je alles hebt gestapeld om mee te beginnen. Dit geldt ook voor afbeeldingen en tekst die u in uw code plaatst. Telkens wanneer u iets aan het scherm wilt toevoegen, zal dat toegevoegde element, tenzij anders aangegeven, alles omvatten waar u al op gestapeld bent. Laten we verder gaan en nog een paar dingen op ons scherm stapelen. Voeg dit toe aan je code onder de andere regels:
local backgroundnear1 = display.newImage ("images / bgnear2.png") backgroundnear1.x = 240 backgroundnear1.y = 160 local backgroundnear2 = display.newImage ("images / bgnear2.png") backgroundnear2.x = 760 backgroundnear2.y = 160 Nu zouden we als volgt een nieuwe laag bovenop moeten hebben gestapeld:
Als je dit nu bekijkt, zul je merken dat, hoewel we 2 instanties van bgnear2.png hebben toegevoegd, er slechts één op het scherm verschijnt. De reden dat we dit doen, zal een beetje meer voor de hand liggend zijn wanneer we alles gaan verplaatsen. Voor nu, ga je gang en verander je van iPhone naar iPhone 4 op dezelfde manier als voorheen. Omdat we onze afbeeldingen rond de resolutie van een niet-retina-iPhone (bijvoorbeeld 480x320 px) hebben ontworpen, krimpen alles naar een hogere resolutie, zoals de iPhone 4 (bijvoorbeeld 960x640 px), waardoor we meer kunnen zien van wat er gaande is. Verander naar de iPhone 4-resolutie en je zou dit nu moeten zien:
Wanneer we willen zien wat er aan de hand is, zal overschakelen naar de grotere weergave zeer nuttig zijn. Merk op dat alleen omdat je iets niet kunt zien, niet betekent dat er niets gebeurt. Nu we die achtergrondafbeeldingen daar hebben laten we ze bewegen. Terwijl ik de tutorials doorloop, zal ik proberen alles te documenteren wat er in de code zelf gebeurt, dus als je ooit niet zeker weet wat iets zeker is, lees dan de opmerkingen in de code! Voeg nu onder de code die eerder is toegevoegd dit toe:
--de updatefunctie bestuurt bijna alles wat er in ons spel gebeurt - dit wordt elk frame genoemd (30 frames per seconde in ons geval, dat is de Corona SDK standaard) update van de lokale functie (gebeurtenis) - update Backgrounds noemen een functie gemaakt specifiek om de achtergrondbeweging aan te passen updateBackgrounds () eindfunctie updateAchtergronden () - veel achtergrondbeweging backgroundfar.x = backgroundfar.x - (.25) - nabij achtergrondbeweging backgroundnear1.x = backgroundnear1.x - (3) --if de sprite is van het scherm af verplaatst en zet hem terug naar de --andere kant zodat deze weer teruggaat als (backgroundnear1.x < -239) then backgroundnear1.x = 760 end backgroundnear2.x = backgroundnear2.x - (3) if(backgroundnear2.x < -239) then backgroundnear2.x = 760 end end --this is how we call the update function, make sure that this line comes after the --actual function or it will not be able to find it --timer.performWithDelay(how often it will run in milliseconds, function to call, --how many times to call(-1 means forever)) timer.performWithDelay(1, update, -1)
Wanneer je dit uitvoert, loop je het eerst terwijl je nog in de iPhone 4-weergave bent. Dit laat je zien wat er feitelijk gebeurt met alle verschillende sprites die we rondbewegen. Als je het eenmaal hebt bekeken in deze weergave, ga je gang en schakel je terug naar de normale iPhone-weergave, zodat je kunt zien hoe het er echt uitziet. Met dat alles erin zou je nu alles in beweging moeten hebben! Nu een paar dingen om naar te kijken voordat we verder gaan. Merk op hoe er slechts één instantie van backgroundfar is, maar er zijn twee voorbeelden van backgroundnear? Dit is iets dat helemaal aan jou is. De reden dat er twee zijn, is omdat voor de achtergrond dichterbij (bijvoorbeeld bomen die voorbij vliegen), we willen dat dit steeds opnieuw wordt herhaald. Voor de verre achtergrond wilde ik dat het iets is dat langzaam voorbij komt en zichzelf niet herhaalt (je zult dit bijvoorbeeld meestal alleen doen voor achtergronden die ver terug zijn, het geeft levels een uniek gevoel). Dit is iets wat u zou doen wanneer uw schuifniveau een einde zal maken. Als je echt een nooit eindigende scroller wilde, zou je dezelfde benadering willen gebruiken die je deed voor de nabije achtergrond en twee naast elkaar zetten. Door twee naast elkaar te plaatsen, of drie, of hoe veel u ook wilt, kunt u schijnbaar grote werelden creëren met zeer minimale activa. Het enige dat we moeten doen is de sprite naar de andere kant van het scherm verplaatsen.
Het volgende dat we gaan doen is de grond toevoegen. Dit gaat nog een paar stappen duren, maar we zullen traag gaan en ervoor zorgen dat alles op de juiste plek terechtkomt. Als je de eerste zelfstudie niet hebt gedaan en niet begrijpt hoe je groepen moet gebruiken of moet begrijpen wat ze zijn, is het nu een goed moment om het te bekijken. Hier is de code om in te ploppen (zet het recht onder de code waar we backgroundnear2 instellen, vóór de updatefunctie):
--creëer een nieuwe groep om al onze blokken lokale blokken te houden = display.newGroup () - stel een aantal variabelen in die we zullen gebruiken om de ground local ground te positionerenMin = 420 local groundMax = 340 local groundLevel = groundMin - this for loop genereert al je grondstukken, we gaan - in totaal 8 maken. voor a = 1, 8, 1 is isDone = false - krijg een willekeurig getal tussen 1 en 2, dit is wat we zullen gebruiken om te beslissen welke - texturen we gebruiken voor onze grondsprites. Als je dit doet, krijg je willekeurige grondstukken, zodat het lijkt alsof de grond voor altijd doorgaat. Je kunt zoveel verschillende - texturen als je wilt. Hoe meer je hebt, des te willekeuriger het zal zijn, onthoud alleen dat je - het getal in math.random (x) hebt voor hoeveel texturen je ook hebt. numGen = math.random (2) local newBlock print (numGen) if (numGen == 1 and isDone == false) then newBlock = display.newImage ("images / ground1.png") isDone = true end if (numGen == 2 en isDone == false) en newBlock = display.newImage ("images / ground2.png") isDone = true end - nu hebben we de juiste afbeelding voor het blok dat we gaan gebruiken - om het een aantal ledvariabelen te geven die helpt ons bij het volgen van elk blok en bij het positioneren waar we ze willen hebben. newBlock.name = ("block" ... a) newBlock.id = a - Omdat a een variabele is die wordt gewijzigd elke run die we kunnen toewijzen - waarden aan het blok op basis van a. In dit geval willen we dat de x-positie - de breedte van een blok uit elkaar geplaatst. newBlock.x = (a * 79) - 79 newBlock.y = groundLevel-blokken: insert (newBlock) end De opmerkingen in de code zouden u moeten helpen begrijpen wat alles tot nu toe doet. Hopelijk ziet wat u nu ziet er ongeveer zo uit:
Het laatste dat we nu moeten doen, is om de blokken in beweging te krijgen. Laten we doorgaan en de code daarvoor toevoegen. Zet deze code in na het einde van de update-functie:
function updateBlocks () voor a = 1, blocks.numChildren, 1 do if (a> 1) then newX = (blokkeert [a - 1]). x + 79 else newX = (blokken [8]). x + 79 einde if ((blokken [a]). x < -40) then (blocks[a]).x, (blocks[a]).y = newX, groundLevel else (blocks[a]):translate(-5, 0) end end end
Voordat iets echt beweegt, moeten we er zeker van zijn dat we de functie daadwerkelijk aanroepen via de updatefunctie. Dus, binnen de updatefunctie onder de regel updateBackgrounds (), roept u de functie updateBlokken () aan. Daarin zouden we alles nu in beweging moeten hebben. Merk op dat we in plaats van de blokken handmatig te verplaatsen in plaats daarvan de vertaalfunctie gebruikten. Deze functie is beschikbaar voor elk object dat we maken via de aanroep newImage. Beide methoden zullen werken, dus gebruik de een of de ander, of gebruik een mengsel. Een ander ding dat je moet opmerken is dat er een kloof tussen sommige van de blokken zit. Dit gebeurt omdat we de locatie van de nieuwe blokken direct naast de oude locatie van het laatste blok instellen. Het probleem is dat als we het op deze manier doen, we proberen het naast een bewegend object te plaatsen, dus we raken er niet altijd direct naast. Dit probleem zal nog groter worden als we proberen de reissnelheid van de blokken te verhogen, hoe sneller ze bewegen hoe groter de kloof wordt. Dit probleem kan worden opgelost door simpelweg een snelheidsvariabele toe te voegen en onze berekeningen op basis van die snelheid uit te voeren. Ga terug naar de coderegels waar we de variabelen hebben geïnitialiseerd groundMin en groundMax, en voeg dit toe:
lokale snelheid = 5;
Vervang vervolgens de functies updateBlocks () en updateBackgrounds () met deze:
function updateBlocks () voor a = 1, blocks.numChildren, 1 do if (a> 1) then newX = (blokkeert [a - 1]). x + 79 else newX = (blokken [8]). x + 79 - speed end if ((blokkeert [a]). x < -40) then (blocks[a]).x, (blocks[a]).y = newX, (blocks[a]).y else (blocks[a]):translate(speed * -1, 0) end end end function updateBackgrounds() --far background movement backgroundfar.x = backgroundfar.x - (speed/55) --near background movement backgroundnear1.x = backgroundnear1.x - (speed/5) if(backgroundnear1.x < -239) then backgroundnear1.x = 760 end backgroundnear2.x = backgroundnear2.x - (speed/5) if(backgroundnear2.x < -239) then backgroundnear2.x = 760 end end
Met die bijgewerkte functies zouden je blokken aardig moeten bewegen zonder gaten!
Een laatste ding om dit meer game-achtig te maken. Ga terug in de updatefunctie en plaats deze regel code na de updatefuncties:
snelheid = snelheid + .05
Als dat eenmaal daar is, kun je het niveau voor je ogen sneller bekijken! De exacte waarde is natuurlijk slechts een voorbeeld, hoe snel je de game bijwerkt hangt af van je spel en je publiek. Het enige dat overblijft op dit punt is een held en wat obstakels erin gooien en we hebben zelf een spel. Dat komt later wel, omdat dit het project voorlopig omhult. Alles draaiende was niet zo erg, en we zullen doorgaan met het toevoegen van veel functionaliteit aan elke iteratie. Zorg ervoor dat je terug gaat naar de volgende tutorial en als je vragen of feedback hebt, laat het me dan weten in de reacties hieronder!
