SpriteKit von Grund auf Grundlagen

Einführung

Das auf iOS, tvOS und OS X verfügbare SpriteKit ist ein Framework, mit dem Entwickler hochwertige 2D-Spiele erstellen können, ohne sich um die Komplexität von Grafik-APIs wie OpenGL und Metal kümmern zu müssen. SpriteKit bietet nicht nur alle Grafiken für Entwickler an, sondern bietet auch eine Reihe zusätzlicher Funktionen, darunter Physiksimulation, Audio- / Video-Wiedergabe und Speichern / Laden von Spielen.

In dieser Serie erfahren Sie alles über SpriteKit und erlernen Fähigkeiten, die Sie dann auf jedes 2D-Spiel anwenden können, das mit diesem hervorragenden Framework erstellt wird. In dieser Serie erstellen wir ein voll funktionsfähiges Spiel, in dem der Spieler ein Auto steuert, das Hindernisse vermeiden muss, die seinen Weg kreuzen.

Voraussetzungen

Diese Serie erfordert, dass Sie Xcode 7.3 oder höher ausführen. Dies umfasst die Unterstützung von Swift 2.2 sowie der SDKs für iOS 9.3, tvOS 9.2 und OS X 10.11.5. Sie müssen auch das Starterprojekt von GitHub herunterladen. Dieses enthält die visuellen Elemente, die im Spiel verwendet werden sollen, und einige Codezeilen, die uns den Einstieg erleichtern.

Die für das Spiel in dieser Serie verwendeten Grafiken finden Sie auf GraphicRiver. GraphicRiver ist eine großartige Quelle, um Grafiken und Grafiken für Ihre Spiele zu finden.

1. Szenen, Knoten und Ansichten

Szenen

Die erste Klasse, die Sie bei der Arbeit mit SpriteKit beachten sollten, ist die SKScene Klasse. Bei jedem 2D-Spiel, das mit SpriteKit erstellt wurde, teilen Sie den Inhalt des Spiels in mehrere Szenen auf, jede mit ihren eigenen SKScene Unterklasse.

Während wir uns die Funktionalität und das Innenleben des SKScene Klasse später in dieser Serie müssen Sie zunächst wissen, dass eine Szene das ist, was Sie mit dem Inhalt des Spiels hinzufügen, und es fungiert als Wurzelknoten. Das bringt uns zu Knoten.

Knoten (Sprites)

Das SKNode Klasse, welche SKScene ist eine Unterklasse von, wird verwendet, um alle Arten von Elementen in Ihrer Szene darzustellen. In SpriteKit stehen viele verschiedene Knotentypen zur Verfügung, die im Allgemeinen als Sprites bezeichnet werden. Sie verfügen jedoch über die gleichen Schlüsseleigenschaften. Die wichtigsten sind:

• Position (CGPoint)
• xScale (CGFloat): repräsentiert die horizontale Skala eines Knotens
• yScale (CGFloat): ähnlich zu xScale es wirkt aber stattdessen in vertikaler Richtung
• Alpha (CGFloat): repräsentiert die Transparenz des Knotens
• versteckt (Bool): Wert, der bestimmt, ob der Knoten sichtbar sein soll oder nicht
• zRotation (CGFloat): repräsentiert den Winkel in Radiant, um den der Knoten gedreht werden soll
• zPosition (CGFloat): Bestimmt, welche Knoten über anderen Knoten in der Szene angezeigt werden sollen

Wie Sie sehen, können Sie mit den obigen Eigenschaften das grundlegende Erscheinungsbild jedes Knotens in einer Szene genau positionieren, drehen und bearbeiten.

Genauso wie Sie Subviews hinzufügen können UIView Objekt in UIKit, in SpriteKit können Sie eine beliebige Anzahl von hinzufügen Kind Knoten zu einem vorhandenen Knoten. Dies geschieht mit der addChild (_ :) Methode auf jeder SKNode Objekt.

Auch ähnlich UIView Objekte, die Position und Skalierungseigenschaften eines untergeordneten Knotens sind relativ zum übergeordneten Knoten, zu dem er hinzugefügt wird. So wird ein SKScene Objekt, eine Unterklasse von SKNode, kann als Wurzelknoten Ihrer Szene fungieren. Für alle Knoten, die Sie in Ihrer Szene verwenden möchten, müssen Sie diese als untergeordnete Elemente der Szene selbst hinzufügen addChild (_ :) Methode.

Das SKNode Klasse allein ist nicht in der Lage, visuelle Inhalte zu produzieren. Dazu müssen Sie eine der vielen in SpriteKit verfügbaren Unterklassen verwenden. Einige wichtige SKNode Zu beachten sind folgende Unterklassen:

• SKSpriteNode: nimmt ein Bild und erstellt ein strukturiertes Sprite in Ihrer Szene
• SKCameraNode: steuert, von wo aus Ihre Szene angesehen wird
• SKLabelNode: Rendert eine Textzeichenfolge
• SKEmitterNode: Wird in Verbindung mit einem Partikelsystem verwendet, um Partikeleffekte zu erzeugen
• SKLightNode: erstellt Licht- und Schatteneffekte in Ihrer Szene

In dieser Serie verwenden wir diese Knotentypen sowie einige der weniger verbreiteten.

Ansichten

Um Ihren SpriteKit-Inhalt in einer funktionierenden Anwendung anzuzeigen, müssen Sie die SKView Klasse. Dies ist eine Unterklasse von UIView (oder NSView unter OS X), das problemlos zu jedem Teil Ihrer Anwendung hinzugefügt werden kann. Um eine SpriteKit-Szene zu präsentieren, müssen Sie entweder die presentScene (_ :) oder presentScene (_: Übergang :) Methode auf einem SKView Beispiel. Die zweite Methode wird verwendet, wenn Sie eine benutzerdefinierte Animation erstellen oder in Ihre neue Szene übergehen möchten.

Neben dem Rendern Ihrer SpriteKit-Inhalte können Sie auch die SKView Die Klasse bietet auch einige zusätzliche und sehr nützliche Funktionen. Dies beinhaltet a Bool Eigenschaft aufgerufen pausierte, Diese Funktion kann leicht zum Anhalten oder Fortsetzen einer Szene verwendet werden.

Es gibt auch mehrere Eigenschaften, die beim Debuggen Ihres Spiels hilfreich sind und Informationen wie das aktuelle FPS (Frames pro Sekunde), Knotenzahl und Physikfelder in Ihrer Szene anzeigen können. Wenn Sie alle verfügbaren Eigenschaften anzeigen möchten, überprüfen Sie die SKView Klassenreferenz.

2. Szenen-Editor

Nun, da wir uns die grundlegenden Klassen angesehen haben, die in SpriteKit-Spielen verwendet werden, ist es an der Zeit, unsere allererste Szene zu erstellen. Während Szenen vollständig programmgesteuert erstellt werden können, bietet Xcode ein hervorragendes Werkzeug zum Bearbeiten von Szenen, mit dem Sie Knoten einfach in Ihre Szene ziehen und deren Position, Aussehen und andere Eigenschaften bearbeiten können.

Öffnen Sie das Starterprojekt und erstellen Sie eine neue Datei, indem Sie drücken Befehl + N oder auswählen Neu> Datei…  von Xcode's Datei Speisekarte. Wählen Sie das iOS> Ressource> SpriteKit-Szene Dateityp und klicken Sie auf Nächster.

Benennen Sie die Datei MainScene und speichern Sie es. Sie sollten jetzt Ihre neue Szenendatei im sehen Projektnavigator.

Wählen MainScene.sks um den Szenen-Editor von Xcode zu öffnen. Im Moment ist Ihre Szene leer und hat einen grauen Hintergrund. Es gibt noch keine Knoten darin. Bevor Sie Ihrer Szene einige Sprites hinzufügen, müssen Sie zunächst deren Größe ändern.

In dem Attribute-Inspektor Ändern Sie rechts die Größe Ihrer Szene, um eine Breite zu erhalten (W) von 320 Punkten und einer Höhe (H) von 480 Punkten.

Diese Szenengröße korreliert mit der kleinsten Bildschirmgröße (3,5-Zoll-Bildschirm des iPhone 4s), sodass wir die Größe der Knoten korrekt anpassen können. Wir werden die Szenengröße in einem späteren Lernprogramm an die aktuelle Bildschirmgröße des Geräts anpassen.

Um Ihrer Szene Knoten hinzuzufügen, öffnen Sie die Objektbibliothek zur Rechten. Möglicherweise müssen Sie auf das blau hervorgehobene Symbol klicken, wenn das Symbol angezeigt wird Objektbibliothek ist nicht sichtbar.

Von dem Objektbibliothek, ziehen Sie ein Farbe Sprite zur Mitte deiner Szene.

Öffne das Attribute-Inspektor auf der rechten Seite und ändern Sie die Textur, Position, und Größe Attribute zu den folgenden Werten:

Ihre Szene sollte jetzt ein Auto in der Mitte haben, wie unten gezeigt.

Beachten Sie, dass im Gegensatz zum UIKit-Koordinatensystem in SpriteKit das Position eines Knotens bezieht sich immer auf seinen Mittelpunkt vom Ursprungspunkt der linken unteren Ecke der Szene (0, 0). Stellen Sie daher die Position des Autos auf (160, 120) Platziert die Mitte des Wagens 160 Punkte von links und 120 Punkte von unten.

3. Eine Szene anzeigen

Öffnen Sie Ihre Szene für jetzt abgeschlossen ViewController.swift und fügen Sie oben eine Importanweisung für das SpriteKit-Framework hinzu. Dadurch können wir die SpriteKit-Klassen und APIs in verwenden ViewController.swift.

import UIKit importieren SpriteKit

Aktualisieren Sie als Nächstes die Implementierung von viewDidLoad () Methode der ViewController Klasse wie folgt:

override func viewDidLoad () super.viewDidLoad () let skView = SKView (Frame: self.view.frame) let Szene = SKScene (Dateiname: "MainScene") skView.presentScene (scene) view.addSubview (skView)

Mit diesem Code erstellen wir zuerst eine SKView Instanz, die die gleiche Größe hat wie die Ansicht des View-Controllers. Als Nächstes laden wir unsere Szene aus der Datei, die wir mit der erstellt haben SKScene (fileNamed :) Initialisierer. Wir machen das SKView Instanz Diese Szene präsentieren und dann als Unteransicht zur Hauptansicht hinzufügen.

Wähle aus iPhone 4s Simulator (damit unsere Szene die richtige Größe für den Bildschirm hat) und erstellen und starten Sie Ihre Anwendung. Sie sollten einen Bildschirm ähnlich dem folgenden sehen:

Fazit

In diesem ersten Tutorial von SpriteKit From Scratch haben Sie die Grundlagen von Ansichten, Szenen und Knoten in SpriteKit kennen gelernt. Sie haben eine Basisszene mit einem Sprite mit dem in Xcode integrierten Szenen-Editor erstellt. Dies macht das Erstellen von Szenen wesentlich einfacher, wenn Sie es programmgesteuert machen.

Im nächsten Tutorial werden wir unser Spiel um weitere Funktionen erweitern, indem Sie das Auto mithilfe von SpriteKit-Aktionen in der Szene bewegen. Sie werden auch in die Physik-Simulation in SpriteKit eingeführt, indem Sie erkennen, wenn das Auto mit einem anderen Knoten kollidiert.

Hinterlassen Sie wie immer Ihre Kommentare und Ihr Feedback in den Kommentaren.