Maak een Lunar Lander geïnspireerd spel - Interface Creation

In deze tutorialserie leer je hoe je een door Lunar Lander geïnspireerde game maakt. Het doel van het spel is om de sterren op het scherm te grijpen en vervolgens veilig op de aangegeven plek te landen. Lees verder!


Stap 1: Applicatieoverzicht

Met behulp van vooraf gemaakte afbeeldingen coderen we een leuk spel met Lua en de Corona SDK API's.

De speler kan een puck raken door de paddle op het scherm te slepen. Je kunt de parameters in de code aanpassen om het spel aan te passen.


Stap 2: doelapparaat

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 de volgende kenmerken:

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

Omdat Android een open platform is, zijn er veel 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, 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.


Stap 3: Interface

Er zal een eenvoudige en vriendelijke interface worden gebruikt. Het gaat om meerdere vormen, knoppen, bitmaps en meer.

De interface grafische hulpmiddelen die nodig zijn voor deze tutorial zijn te vinden in de bijgevoegde download.

Vrijheid lettertype (gratis voor commercieel gebruik). Moon and Rocket Graphics van openclipart.org.


Stap 4: grafische afbeeldingen exporteren

Afhankelijk van het apparaat dat u hebt geselecteerd, moet u mogelijk de afbeeldingen in de aanbevolen PPI exporteren. U kunt dit 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.


Stap 5: Geluid

We gebruiken Geluidseffecten om het spelgevoel te verbeteren. De geluiden die in deze app worden gebruikt, zijn gegenereerd door AS3SFXR.


Stap 6: App-configuratie

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

Stap 7: Main.lua

Laten we 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.


Stap 8: codestructuur

We zullen onze code structureren alsof het een Klasse is. Als u ActionScript of Java kent, zou u de structuur vertrouwd moeten vinden.

 Noodzakelijke klassenvariabelen en constanten Declare Functions constructor (Hoofdfunctie) class methods (other functions) call Hoofdfunctie

Stap 9: statusbalk verbergen

 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.


Stap 10: Importeer natuurkunde

We zullen de Physics-bibliotheek gebruiken om botsingen af ​​te handelen. Gebruik deze code om de natuurkundebibliotheek te importeren:

 lokale fysica = vereisen ('fysica') physics.start ()

Stap 11: Multitouch

We gebruiken ook de multi-touch-bibliotheek om meerdere vingers op het scherm te verwerken. Gebruik deze code om het te importeren:

 -- Multitouch system.activate ('multitouch')

Stap 12: Achtergrond

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

Stap 13: Titeloverzicht

Dit is de titelweergave, het is het eerste interactieve scherm dat in onze game verschijnt. Deze variabelen slaan de componenten op:

 -- [Title View] lokale titelBg local playBtn local creditsBtn local titleView

Stap 14: Credits View

Deze weergave toont de credits en copyright van het spel, deze variabele zal worden gebruikt om het op te slaan.

 -- [CreditsView] local creditsView

Stap 15: Gamepad

Deze afbeelding wordt bovenop onze vorige achtergrond geplaatst. In de volgende regels worden de afbeeldingen voor de schermpad opgeslagen.

 -- [Game achtergrond] lokale gameBg - [Pad] lokaal lokaal lokaal links lokaal rechts

Stap 16: Manen

Dit zijn de manen-afbeeldingen, waarnaar wordt verwezen in de volgende variabelen. De grotere maan zal worden gebruikt als de landingsplek.

 -- [Manen] lokale m1 lokale m2 lokale m3 lokale bigM

Stap 17: Sterren

De items om te verzamelen. Vier items moeten vóór het landen worden verzameld.

 -- Sterren lokaal s1 lokaal s2 lokaal s3 lokaal s4

Stap 18: Rocket

Dit is de afbeelding die wordt bestuurd door de speler, met behulp van de pad op het scherm.

 -- Rocket (speler) lokale raket

Stap 19: Landingspunt

De indicator van het landingspunt wordt actief wanneer de vier sterren worden verzameld.


Stap 20: Variabelen

Dit zijn de variabelen die we zullen gebruiken. Lees de opmerkingen in de code om meer te weten te komen over hoe ze zullen passen.

 -- Variabelen lokale pijl lokale sterren = 0 - sterren verzameld lokale richting - huidige richting lokale hitMoon = false - gebruikt voor botsing detectie op update lokale starHit lokale hitStar = false - gebruikt voor botsing detectie op update lokale hitGoal = false - gebruikt voor collision detection op update local complete

Stap 21: Functies verklaren

Verklaar alle functies als lokaal aan het begin.

 -- Lokale functies Main =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local movePlayer =  lokale update =  local onCollision = 

Stap 22: Constructor

Vervolgens maken we de functie waarmee alle spellogica wordt geïnitialiseerd:

 functie Main () - code ... einde

Stap 23: Titelweergave toevoegen

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 ('titleBg.png', display.contentCenterX - 100.5, 20.5) creditsBtn = display.newImage ('creditsBtn.png', 14, display.contentHeight - 57) titleView = display.newGroup ( titleBg, creditsBtn) startButtonListeners ('add') end

De volgende keer…

In dit deel van de serie heb je de interface en de basisinstellingen van de game geleerd. In het volgende en laatste deel van de serie behandelen we de gamepad-acties, botsingsdetectie en de laatste stappen die moeten worden genomen voorafgaand aan de release, zoals app-testen, het maken van een startscherm, het toevoegen van een pictogram en, ten slotte, het bouwen van de app. Blijf op de hoogte voor het laatste deel!