Share
De Corona SDK maakt game-ontwikkeling voor de iPhone, iPad en Android eenvoudig. Corona gebruikt de Lua-programmeertaal om platformonafhankelijke apps te maken. In deze zelfstudie gaan we na hoe u een scrolachtergrond maakt met de Corona SDK.
De Corona SDK maakt het heel eenvoudig om dynamische effecten te maken met zeer weinig regels code. Met de Corona SDK maken we een schuivende 2D-achtergrond met afbeeldingen die we maken in Photoshop. Deze zelfstudie behandelt geen ontwerpen voor een bepaald apparaat. In plaats daarvan kan de scrollende achtergrond die we maken worden gebruikt voor de iPhone-, iPad- of Android-platforms.
Met behulp van Photoshop gaan we het aangepaste vormgereedschap gebruiken om sterren te maken voor onze achtergrond. Hoewel je theoretisch elke vorm voor de achtergrond kunt gebruiken, laat deze tutorial zien hoe je een "Sterrennacht" -achtergrond maakt.
Open met Photoshop een nieuw document van 45x45 pixels.
Selecteer het aangepaste vormgereedschap en selecteer de 5-punts ster als uw aangepaste vorm. Als u de 5 Point Star niet kunt vinden, moet u mogelijk de lijst toevoegen met de lijst met vormen.
Nadat je de 5 Point Star hebt geselecteerd, zorg je ervoor dat je voorgrondkleur wit is en teken een ster op een nieuwe laag.
Nu we een ster hebben getekend, gebruikt u de tool Opslaan voor web en apparaten om de ster in drie verschillende grootten op te slaan:
Star1.png 45x45 pixels
Star2.png 30x30 pixels
Star3.png 15x15 pixels
Met onze afbeeldingen kunnen we beginnen met het maken van de scrollende achtergrond. Laten we beginnen door uw favoriete Lua-editor te openen en een nieuw document te maken met de naam main.lua.
Onze eerste stap is om de statusbalk te verbergen. De statusbalk is een balk bovenaan het scherm die informatie aan de gebruiker geeft, zoals de signaalsterkte of het batterijniveau.
display.setStatusBar (display.HiddenStatusBar);
We zullen nu enkele variabelen instellen die in ons hele programma kunnen worden gebruikt.
_W = display.contentWidth; - Retourneert schermbreedte _H = display.contentHeight; - Retourneert de schermhoogte local starTable = - Steltabel instellen
Nadat we een aantal globale variabelen hebben geïnitialiseerd, gaan we sterobjecten invoegen in de starTable. In deze tabel identificeren we het beeldpad van de sterren en de bewegingssnelheid van elke ster. Vervolgens voegen we de ster in starTable in.
De bewegingssnelheid wordt berekend in milliseconden en bepaalt hoe snel de ster van onder naar boven naar het scherm beweegt. De grotere sterren zullen iets sneller bewegen dan de kleinere sterren om de illusie van diepte naar de achtergrond te geven.
function initStar () local star1 = star1.imgpath = "star1.png"; - Stel beeldpad in voor Star star1.movementSpeed = 10000; - Bepaalt de bewegingssnelheid van ster in milliseconden table.insert (starTable, star1); - Plaats Star in starTable local star2 = star2.imgpath = "star2.png"; star2.movementSpeed = 12000; table.insert (starTable, star2); local star3 = star3.imgpath = "star3.png"; star3.movementSpeed = 14000; table.insert (starTable, star3); einde
De functie getRandomStar retourneert een willekeurig sterobject uit de starTable. Zodra de functie de ster heeft, stellen we het afbeeldingspad in, de naam van de ster en hoe snel de ster zal bewegen. Dit is hoe de complete functie eruit ziet.
functie getRandomStar () local temp = starTable [math.random (1, #starTabel)] local randomStar = display.newImage (temp.imgpath) physics.addBody (randomStar, isSensor = true) randomStar.myName = "star" randomStar .movementSpeed = temp.movementSpeed; randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360) starMove = transition.to (randomStar, time = randomStar.movementSpeed, y = -45, onComplete = functie (zelf) self.parent: remove (self); self = nil; end) end
De eerste regel krijgt een willekeurige ster uit de starTable en slaat deze op in de lokale variabele randomStar.
local temp = starTable [math.random (1, #starTabel)]
Nadat we een willekeurige ster hebben opgehaald, zullen we het beeldpad van de ster instellen.
local randomStar = display.newImage (temp.imgpath)
Nu zullen we de naam van het sterobject instellen op? Star? en de bewegingssnelheid wordt ingesteld op basis van de snelheid van de willekeurige ster die we uit de stertafel hebben getrokken.
randomStar.myName = "star" randomStar.movementSpeed = temp.movementSpeed; - in milliseconden
Het startpunt van de ster wordt een willekeurige X-positie onder aan het scherm. De ster begint ook op het scherm voor een vloeiendere overgang naar het zichtbare gedeelte van het scherm. We roteren ook willekeurig elke ster om variantie aan de achtergrond toe te voegen.
randomStar.x = math.random (0, _W) randomStar.y = _H + 50 randomStar.rotation = math.random (0,360)
Nadat de ster is ingesteld, kunnen we de methode transition.to () gebruiken om de ster naar de bovenkant van het scherm te verplaatsen. Het sterobject wordt dan uit het geheugen verwijderd wanneer het zijn doelpunt heeft bereikt.
starMove = transition.to (randomStar, time = randomStar.movementSpeed, y = -45, onComplete = function (self) self.parent: remove (self); self = nil; end)
Deze functie stelt drie timers in die een beroep doen op de functie getRandomStar om het sterobject te genereren en de ster te starten die naar de bovenkant van het scherm beweegt.
De eerste parameter in timer.performWithDelay is de vertraging, die bepaalt hoe vaak de timer wordt aangeroepen. De tweede parameter is de functie die wordt aangeroepen en de laatste parameter is het aantal keren dat de timer wordt opgeroepen. Een waarde van? 0? vertelt de timer om voor altijd te herhalen.
function startGame () starTimer1 = timer.performWithDelay (1700, getRandomStar, 0) starTimer2 = timer.performWithDelay (2300, getRandomStar, 0) starTimer3 = timer.performWithDelay (2700, getRandomStar, 0) einde
Eindelijk kunnen we onze app gebruiken. De volgende code roept de functies op die we tijdens de tutorial hebben gemaakt om het maken van de sterren te starten, ze naar de bovenkant van het scherm te verplaatsen en ze te verwijderen wanneer ze de sensorbalk hebben bereikt.
initStar () startGame ()
U kunt een 2D-scrollachtergrond gebruiken in verschillende games en een scrollende achtergrond gebruiken is een eenvoudige manier om games dynamischer te maken. Probeer de sterren te verwisselen voor wolken, bladeren of iets anders dat je maar kunt bedenken!
Bedankt voor het lezen!
Accentsconagua