Maak een op fysica gebaseerd puzzelspel - Interface Creation

In deze tutorialserie laat ik je zien hoe je een op fysica gebaseerd puzzelspel kunt maken in Corona SDK. Je leert over manipulatie van de fysica en aanraakbedieningen. Het doel van het spel is om de bal in de container te krijgen door op de juiste vakken te tikken. Lees verder!


Ook verkrijgbaar in deze serie:

  1. Maak een op fysica gebaseerd puzzelspel - Interface Creation
  2. Maak een op fysica gebaseerd puzzelspel - Interactie toevoegen

1. Toepassingsoverzicht

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 de vakken op het podium te verwijderen. Je kunt de parameters in de code aanpassen om het spel aan te passen.


2. Doelapparaat

Eerst gaan we het platform kiezen waarbinnen we onze app willen uitvoeren. Hierdoor kunnen we de grootte kiezen voor de afbeeldingen die we zullen gebruiken.

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: 960x640px, 326 PPI
  • iPhone 5 / iPod Touch: 1136x640, 326 PPI

Omdat Android een open platform is, zijn er veel verschillende apparaten en resoluties. Hier zijn enkele van de meer algemene schermkenmerken.

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

In deze tutorial concentreren we ons op het iOS-platform met het grafische ontwerp, specifiek ontwikkeld voor distributie naar een iPhone / iPod touch. De hier gepresenteerde code moet ook van toepassing zijn op Android-ontwikkeling met de Corona SDK.


3. Interface

Er zal een eenvoudige en vriendelijke interface worden gebruikt. Dit omvat meerdere vormen, knoppen, bitmaps en meer.

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 Voorbeeld 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

Er wordt een extern bestand gebruikt om de toepassing op verschillende apparaten op volledig scherm weer te geven. Dit is 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 de applicatie schrijven!

Open je Lua-editor en maak je klaar om je geweldige app te schrijven. Vergeet niet om het bestand op te slaan als main.lua in je projectmap.


7. Codestructuur

We zullen onze code structureren alsof het een a is Klasse. Als je weet ActionScript of Java, je zult de structuur vertrouwd vinden.

 Necesary Classes Variabelen 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 de onderstaande code om het te importeren.

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

10. Achtergrond

Een eenvoudige afbeelding wordt gebruikt als achtergrond voor de applicatie-interface. De volgende regel code slaat het op.

 -- Graphics - [Background] local bg = display.newImage ('bg.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 het auteursrecht van de game en deze variabele wordt gebruikt om deze op te slaan.

 -- [CreditsView] local creditsView

13. Dozen

De vakken maken het niveau. Er zijn drie maten in deze applicatie.


14. Instructies Bericht

Een instructiesbericht verschijnt aan het begin van het spel. Het wordt na twee seconden getweend.

 -- Instructies lokale ins

15. Ball

Dit is de grafische bal. Het doel van het spel is om dit item in de doelbox te plaatsen.

 -- Bal lokale bal

16. Doeldoos

Deze code slaat de doeldoosgrafiek op.

 -- Doeldoos lokale gBox

17. Alert

Dit is de waarschuwing die wordt weergegeven wanneer je de game wint. Het voltooit het level en beëindigt het spel.

 -- Lokale alert melden

18. Geluiden

We zullen geluidseffecten gebruiken om het gevoel van het spel te verbeteren. De geluiden die in deze app worden gebruikt, zijn gegenereerd door AS3SFXR.

 -- Klinkt lokaal win = audio.loadSound ('win.caf')

19. Variabelen

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

 -- Variables local lvlImg - slaat de huidige beeldtitel op

20. Declareer functies

Verklaar alle functies als lokaal aan het begin.

 -- Lokale functies Main =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local addBox =  local removeBox =  local onCollision =  local alert = 

21. Constructor

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

 functie Main () - code ... einde

22. Titelweergave toevoegen

Nu plaatsen we de TitleView in de fase en bel een functie die de tik luisteraars naar de knoppen.

 functie Main () titleBg = display.newImage ('titleBg.png', 84, 12) playBtn = display.newImage ('playBtn.png', 220, 150) creditsBtn = display.newImage ('creditsBtn.png', 204, 202) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') einde

De volgende keer…


In dit deel van de serie leerden we over de interface en de basisinstellingen van de game. In het volgende en laatste deel van de serie behandelen we het maken van niveaus, botsingsdetectie en de laatste stappen voorafgaand aan de release. We gaan door app-testen, maken een startscherm, voegen een pictogram toe en ten slotte bouwen we de app. Blijf op de hoogte voor het laatste deel!