Share
In deze lesreeks gebruiken we de Corona SDK om een Frenzic geïnspireerd spel te maken. Deze zelfstudie richt zich in 15 stappen op de applicatie-instelling en kernstructuur. Lees verder!
Met behulp van vooraf gemaakte afbeeldingen coderen we een leuk spel met js en de Corona SDK API's.
De gebruiker kan tegen de tijd spelen om de vierkante containers te voltooien door erop te tikken. Het vullen van een container met een enkele kleur geeft meer punten!
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:
Omdat Android een open platform is, zijn er veel 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, 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.
Er wordt een kleurrijke, mooi uitziende interface weergegeven, 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.
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 Pas grootte aan? 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.
We gebruiken Geluidseffecten om het gevoel van het spel te verbeteren, je kunt de geluiden die in dit voorbeeld worden gebruikt in Soungle.com vinden met de sleutelwoorden klok en gezoem.
Voordat we een code schrijven, zullen we een paar opties definiëren door een build.settings het dossier. Dit bestand bevat parameters die worden toegepast op de uiteindelijke versie van uw programma, evenals het lettertype dat we in onze app willen insluiten.
settings = iphone = plist = UIStatusBarHidden = true, UIPrerenderedIcon = true, UIAppFonts = "Orbitron.ttf",,
Een ander extern bestand zal worden gebruikt om de applicatie te schalen naar volledig scherm op verschillende apparaten, de Config.js 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 de applicatie schrijven!
Open de js-editor van je voorkeur (elke teksteditor werkt, maar je hebt geen syntaxmarkering) en bereid je voor om je geweldige app te schrijven. Vergeet niet om het bestand op te slaan als main.js in je projectmap.
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
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.
Dit is het hoofdscherm van de applicatie, het zal de eerste interactieve weergave zijn die in onze game verschijnt. Deze variabelen slaan de achtergrond en de TitleView-componenten op.
-- Graphics - [Background] local bg - [Title View] lokale titel local startB local creditsB - [TitleView Group] lokale titelView
De volgende variabelen slaan de levens op en scoren teksten evenals de waarde ervan.
-- [Score & levens] lokale levensTekst lokale levensTF lokale levens lokale scoreTekst lokale scoreTF lokale score
Deze afbeeldingen hebben een tik luisteraar om de vierkanten naar de vooraf gedefinieerde positie te verplaatsen, vul ze om punten te winnen!
Een andere variabele wordt gedeclareerd in deze code, een groep die alle afbeeldingen op het spelscherm zal opslaan.
lokaal lokaal lokale lokale lokale lokale lokale houder - Game View Group lokale gameView
Drie blokken zijn beschikbaar in het spel, vullen een container met een enkele blokkleur om bonuspunten te winnen. De blokken worden willekeurig aan het spel toegevoegd en opgeslagen in een tabel die we later zullen maken.
Dit scherm toont de credits, het jaar en het copyright van het spel. Deze variabele wordt gebruikt om een verwijzing naar de weergave op te slaan:
-- [CreditsView] lokale kredieten
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten, sommige van hun namen verklaren zichzelf, dus daar zal geen commentaar zijn.
local blockColor = 'orange', 'green', 'purple' - Gebruikt voor het genereren van een willekeurig blok lokale blokken = - Bewaar alle blokken lokale posities = 5, 35 - Verkrijgbare blokken posities ten opzichte van de container local currentXPosition - Gebruikt om het blok op de containers te plaatsen local currentYPosition local eventTarget - Bewaart de laatste container getapt op lokale timerSource - Gebruikt als een id van de lokale timer woont lokale score lokale bel - Belle-geluid lokale bell4 - Bell geluid voor complete lokale buzz - Buzz-geluid gebruikt wanneer speler een live verliest
Hier is de volledige code die in deze zelfstudie is geschreven, samen met opmerkingen om u te helpen bij het identificeren van elk onderdeel:
-- Sorteer 'Frenzic' zoals Game - Ontwikkeld door Carlos Yanez - Hide Status Bar display.setStatusBar (display.HiddenStatusBar) - Graphics - [achtergrond] local bg - [Titeloverzicht] lokale titel local startB local creditsB - [ TitleView Group] lokale titelView - [Score & levens] local livesText local livesTF local lives local scoreTekst local scoreTF lokale score - [GameView] lokaal lokaal lokaal lokaal lokaal links lokaal houder - [GameView Group] lokaal spelView - [ CreditsView] local credits - Variabelen local blockColor = 'orange', 'green', 'purple' local blocks = lokale posities = 5, 35 local currentXPosition local currentYPosition local eventTarget local timerBron lokale lives local score local bell lokale bell4 lokale buzz
In dit deel van de serie heb je de interface en de basisinstellingen van de game geleerd. Blijf op de hoogte voor deel twee, waar we de verschillende schermweergaven behandelen en begin met het plaatsen van de grafische afbeeldingen om de interface te bouwen. Tot de volgende keer!
Accentsconagua