Erstellen Sie ein Retro-Rennspiel - Interface-Erstellung

In dieser Tutorial-Serie erfahren Sie, wie Sie ein Retro-Rennspiel erstellen. Das Ziel des Spiels ist es, die Ziellinie zu erreichen, ohne ein Hindernis zu treffen. Weiter lesen!


Auch in dieser Serie erhältlich:

  1. Erstellen Sie ein Retro-Rennspiel - Interface-Erstellung
  2. Erstellen Sie ein Retro-Rennspiel - Interaktion hinzufügen

Schritt 1: Anwendungsübersicht

Mit vorgenerierten Grafiken werden wir ein unterhaltsames Spiel mit Lua und den Corona SDK-APIs programmieren.

Der Spieler kann ein Rennauto steuern, um Hindernisse zu vermeiden. Sie können die Parameter im Code ändern, um das Spiel anzupassen.


Schritt 2: Zielgerät

Als erstes müssen wir die Plattform auswählen, auf der wir unsere App ausführen möchten. Auf diese Weise können wir die Größe der Bilder auswählen, die wir verwenden werden.

Die iOS-Plattform hat folgende Eigenschaften:

  • iPad 1/2 / Mini: 1024x768px, 132 ppi
  • iPad Retina: 2048 x 1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone / iPod Retina: 960 x 640 px, 326 ppi
  • iPhone 5 / iPod Touch: 1136 x 640, 326 ppi

Da Android eine offene Plattform ist, gibt es viele verschiedene Geräte und Auflösungen. Einige der häufigsten Bildschirmmerkmale sind:

  • Asus Nexus 7 Tablet: 800x1280px, 216 ppi
  • Motorola Droid X: 854 x 480 px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

In diesem Tutorial konzentrieren wir uns auf die iOS-Plattform mit grafischem Design, die speziell für die Verteilung auf ein iPhone / iPod touch entwickelt wurde. Der hier vorgestellte Code sollte jedoch auch für die Android-Entwicklung mit Corona SDK gelten.


Schritt 3: Schnittstelle

Es wird eine einfache und benutzerfreundliche Oberfläche verwendet, die mehrere Formen, Schaltflächen, Bitmaps und mehr umfasst.

Die für dieses Lernprogramm erforderlichen Schnittstellen-Grafikressourcen finden Sie im beigefügten Download.


Schritt 4: Grafiken exportieren

Je nach ausgewähltem Gerät müssen Sie möglicherweise die Grafiken in der empfohlenen PPI-Datei exportieren. Sie können dies in Ihrem bevorzugten Bildeditor tun.

Ich habe die Größe anpassen… Funktion in der Vorschau-App unter Mac OS X.

Vergessen Sie nicht, den Bildern einen beschreibenden Namen zu geben und sie in Ihrem Projektordner zu speichern.


Schritt 5: App-Konfiguration

Eine externe Datei wird verwendet, um die Anwendung für den Vollbildschirm zwischen Geräten zu aktivieren config.lua Datei. Diese Datei zeigt die ursprüngliche Bildschirmgröße und die Methode zum Skalieren des Inhalts für den Fall, dass die App mit einer anderen Bildschirmauflösung ausgeführt wird.

 application = content = width = 320, height = 480, scale = "letterbox",

Schritt 6: Main.lua

Lassen Sie uns die Anwendung schreiben!

Öffnen Sie Ihren bevorzugten Lua-Editor (jeder Text-Editor wird funktionieren, aber Sie haben keine Syntax-Hervorhebung). Denken Sie daran, die Datei als zu speichern main.lua in Ihrem Projektordner.


Schritt 7: Codestruktur

Wir werden unseren Code so strukturieren, als wäre er eine Klasse. Wenn Sie ActionScript oder Java kennen, sollten Sie die Struktur kennen.

 Notwendige Klassenvariablen und Konstanten Deklarieren von Funktionen Klassenmethoden der Klasse "Hauptfunktion" (andere Funktionen) rufen Hauptfunktion auf

Schritt 8: Statusleiste ausblenden

 display.setStatusBar (display.HiddenStatusBar)

Dieser Code verbirgt die Statusleiste. Die Statusleiste ist die Leiste oben auf dem Gerätebildschirm, auf der die Uhrzeit, das Signal und andere Anzeigen angezeigt werden.


Schritt 9: Importieren Sie Physik

Wir werden die Physik-Bibliothek verwenden, um Kollisionen zu behandeln. Verwenden Sie diesen Code zum Importieren:

 lokale Physik = Physik.start () Physik.setGravity (0,0)

Schritt 10: Hintergrund

Eine einfache Grafik wird als Hintergrund für die Anwendungsschnittstelle verwendet. Die nächste Codezeile speichert es.

 -- Grafik - [Hintergrund] local bg = display.newImage ('bg.png')

Schritt 11: Titelansicht

Dies ist die Titelansicht. Dies ist der erste interaktive Bildschirm, der in unserem Spiel erscheint. Diese Variablen speichern ihre Komponenten.

 -- [Titelansicht] local titleBg local playBtn local creditsBtn local titleView

Schritt 12: Gutschriftsansicht

In dieser Ansicht werden die Credits und das Urheberrecht des Spiels angezeigt. Diese Variable wird zum Speichern verwendet.

 -- [CreditsView] lokale CreditsView

Schritt 13: Spielhintergrund

Dieses Bild wird über unseren vorherigen Hintergrund platziert. Dies wird der Spielhintergrund sein.

 -- Spielhintergrund lokales gameBg

Schritt 14: Auto

Die Autografik. Dieser wird auf der Bühne unten in der Mitte platziert.

 -- Auto lokales Auto

Schritt 15: Autobahn

Die Autobahnlinien werden verwendet, um die sich bewegende Straße darzustellen.

 -- Autobahnen Linien lokale Linien1 lokale Linien2

Schritt 16: Hindernisse

Sie müssen diese vermeiden, um das Level zu passieren.

 -- Hindernisse lokale Hindernisse

Schritt 17: Textfelder

Wird verwendet, um die aktuellen Spielinformationen wie Score, Level und Geschwindigkeit anzuzeigen.

 -- TextFields Lokalgeschwindigkeit auf lokaler Ebene

Schritt 18: Alarm

Dies ist die Warnung, die angezeigt wird, wenn das Spiel beendet ist. Es wird das Level beenden und das Spiel beenden.

 -- Warnung lokaler AlertView

Schritt 19: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren.

 -- Variablen local lastY - Wird verwendet, um zwischen den Credits zu wechseln. Local moveTimer - Dieser Timer behandelt die Objekte, die lokal bewegt werden. LocalBtn local rightBtn local oTimer - Hinderniszeitgeber lokale PositionenTable = 36, 90, 144 --verfügbare x-Positionen für lokal gestartete Hindernisse --wahr, wenn das erste Hindernis erstellt wurde

Schritt 20: Funktionen deklarieren

Alle Funktionen als deklarieren lokal am Anfang.

 -- Funktionen local Main =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  lokale gameListeners =  local moveCar =  local addObstacle =  lokales Update =  lokales onCollision =   local alert = 

Schritt 21: Konstruktor

Als Nächstes erstellen wir die Funktion, mit der die gesamte Spiellogik initialisiert wird:

 Funktion Main () - Code… Ende

Schritt 22: Titelansicht hinzufügen

Jetzt platzieren wir das TitleView in der Bühne und rufen eine Funktion auf, die das hinzufügen wird Zapfhahn Zuhörer auf die Tasten.

 function Main () titleBg = display.newImage ('titleBg.png', 70, 50) playBtn = display.newImage ('playBtn.png', 119, 222) creditsBtn = display.newImage ('creditsBtn.png', 85, 282) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end

Nächstes Mal…

In diesem Teil der Serie haben Sie die Benutzeroberfläche und die Grundeinstellungen des Spiels kennen gelernt. Im nächsten und letzten Teil der Serie werden die Stufenerstellung, die Kollisionserkennung und die abschließenden Schritte vor dem Release wie App-Tests, das Erstellen eines Startbildschirms, das Hinzufügen eines Symbols und das Erstellen der App ausgeführt!

Lesen Sie den zweiten Teil dieser Serie