Share
In deze tutorialserie leer je hoe je een Teeter Inspired-game maakt. Het doel van het spel is om een bal in evenwicht te brengen en de obstakels te ontwijken om bij het doel te komen. Lees verder!
Met behulp van vooraf gemaakte afbeeldingen coderen we een leuk spel met Lua en de Corona SDK API.
De speler kan de versnellingsmeter van het apparaat gebruiken om een bal over het podium te bewegen, je kunt de parameters in de code aanpassen om het spel aan te passen.
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 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.
Er wordt een eenvoudige en gebruiksvriendelijke interface 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.
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.
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.
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",
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.
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 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.
We zullen de Physics-bibliotheek gebruiken om botsingen af te handelen. Gebruik deze code om het te importeren:
Accentsconagua
local physics = require ('physics') physics.start () physics.setGravity (0, 0) 
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') 
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 titelBg local playBtn local creditsBtn local titleView
Deze weergave toont de credits en copyright van het spel, deze variabele zal worden gebruikt om het op te slaan.
-- [CreditsView] local creditsView
De gameweergave is samengesteld door de speler, obstakels en het doel. Voeg de volgende regels toe aan uw code om met deze elementen om te gaan.
-- [Game View] - [Player] lokale speler - [Bars Table] lokale bars = - [Gatenstabel] lokale holes = - [Doel] lokaal doelpunt
Deze regels slaan een referentie op voor de geluidsbestanden.
lokale bel = audio.loadSound ('bell.caf') local buzz = audio.loadSound ('buzz.caf') Hier is de volledige code die in deze zelfstudie is geschreven, samen met opmerkingen om u te helpen bij het identificeren van elk onderdeel:
-- Teeter like Game - Ontwikkeld door Carlos Yanez - Hide Status Bar display.setStatusBar (display.HiddenStatusBar) - Physics local physics = require ('physics') physics.start () physics.setGravity (0, 0) - Graphics - [Achtergrond] lokaal bg = display.newImage ('bg.png') - [Titeloverzicht] lokale titelBg lokale playBtn lokale creditsBtn lokale titelView - [Credits] local creditsView - [Player] lokale speler - [Bars] Tabel] lokale balken = - [Gatenstabel] lokale gaten = - [Doel] lokaal doel - Klinkt lokaal bell = audio.loadSound ('bell.caf') local buzz = audio.loadSound ('buzz .caf ') Verklaar alle functies als lokaal aan het begin.
local Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local movePlayer = local onCollision = local alert = local dragPaddle =
Vervolgens maken we de functie waarmee alle spellogica wordt geïnitialiseerd:
functie Main () - code ... einde
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') playBtn = display.newImage ('playBtn.png', display.contentCenterX - 35.5, display.contentCenterY + 10) creditsBtn = display.newImage ('creditsBtn.png ', display.contentCenterX - 50.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners (' add ') einde Deze functie voegt de benodigde 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 Het aftitelingscherm wordt weergegeven wanneer de gebruiker op de knop Over tikt, a 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', 0, display.contentHeight + 40) transition.to (creditsView, time = 300, y = display.contentHeight-20, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end 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 Wanneer de Spelen op de knop is getikt, de titelweergave is getweend en verwijderd waardoor de gameweergave wordt onthuld.
functie showGameView: tik op (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Hier plaatsen we het doel in zijn positie. We geven het ook een naam om het te identificeren wanneer een botsing plaatsvindt.
-- Doeldoel = display.newImage ('goal.png') goal.x = 439 goal.y = 31 goal.name = 'g' Muren worden gemaakt rond het podium om te voorkomen dat de bal weggaat.
-- Muren lokaal links = display.newLine (-1, 0, -1, display.contentHeight) local right = display.newLine (display.contentWidth + 1, 0, display.contentWidth + 1, display.contentHeight) local top = display. newLine (0, -3, display.contentWidth, -3) local bottom = display.newLine (0, display.contentHeight, display.contentWidth, display.contentHeight)
Deze balken zijn obstakels in het werkgebied. Voeg ze toe met de volgende regels:
-- Bars local b1 = display.newImage ('bar.png', 92, 67) local b2 = display.newImage ('bar.png', 192, -2) local b3 = display.newImage ('bar.png', 287 , 67) local b4 = display.newImage ('bar.png', 387, -2) Je kunt zeggen dat de gaten de "vijanden" van dit spel zijn, als de bal één raakt, eindigt het spel.
-- Gaten lokale h1 = display.newImage ('hole.png', 62, 76) local h2 = display.newImage ('hole.png', 124, 284) local h3 = display.newImage ('hole.png', 223, 224) local h4 = display.newImage ('hole.png', 356, 114) local h5 = display.newImage ('hole.png', 380, 256) - Geef gaten voor collision detection h1.name = 'h' h2.name = 'h' h3.name = 'h' h4.name = 'h' h5.name = 'h' Vervolgens voegen we de bal toe. Dit wordt verplaatst door de speler met behulp van de versnellingsmeter.
-- Player player = display.newImage ('player.png') player.x = 49 player.y = 288 player: setReferencePoint (display.CenterReferencePoint) 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 logica van de applicatie, knoppen, gedrag en meer zullen behandelen. Tot de volgende keer!
