Share
In diesem Tutorial, der zweiten Ausgabe der SpriteKit From Scratch-Serie, erfahren Sie mehr über Einschränkungen und Aktionen. Mit diesen Funktionen können Sie Ihrem SpriteKit-Spiel auf einfache Weise Bewegung und Animationen hinzufügen, während Sie die Position und Ausrichtung der Knoten im Spiel begrenzen.
Um mit mir zu folgen, können Sie entweder das Projekt verwenden, das Sie im ersten Tutorial dieser Serie erstellt haben, oder eine neue Kopie von GitHub herunterladen.
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.
Bevor wir einer Szene Einschränkungen und Aktionen hinzufügen können, müssen wir zunächst einige Klassen erstellen, damit wir mit unseren Knoten im Code arbeiten können. Erstellen Sie eine neue Klasse, PlayerNode, basierend auf iOS> Quelle> Cocoa Touch Class Vorlage und stellen Sie sicher, dass es eine Unterklasse von ist SKSpriteNode.
Wenn Xcode nach dem Erstellen der Klasse einen Fehler ausgibt, fügen Sie eine Importanweisung für das SpriteKit-Framework unter dem hinzu UIKit importieren Aussage:
import UIKit importieren SpriteKit
Als nächstes deklarieren Sie die folgenden drei Eigenschaften in der PlayerNode Klasse. Diese Eigenschaften enthalten die Einschränkungen, die zur Begrenzung der horizontalen Bewegung des Fahrzeugs verwendet werden.
import UIKit import SpriteKit-Klasse PlayerNode: SKSpriteNode var leftConstraint: SKConstraint! var middleConstraint: SKConstraint! var rightConstraint: SKConstraint!
Ein anderes erstellen Kakao-Touch-Klasse und nennen Sie es MainScene, macht es eine Unterklasse von SKScene.
Fügen Sie oben eine Importanweisung für das SpriteKit-Framework hinzu.
import UIKit importieren SpriteKit
Öffnen Sie diese Klassen MainScene.sks, Klicken Sie auf den grauen Hintergrund, um die Szene auszuwählen. Öffnen Sie die Benutzerdefinierter Klasseninspektor auf der rechten Seite und setzen Benutzerdefinierte Klasse zu MainScene.
Wählen Sie das Auto und stellen Sie seine Klasse auf PlayerNode auf die gleiche Weise wie für die Szene. Wenn das Auto noch ausgewählt ist, öffnen Sie das Fenster Attribute-Inspektor und ändern Name zu Spieler.
Nun, da wir die grundlegenden Klassen eingerichtet haben, können wir einige Einschränkungen im Code erstellen.
Einschränkungen in SpriteKit, dargestellt durch das SKConstraint Klasse, werden verwendet, um die Position und Orientierung bestimmter Knoten zu begrenzen. Mit Einschränkungen kann eine große Vielfalt erreicht werden, da sie relativ zur Szene oder relativ zu anderen Knoten sein können. Neben den konstanten Werten arbeiten Einschränkungen auch mit Wertebereichen, sodass Sprites in Ihrer Szene an einem bestimmten Ort fixiert werden können oder sich innerhalb eines bestimmten Bereichs bewegen dürfen.
Die Einschränkungen, die wir hinzufügen werden, sind die drei, die wir in der PlayerNode Klasse. Diese Einschränkungen werden verwendet, um das Auto auf den drei Spuren im Spiel zu fixieren.
Öffnen MainScene.swift und erstellen Sie eine Eigenschaft für den Player des Typs PlayerNode!. Diese Eigenschaft speichert einen Verweis auf den Spielerknoten.
import UIKit import SpriteKit-Klasse MainScene: SKScene var player: PlayerNode!
Als nächstes überschreiben wir die didMoveToView (_ :) Methode der MainScene Klasse:
Accentsconagua
func didMoveToView überschreiben (view: SKView) super.didMoveToView (view) size = view.frame.size wenn letPlayer = childNodeWithName ("Player") als? PlayerNode player = foundPlayer let center = size.width / 2.0, difference = CGFloat (70.0) player.leftConstraint = SKConstraint.positionX (SKRange (konstanter Wert: center - difference)) player.middleConstraint = SKConstraint.positionX (SKRange (konstanterWert: center)) player.rightConstraint = SKConstraint.positionX (SKRange (konstanterWert: center + difference)) player.leftConstraint.enabled = false player.rightConstraint.enabled = false player.constraints = [player.leftConstraint, player.rightConstraint ]Gehen wir den Code Schritt für Schritt durch. Das didMoveToView (_ :) Die Methode wird aufgerufen, wenn die Szene von einer Ansicht dargestellt wird. Nach dem anrufen der didMoveToView (_ :) Bei der Methode der Superklasse ändern wir die Größe der Szene auf die Größe der aktuellen Ansicht. Dadurch wird sichergestellt, dass die Szene immer die Bildschirmgröße des aktuellen Geräts ausfüllt und richtig skaliert wird.
Wir greifen auf das Player-Sprite zu, das wir im Xcode-Szenen-Editor hinzugefügt haben, indem wir nach dem Namen suchen, den wir ihm zuvor gegeben haben. Diesen Wert weisen wir dann dem zu Spieler Eigentum.
Nach der Berechnung des Mittelpunkts der Szene und der Angabe einer konstanten Differenz von 70,0, Wir erstellen die Einschränkungen des Sprites. Mit der positionX (_ :) Klassenmethode der SKConstraint In dieser Klasse erstellen wir die linken, mittleren und rechten Einschränkungen für das Player-Sprite. Diese Methode erfordert ein SK-Bereich Instanz als Parameter, der in unserem Fall ein Bereich mit einem konstanten Wert ist. Wenn Sie sich die möglichen Einschränkungen und Bereiche in SpriteKit ansehen möchten, empfehle ich Ihnen einen Blick auf die SKConstraint und SK-Bereich Klassenreferenzen.
Wir deaktivieren die linken und rechten Einschränkungen, da diese nicht beim Spielstart auf den Spielerknoten wirken sollen. Zuletzt weisen wir diese Einschränkungen dem zu Einschränkungen Eigenschaft des Spielerknotens. Diese Eigenschaft ist im definiert SKNode Klasse.
Erstellen und starten Sie Ihr Spiel auf einem beliebigen Simulator oder physischen Gerät. Sie sollten jetzt sehen, dass Ihre Szene mit unten stehendem Fahrzeug korrekt skaliert ist.
Sie sehen, dass das Auto jetzt auf die horizontale Mitte der Szene beschränkt ist und auf die linke und rechte Spur beschränkt werden kann, sobald wir dem Spiel etwas Bewegung hinzufügen.
Aktionen in SpriteKit werden durch die mächtigen dargestellt SKAction Klasse. Aktionen ermöglichen es uns, Sprites in einer Szene leicht zu animieren und zu verschieben. Sie werden von Knoten ausgeführt und von den SpriteKit-APIs ausgewertet und funktionieren neben Einschränkungen und Physiksimulationen.
Sie können nicht nur festlegen, was eine Aktion bewirkt, sondern auch programmieren, wie die Aktion funktioniert, indem Sie sie konfigurieren. Sie können z. B. Aktionen anhalten und fortsetzen oder das Verhalten einer Aktion für die Abschwächung konfigurieren. Dies gibt Ihnen ein größeres Maß an Kontrolle, da Sie bestimmte Aktionen leicht beschleunigen oder verlangsamen können, um einige interessante Gameplay-Elemente zu erzeugen.
Ähnlich wie Knoten über untergeordnete Knoten verfügen können, gibt es drei Arten von Aktionen, die untergeordnete Aktionen enthalten können:
Sie können Aktionen programmgesteuert oder im Szenen-Editor von Xcode erstellen, den wir im vorherigen Tutorial verwendet haben. Wir werden beide Techniken in diesem Tutorial anwenden.
Öffnen MainScene.sks und klicken Sie auf das Symbol neben Animieren Klicken Sie unten links in der Szene auf die Schaltfläche Aktionseditoransicht.
Scrollen Sie als nächstes in der Objektbibliothek von rechts und finden die Aktion verschieben Artikel. Klicken Sie auf und ziehen Sie es in die Zeitleiste von Aktionseditoransicht und platziere es am linken Rand wie unten gezeigt:
Dadurch beginnt die Aktion um 0:00, das heißt, sobald die Szene präsentiert wird. Wenn er an einer anderen Stelle platziert wird, wird die Aktion nach dem oben auf der Timeline angezeigten Zeitintervall ausgeführt.
Bewegen Sie den Mauszeiger über die Aktion und klicken Sie auf das kleine Pfeilsymbol unten links. Klicken Sie im angezeigten Popup auf die Schaltfläche Unendlichkeit Taste links. Dadurch wird die Aktion für immer wiederholt.
Öffnen Sie, während die Aktion noch ausgewählt ist Attribute-Inspektor auf der rechten Seite und ändern Sie die Y Offset Wert zu 100.
Die anderen Werte geben an, dass das Auto sofort animiert wird (Startzeit) Und jeder 1 zweite (Dauer) wird sich bewegen 0 Punkte in der X Richtung und 100 in dem Y Richtung (Versatz). Das Timing-Funktion Mit der Eigenschaft können Sie eine Aktion schrittweise starten und / oder stoppen. In diesem Fall verwenden wir Linear, Das heißt, das Auto fährt immer mit der gleichen Geschwindigkeit.
Um die Aktion auszuprobieren, klicken Sie auf die Schaltfläche Animieren Schaltfläche unten links im Szeneneditor. Die untere Symbolleiste sollte blau werden und das Auto sollte hochfahren.
Wenn die Bewegungsaktion implementiert ist, ist es Zeit, die horizontalen Aktionen programmgesteuert zu erstellen. Bevor wir dies tun, müssen wir etwas Logik hinzufügen, damit die Knöpfe im Spiel das Auto steuern können.
Erstellen Sie eine neue Datei, indem Sie wählen iOS> Quelle> Swift File Vorlage und benennen Sie es LaneStateMachine.
Fügen Sie der neuen Datei den folgenden Code hinzu:
importiere GameplayKit-Klasse LaneStateMachine: GKStateMachine Klasse LaneState: GKState var playerNode: PlayerNode init (player: PlayerNode) playerNode = player Klasse LeftLane: LaneState override func isValidNextState (stateClass) -> Bool wenn stateClass = MiddleLane.self return true return false überschreibt func didEnterWithPreviousState (vorherigerState: GKState?) PlayerNode.moveInDirection (.Left, toLane: self) class MiddleLane: LaneState override func isValidNextState (stateClass: AnyClass) - Suite if stateClass == LeftLane.self || stateClass == RightLane.self return true return false überschreibt func didEnterWithPreviousState (previousState: GKState?) wenn previousState LeftLane ist playerNode.moveInDirection (.Right, toLane: self) else wenn previousState RightLane playerNode.moveInirection ist .Left, toLane: self) Klasse RightLane: LaneState override func isValidNextState (stateClass: AnyClass) -> Bool wenn stateClass == MiddleLane.self return true return false override func didEnterWithPreviousState (previousState: GKState?)? playerNode.moveInDirection (.Right, toLane: self)
Dieser Code verwendet lediglich das neue GameplayKit-Framework, um eine Zustandsmaschine zu erstellen, die die drei Spuren und die Bewegung zwischen ihnen im Spiel darstellt. Wenn Sie die Funktionsweise dieses Codes besser verstehen möchten, lesen Sie mein Tutorial zu GameplayKit.
Als nächstes öffnen PlayerNode.swift und fügen Sie die folgenden zwei Methoden hinzu PlayerNode Klasse:
func disableAllConstraints () leftConstraint.enabled = false middleConstraint.enabled = false rightConstraint.enabled = false func moveInDirection (direction: ButtonDirection, Spur der Spur: LaneState) disableAllConstraints () let changeInX = (direction = = .Left)? -70.0: 70.0 Rotation lassen = (Richtung ==. Links)? M_PI / 4: -M_PI / 4 let duration = 0.5 let moveAction = SKAction.moveByX (CGFloat (changeInX), y: 0.0, duration: duration) let rotateAction = SKAction.rotateByAngle (CGFloat (Rotation), Dauer: Dauer / 2) rotateAction.timingMode = .EaseInEaseOut let rotateSequence = SKAction.sequence ([rotateAction, rotateAction.reversedAction ()]) lassen Sie moveGroup = SKAction.group ([moveAction, rotateSequence]) als Vervollständigung = SKAction.runBlock () -> Void in switch lane case ist LeftLane: self.leftConstraint.enabled = true case ist MiddleLane: self.middleConstraint.enabled = true case ist RightLane: self.rightConstraint.enabled = true default: break Lassen Sie sequenceAction = SKAction.sequence ([moveGroup, Fertigstellung]) runAction (sequenceAction)
Das disableAllConstraints () method ist eine bequeme Methode, um die Einschränkungen des Spielerknotens zu deaktivieren.
Im moveInDirection (_: toLane :), Wir bestimmen, in welche Richtung sich das Auto horizontal bewegen soll, -70,0 wenn Sie sich nach links bewegen und +70,0 wenn Sie sich nach rechts bewegen. Wir berechnen dann den korrekten Winkel (in Bogenmaß), um das Fahrzeug beim Bewegen zu drehen. Beachten Sie, dass positive Zahlen eine Drehung gegen den Uhrzeigersinn bedeuten.
Nachdem Sie eine konstante Dauer festgelegt haben, erstellen wir die Verschiebungs- und Rotationsaktionen mithilfe von moveByX (_: y: duration :) und rotateByAngle (_: duration :) Klassenmethoden. Wir erstellen eine Rotationssequenz, um das Auto wieder so zu drehen, wie es vor der Bewegung war. Das reversedAction () Die Methode erstellt automatisch die Umkehrung einer Aktion.
Als Nächstes erstellen wir eine Bewegungsgruppenaktion, um die horizontale Bewegung und Drehung gleichzeitig auszuführen. Schließlich erstellen wir eine Abschlussaktion, um einen Abschluss auszuführen, wenn er ausgeführt wird. In dieser Schließung ermitteln wir, in welcher Spur sich das Auto gerade befindet, und aktivieren die korrekte Einschränkung für diese Spur.
Öffnen ViewController.swift und fügen Sie eine Eigenschaft hinzu, Zustandsmaschine, vom Typ LaneStateMachine! zum ViewController Klasse.
Klasse ViewController: UIViewController var stateMachine: LaneStateMachine!…
Ersetzen Sie die Implementierungen von viewDidLoad () und didPressButton (_ :) in dem ViewController Klasse mit folgendem:
override func viewDidLoad () super.viewDidLoad () let skView = SKView (Frame: view.frame) let Szene = MainScene (Dateiname: "MainScene")! skView.presentScene (scene) view.insertSubview (skView, atIndex: 0) let left = LeftLane (player: scene.player) let mittel = MiddleLane (player: scene.player) let right = RightLane (player: scene.player) stateMachine = LaneStateMachine (Status: [Links, Mitte, Rechts]) stateMachine.enterState (MiddleLane) @IBAction func didPressButton (Absender: UIButton) Schalter Sender.tag Fall ButtonDirection.Left.rawValue: Fall StateMachine.currentState Fall ist RightLane : stateMachine.enterState (MiddleLane) - Fall ist MiddleLane: stateMachine.enterState (LeftLane) Standardeinstellung: break case ButtonDirection.Right.rawValue: switch stateMachine.currentState Fall ist LeftLane: stateMachine.enterState (MiddleLane) (RightLane) default: break default: break
Im viewDidLoad (), wir fügen das ein SKView Objekt am Index 0 damit die Steuertasten sichtbar sind und wir initialisieren auch die Zustandsmaschine.
Im didPressButton (_ :), Wir finden heraus, welche Taste der Benutzer auf der Grundlage der Tags der Tasten gedrückt hat, und geben die korrekte Fahrspur ein, an der sich das Fahrzeug gerade befindet.
Bauen Sie das Spiel auf und führen Sie es aus. Drücken Sie entweder die linke oder die rechte Taste am unteren Bildschirmrand, um das Fahrzeug in Bewegung zu setzen. Sie sollten das Auto drehen sehen und sich in Richtung der Taste bewegen, die Sie gedrückt haben.
Beachten Sie, dass die Schaltflächensymbole möglicherweise nicht übereinstimmen, wie unten gezeigt.
Um dies zu beheben, öffnen Sie den Asset-Katalog (Image.xcassets) und für jedes Bild (Linker Pfeil und Rechter Pfeil) einstellen Rendering-Modus zu Original Bild.
Sie sollten jetzt sicher sein, Einschränkungen und Aktionen in SpriteKit zu verwenden. Wie Sie sehen, ist es mit diesen Features des Frameworks sehr einfach, einem SpriteKit-Spiel Animationen und Bewegungen hinzuzufügen.
Im nächsten Tutorial dieser Serie werden wir uns die Kameraknoten in SpriteKit anschauen, damit sich unser Auto nicht immer vom oberen Bildschirmrand entfernt. Anschließend werden wir uns mit dem Physik-Simulationssystem in SpriteKit ausführlich befassen, wobei der Schwerpunkt auf Physikkörpern und Kollisionserkennung liegt.
Wie immer sollten Sie Ihre Kommentare und Rückmeldungen in den nachstehenden Kommentaren hinterlassen.
