Corona SDK maak een schietspel

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!

1. Toepassingsoverzicht

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.


2. Doelapparaat

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:

  • iPad 1/2 / Mini: 1024x768px, 132 ppi
  • iPad Retina: 2048 x 1536, 264 ppi
  • iPhone / iPod Touch: 320 x 480 px, 163 ppi
  • iPhone / iPod Retina: 960x640 px, 326 ppi
  • iPhone 5 / iPod Touch: 1136x640, 326 ppi

Omdat Android een open platform is, zijn er verschillende apparaten en resoluties. Een paar van de meest voorkomende schermkenmerken zijn:

  • Asus Nexus 7 Tablet: 800x1280px, 216 ppi
  • Motorola Droid X: 854x480 px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

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.


3. Interface

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.


4. Grafieken exporteren

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.


5. App-configuratie

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",

6. Main.lua

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.


7. Codestructuur

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

8. Verberg Statusbalk

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.


9. Importeer natuurkunde

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 ()

10. Achtergrond

De volgende regel code creëert een eenvoudige achtergrond voor de toepassingsinterface.

-- Afbeeldingen - [Achtergrond] lokale gameBg = display.newImage ('gameBg.png')

11. Titelweergave

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

12. Credits bekijken

Deze weergave toont de credits en copyright van het spel. Deze variabele slaat het op:

-- [CreditsView] local creditsView

13. Instructies Bericht

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

14. Turret

Dit is de afbeelding van het torentje, deze zal in het midden van onze game worden geplaatst.

-- Torentje lokaal torentje

15. Vijand

Vijanden verschijnen vanaf de rand van het scherm, de volgende Groep slaat ze op.

-- Vijandelijke lokale vijanden

16. Alert

Dit is de waarschuwing die wordt weergegeven als de speler geen kogels heeft. Het toont de score en eindigt het spel.

-- Lokale alert melden

17. Geluiden

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')

18. Variabelen

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

19. Declareer functies

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 = 

20. Constructor

Vervolgens maken we de functie die de spellogica initialiseert:

functie Main () - code ... einde

21. Titelweergave toevoegen

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

22. Start-knop Luisteraars

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

23. Credits tonen

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

24. Verberg tegoed

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

25. Game weergave tonen

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)

26. Instructies Bericht

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)

27. Bullets linker indicator

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

28. Score TextField

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)

29. torentje

Nu zullen we het torentje op het podium plaatsen.

-- Turret torentje = display.newImage ('turret.png', 220, 301)

30. Vijanden Tafel- en achtergrondmuziek

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

31. Game Luisteraars

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

32. Maak vijand

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

33. Schiet

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)

34. Bullets naar links bijwerken

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

35. Verplaats vijanden

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

36. Verplaats schiet kogels

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

37. Verplaats Explosion Bullets

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

38. Botsingen

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

39. Explosieopbrekingen toevoegen

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

40. Waarschuwing

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

41. Hoofdfunctie oproepen

Om het spel te beginnen, is de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:

Hoofd()

42. Scherm laden

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.


43. Pictogram

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.


44. Testen in Simulator

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!


45. Bouw

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!


Conclusie

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!