Corona SDK een Whack-a-Mol-game maken - Applicatie-instellingen

In deze tutorialserie leer je hoe je je eigen versie van het klassieke Whack-a-Mole-spel kunt maken. In plaats van mollen te gebruiken, zullen onze ongelukkige wezens van keuze echter wormen zijn. 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 op de wormen op het scherm tikken en punten krijgen.


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 deze kenmerken:

  • iPad: 1024x768px, 132 ppi
  • iPhone / iPod Touch: 320 x 480 px, 163 ppi
  • Iphone 4: 960x640 px, 326 ppi

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

  • Google Nexus One: 480x800px, 254 ppi
  • Motorola Droid X: 854x480 px, 228 ppi
  • HTC Evo: 480x800px, 217 ppi

In deze zelfstudie concentreren we ons op het iOS-platform met het grafische ontwerp, dat specifiek wordt ontwikkeld 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 gebruiksvriendelijke interface worden gebruikt, dit omvat meerdere vormen, knoppen, bitmaps en meer. De wormafbeelding die in deze zelfstudie wordt gebruikt, is gedownload van hier onder a Creative Commons Licentie.

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


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 afbeeldingseditor.

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 gevoel van het spel te verbeteren, je kunt het geluid dat in dit voorbeeld wordt gebruikt op Soungle.com vinden met het sleutelwoord raken.


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.

 Necesary Classes Variabelen en constanten Declare Functions contructor (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: MovieClip-bibliotheek

 lokale filmclip = vereisen ('filmclip')

Geanimeerde afbeeldingen worden in dit spel gebruikt, de Corona filmclip-bibliotheek maakt dit een stuk eenvoudiger.


Stap 11: Achtergrond

Een eenvoudige bruine gradiënt wordt gebruikt als de achtergrond voor de applicatie-interface, de volgende regel code slaat deze op.

 -- Graphics - [Background] local bg = display.newImage ('gameBg.png')

Stap 12: Titeloverzicht

Dit is de titelweergave, het zal het eerste interactieve scherm zijn dat in onze game verschijnt, deze variabelen slaan de componenten op.

 lokale titel lokale playBtn lokale creditsBtn lokale titelView

Stap 13: Credits

In deze weergave worden de aftiteling, het jaar en het auteursrecht van het spel weergegeven. Deze variabele wordt gebruikt om het spel op te slaan.

 lokale tegoeden

Stap 14: Score

De score wordt afgehandeld door de volgende variabele.

 lokale score

Stap 15: Wormen

De volgende variabelen worden gebruikt voor het opslaan van de wormafbeeldingen en de laatste worm die zichtbaar is geweest.

 local w1 local w2 local w3 local w4 local w5 local w6 local w7 local w8 local worms local lastWorm = 

Stap 16: Code Review

Hier is de volledige code die in deze zelfstudie is geschreven, samen met opmerkingen om u te helpen bij het identificeren van elk onderdeel:

 -- Whack A Worm Game - Ontwikkeld door Carlos Yanez - Hide Status Bar display.setStatusBar (display.HiddenStatusBar) - Importeer MovieClip local movieclip = require ('movieclip') - Graphics - [Achtergrond] local bg = display.newImage ('gameBg.png') - [Titelweergave] lokale titelBg lokale playBtn lokale creditsBtn lokale titelView - [Credits] lokale kredietenView - [Score] lokale score - [Worms] lokale w1 lokale w2 lokale w3 lokale w4 lokale w5 lokale w6 lokale w7 lokale w8 lokale wormen local lastWorm = 

De volgende keer…

In dit deel van de serie hebt u de interface en de basisinstellingen van de toepassing geleerd. Houd ons in de gaten voor deel twee, waar we de logica van de applicatie, het gedrag van knoppen en meer zullen behandelen. Tot de volgende keer!