Share
SpriteKit ist Apples 2D-Game-Engine, eine auf OpenGL basierende Rendering-Engine. Es wurde mit iOS 7 eingeführt und jedes nachfolgende Release hat das Framework erheblich erweitert. Mit der Verwendung von texturierten Sprites, einer integrierten Physik-Engine und dem sehr leistungsstarken SKAction Klasse können Sie sehr schnell funktionsfähige 2D-Spiele erstellen.
SpriteKit verfügt über integrierte Editoren für Szenen und Partikel, einen Kameraknoten seit der Veröffentlichung von iOS9 und eine integrierte Unterstützung für Tilesets seit der Veröffentlichung von iOS 10. Mit diesen neuen Ergänzungen wird SpriteKit schnell zu einem Kraftpaket für die Erstellung von 2D-Spielen.
Um diesem Tutorial zu folgen, laden Sie einfach das begleitende GitHub-Repo herunter. Es hat einen Ordner namens ExampleProject Starter. Öffnen Sie das Projekt in diesem Ordner in Xcode, und Sie können loslegen!
Knoten sind die grundlegenden Bausteine von SpriteKit und SKNode ist die Basisklasse aller Knoten. Alle Ihre Bildschirm-Assets werden ein SKNode oder eine Unterklasse davon. SKNodes selbst liefern jedoch keinen visuellen Inhalt. Der gesamte visuelle Inhalt wird mit einer Reihe vordefinierter Elemente gezeichnet SKNode Unterklassen. SKNodes und ihre Unterklassen haben mehrere Eigenschaften, die Sie ändern können. Einige der wichtigsten sind wie folgt.
Accentsconagua
Position (CGPoint): die Position des Knotens innerhalb des Koordinatensystems des übergeordneten ElementsxScale (CGFloat): skaliert die Breite eines Knotens um einen MultiplikatoryScale(CGFloat): skaliert die Höhe eines Knotens um einen MultiplikatorAlpha (CGFloat): die Transparenz des KnotenszRotation (CGFloat): die Euler-Rotation um die Z-Achse (im Bogenmaß)Eins der wichtigsten SKNodes ist das SKScene. Dies ist der Wurzelknoten, zu dem alle anderen Knoten hinzugefügt werden. Von selbst, SKScene enthält keine visuellen Elemente, zeigt jedoch die hinzugefügten Knoten an.
SKSzenen sind die Wurzelknoten, zu denen alle anderen Knoten hinzugefügt werden. Die Szene animiert und rendert den Inhalt von seinen untergeordneten Knoten. Um eine Szene anzuzeigen, fügen Sie sie einer hinzu SKView (was eine Unterklasse von UIView und hat daher viele der gleichen Eigenschaften wie UIView).
Im SpriteKit-Starterprojekt wird die erste Szene angezeigt, wenn das Projekt geladen wird. Im Moment ist dies nur ein leerer schwarzer Bildschirm. Es wird angezeigt, wenn die GameViewController ruft auf presentScene (_ :) In der View-Instanz wird die Szene als Parameter übergeben:
override func viewDidLoad () super.viewDidLoad () let scene = GameScene (Größe: CGSize (width: 768, height: 1024)) let skView = self.view as! SKView skView.showsFPS = false skView.showsNodeCount = false skView.ignoresSiblingOrder = false scene.scaleMode = .aspectFill skView.presentScene (scene) // Präsentation der Szene
Machen Sie sich jetzt keine Sorgen über die anderen Optionen. Ich werde sie später in dieser Serie erklären.
Viele Spiele haben mehr als einen Bildschirm oder eine Szene. Wir erstellen also eine neue Szene von Grund auf und zeigen sie dann aus unserer ursprünglichen Szene.
Wählen Datei > Neu > Datei aus dem Xcode-Menü und wählen Sie Kakao-Touch-Klasse.
Stelle sicher Klasse ist eingestellt auf NewScene und das Unterklasse von ist eingestellt auf SKScene. Drücken Sie Nächster und dann Erstellen, Stellen Sie sicher, dass das Hauptziel überprüft wird. Unten ist der Code für die NewScene.swift.
import UIKit import SpriteKit-Klasse NewScene: SKScene
Jetzt haben wir zwei Szenen in unserem Projekt und keine hat visuellen Inhalt. Fügen wir ein SKLabelNode (Wie alle Knoten ist dies eine Unterklasse von SKNode). Das SKLabelNodeDer einzige Zweck ist die Anzeige eines Textetiketts.
Label-Knoten, implementiert im SKLabelNode Klasse, werden verwendet, um Text in Ihrem Spiel anzuzeigen. Sie können benutzerdefinierte Schriftarten verwenden, wenn Sie möchten, aber für unsere Zwecke halten wir uns an die Standardeinstellung, die weißen Text anzeigt und auf eingestellt ist Helvetica Neue Ultra Light, 32 Punkte.
Fügen Sie folgendes in das didMove (bis :) Methode innerhalb GameScene.swift. Diese Methode wird unmittelbar nach der Darstellung einer Szene durch eine Ansicht aufgerufen. In der Regel würden Sie hier beliebige Assets Ihres Spiels einrichten und der Szene hinzufügen.
func didMove überschreiben (zur Ansicht: SKView) let startGameLabel = SKLabelNode (Text: "Start Game")
Hier erstellen wir eine SKLabelNode mit dem Komfort-Initialisierer init (Text :), die als Parameter eine Zeichenfolge enthält.
Durch das Initialisieren von Knoten werden sie nicht in der Szene angezeigt. Um die Knoten anzeigen zu lassen, müssen Sie das aufrufen addChild (_ :) Methode auf dem Empfangsknoten, übergeben die SKNode die Sie als Parameter hinzufügen möchten.
Fügen Sie Folgendes in das ein didMove (bis :) Methode.
func didMove überschreiben (zur Ansicht: SKView) let startGameLabel = SKLabelNode (Text: "Start Game") addChild (startGameLabel)
Das addChild (_ :) Methode ist nicht exklusiv für SKScenes, aber ist eine Methode von SKNode. Dadurch können Sie eine komplexe Hierarchie von Knoten erstellen, die als "Knotenstruktur" bezeichnet wird. Angenommen, Sie haben einen Spielcharakter und Sie möchten Arme und Beine getrennt bewegen. Sie könnten ein erstellen SKNode Instanz und fügen Sie dann jedes einzelne Teil als Kind davon hinzu SKNode (der übergeordnete Knoten wird als übergeordneter Knoten bezeichnet). Dies hat den Vorteil, dass Sie den Charakter als ganze Einheit verschieben können, indem Sie das übergeordnete Element verschieben SKNode, Sie können aber auch jedes einzelne Teil einzeln verschieben.
Eine weitere wichtige Methode zum Hinzufügen von Knoten ist die insertChild (_: at :) Diese Methode fügt ein Kind an einer bestimmten Position in der Liste der Kinder des Empfängerknotens ein. Wenn Sie einem Knoten ein untergeordnetes Element hinzufügen, führt der Knoten eine geordnete Liste von untergeordneten Elementen, auf die durch Lesen des Knotens verwiesen wird Kinder Eigentum. Wenn Sie einem übergeordneten Knoten mehrere Knoten hinzufügen, muss dies berücksichtigt werden, da die Reihenfolge, in der Sie die Knoten hinzufügen, einige Aspekte der Szenenverarbeitung beeinflusst, einschließlich des Treffertests und des Renderns.
Um einen Knoten zu entfernen, rufen Sie das auf removeFromParent () Methode auf dem Knoten, den Sie entfernen möchten.
Nachdem wir nun das Hinzufügen und Entfernen von Knoten behandelt haben, können wir uns wieder auf das Beispielprojekt konzentrieren. Wenn Sie sich erinnern, hatten wir gerade ein hinzugefügt SKLabelNode zum GameScene. Wenn Sie jetzt testen, wird unten links im Bildschirm nur die Hälfte des Textes angezeigt.
Warum wird nur die Hälfte des Textes angezeigt? Jetzt wäre ein guter Zeitpunkt, um über das Koordinaten- und Positionierungssystem von SpriteKit zu sprechen.
Das Koordinatensystem von SpriteKit setzt standardmäßig (0,0) unten links auf dem Bildschirm. SpriteKit platziert Knoten auch standardmäßig so, dass sie bei (0,0). Trotzdem… warum sehen wir nur die Hälfte des Textes? Dies liegt daran, dass die Textbeschriftung standardmäßig horizontal am Ursprung des Beschriftungsknotens zentriert ist.0,0). Unten sehen Sie ein Bild, das zeigt, wie das Koordinatensystem eines Knotens funktioniert.
Die Ursprünge der Knoten liegen bei (0,0), und eine positive x-Koordinate wird nach rechts verschoben, und eine positive y-Koordinate wird auf dem Bildschirm angezeigt. Denken Sie daran, dass eine SKScene ist ein Knoten, und daher ist auch sein Ursprung (0,0).
Nachdem wir gelernt haben, dass das Koordinatensystem von SpriteKit funktioniert und wie es Knoten platziert, können wir das verschieben SKLabelNode zu einer anderen Position, damit wir den gesamten Text sehen können. Fügen Sie Folgendes dem hinzu didMove (bis :) Methode innerhalb GameScene.swift.
func didMove überschreiben (zur Ansicht: SKView) let startGameLabel = SKLabelNode (Text: "Start Game") startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (startGameLabel)
Hier positionieren wir das Label in der Mitte der Szene. Das Position Eigenschaft ist vom Typ CGPoint, welche x- und y-Werte hat, die einen einzelnen Punkt innerhalb der Szene darstellen.
Wenn Sie jetzt testen, sollten Sie sehen, dass das Label in der Mitte der Szene positioniert wurde.
Wie es aktuell steht, NewScene ist nur eine leere Szene. Fügen wir noch eine Beschriftung hinzu, und wir können lernen, wie man zwischen Szenen wechselt. Hier ist eine Herausforderung: Bevor Sie weiterlesen, versuchen Sie, ein Label hinzuzufügen NewScene das sagt, "Geh zurück". Meine Lösung ist unten.
Als erstes müssen wir das hinzufügen didMove (bis :) Methode. Fügen Sie Folgendes zu hinzu NewScene.swift.
Klasse NewScene: SKScene func didMove überschreiben (Ansicht: SKView)
Als nächstes müssen wir das Etikett hinzufügen. Fügen Sie Folgendes in das ein didMove (bis :) Methode, die Sie oben hinzugefügt haben.
func didMove überschreiben (zur Ansicht: SKView) lassen Sie goBackLabel = SKLabelNode (Text: "Zurück") goBackLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (goBackLabel)
Dies fügt ein Label hinzu NewScene mit dem Text "Geh zurückAls Nächstes implementieren wir die Funktionalität, die dieses Label vorschlägt. Wir reagieren auf Berührungsereignisse, indem sie Szenen wechseln.
Fast alle mobilen Spiele werden mit Touch interagiert. In diesem Schritt lernen Sie, wie Sie auf Berührungsereignisse in Ihrem Spiel reagieren.
Um Touch-Event-Handler in Ihrem Spiel zu registrieren, müssen Sie die Ansicht implementieren berührtBegan (_: mit :) Methode. Fügen Sie Folgendes zu hinzu GameScene.swift:
Überschreiben von Funk-BerührungenBegan (_ berührt: Festlegen, mit Ereignis: UIEvent?) print ("YOU TOUCHED")
Wenn Sie dies jetzt testen möchten, werden Sie sehen Sie haben berührt auf die Konsole gedruckt, wenn Sie den Bildschirm berühren. In der Regel müssen wir jedoch feststellen, wenn ein bestimmter Knoten berührt wurde. Dazu benötigen wir eine Möglichkeit, die Knoten zu finden und zu identifizieren. Wir werden lernen, wie wir das schaffen können, und dann kommen wir zurück und beenden das berührtBegan (_: mit :) Methode.
Um einen Knoten identifizieren zu können, verwenden Sie die Knoten des Knotens Name Eigenschaft und sucht den Knotenbaum nach einem Knoten mit diesem Namen. Der Knoten ist Name Die Eigenschaft nimmt eine alphanumerische Zeichenfolge ohne Interpunktion an.
Es gibt eine Reihe von Methoden, um einen Knoten anhand seines Knotens zu suchen Name Eigentum. Wenn Sie bereits einen Verweis auf den Knoten haben, können Sie ihn einfach überprüfen Name Eigentum direkt, was wir in der tun werden berührtBegan (_: mit :) Methode. Es ist jedoch wichtig zu wissen, wie Sie den Knotenbaum nach einem bestimmten Knoten nach Namen durchsuchen oder nach einer Gruppe von Knoten mit demselben Namen suchen.
Das childNode (withName :) Diese Methode durchsucht die untergeordneten Elemente eines Knotens nach dem als Parameter übergebenen Namen.
Das enumerateChildNodes (withName: using :) Die Methode durchsucht die Kinder eines Knotens und ruft den Block einmal für jeden übereinstimmenden Knoten auf, den er findet. Sie verwenden diese Methode, wenn Sie nach Knoten suchen möchten, die denselben Namen haben.
Das Index(_:) Die Methode gibt ein Array von Knoten zurück, die mit dem Namensparameter übereinstimmen.
Sie können auch nach Knoten suchen, indem Sie eine erweiterte Suchsyntax verwenden, mit der Sie den gesamten Szenenbaum durchsuchen können, oder suchen Sie nach einem Muster anstelle eines exakten Namens. Diese erweiterte Suchfunktion sprengt den Rahmen dieses Tutorials. Wenn Sie jedoch mehr erfahren möchten, lesen Sie im SKNode Programmierreferenz.
Nun, da wir wissen, wie man nach Knoten im Knotenbaum sucht, geben wir unseren Labels einen Namen.
Fügen Sie Folgendes in das ein didMove (bis :) Methode innerhalb GameScene.swift.
func didMove überschreiben (zur Ansicht: SKView) let startGameLabel = SKLabelNode (Text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel)
Hier setzen wir startGameLabelNamenseigenschaft an Spiel beginnen.
Wir müssen auch den Namen des Labels angeben NewScene. Fügen Sie Folgendes mit ein didMove (bis :) Methode innerhalb NewScene.swift.
Überschreiben Sie func didMove (zur Ansicht: SKView) lassen Sie goBackLabel = SKLabelNode (Text: "Zurück") goBackLabel.name = "goback" goBackLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (goBackLabel)
Wir setzen die Name Eigentum an geh zurück.
Fügen Sie Folgendes in das ein berührtBegan (_: mit :) Methode innerhalb GameScene.swift.
Überschreiben von Funk-BerührungenBegan (_ berührt: Festlegen, mit event: UIEvent?) guard let touch = touches.first else return let touchLocation = touch.location (in: self) let touchedNode = self.atPoint (touchLocation) if (touchedNode.name == "startgame") let newScene = NewScene (Größe: Größe) newScene.scaleMode = scaleMode let doorsClose = SKTransition.doorsCloseVertical (withDuration: 2.0) view? .presentScene (newScene, Übergang: doorsClose)
Das multiTouchEnabled Die Eigenschaft der Szenenansicht ist auf festgelegt falsch Standardmäßig bedeutet dies, dass die Ansicht nur die erste Berührung einer Multitouch-Sequenz erhält. Wenn diese Eigenschaft deaktiviert ist, können Sie die Berührung mit dem Symbol abrufen zuerst berechnete Eigenschaft der Berührungsgruppe, da sich in der Gruppe nur ein Objekt befindet.
Wir können das bekommen touchLocation innerhalb der Szene aus der Standort Eigentum der Berührung. Wir können dann herausfinden, welcher Knoten durch Aufrufen berührt wurde am Punkt(_:) und vorbei in der touchLocation.
Wir prüfen, ob die touchedNode's name property ist gleich "Spiel beginnen", Ist dies der Fall, wissen wir, dass der Benutzer das Etikett berührt hat. Wir erstellen dann eine Instanz von NewScene und sein setzen scalemode Diese Eigenschaft entspricht der aktuellen Szene. Dies gewährleistet, dass sich die Szene auf verschiedenen Geräten gleich verhält. Zum Schluss erstellen wir eine SKTransition und rufen Sie die presentScene (_: Übergang :) Methode, die die Szene zusammen mit dem Übergang präsentiert.
Das SKTransition Die Klasse verfügt über viele Klassenmethoden, die Sie aufrufen können, um verschiedene Übergänge zwischen Szenen anzuzeigen, anstatt die Szene sofort anzuzeigen. Dies bietet dem Endbenutzer ein bisschen "Augenweide" und lässt das Zeigen einer neuen Szene weniger abrupt erscheinen. Um alle verfügbaren Übergangstypen anzuzeigen, überprüfen Sie das SKTransition Klasse im Referenzhandbuch.
Ich werde das nicht implementieren berührtBegan (_: mit :) Methode in NewScene. Warum probierst du das nicht selbst aus und hast das Label zurück zum GameScene einen anderen Übergangstyp verwenden? Der Code wird dem, was wir oben haben, sehr ähnlich sein. Denken Sie nur daran, dass wir den Namen genannt haben SKLabelNode "geh zurück".
Wir haben mit Szenen bisher einiges über Knoten gelernt, und Sie haben gesehen, wie ein Label-Knoten als generisches Beispiel verwendet wird, um einige der Eigenschaften von Knoten zu lernen. Wir haben ihre Koordinatensysteme untersucht, wie sie im Knotenbaum lokalisiert werden können, wie sie positioniert werden sollen und wie sie auf Berührungsereignisse reagieren.
Es gibt mehrere andere Arten von Knoten, die wir im nächsten Tutorial betrachten werden, beginnend mit SKSpriteNode!
Um mehr über den Einstieg in SpriteKit zu erfahren, sollten Sie auch den Beitrag von Davis Allie hier auf Envato Tuts lesen+.
Schauen Sie sich auch unsere SpriteKit-Kurse an! Diese führen Sie durch alle Schritte beim Erstellen Ihres ersten SpriteKit-Spiels für iOS, auch wenn Sie noch nie mit SpriteKit programmiert haben.
