Share
Dit is de tweede aflevering in onze Corona SDK Pinball Game-zelfstudie. In de tutorial van vandaag voegen we de interface toe en coderen we de interactie met het spel. Lees verder!
Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen en voor te bereiden.
Wanneer de Begin op de knop wordt getikt, de titelweergave wordt getweend en verwijderd, waardoor de gameweergave wordt onthuld. Er zijn veel onderdelen in deze weergave betrokken, dus we zullen ze in de volgende paar stappen opsplitsen.
Accentsconagua
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 de linkermuur, onthoud dat deze in delen werd gesplitst om later de natuurkunde toe te passen.
-- Linkermuurdelen l1 = display.newImage ('l1.png') l2 = display.newImage ('l2.png', 0, 214) l3 = display.newImage ('l3.png', 0, 273) l4 = display .newImage ('l4.png', 0, 387) Deze code plaatst de juiste muur op dezelfde manier.
-- Right Wall Parts r1 = display.newImage ('r1.png', 238, 0) r2 = display.newImage ('r2.png', 274, 214) r3 = display.newImage ('r3.png', 291, 273 ) r4 = display.newImage ('r4.png', 195, 387) Voeg de bal en HitLines toe met de volgende code:
ball = display.newImage ('ball.png', display.contentWidth * 0.5, 0) hitLine1 = display.newImage ('hitLine.png', 70, 28) hitLine2 = display.newImage ('hitLine.png', 110, 28) De doelen worden toegevoegd met behulp van de volgende regels:
-- Hit balls hitBall1 = display.newImage ('hitBall.png', 160, 186) hitBall2 = display.newImage ('hitBall.png', 130, 236) hitBall3 = display.newImage ('hitBall.png', 187, 236) hitBall1.name = 'hBall' hitBall2.name = 'hBall' hitBall3.name = 'hBall' Vervolgens voegen we de paddles toe en geven ze een naam om deze later te gebruiken.
pLeft = display.newImage ('paddleL.png', 74, 425) pRight = display.newImage ('paddleR.png', 183, 425) pLeft.name = 'leftPaddle' pRight.name = 'rightPaddle' Deze knoppen besturen de paddles en voegen ze toe met behulp van deze code:
lBtn = display.newImage ('lBtn.png', 20, 425) rBtn = display.newImage ('rBtn.png', 260, 425) lBtn.name = 'left' rBtn.name = 'right' Ten slotte voegen we het scoretekstveld toe.
-- Score TextField score = display.newText ('0', 2, 0, 'Marker Felt', 14) score: setTextColor (255, 206, 0) 
Je vraagt je waarschijnlijk af waarom we de muren in delen hebben toegevoegd. Omdat we pixel perfecte botsingen op hen uitvoeren, kunnen we niet alleen de addBody methode (omdat dit ook een vak toevoegt dat ook het alfakanaal beslaat), gebruiken we de vorm parameter om een polygoon voor de afbeelding te definiëren.
Waarom niet een enkele polygoon?
De vormparameter accepteert alleen convex vormen en een maximum van 8 kanten, onze muur is geen van beide, dus we hebben het eenvoudig in stukken gespleten.
-- Left Wall Parts physics.addBody (l1, 'static', shape = -40, -107, -11, -107, 40, 70, 3, 106, -41, 106) physics.addBody (l2, 'static', shape = -23, -30, 22, -30, 22, 8, 6, 29, -23, 29) physics.addBody (l3, 'static', shape = -14 , -56, 14, -56, 14, 56, -14, 56) physics.addBody (l4, 'static', shape = -62, -46, -33, -46, 61, 45, -62, 45) - Right Wall Parts physics.addBody (r1, 'static', shape = 10, -107, 39, -107, 40, 106, -5, 106, -41, 70 ) physics.addBody (r2, 'static', shape = -22, -30, 22, -30, 22, 29, -6, 29, -23, 9) physics.addBody (r3, ' static ', shape = -14, -56, 14, -56, 14, 56, -14, 56) physics.addBody (r4,' static ', shape = 32, -46, 61, -46, 61, 45, -62, 45)
Vergelijkbare methoden worden gebruikt met de andere vormen, behalve de cirkels die de radius parameter.
physics.addBody (bal, 'dynamic', radius = 8, bounce = 0.4) physics.addBody (hitLine1, 'static', shape = -20, -42, -15, -49, -6, - 46, 18, 39, 15, 44, 5, 44,) physics.addBody (hitLine2, 'static', shape = -20, -42, -15, -49, -6, -46, 18 , 39, 15, 44, 5, 44,) physics.addBody (hitBall1, 'static', radius = 15) physics.addBody (hitBall2, 'static', radius = 15) physics.addBody ( hitBall3, 'static', radius = 15) physics.addBody (pRight, 'static', shape = -33, 11, 27, -12, 32, 1) physics.addBody (pLeft, 'static ', shape = -33, 1, -28, -12, 32, 11)
Een eenvoudige lijn wordt aan de bovenkant van het scherm toegevoegd als een muur om de bal te stuiteren.
-- Top Wall local topWall = display.newLine (display.contentWidth * 0.5, -1, display.contentWidth * 2, -1) physics.addBody (topWall, 'static')
Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
functie gameListeners (actie) if (action == 'add') en vervolgens lBtn: addEventListener ('touch', movePaddle) rBtn: addEventListener ('touch', movePaddle) ball: addEventListener ('collision', onCollision) Runtime: addEventListener (' enterFrame ', update) else lBtn: removeEventListener (' touch ', movePaddle) rBtn: removeEventListener (' touch ', movePaddle) ball: removeEventListener (' collision ', onCollision) Runtime: removeEventListener (' enterFrame ', update) end end De knoppen op het scherm activeren de rotatie van de paddles. Deze code verwerkt dat.
functie movePaddle (e) if (e.phase == 'started' en e.target.name == 'left') then pLeft.rotation = -40 elseif (e.phase == 'started' en e.target.name == 'rechts') en pRight.rotation = 40 einde
De rotatie keert terug naar de oorspronkelijke staat wanneer de knop niet langer wordt ingedrukt.
if (e.phase == 'ended') then pLeft.rotation = 0 pRight.rotation = 0 end end
De bal wordt geschoten wanneer een botsing met de paddle plaatsvindt, maar alleen als de rotatie van de paddle actief is. Hiermee wordt voorkomen dat de bal wordt neergeschoten wanneer de knoppen niet worden ingedrukt.
functie onCollision (e) - Maak een foto als (e.phase == 'started' en e.other.name == 'leftPaddle' en e.other.rotation == -40) then ball: applyLinearImpulse (0.05, 0.05, ball .y, ball.y) elseif (e.phase == 'started' en e.other.name == 'rightPaddle' en e.other.rotation == 40) then ball: applyLinearImpulse (0.05, 0.05, ball.y , ball.y) einde
De score zal toenemen na een botsing met een hitBall.
if (e.phase == 'ended' en e.other.name == 'hBall') dan score.text = tostring (tonumber (score.text) + 100) score: setReferencePoint (display.TopLeftReferencePoint) score.x = 2 audio.spel (bel) einde
Deze code controleert of de bal door de ruimte tussen de paddles valt en stelt de bal opnieuw in als dit waar is.
functie-update () - Controleer of de bal onderaan raakt als (ball.y> display.contentHeight) dan ball.y = 0 audio.play (buzz) 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 en deze wordt automatisch toegevoegd door de Corona-compileermachine.
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 voor de iTunes Store is een 512x512px-versie vereist. Ik stel voor eerst de 512x512-versie te maken en vervolgens de overige formaten te verkleinen. Het pictogram hoeft niet de afgeronde hoeken of de transparante schittering te hebben, iTunes en de iPhone doen dat voor u.
Het is tijd om de laatste test uit te voeren. 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 vond het nuttig. Bedankt voor het lezen!
