Share
In diesem Lernprogramm erfahren Sie, wie Sie erstellen, Highway Dodge, ein einfaches, aber süchtig machendes Spiel. Highway Dodge ist einfach zu erlernen und zu spielen, bietet aber die süchtig machende Qualität anderer beliebter Spiele im App Store.
Highway Dodge beginnt mit dem Platzieren des Spielers in einem Rennwagen auf der Autobahn. Während des Spiels muss der Spieler dem entgegenkommenden Verkehr auf der Autobahn ausweichen, indem er auf eine der drei verfügbaren Spuren tippt. Für jedes ausweichende Auto erhält der Spieler einen Punkt und das Spiel endet für den Spieler, wenn ein entgegenkommendes Auto den Rennwagen trifft. Im Laufe der Zeit werden die entgegenkommenden Autos immer schneller herausgefahren, um den Spieler vor echte Herausforderungen zu stellen.
Dieses Spiel basiert auf Lua und dem Corona SDK. Sie benötigen mindestens ein Konto bei Corona Labs und dem Corona SDK. Sie können das Corona SDK kostenlos auf der Corona Labs-Website herunterladen. Für dieses Tutorial habe ich build verwendet 2015.2731 des Corona SDK.
Lass uns gleich rein springen und den Highway Dodge starten, indem wir eine leere Vorlage erstellen. Öffne das Corona Simulator und wähle Neues Projekt von dem Datei Speisekarte. Sobald Sie die haben Neues Projekt erstellen Fenster öffnen, eingeben Highway Dodge Wählen Sie als Projektnamen eine leere Vorlage aus und setzen Sie die Breite auf 400 und die Höhe bis 600. Behalten Sie die Standardausrichtung bei Aufrecht.
Laden Sie nach dem Einrichten Ihres Projekts die Bilder für Highway Dodge herunter. Erstellen Sie einen neuen Ordner in Ihrem neuen Projekt, benennen Sie ihn mit Images und fügen Sie die Bilder diesem Ordner hinzu. Ihr Projekt sollte jetzt so aussehen:
Lassen Sie uns beim Einrichten des Projekts zwei wichtige Dateien kurz betrachten, build.settings und config.lua.
Diese Datei behandelt die Erstellungszeit des Spiels. Es speichert Informationen zur Ausrichtung Ihrer App, Symbolinformationen, iOS-Einstellungen und Android-Einstellungen. Die Standardeinstellung ist für unser Spiel ausreichend.
Diese Konfigurationsdatei steuert die Laufzeiteigenschaften des Spiels. Das beinhaltet Breite, Höhe, Rahmen, fps (Bilder pro Sekunde) und imageSuffix. Die Immobilie, die wir uns ansehen müssen, ist imageSuffix. Das imageSuffix Diese Eigenschaft wird für die dynamische Bildauswahl verwendet. Kurz gesagt: Die App wird aufgefordert, ein Bild mit höherer Auflösung zu verwenden, wenn sich das Gerät auf einem Gerät mit höherer Auflösung befindet.
Ich habe hochauflösende Bilder im Bilderordner bereitgestellt, sodass wir ein Update durchführen müssen config.lua entsprechend. Dein Projekt ist config.lua Die Datei sollte wie folgt aussehen. Ich habe den Push-Benachrichtigungsabschnitt ausgelassen, der auskommentiert ist.
application = content = width = 400, height = 600, scale = "letterBox", fps = 30, imageSuffix = ["@ 2x"] = 2,,,
Wenn das Projekt und die dynamische Bildauswahl eingerichtet sind, gehen wir weiter zu main.lua. Diese Datei ist der Startpunkt jeder mit dem Corona SDK erstellten App. In unserem Spiel wird es drei Zeilen Code enthalten.
Die erste Zeile verbirgt die Statusleiste auf iOS-Geräten. Öffnen main.lua und fügen Sie nach dem Kommentar die folgende Zeile hinzu -- Ihr Code hier.
display.setStatusBar (display.HiddenStatusBar)
Als Nächstes beginnen wir mit Composer, indem wir die Bibliothek in unser Spiel aufnehmen. Dazu fügen wir folgende Zeile hinzu:
Accentsconagua
lokaler Komponist = Anfordern ("Komponist") Als Nächstes verwenden wir Composer, um zur Menüszene zu gelangen. Wir bewegen Szenen durch Aufruf der Funktion composer.gotoScene (), den Wert übergeben "szene_menu" als Parameter. Der Wert "szene_menu" ist der Name der Szene und der Name der Datei, die wir im nächsten Abschnitt erstellen.
composer.gotoScene ("scene_menu")Composer ist die offizielle Szenenverwaltungsbibliothek von Corona. Mit Composer können Entwickler auf einfache Weise eine Szene erstellen und zwischen den Szenen wechseln. In zwei Zeilen konnte ich von der Hauptszene zur Menüszene wechseln. Wenn Sie mehr über Composer erfahren möchten, besuchen Sie Corona Composer-Bibliothekshandbuch verfügbar auf der Corona Labs Docs-Website.
Die Menüszene unseres Spiels besteht nur aus ein paar Elementen. Die Szene enthält eine Hintergrundgrafik, einen Titel und eine Starttaste. Wir verwenden die eingebaute Widget-Bibliothek von Corona, um die Startschaltfläche zu erstellen. Mit der Widget-Bibliothek können Sie schnell und einfach allgemeine Elemente der Benutzeroberfläche erstellen. In unserem Spiel werden wir es nur für die Button-Erstellung verwenden.
Erstellen Sie im Projektordner von Highway Dodge eine neue Datei, szene_menu.lua, und öffnen Sie es in Ihrem Texteditor Ihrer Wahl. Anstatt von vorne zu beginnen, verwenden wir die auf der Corona Labs Docs-Website verfügbare Szenenvorlage. Mit ihrer Vorlage können wir uns viel schneller bewegen. Gehen Sie zu Corona Labs Docs und kopieren Sie die Szenenvorlage nach / szene_menu.lua.
Fügen Sie die Widget-Bibliothek unserem Spiel hinzu, indem Sie die folgende Zeile direkt unter der Composer-Bibliothek hinzufügen.
lokales Widget = Anfordern ("Widget") Wir fügen unseren Hintergrund mit den zuvor heruntergeladenen Grafiken hinzu. Der Hintergrund sollte sich in der Mitte des Bildschirms befinden. In dem scene: create () Funktion und nach dem screenGroup Variable ist deklariert, fügen Sie den folgenden Code hinzu:
local background = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY
Als Nächstes müssen wir die drei Spuren hinzufügen, die die Autobahn darstellen. Wir machen dies, indem wir eine Tabelle verwenden, um die Spuren zu halten, und eine erstellen zum Schleife, die dreimal läuft. Platzieren Sie dieses Snippet hinter der Hintergrundgrafik:
lokale Spuren = für i = 1,3 do Spuren [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) Spuren [i] .x = (display.contentCenterX - 79 * 2) ) + (i * 80) lanes [i] .y = display.contentCenterY end
Um sicherzustellen, dass die Bahnen immer zentriert sind, habe ich die Bahnen mit ein wenig Rechenaufwand auf der X-Achse platziert. Dadurch wird sichergestellt, dass die Bahnen unabhängig vom Gerät, auf dem das Spiel ausgeführt wird, zentriert bleiben.
Wir fügen auch unser Logo für den Highway Dodge hinzu, indem Sie ein Bildobjekt oben auf dem Bildschirm platzieren.
lokales logo = display.newImageRect (sceneGroup, "images / logo.png", 300, 150) logo.x = display.contentCenterX logo.y = 75
Bevor Sie unser Schaltflächen-Widget hinzufügen können, müssen Sie eine Funktion erstellen, die auf die Schaltfläche reagiert. Wir nennen die Funktion handleButtonEvent () und bewegen Sie den Spieler mit composer.gotoScene (). Wir werden nur antworten, wenn der Spieler den Finger vom Knopf genommen hat oder am endete Phase der Veranstaltung.
lokale Funktion handleButtonEvent (event) if ("beendet" == event.phase) dann composer.gotoScene ("scene_game", "slideLeft") end endMit der hinzugefügten Funktion können wir die Schaltfläche hinzufügen. Wir erstellen den Button mit widget.newButton und einige Werte zu übergeben. Wir geben die Breite und Höhe der Schaltfläche, die Bilddateien für die Schaltfläche, den anzuzeigenden Text, die Schriftart, die Schriftgröße und die Schriftfarbe an.
Wir teilen Corona außerdem mit, welche Funktion aufgerufen werden soll, wenn die Taste gedrückt wird, und positioniert sie in der Mitte des Bildschirms. Die Quelldateien dieses Lernprogramms enthalten Kommentare, die die einzelnen Werte erläutern, die zum Einrichten der Schaltfläche verwendet werden.
local btn_startPlaying = widget.newButton width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank-over.png", label = "Wiedergabe starten", font = system.defaultFontBold, fontSize = 32, labelColor = default = 0, 0, 0, over = 0, 0, 0, 0,5, onEvent = handleButtonEvent btn_startPlaying.x = display.contentCenterX btn_startPlaying.y = display .contentCenterY sceneGroup: insert (btn_startPlaying)
Um die Menüszene abzuschließen, müssen wir die Spielszene entfernen, wenn sie beendet wird. Wenn Corona zwischen den Szenen wechselt, wird die vorherige Szene nicht immer entfernt. Ohne diese Zeilen befindet sich das Spiel immer in einer übergeordneten Szene, nachdem es einmal gespielt wurde.
Um die vorherige Szene zu entfernen, erhalten wir den Namen und den Aufruf der Szene composer.removeScene () um es zu entfernen, falls es existiert. Fügen Sie dem folgenden Code hinzu Szene: Show () Funktion.
local prevScene = composer.getSceneName ("previous") wenn (prevScene), dann composer.removeScene (prevScene) endenWir können jetzt mit der Arbeit an der Spielszene beginnen. Wir werden den gleichen Workflow verwenden, den wir zum Erstellen der Menüszene verwendet haben. Erstellen Sie eine neue Datei, szene_spiel.lua, Kopieren und fügen Sie die in Corona Labs Docs verfügbare Szenenvorlage ein. Wenn Sie den Code eingerichtet haben, öffnen Sie ihn szene_spiel.lua in Ihrem bevorzugten Texteditor.
Um das Codieren der Spielszene für uns zu vereinfachen, verwenden wir die Widget-Bibliothek und die Physik-Bibliothek. Letzteres wird zur Kollisionserkennung verwendet. Fügen Sie den folgenden Code hinzu szene_spiel.lua:
lokales Widget = erfordern ("Widget") lokale Physik = erfordert ("Physik") physics.start () physics.setGravity (0,0) In der ersten und zweiten Zeile benötigen wir jeweils die Widget-Bibliothek und die Physik-Bibliothek. Wir beginnen dann mit der Physik und deaktivieren die Schwerkraft. Wir brauchen keine Schwerkraft für unser Autobahnspiel, sondern stattdessen Übergang.zu () die Autos bewegen.
In dem scene: create () Funktion deklarieren wir eine Reihe von Variablen, die wir im Spiel verwenden werden. Diese Variablen sind für das Spielerauto, die Fahrstreifen, die gegnerischen Autos und die Spielerwertung verantwortlich. Um das Lesen zu erleichtern, habe ich einige Kommentare hinzugefügt.
-- Funktion "scene: create ()" scene: create (event) local lanes = - Erstellen Sie eine Tabelle mit dem Namen lanes local playerCar - eine Variable für das Spielerauto local laneID = 1 - eine Variable für die Land-ID local enemyCars = - eine Tabelle, in der die feindlichen Autos local gegnerCounter = 1 gehalten werden - Der gegnerische Zähler wird bei 1 gestartet, um die feindlichen Autos local zu verfolgen. sendEnemyFrequency = 2500 - Legt fest, wie oft feindliche Autos in Millisekunden local tmrToSendCars gesendet werden sollen. eine Variable, die einen Verweis auf den Zeitgeber für das Senden von Autos enthält localplayerScore = 0 - Startet die Spielerpunktzahl bei 0 local playerScoreText - ein Objekt, das das Score-Textobjekt am Ende hält
Unter den Variablendeklarationen richten wir die Funktionen für das Spiel ein. Wir werden jede Funktion in einem späteren Schritt implementieren. Fügen Sie nach den Variablendeklarationen im folgenden Code hinzu scene: create () Funktion.
Lokale Funktion incrementScore () Ende der lokalen Funktion moveCar (Ereignis) Ende der lokalen Funktion sendEnemyCar () Ende der lokalen Funktion onPlayAgainTouch () Ende der lokalen Funktion amGlobalCollision (Ereignis) Ende
Nach den Funktionen fügen wir den Hintergrund und die Spuren hinzu. Für die Spuren fügen wir an jede Spur einen Ereignis-Listener an, damit sie auf Berührungsereignisse reagieren. Bei Berührung ruft der Hörer die moveCar () Funktion.
local background = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY für i = 1,3 do lanes [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) lanes [i] .x = (display.contentCenterX - 79 * 2) + (i * 80) lanes [i] .y = display.contentCenterY lanes [i ] .id = i lanes [i]: addEventListener ("touch", moveCar) ende Wenn der Hintergrund und die Bahnen eingerichtet sind, ist es Zeit, ein Textobjekt zu erstellen, um die Punktzahl des Spielers zu speichern und das Spielerauto zu erstellen. Die Punktzahl befindet sich oben auf dem Bildschirm und das Spielerauto wird auf der linken Spur positioniert. Außerdem machen wir das Spielerauto zu einem dynamischen Physikobjekt.
playerScoreText = display.newText (sceneGroup, "Score:"… playerScore, 0, 0, native.systemFont, 36) playerScoreText.x = display.contentCenterX playerScoreText.y = 25 playerCar = display.newImageRect (sceneGroup, "images / playerCar"). png ", 50, 100) playerCar.anchorY = 1 playerCar.x = Fahrstreifen [1] .x playerCar.y = display.contentHeight physics.addBody (playerCar) playerCar.bodyType =" dynamic "
Als Nächstes stellen wir einen Timer ein, um ein Auto basierend auf dem Wert des Fahrzeugs zu senden sendEnemyFrequency Variable und erstellen Sie einen Laufzeitereignislistener für globale Kollisionen.
tmrToSendCars = timer.performWithDelay (sendEnemyFrequency, sendEnemyCar, 0) Laufzeit: addEventListener ("collision", onGlobalCollision) Wir können unserem Spiel endlich Funktionalität hinzufügen. In diesem Abschnitt wird jeder Funktion, die wir im vorherigen Abschnitt deklariert haben, zusätzlicher Code hinzugefügt. Wir fangen mit an incrementScore () und enden mit onGlobalCollision ().
incrementScore ()Diese Funktion wird aufgerufen, wenn ein feindliches Auto am Spieler vorbeifährt und der Übergang abgeschlossen ist. Bei Aufruf wird die Spielersumme um erhöht 1. Fügen Sie die folgende Implementierung hinzu incrementScore () Funktion.
-- Diese Funktion erhöht die Punktzahl des Spielers um 1. Diese Funktion wird aufgerufen, wenn der Übergang für das gegnerische Fahrzeug abgeschlossen ist und der Bildschirm ausgeschaltet ist. lokale Funktion incrementScore () playerScore = playerScore + 1 playerScoreText.text = "Score:"… playerScore Ende
moveCar ()Das moveCar () Funktion wird aufgerufen, wenn eine Spur berührt wird. Auf der endete In der Phase des Ereignisses greifen wir die Spurkennung an und bringen das Auto auf die richtige Spur. Wir kehren zurück wahr am Ende, um ein erfolgreiches Touch-Event anzuzeigen. Fügen Sie die folgende Implementierung hinzu moveCar () Funktion.
-- moveCar reagiert auf das Berührungsereignis auf der lokalen Funktion der Fahrspur. moveCar (event) if (event.phase == "beendet"). Dann ist laneID = event.target.id - greifen Sie die Spur-ID auf transition.to (playerCar, x = Fahrstreifen [Fahrbahn-ID] .x, Zeit = 50) - Bewegen Sie das Spielerauto auf die entsprechende Fahrbahn und geben Sie true zurück - um ein erfolgreiches Berührungsereignis anzuzeigen
sendEnemyCar ()Das sendEnemyCar () Die Funktion erstellt ein gegnerisches Auto, weist das Auto einer Spur zu, bringt einen physischen Körper an das Auto an und verwendet es Übergang.zu () das Auto zum unteren Rand des Bildschirms schicken. Erstellen Sie zunächst das gegnerische Autoobjekt.
enemyCars [enemyCounter] = display.newImageRect (sceneGroup, "images / enemyCar"… math.random (1,3)… ".png", 50, 100)
Als Nächstes legen wir die x- und y-Position des gegnerischen Autos fest. Wir erstellen auch eine wenn, dann Anweisung, das gegnerische Fahrzeug derselben Fahrspur zuzuordnen, in der sich das Spielerfahrzeug in 50% der Zeit befindet. Dadurch wird der Spieler gezwungen, sich häufiger zu bewegen, und das Spiel macht mehr Spaß.
enemyCars [enemyCounter] .x = Fahrstreifen [math.random (1, # Fahrstreifen)]. x - Das Auto wird auf eine zufällige Fahrspur gesetzt, wenn (math.random (1,2) == 1) und dann feindCars [enemyCounter] x = Spuren [LaneID] .x; Ende - 50% der Zeit, platziere das gegnerische Auto auf der Spielerautobahn. enemyCars [enemyCounter] .y = -125 - Platziere den Feind außerhalb des Bildschirms an der Spitze
Wir müssen auch das gegnerische Auto so drehen, dass es nach unten zeigt, und dem feindlichen Auto einen physischen Körper-Physik-Typ hinzufügen.
enemyCars [enemyCounter]: Maßstab (1, -1) - Dreht die Autos so, dass sie der Physik zugewandt sind.addBody (enemyCars [enemyCounter]) - fügt den feindlichen Autos eine Physik hinzu. feindCars [enemyCounter] .bodyType = "kinematisch" - die Körper kinematisch machen
Wenn das gegnerische Auto aufgestellt ist, benutzen wir die Übergang.zu () Funktion, um das gegnerische Auto auf eine der Spuren zu schicken. Wenn der Übergang abgeschlossen ist, ruft das Spiel eine Funktion zum Entfernen des Objekts auf. Ich erhöhe auch die Variable FeindCounter durch 1 um die Anzahl der feindlichen Autos im Spiel zu verfolgen.
Übergabe.zu (enemyCars [enemyCounter], y = display.contentHeight + enemyCars [enemyCounter] .height + 20, Zeit = math.random (2250,3000), onComplete = Funktion (selbst) display.remove (selbst); inkrementieren (); Ende) - Ein Übergang, der das gegnerische Auto zum unteren Bildschirmrand hin bewegt. Nach Beendigung wird das gegnerische Autoobjekt aus dem Spiel entfernt. FeindCounter = FeindCounter + 1 - Erhöht den Feindzähler um eins für die Verfolgung
Schließlich möchten wir, dass das Spiel mit der Zeit schneller wird. Bei jedem anderen gesendeten Auto erstellt das Spiel den Timer neu und stellt ihn auf 200ms ein.
if (enemyCounter% 2 == 0) dann sendEnemyFrequency = sendEnemyFrequency - 200 if (sendEnemyFrequency < 800) then sendEnemyFrequency = 800; end timer.cancel(tmrToSendCars) tmrToSendCars = timer.performWithDelay(sendEnemyFrequency, sendEnemyCar, 0) end
onPlayAgainTouch ()Die kürzeste Funktion, onPlayAgainTouch (), bringt den Spieler zum Hauptmenü zurück. Dies ist die Umsetzung der onPlayAgainTouch () Funktion sieht aus wie.
-- Lassen Sie den Player zur lokalen Menüfunktion onPlayAgainTouch () composer.gotoScene ("scene_menu", "fade") zurückkehren - bewegen Sie den Player zum Menüende onGlobalCollision ()Das onGlobalCollision () Diese Funktion dient zum Erkennen von Kollisionen zwischen zwei beliebigen physischen Objekten auf dem Bildschirm. In unserem Spiel haben wir nur zwei Arten von Physikobjekten:
Wenn diese beiden Objekte kollidieren, stoppt das Spiel alle Timer, Übergänge und Ereignis-Listener. Darüber hinaus zeigt das Spiel eine Szene mit Szene, in der der Spieler erneut spielen kann.
Zuerst erstellen wir eine wenn, dann Aussage, die auf das hört begann Phase.
if (event.phase == "begin") dann ende
In dem wenn, dann Aussage, wir stoppen das Spiel. Wir unterbrechen alle Übergänge, brechen den Timer ab, unterbrechen die Physik (selbst wenn dies nicht erforderlich ist, ist dies ein guter Aufräumungsaufruf) und entfernen den Ereignis-Listener von allen drei Spuren. Fügen Sie den folgenden Code in der wenn, dann Aussage:
transition.pause () timer.cancel (tmrToSendCars) physics.pause () für i = 1,3 do lanes [i]: removeEventListener ("touch", moveCar) ende Nachdem die Spielmechanik aufgehört hat, fügen wir ein undurchsichtiges Rechteck und ein Textobjekt hinzu, das besagt "Spiel ist aus!". Dies gibt einen guten visuellen Hinweis darauf, dass das Spiel beendet ist.
local gameOverBackground = display.newRect (sceneGroup, 0, 0, display.actualContentWidth, display.actualContentHeight) gameOverBackground.x = display.contentCenterOptOupBackground.y = display.contentCenterY gameOverBackground: setFillCoror (0) gameOachBackground: setFillCoror (0) .newText (sceneGroup, "Game Over!", 100, 200, native.systemFontBold, 36) gameOverText.x = display.contentCenterX gameOverText.y = 150 gameOverText: setFillColor (1, 1, 1)
Um die globale Kollisionsfunktion abzuschließen, fügen wir die Wiedergabeschaltfläche hinzu, die den Spieler zum Menü zurückschickt.
local playAgain = widget.newButton width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank.png", label = "Menü", font = system.defaultFontBold , fontSize = 32, labelColor = default = 0, 0, 0, over = 0, 0, 0, 0,5, onEvent = onPlayAgainTouch playAgain.x = display.contentCenterX playAgain.y = gameOverText.y + 100 sceneGroup: insert (playAgain)
Führen Sie die Anwendung aus, um festzustellen, ob alles wie erwartet funktioniert. Sie sollten in der Lage sein, das Spiel zu spielen, feindliche Autos sollten oben auf dem Bildschirm erscheinen und Ihre Punktzahl sollte für jedes gegnerische Auto erhöht werden, dem Sie erfolgreich ausweichen.
Vielen Dank, dass Sie mein Tutorial zur Erstellung des Highway Dodge mit dem Corona SDK gelesen haben. Sie können die Quelldateien für dieses Spiel von GitHub herunterladen. Nehmen Sie sich einen Moment Zeit, um darüber nachzudenken, wie Sie das Spiel weiter verbessern können. Wenn Sie nach Vorschlägen suchen, würde ich empfehlen, eine weitere Spur hinzuzufügen, weitere Feindtypen hinzuzufügen und sogar coole Power-Ups hinzuzufügen.
