In deze zelfstudie laat ik je zien hoe je een schietspel met beperkte kogels maakt met de Corona SDK. Het doel van het spel is om een hoog aantal doelen te schieten met slechts vijf kogels. Tijdens deze tutorial werk je met timers, aanraakbedieningen en natuurkunde. Lees verder voor meer informatie!
Met behulp van de meegeleverde grafische afbeeldingen coderen we een schietspel met Lua en de Corona SDK API's. In het spel gebruikt de speler vijf kogels om op zijn vijanden te schieten. Elke vijand maakt vervolgens nog eens vier kogels die helpen een groter aantal doelen te nemen. Tijdens het coderen kun je de parameters in de code aanpassen om je spel aan te passen.
Onze eerste stap is het selecteren van het platform waarop we onze app willen uitvoeren. Dit is belangrijk, zodat we de grootte van onze afbeeldingen kunnen kiezen.
Het iOS-platform heeft de volgende kenmerken:
Omdat Android een open platform is, zijn er 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, specifiek om te ontwikkelen voor distributie naar een iPhone / iPod touch, maar de hier gepresenteerde code is ook van toepassing op Android-ontwikkeling met de Corona SDK.
We gebruiken een eenvoudige interface met meerdere vormen, knoppen en bitmaps. 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 dat doen in 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 maakt de toepassing volledig scherm op verschillende apparaten (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 Lua-editor van uw voorkeur (elke teksteditor werkt, maar u hoeft geen syntax te markeren) en bereid u voor op het schrijven van uw nieuwe 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, vindt u de structuur vertrouwd.
Noodzakelijke klassenvariabelen 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:
-- Natuurkunde lokale fysica = vereisen ('fysica') physics.start ()
De volgende regel code creëert een eenvoudige achtergrond voor de toepassingsinterface.
-- Afbeeldingen - [Achtergrond] lokale gameBg = display.newImage ('gameBg.png')
Dit is de titelweergave; het zal het eerste interactieve scherm zijn 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 slaat het op:
-- [CreditsView] local creditsView
Een instructiesbericht verschijnt aan het begin van het spel en tween na twee seconden. U kunt de tijd later in de code wijzigen.
-- Instructies lokale ins
Dit is de afbeelding van het torentje, deze zal in het midden van onze game worden geplaatst.
-- Torentje lokaal torentje
Vijanden verschijnen vanaf de rand van het scherm, de volgende Groep
slaat ze op.
-- Vijandelijke lokale vijanden
Dit is de waarschuwing die wordt weergegeven als de speler geen kogels heeft. Het toont de score en eindigt het spel.
-- Lokale alert melden
We zullen geluidseffecten gebruiken om het gevoel van het spel te verbeteren. De geluiden die in deze game worden gebruikt, zijn gemaakt in as3sfx en de achtergrondmuziek is van PlayOnLoop.
-- Klinkt lokaal bgMusic = audio.loadStream ('POL-hard-corps-short.mp3') local shootSnd = audio.loadSound ('shoot.wav') local exploSnd = audio.loadSound ('explo.wav')
Dit zijn de variabelen die we zullen gebruiken. U kunt de opmerkingen in de code lezen om meer over hen te weten te komen.
-- Variabele lokale timer Lokale lokale yPos = 58, 138, 218 --positieve Y-posities voor lokale snelheid vijanden = 3 lokale doelX - verkoop positie van vijand wanneer lokale doelwit geschoten
Verklaar alle functies als lokaal aan het begin.
-- Lokale functies Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local createEnemy = local shoot = lokale update = local onCollision = lokale addExBullets = lokale alert =
Vervolgens maken we de functie die de spellogica initialiseert:
functie Main () - code ... einde
Nu plaatsen we de TitleView in de fase en roepen we een functie aan die de tik luisteraars naar de knoppen.
functie Main () titleBg = display.newImage ('title.png') playBtn = display.newImage ('playBtn.png', 212, 163) creditsBtn = display.newImage ('creditsBtn.png', 191, 223) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end
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 aftitelingscherm wordt getoond 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', -110, display.contentHeight-80) transition.to (creditsView, time = 300, x = 55, 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 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 paar 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 het instructiesbericht toe.
ins = display.newImage ('ins.png', 135, 255) transition.from (ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transition.to (ins , time = 200, alpha = 0.1, onComplete = function () display.remove (ins) ins = nil end) end) end)
In dit gedeelte worden de opsommingstekens linksboven in het scherm toegevoegd. Het geeft de beschikbare opnamen weer die de speler heeft achtergelaten.
-- Opsommingstekens Left bullets = display.newGroup () bulletsLeft = display.newGroup () voor i = 1, 5 do local b = display.newImage ('bullet.png', i * 12, 12) bulletsLinks: insert (b) end
Dit is het Score TextField gemaakt in de rechterbovenhoek van het werkgebied:
-- TextFields scoreTF = display.newText ('0', 70, 23.5, 'Courier Bold', 16) scoreTF: setTextColor (239, 175, 29)
Nu zullen we het torentje op het podium plaatsen.
-- Turret torentje = display.newImage ('turret.png', 220, 301)
Vervolgens maken we de tabel vijanden, roepen we een functie aan die de luisteraars van het spel toevoegt en begint de achtergrondmuziek.
vijanden = display.newGroup () gameListeners ('add') audio.play (bgMusic, loops = -1, channel = 1) end
Deze functie voegt de nodige luisteraars toe om de spellogica te starten:
functie gameListeners (actie) if (action == 'add') then timerSrc = timer.performWithDelay (1200, createEnemy, 0) Runtime: addEventListener ('enterFrame', update) else timer.cancel (timerSrc) timerSrc = nihil Runtime: removeEventListener ('enterFrame', update) gameBg: removeEventListener ('tap', shoot) end end
De volgende functie maakt de vijanden. Het begint met het selecteren van een willekeurige Y-positie uit de eerder gemaakte tabel en voegt dan fysica toe aan het nieuw gemaakte object. We voegen een aanvalsluisteraar toe aan elke vijand en voegen deze ook toe aan de tabel met vijanden.
functie createEnemy () lokale vijand lokaal rnd = math.floor (math.random () * 4) + 1 vijand = display.newImage ('enemy.png', display.contentWidth, yPos [math.floor (math.random () * 3) +1]) enemy.name = 'slecht' - Vijandelijke fysica fysica.addBody (vijand) vijand.isSensor = ware vijand: addEventListener ('botsing', onCollision) vijanden: insert (vijand) einde
Wanneer de speler op het scherm tikt, wordt er een kogel gemaakt en klinkt er een geluid. Het heeft fysische eigenschappen die botsingen detecteren.
functie shoot () audio.play (shootSnd) local b = display.newImage ('bullet.png', turret.x, turret.y) physics.addBody (b) b.isSensor = true bullets: insert (b)
Verwijder een kogel uit het gebied "Opsommingstekens links" links bovenaan het werkgebied.
-- Verwijder kogels Linkse kogelsLinks: verwijderen (bulletsLeft.numChildren) - Beëindig spel 4 seconden na laatste opsommingsteken if (bulletsLeft.numChildren == 0) en vervolgens timer.performWithDelay (4000, alert, 1) einde
De volgende functie voert elk frame uit. Hier gebruiken we het om elke vijand in de tafel van de vijand te verplaatsen.
functie-update () - Verplaats vijanden als (vijanden ~ = nul) en dan voor i = 1, vijanden.num Kinderen doen vijanden [i] .x = vijanden [i] .x - speed end end
Een soortgelijke methode wordt gebruikt voor de kogels.
-- Verplaats Shoot-kogels als (opsommingstekens [1] ~ = nihil) en dan voor i = 1, kogels.num Kinderen doen kogels [i] .y = kogels [i] .y - speed * 2 end-end
Wanneer een kogel een vijand raakt, vormen er vier extra kogels die op vier verschillende manieren bewegen. Deze code verplaatst elke kogel in de juiste richting.
-- Verplaats Explosion Bullets als (exploBullets [1] ~ = nil) en dan voor j = 1, #exploBullets doen als (exploBullets [j] [1] .y ~ = nil) en exploBullets [j] [1] .y = exploBullets [ j] [1] .y + speed * 2 end if (exploBullets [j] [2] .y ~ = nil) en exploBullets [j] [2] .y = exploBullets [j] [2] .y - speed * 2 end if (exploBullets [j] [3] .x ~ = nil) en exploBullets [j] [3] .x = exploBullets [j] [3] .x + speed * 2 end if (exploBullets [j] [4 ] .x ~ = nil) en vervolgens exploBullets [j] [4] .x = exploBullets [j] [4] .x - speed * 2 end end end end
Deze functie wordt uitgevoerd wanneer de kogel botst met een vijand. Het speelt een geluid, roept de functie aan die de vier extra kogels toevoegt, verhoogt de score en verwijdert de objecten die betrokken zijn bij de botsing.
function onCollision (e) audio.play (exploSnd) targetX = e.target.x targetY = e.target.y timer.performWithDelay (100, addExBullets, 1) - Verwijder botsobjecten display.remove (e.target) e. target = nil display.remove (e.other) e.other = nil - verhoog score ScoreTF.text = tostring (tonumber (scoreTF.text) + 50) scoreTF.x = 90 einde
Deze code maakt en plaatst de vier extra kogels in de juiste positie om te worden verplaatst door de updatefunctie.
functie addExBullets () - Explosie kogels lokale eb = lokale b1 = display.newImage ('bullet.png', targetX, targetY) local b2 = display.newImage ('bullet.png', targetX, targetY) local b3 = display.newImage ('bullet.png', targetX, targetY) local b4 = display.newImage ('bullet.png', targetX, targetY) physics.addBody (b1) b1.isSensor = true physics.addBody (b2) b2. isSensor = ware fysica.addBody (b3) b3.isSensor = true physics.addBody (b4) b4.isSensor = true table.insert (eb, b1) table.insert (eb, b2) table.insert (eb, b3) tafel .insert (eb, b4) table.insert (exploBullets, eb) einde
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) - 18, (display.contentHeight * 0.5) + 5, 'Courier Bold', 18) score: setTextColor (44, 42, 49) - Wacht 100 ms om de natuurkunde te stoppen timer.performWithDelay (1000, function () physics.stop () end, 1) end
Om het spel te beginnen, is 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 goed 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-compileermachine.
Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een mooi 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 geen afgeronde hoeken of transparante schittering te hebben, iTunes en iPhone doen dat voor u.
Het is tijd voor de laatste test! Open de Corona Simulator, blader naar uw projectmap en klik 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 zelfstudie leerden we over natuurkunde, timers, aanraakluisteraars en andere vaardigheden die nuttig zijn in een breed scala aan games. Experimenteer met het eindresultaat en probeer je aangepaste versie van het spel te maken!
Ik hoop dat je deze serie leuk vond en vond het nuttig. Bedankt voor het lezen!