Share
In deze tutorialserie laat ik je zien hoe je een oneindig scrollergame maakt met de Corona SDK door een Ostrich Runner-spel te maken. U leert over verschuivende objecten, manipulatie van fysica, aanraakbedieningen en botsingsdetectie. Het doel van het spel is om het personage te verplaatsen en items te verzamelen om de score te verhogen. Lees verder!
Met behulp van vooraf gemaakte afbeeldingen coderen we een leuk spel met Lua en de Corona SDK API's.
De speler kan het aanraakscherm op het apparaat gebruiken om het personage te verplaatsen en om items te verzamelen. Je kunt de parameters in de code aanpassen om het spel aan te passen.
Het eerste wat we moeten doen is het platform selecteren waar we onze app binnen willen laten, op deze manier kunnen we de grootte kiezen voor de afbeeldingen die we zullen gebruiken.
Het iOS-platform heeft deze kenmerken:
Omdat Android een open platform is, zijn er veel verschillende apparaten en resoluties. Een paar van de meest voorkomende schermkenmerken zijn:
In deze zelfstudie concentreren we ons op het iOS-platform met het grafische ontwerp, dat zich specifiek ontwikkelt voor distributie naar een iPhone / iPod touch, maar de hier gepresenteerde code moet ook van toepassing zijn op Android-ontwikkeling met de Corona SDK.
Er zal een eenvoudige en vriendelijke interface worden gebruikt. De interface omvat meerdere vormen, knoppen, bitmaps en meer.
De interface grafische hulpmiddelen die nodig zijn voor deze tutorial zijn te vinden in de bijgevoegde download.
Afhankelijk van het apparaat dat u hebt geselecteerd, moet u mogelijk de afbeeldingen in de aanbevolen PPI exporteren. U kunt dit doen met behulp van uw favoriete foto-editor.
Ik gebruikte de Grootte aanpassen ... functie in de Preview-app op Mac OS X.
Vergeet niet om de afbeeldingen een beschrijvende naam te geven en deze in uw projectmap op te slaan.
Een extern bestand zal worden gebruikt om de applicatie op verschillende apparaten op volledig scherm weer te geven, de config.lua het dossier. Dit bestand toont de oorspronkelijke schermgrootte en de methode die wordt gebruikt om die inhoud te schalen in het geval de app wordt uitgevoerd in een andere schermresolutie.
toepassing = content = width = 320, height = 480, scale = "letterbox",
Laten we nu de applicatie schrijven!
Open de gewenste Lua-editor (elke teksteditor werkt, maar u hoeft geen syntax te markeren) en bereid u voor op het schrijven van uw geweldige app. Vergeet niet om het bestand op te slaan als main.lua in je projectmap.
We zullen onze code structureren alsof het een Klasse is. Als u ActionScript of Java kent, zou u de structuur vertrouwd moeten vinden.
Necesary Classes Variabelen en constanten Declare Functions contructor (Hoofdfunctie) class methods (other functions) call Hoofdfunctie
display.setStatusBar (display.HiddenStatusBar)
Deze code verbergt de statusbalk. De statusbalk is de balk boven op het scherm van het apparaat die de tijd, het signaal en andere indicatoren toont.
We zullen de Physics-bibliotheek gebruiken om botsingen af te handelen. Gebruik deze code om het te importeren:
Accentsconagua
-- Natuurkunde lokale fysica = vereisen ('fysica') physics.start () 
Een eenvoudige afbeelding wordt gebruikt als achtergrond voor de applicatie-interface, de volgende regel code slaat deze op.
-- Graphics - [Background] local bg = display.newImage ('bg.png') 
Dit is de titelweergave, het is het eerste interactieve scherm dat in onze game verschijnt. Deze variabelen slaan de componenten op:
-- [Title View] lokale titel local playBtn local creditsBtn local titleView
Deze weergave toont de credits en copyright van het spel. Deze variabele wordt gebruikt om het op te slaan:
-- [CreditsView] local creditsView
De achtergrondniveau, voegt ook het score tekstveld toe.
-- Game Achtergrond lokale gameBg
Een instructiesbericht verschijnt aan het begin van het spel, het wordt na 2 seconden getweend.
-- Instructies lokale ins
De grafische afbeelding. Het doel van het spel is om het op en neer te bewegen in het scherm om de kersen te verzamelen.
-- Struisvogel lokale struisvogel
De kersenafbeelding. Er zijn ook slechte kersen die ervoor zorgen dat je het spel verliest.
-- Cherrys lokale kersen
De pad-afbeeldingen. Tik erop om het personage te verplaatsen.
-- Pad lokaal lokaal op
Dit is de waarschuwing die wordt weergegeven wanneer een slechte kers wordt verzameld. Het voltooit het level en beëindigt het spel.
-- Lokale alert melden
We gebruiken Geluidseffecten om het gevoel van het spel te verbeteren, je kunt de muziek vinden die in dit voorbeeld op playonloop.com wordt gebruikt. De geluiden zijn gemaakt in as3sfxr.
-- Klinkt lokaal bgMusic = audio.loadStream ('POL-purple-hills-short.mp3') local cherrySnd = audio.loadSound ('cherry.mp3') local badCherrySnd = audio.loadSound ('badCherry.mp3') Dit zijn de variabelen die we zullen gebruiken. Lees de opmerkingen in de code om meer over hen te weten te komen.
-- Variabele lokale timerSrc - voeg cherry timer toe lokale yPos = 108, 188, 268 - mogelijke struisvogel y positioneert lokale snelheid = 5 - cherry speed lokale snelheid Timer - timer om de snelheid van de cherrys te veranderen
Verklaar alle functies als lokaal aan het begin.
-- Lokale functies Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local startGame = local createCherry = local movePlayer = local increaseSpeed = lokale update = local onCollision = lokale alert =
Vervolgens maken we de functie waarmee alle spellogica wordt geïnitialiseerd:
functie Main () - code ... einde
Nu plaatsen we TitleView in de fase en roepen we een functie aan die de tik luisteraars naar de knoppen.
functie Main () titleBg = display.newImage ('title.png', 113, 43) playBtn = display.newImage ('playBtn.png', 219, 160) creditsBtn = display.newImage ('creditsBtn.png', 205, 223) titleView = display.newGroup (bg, titleBg, playBtn, creditsBtn) startButtonListeners ('add') einde Deze functie voegt de nodige luisteraars toe aan de TitleView toetsen.
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 creditsscherm wordt weergegeven wanneer de gebruiker op de knop Over tikt. EEN 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', -130, display.contentHeight-140) transition.to (creditsView, time = 300, x = 65, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) einde Wanneer het creditsscherm wordt aangebroken, wordt het uit het werkgebied geschud en verwijderd.
functie hideCredits: tik op (e) playBtn.isVisible = true creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil end) end Wanneer de Spelen op de knop wordt getikt, de titelweergave wordt 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) De volgende regels voegen de spelinstructies toe.
-- Instructies Message ins = display.newImage ('ins.png', 187, 199) Dit deel maakt het Score TextField op het podium.
-- TextFields scoreTF = display.newText ('0', 258, 26.5, 'Marker Felt', 16) scoreTF: setTextColor (184, 165, 104) Voeg het struisvogel-karakter toe aan het niveau.
-- Struisvogelstruis = display.newImage ('ostrich.png', 11, 180) Dit zijn de bedieningselementen op het scherm voor het spel.
-- Pad omhoog = display.newImage ('up.png', 418, 20) down = display.newImage ('down.png', 418, 258) up.name = 'up' down.name = 'down' Vervolgens voegen we fysica toe aan de game-objecten. We maken ook een Tafel voor de kersen en bel de gameListeners functie.
-- Add Ostrich Physics physics.addBody (struisvogel) ostrich.isSensor = true cherrys = display.newGroup () gameListeners ('add') einde Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
functie gameListeners (actie) if (action == 'add') en ins: addEventListener ('tap', startGame) Runtime: addEventListener ('enterFrame', update) up: addEventListener ('tap', movePlayer) down: addEventListener (' tik op ', movePlayer) speedTimer = timer.performWithDelay (5000, increaseSpeed, 5) else Runtime: removeEventListener (' enterFrame ', update) up: removeEventListener (' tap ', movePlayer) down: removeEventListener (' tap ', movePlayer) timer. cancel (timerSrc) timerSrc = nil timer.cancel (speedTimer) speedTimer = nil end end In dit deel verwijderen we het instructiebericht, beginnen we met het spelen van achtergrondmuziek van de game en maken we een timer die elke 400 milliseconden een kers zal toevoegen.
function startGame () ins: removeEventListener ('tap', startGame) display.remove (ins) audio.play (bgMusic, loops = -1, channel = 1) timerSrc = timer.performWithDelay (400, createCherry, 0) einde Het volgende codefragment maakt een gewone of slechte kers op basis van een willekeurig getal en plaatst deze op het scherm. Het resulterende object wordt toegevoegd aan de physics-engine om te controleren op botsingen.
functie createCherry () local cherry local rnd = math.floor (math.random () * 4) + 1 if (rnd == 4) then cherry = display.newImage ('badCherry.png', display.contentWidth, yPos [math .floor (math.random () * 3) +1]) cherry.name = 'slecht' anders cherry = display.newImage ('cherry.png', display.contentWidth, yPos [math.floor (math.random () * 3) +1]) cherry.name = 'cherry' end - Cherry physics physics.addBody (cherry) cherry.isSensor = true cherry: addEventListener ('collision', onCollision) cherrys: insert (cherry) end We veranderen de Y-positie van de struisvogel met behulp van het controlepad dat we eerder hebben gemaakt.
functie movePlayer (e) if (e.target.name == 'up' en ostrich.y ~ = 122) dan ostrich.y = ostrich.y - 80 elseif (e.target.name == 'down' en struisvogel. y ~ = 282) en dan ostrich.y = struisvogel.y + 80 einde
Een timer verhoogt de snelheid elke 5 seconden. Er wordt een pictogram weergegeven om de speler op de hoogte te stellen van de snelheidsverandering.
function increaseSpeed () speed = speed + 2 - icon local icon = display.newImage ('speed.png', 204, 124) transition.from (icon, time = 200, alpha = 0.1, onComplete = function () timer .performWithDelay (500, function () transition.to (pictogram, time = 200, alpha = 0.1, onComplete = function () display.remove (pictogram) icon = nuleinde) einde) einde) einde Deze functie zorgt voor de beweging van de kersen. Het gebruikt de snelheidsvariabele om te bepalen hoeveel pixels de kers elk beeld moet verplaatsen.
functie-update () if (cherrys ~ = nihil) en dan voor i = 1, cherrys.numChildren do cherrys [i] .x = cherrys [i] .x - speed end end end
Nu controleren we of de kers botst met de struisvogel met behulp van de volgende code. De score stijgt wanneer een normale kers botst en een waarschuwing wordt gegeven wanneer een slechte kers wordt aangeraakt. In beide gevallen wordt de kers verwijderd en wordt er een geluid gespeeld.
functie onCollision (e) e.target:removeEventListener('collision ', onCollision) display.remove (e.target) if (e.target.name ==' cherry ') then --Score scoreTF.text = tostring (tonumber ( scoreTF.text) + 50) audio.play (cherrySnd) - Bad cherry elseif (e.target.name == 'bad') en audio.play (badCherrySnd) alert () end-end De waarschuwingsfunctie maakt een waarschuwingsweergave, animeert deze en beëindigt het spel.
function alert () audio.stop (1) audio.dispose () bgMusic = nil gameListeners ('rmv') alertView = display.newImage ('alert.png', 160, 115) transition.from (alertView, time = 300 , xScale = 0.5, yScale = 0.5) lokale score = display.newText (scoreTF.text, (display.contentWidth * 0.5) - 12, (display.contentHeight * 0.5) + 5, 'Marker Felt', 18) score: setTextColor (184, 165, 104) - Wacht 100 ms om de natuurkunde te stoppen timer.performWithDelay (1000, function () physics.stop () end, 1) end Om het spel te starten, de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:
Hoofd()
Het bestand Default.png is een afbeelding die juist 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 serie hebben we geleerd over fysisch gedrag, tikluisteraars en botsingen. Deze vaardigheden kunnen heel nuttig zijn in een groot aantal spellen!
Experimenteer met het eindresultaat en probeer je aangepaste versie van het spel te maken!
Ik hoop dat je deze tutorial leuk vond en het nuttig vond. Bedankt voor het lezen!
