Share
In deze tutorialserie leer je hoe je een op Teeter geïnspireerde 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!
In de eerste tutorial in deze serie werd het Teeter-achtige spelconcept uitgelegd en de interface gemaakt. In deze zelfstudie wordt een fysica-basisimplementatie gemaakt, de spelinteractie gecodeerd en het project geëxporteerd voor vrijgave.
Stel de fysica-eigenschappen in voor elke afbeelding. De statische elementen kunnen niet worden verplaatst. Controleer ook of we de gebruiken radius eigenschap in de speler en de gaten, dit verklaart de fysica vorm als een cirkel en geen vierkant, waardoor de botsingen worden verbeterd.
-- Fysica toevoegen aan GFX physics.addBody (links, 'static') physics.addBody (rechts, 'static') physics.addBody (boven, 'static') physics.addBody (bottom, 'static') physics.addBody (b1, 'static') physics.addBody (b2, 'static') physics.addBody (b3, 'static') physics.addBody (b4, 'static') physics.addBody (h1, 'static', radius = 15) physics.addBody (h2, 'static', radius = 15) physics.addBody (h3, 'static', radius = 15) physics.addBody (h4, 'static', radius = 15) natuurkunde. addBody (h5, 'static', radius = 15) physics.addBody (speler, radius = 14) physics.addBody (doel, 'static', radius = 15)
Omdat we geen daadwerkelijke fysische respons nodig hebben wanneer de botsing plaatsvindt, plaatsen we de gaten als sensoren.
Accentsconagua
-- Gaten instellen als sensoren h1.isSensor = true h2.isSensor = true h3.isSensor = true h4.isSensor = true h5.isSensor = true --gameListeners ('add') end 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 ') - Lokale functies Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local movePlayer = local onCollision = local alert = local dragPaddle = - Hoofdfunctie functie Hoofd () titleBg = display.newImage ('titleBg.png') playBtn = display.newImage ('playBtn.png', display.contentCenterX - 35.5, display.contentCenterY + 10 ) credits Btn = display.newImage ('creditsBtn.png', display.contentCenterX - 50.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end function startButtonListeners (action) if ( action == 'add') playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener ('tap', showCredits) einde einde functie showCredits: tik (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 function hideCredits: tap (e) playBtn.isVisible = true creditsBtn.isVisible = true transition.to (creditsView, tijd = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap ', hideCredits) display.remove (creditsView) creditsView = nil end) end function showGameView: tik op (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners (' rmv ') display.remove (titleView) titleView = nil end) - [Voeg GFX toe] - Doeldoel = display.newImage (' goal.png ') goal.x = 439 goal.y = 31 goal.name = 'g' - 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) - 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) - Gaat lokaal 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) h1.name = 'h' h2.name = 'h' h3.name = 'h' h4.name = 'h' h5.name = 'h' - Player player = display.newImage ('player. png ') player.x = 49 player.y = 288 player: setReferencePoint (display.CenterReferencePoint) - Fysica aan GFX toevoegen physics.addBody (links,' static ') physics.addBody (right,' static ') physics.addBody (boven, 'statisch') physics.addBody (onder, 'static') physics.addBody (b1, 'static') physics.addBody (b2, 'static') physics.addBody (b3, 'static') physics.addBody (b4, 'static') physics.addBody (h1, 'static', radius = 15) physics.addBody (h2, 'static', radius = 15) physics.addBody (h3, 'static', radius = 15) physics.addBody (h4, 'static', radius = 15) physics.addBody (h5, 'static', radius = 15) physics.addBody (speler, radius = 14) natuurkunde .addBody (doel, 'static', radius = 15) - Gaten als sensoren instellen h1.isSensor = true h2.isSensor = t rue h3.isSensor = true h4.isSensor = true h5.isSensor = true gameListeners ('add') end Deze code voegt de Accelerometer en Collision luisteraars toe. Het geeft een parameter door om ze ook te verwijderen.
functie gameListeners (actie) if (action == 'add') en dan Runtime: addEventListener ('accelerometer', movePlayer) player: addEventListener ('botsing', onCollision) player: addEventListener ('touch', dragPaddle) else Runtime: removeEventListener ( 'accelerometer', movePlayer) player: removeEventListener ('collision', onCollision) player: removeEventListener ('touch', dragPaddle) end end De Accelerometer-waarden worden door deze functie vastgelegd en vervolgens doorgegeven aan de X- en Y-eigenschap van de bal.
functie movePlayer: accelerometer (e) player.x = player.x + (e.yGravity * -15) player.y = player.y + (e.xGravity * -15) einde
Wanneer de bal botst met een voorwerp, wordt de naam ervan vergeleken met die van de gaten en het doel. Vervolgens wordt de bijbehorende melding gebeld.
function onCollision (e) if (e.other.name == 'h') en dan alert () elseif (e.other.name == 'g') en dan alert ('win') einde De waarschuwing zal de luisteraars van het spel verwijderen, een geluid afspelen en het juiste bericht weergeven.
functie alert (actie) lokale waarschuwing gameListeners ('rmv') if (action == 'win') then alert = display.newImage ('complete.png') alert.x = display.contentCenterX alert.y = display.contentCenterY overgang .van (waarschuwing, time = 300, xScale = 0.3, yScale = 0.3) audio.play (bell) else alert = display.newImage ('gameOver.png') alert.x = display.contentCenterX alert.y = display .contentCenterY transition.from (alert, time = 300, xScale = 0.3, yScale = 0.3) audio.play (buzz) einde Ik heb deze code optioneel toegevoegd om de bal te verplaatsen door hem in de simulator te slepen.
functie dragPaddle (e) if (e.phase == 'started') then lastY = ey - player.y lastX = ex - player.x elseif (e.phase == 'moved') then player.y = ey - lastY player.x = ex-laatsteX einde einde
Om het spel in eerste instantie te starten, is de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:
Hoofd()
Het bestand Default.png is een afbeelding die juist wordt weergegeven wanneer u de toepassing start terwijl de iOS de basisgegevens laadt om het hoofdscherm weer te geven. Voeg deze afbeelding toe aan uw projectbronmap, deze wordt automatisch toegevoegd door de Corona-compiler.
Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een mooi en goed uitziend pictogram maken. De pictogramgrootte voor het niet-retina-iPhone-pictogram is 57x57px, maar de netvliesversie is 114x114px en de iTunes-winkel heeft een 512x512px-versie nodig. Ik stel voor eerst de 512x512-versie te maken en vervolgens de overige formaten te verkleinen.
Ook de pictogrammen Het hoeft niet om de afgeronde hoeken of de transparante schittering te hebben, iTunes en de iPhone zullen dat voor je doen.
Het is tijd om de laatste test te doen. Open de Corona Simulator, blader naar uw projectmap en klik vervolgens op Openen. Als alles werkt zoals verwacht, bent u klaar voor de laatste stap!
Ga in de Corona Simulator naar Bestand> Build en selecteer uw doelapparaat. Vul de vereiste gegevens in en klik op bouwen. Wacht een paar seconden en uw app is gereed voor apparaattesten en / of verzending voor distributie!
Experimenteer met het eindresultaat en probeer je aangepaste versie van het spel te maken!
Ik hoop dat je deze tutorialserie leuk vond en het nuttig vond. Bedankt voor het lezen!
