7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. SpriteKit

SpriteKit-Grundlagen: Knoten

Scroll to top
Read Time: 11 mins
This post is part of a series called SpriteKit Basics.
Introducing SpriteKit
SpriteKit Basics: Sprites

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

SpriteKit ist die 2D-Spiele-Engine von Apple – eine Rendering-Engine, die auf OpenGL basiert. Es wurde mit iOS 7 eingeführt und jede nachfolgende Version hat dem Framework großartige Ergänzungen gebracht. Mit der Verwendung von texturierten Sprites, einer integrierten Physik-Engine und der sehr leistungsstarken SKAction-Klasse können Sie sehr schnell funktionale 2D-Spiele erstellen.

SpriteKit verfügt über integrierte Editoren für Szenen und Partikel, einen Kameraknoten seit der Veröffentlichung von iOS9 und integrierte Unterstützung für Tilesets seit der Veröffentlichung von iOS 10. Mit diesen Neuzugängen wird SpriteKit schnell zu einem Kraftpaket für die Erstellung von 2D-Spielen.

Um diesem Tutorial zu folgen, laden Sie einfach das zugehörige GitHub-Repository herunter. Es hat einen Ordner namens ExampleProject Starter. Öffnen Sie das Projekt in diesem Ordner in Xcode, und Sie können loslegen!

Knoten

Nodes sind die grundlegenden Bausteine von SpriteKit, und SKNode ist die Basisklasse aller Nodes. Alle Ihre Bildschirminhalte sind ein SKNode oder eine Unterklasse davon. SKNode selbst stellen jedoch keine visuellen Inhalte bereit. Alle visuellen Inhalte werden mit einer von mehreren vordefinierten SKNode-Unterklassen gezeichnet. SKNode und seine Unterklassen haben mehrere Eigenschaften, die Sie ändern können. Einige der wichtigeren sind wie folgt.

  • position (CGPoint): die Position des Knotens im Koordinatensystem seines übergeordneten Elements
  • xScale (CGFloat): skaliert die Breite eines Knotens mit einem Multiplikator
  • yScale (CGFloat): skaliert die Höhe eines Knotens mit einem Multiplikator
  • alpha (CGFloat): die Transparenz des Knotens
  • zRotation (CGFloat): die Euler-Rotation um die z-Achse (im Bogenmaß)

Einer der wichtigsten SKNodes ist die SKScene. Dies ist der Wurzelknoten, zu dem alle anderen Knoten hinzugefügt werden. SKScene selbst stellt keine visuellen Elemente bereit, zeigt jedoch die hinzugefügten Knoten an.

Szenenknoten

SKScenes sind die Wurzelknoten, denen alle anderen Knoten hinzugefügt werden. Die Szene animiert und rendert den Inhalt von ihren untergeordneten Knoten. Um eine Szene anzuzeigen, fügen Sie sie einer SKView hinzu (die eine Unterklasse von UIView ist und daher viele der gleichen Eigenschaften wie UIView hat).

Im SpriteKit-Starterprojekt wird die Anfangsszene angezeigt, wenn das Projekt geladen wird. Im Moment ist dies nur ein leerer schwarzer Bildschirm. Es wird angezeigt, wenn der GameViewController presentScene(_:) auf der View-Instanz aufruft und die Szene als Parameter übergibt:

Machen Sie sich vorerst keine Sorgen um die anderen Optionen. Ich werde sie später in dieser Serie erklären.

Erstellen einer Szene

Viele Spiele haben mehr als einen Bildschirm oder eine Szene, also erstellen wir eine neue Szene von Grund auf und zeigen sie dann aus unserer ursprünglichen Szene.

Wählen Sie Datei > Neu > Datei aus dem Menü von Xcode und wählen Sie Cocoa Touch Class.

Choose the Cocoa Touch Class templateChoose the Cocoa Touch Class templateChoose the Cocoa Touch Class template

Stellen Sie sicher, dass Class auf NewScene festgelegt ist und dass Subclass of auf SKScene festgelegt ist. Drücken Sie Weiter und dann Erstellen, um sicherzustellen, dass das Hauptziel aktiviert ist. Unten ist der Code für die NewScene.swift.

Jetzt haben wir zwei Szenen in unserem Projekt und keine hat einen visuellen Inhalt. Fügen wir einen SKLabelNode hinzu (wie alle Knoten ist dies eine Unterklasse von SKNode). Der einzige Zweck des SKLabelNode besteht darin, ein Textlabel anzuzeigen.

Label-Knoten

Label-Knoten, die in der SKLabelNode-Klasse implementiert sind, werden verwendet, um Text in Ihrem Spiel anzuzeigen. Sie können benutzerdefinierte Schriftarten verwenden, wenn Sie möchten, aber für unsere Zwecke bleiben wir einfach bei der Standardeinstellung, die weißen Text anzeigt und auf Helvetica Neue Ultra Light, 32 Punkt eingestellt ist.

Fügen Sie in der Methode didMove(to:) in GameScene.swift Folgendes hinzu. Diese Methode wird unmittelbar nach der Präsentation einer Szene durch eine Ansicht aufgerufen. Im Allgemeinen richten Sie hier alle Assets Ihres Spiels ein und fügen sie der Szene hinzu.

Hier erstellen wir einen SKLabelNode mit dem Komfortinitialisierer init(text:), der als Parameter einen Textstring annimmt.

Hinzufügen und Entfernen von Knoten

Durch einfaches Initialisieren von Knoten werden sie nicht in der Szene angezeigt. Damit die Knoten angezeigt werden, müssen Sie die Methode addChild(_:) auf dem empfangenden Knoten aufrufen und den SKNode übergeben, den Sie als Parameter hinzufügen möchten.

Fügen Sie in der didMove(to:)-Methode Folgendes hinzu.

Die Methode addChild(_:) ist nicht exklusiv für SKScene, sondern eine Methode von SKNode. Auf diese Weise können Sie eine komplexe Hierarchie von Knoten aufbauen, die als "Knotenbaum" bezeichnet wird. Angenommen, Sie haben einen Spielcharakter und möchten seine Arme und Beine separat bewegen. Sie könnten eine SKNode-Instanz erstellen und dann jedes einzelne Teil als untergeordnetes Element dieses SKNode hinzufügen (der enthaltende Knoten wird als übergeordneter Knoten bezeichnet). Dies hätte den Vorteil, dass Sie den Charakter als ganze Einheit bewegen können, indem Sie den übergeordneten SKNode verschieben, aber auch jeden einzelnen Teil einzeln verschieben.

Eine weitere wichtige Methode zum Hinzufügen von Knoten ist die Methode insertChild(_:at:), die ein Kind an einer bestimmten Position in der Liste der Kinder des Empfängerknotens einfügt. Wenn Sie einem Knoten ein Kind hinzufügen, verwaltet der Knoten eine geordnete Liste von Kindern, auf die durch Lesen der children-Eigenschaft des Knotens verwiesen wird. Es ist wichtig, dies beim Hinzufügen mehrerer Knoten zu einem übergeordneten Knoten zu berücksichtigen, da die Reihenfolge, in der Sie die Knoten hinzufügen, einige Aspekte der Szenenverarbeitung beeinflusst, einschließlich Treffertests und Rendering.

Um einen Knoten zu entfernen, rufen Sie die Methode removeFromParent() auf dem Knoten auf, 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, haben wir der GameScene gerade einen SKLabelNode hinzugefügt. Wenn Sie jetzt testen, sehen Sie unten links auf dem Bildschirm nur die Hälfte des Textes.

Test showing blank screen with text half off to the bottom left of the screenTest showing blank screen with text half off to the bottom left of the screenTest showing blank screen with text half off to the bottom left of the screen

Warum wird aber nur die Hälfte des Textes angezeigt? Jetzt wäre ein guter Zeitpunkt, um über das Koordinaten- und Positionierungssystem von SpriteKit zu sprechen.

Positionierung und Koordinaten

Standardmäßig platziert das Koordinatensystem von SpriteKit (0,0) unten links auf dem Bildschirm. Auch standardmäßig platziert SpriteKit Knoten so, dass sie bei (0,0) positioniert sind. Trotzdem... warum sehen wir nur die Hälfte des Textes? Dies liegt daran, dass die Textbeschriftung standardmäßig horizontal auf den Ursprung des Beschriftungsknotens zentriert ist, der (0,0) ist. Unten sehen Sie ein Bild, das zeigt, wie das Koordinatensystem eines Knotens funktioniert.

A nodes x and y coordinatesA nodes x and y coordinatesA nodes x and y coordinates

Der Ursprung des Knotens liegt bei (0,0), und eine positive x-Koordinate bewegt sich nach rechts und eine positive y-Koordinate geht auf dem Bildschirm nach oben. Denken Sie daran, dass eine SKScene ein Knoten ist und daher auch ihr Ursprung (0,0) ist.

Festlegen der Position eines Knotens

Nachdem wir nun gelernt haben, wie das Koordinatensystem von SpriteKit funktioniert und wie es Knoten platziert, können wir den SKLabelNode an eine andere Position verschieben, damit wir den gesamten Text sehen können. Fügen Sie der didMove(to:)-Methode in GameScene.swift Folgendes hinzu.

Hier positionieren wir das Label in der Mitte der Szene. Die position-Eigenschaft ist vom Typ CGPoint und hat x- und y-Werte, 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.

Test with label positioned in centre of screenTest with label positioned in centre of screenTest with label positioned in centre of screen

Wechseln zwischen Szenen

So wie es derzeit aussieht, ist NewScene nur eine leere Szene. Fügen wir ihm auch ein Label hinzu, und dann können wir lernen, wie man zwischen Szenen wechselt. Hier ist eine Herausforderung: Bevor Sie weiterlesen, versuchen Sie, NewScene ein Label mit der Aufschrift "Zurück" hinzuzufügen. Meine Lösung ist unten.

Als erstes müssen wir die Methode didMove(to:) hinzufügen. Fügen Sie NewScene.swift Folgendes hinzu.

Als nächstes müssen wir das Label hinzufügen. Fügen Sie Folgendes innerhalb der Methode didMove(to:) hinzu, die Sie oben hinzugefügt haben.

Dadurch wird NewScene ein Label mit dem Text "Go Back" hinzugefügt. Als Nächstes implementieren wir die von diesem Label vorgeschlagene Funktionalität – wir reagieren auf Berührungsereignisse, indem wir Szenen wechseln.

Auf Berührung reagieren

Nahezu alle mobilen Spiele werden mit Touch interagiert. In diesem Schritt erfahren Sie, wie Sie auf Berührungsereignisse in Ihrem Spiel reagieren.

Um Touch-Ereignishandler in Ihrem Spiel zu registrieren, müssen Sie die Methode touchesBegan(_:with:) der Ansicht implementieren. Fügen Sie GameScene.swift Folgendes hinzu:

Wenn Sie dies jetzt testen möchten, wird YOU TOUCHED auf der Konsole gedruckt, wenn Sie auf den Bildschirm tippen. Was wir jedoch normalerweise brauchen, ist in der Lage zu sein, zu erkennen, wann ein bestimmter Knoten berührt wurde. Dazu benötigen wir eine Möglichkeit, die Knoten zu finden und zu identifizieren. Wir werden lernen, wie man dies erreicht, und dann zurückkommen und die Methode touchesBegan(_:with:) beenden.

Durchsuchen des Knotenbaums

Um einen Knoten identifizieren zu können, verwenden Sie die name-Eigenschaft des Knotens und durchsuchen den Knotenbaum nach einem Knoten mit diesem Namen. Die name-Eigenschaft des Knotens nimmt eine alphanumerische Zeichenfolge ohne Satzzeichen an.

Es gibt mehrere Methoden, um einen Knoten anhand seiner name-Eigenschaft zu suchen. Wenn Sie bereits einen Verweis auf den Knoten haben, können Sie einfach seine name-Eigenschaft direkt überprüfen, was wir in der touchesBegan(_:with:)-Methode tun werden. 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.

Die Methode childNode(withName:) durchsucht die Kinder eines Knotens nach dem als Parameter übergebenen spezifischen Namen.

Die Methode enumerateChildNodes(withName:using:) durchsucht die Kinder eines Knotens und ruft den Block einmal für jeden gefundenen übereinstimmenden Knoten auf. Sie verwenden diese Methode, wenn Sie alle Knoten mit demselben Namen suchen möchten.

Die Methode subscript(_:) gibt ein Array von Knoten zurück, die dem Parameter name entsprechen.

Sie können auch mithilfe einer erweiterten Suchsyntax nach Knoten suchen, mit der Sie beispielsweise den gesamten Szenenbaum durchsuchen oder nach einem Muster anstelle eines genauen Namens suchen können. Diese erweiterte Suchfunktion würde den Rahmen dieses Tutorials sprengen. Wenn Sie jedoch mehr erfahren möchten, können Sie dies in der SKNode-Programmierreferenz nachlesen.

Nachdem wir nun wissen, wie man im Knotenbaum nach Knoten sucht, geben wir unseren Labels einen Namen.

Fügen Sie in der Methode didMove(to:) in GameScene.swift Folgendes hinzu.

Hier setzen wir die name-Eigenschaft von startGameLabel auf startgame.

Wir müssen auch den Namen des Labels in NewScene festlegen. Fügen Sie Folgendes mit der Methode didMove(to:) in NewScene.swift hinzu.

Wir setzen die name-Eigenschaft auf goback.

Erkennen, welcher Knoten berührt wird

Fügen Sie in der Methode touchesBegan(_:with:) in GameScene.swift Folgendes hinzu.

Die multiTouchEnabled-Eigenschaft der Szenenansicht ist standardmäßig auf false gesetzt, was bedeutet, dass die Ansicht nur die erste Berührung einer Multitouch-Sequenz empfängt. Wenn diese Eigenschaft deaktiviert ist, können Sie die Berührung mithilfe der first berechneten Eigenschaft des Berührungssatzes abrufen, da der Satz nur ein Objekt enthält.

Wir können die touchLocation innerhalb der Szene aus der location-Eigenschaft der Berührung abrufen. Wir können dann herausfinden, welcher Knoten berührt wurde, indem wir atPoint(_:) aufrufen und touchLocation übergeben. 

Wir prüfen, ob die name-Eigenschaft des touchedNode gleich "startgame" ist, und wenn ja, wissen wir, dass der Benutzer das Label berührt hat. Wir erstellen dann eine Instanz von NewScene und setzen ihre scalemode-Eigenschaft auf die gleiche wie die aktuelle Szene – dies stellt sicher, dass die Szene auf verschiedenen Geräten gleich funktioniert. Schließlich erstellen wir eine SKTransition und rufen die Methode presentScene(_:transition:) auf, die die Szene zusammen mit dem Übergang präsentiert.

Die SKTransition-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 eine kleine Augenweide und lässt das Anzeigen einer neuen Szene weniger abrupt erscheinen. Um alle verfügbaren Übergangstypen anzuzeigen, sehen Sie sich die SKTransition-Klasse im Referenzhandbuch an.

Ich werde die Methode touchesBegan(_:with:) nicht in NewScene implementieren. Warum versuchen Sie das nicht selbst und lassen den Label-Übergang mit einem anderen Übergangstyp zurück zur GameScene? Der Code wird dem obigen sehr ähnlich sein, denken Sie nur daran, dass wir den SKLabelNode "goback" genannt haben.

Abschluss

Wir haben bisher einiges über Knoten mit Szenen gelernt, und Sie haben gesehen, wie man einen Label-Knoten als allgemeines Beispiel verwendet, um einige der Eigenschaften von Knoten kennenzulernen. Wir haben ihre Koordinatensysteme studiert, wie man sie im Knotenbaum findet, wie man sie positioniert und wie man auf Berührungsereignisse reagiert.

Es gibt mehrere andere Arten von Knoten, die wir uns im nächsten Tutorial ansehen werden – beginnend mit SKSpriteNode!

Um mehr über die ersten Schritte mit SpriteKit zu erfahren, sollten Sie sich auch den Beitrag von Davis Allie hier auf Envato Tuts+ ansehen.

Schauen Sie sich auch unsere SpriteKit-Kurse an! Diese führen Sie durch alle Schritte zum Erstellen Ihres ersten SpriteKit-Spiels für iOS, auch wenn Sie noch nie zuvor mit SpriteKit programmiert haben.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.