SpriteKit-Grundlagen: Sprites

In dieser Serie lernen wir, wie Sie mit SpriteKit 2D-Spiele für iOS erstellen. In diesem Artikel werden wir unsere Erforschung von SpriteKit-Knoten fortsetzen und einen speziellen Knotentyp namens „Sprite“ entdecken – a SKSpriteNode.

Um diesem Tutorial zu folgen, einfach Laden Sie das zugehörige GitHub-Repository herunter. Er hat einen Ordner namens Beispiel für den Projektstart. Öffnen Sie das Projekt in diesem Ordner in Xcode und los geht’s!

Sprite-Knoten

EIN SKSpriteNode wird entweder als Rechteck mit einer darauf zugeordneten Textur oder als nicht texturiertes farbiges Rechteck gezeichnet. So erstellen Sie eine SKSpriteNode mit einer darauf zugeordneten Textur ist die häufigste, da Sie so Ihre Spielgrafiken zum Leben erwecken.

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

override func didMove(to view: SKView) {
    let startGameLabel = SKLabelNode(text: "Start Game")
    startGameLabel.name = "startgame"
    startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2)
    addChild(startGameLabel)
        
    let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200))
    addChild(redSprite)
}

Hier verwenden wir den Convenience Intiailizer init(color:size:) Dadurch wird ein rechteckiges Sprite mit der Farbe und Größe gezeichnet, die Sie als Parameter übergeben. Wenn Sie das Projekt jetzt testen, wird die Hälfte des roten Quadrats angezeigt.

Sie fragen sich vielleicht, warum nur die Hälfte des Sprites angezeigt wird, da wir dies bereits festgestellt haben SKNodedie Ursprünge von (0,0). Dies, weil die SKSpriteNodeDer Rahmen und damit seine Textur sind auf seine Position zentriert. Um dieses Verhalten zu ändern, können Sie das Sprite bearbeiten anchorPoint Eigenschaft, die den Punkt bestimmt, an dem der Rahmen positioniert wird. Das folgende Diagramm zeigt, wie die anchorPoint funktioniert.

das anchorPoint wird im Einheitskoordinatensystem angegeben, welche Stellen (0,0) unten links und (1,1) in der oberen rechten Ecke des Rahmens. Die Standardeinstellung für SKSpriteNodees ist (0,5,0,5).

Mach weiter und ändere es anchorPoint Eigentum an (0,0) und beachte den Unterschied, den es macht.

override func didMove(to view: SKView) {
    let startGameLabel = SKLabelNode(text: "Start Game")
    startGameLabel.name = "startgame"
    startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2)
    addChild(startGameLabel)
        
        
    let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200))
    redSprite.anchorPoint = CGPoint(x: 0, y:0)
    addChild(redSprite)
}

Wenn Sie jetzt testen, werden Sie sehen, dass das Sprite perfekt links unten auf der Bühne ausgerichtet ist.

Verschieben wir es nun in die obere Mitte der Bühne, indem wir seine Positionseigenschaft ändern. Ersetzen Sie Ihre didMove(to:) Funktion mit folgenden Funktionen:

override func didMove(to view: SKView) {
    let startGameLabel = SKLabelNode(text: "Start Game")
    startGameLabel.name = "startgame"
    startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2)
    addChild(startGameLabel)
        
        
    let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200))
    redSprite.anchorPoint = CGPoint(x: 0, y:0)
    redSprite.position = CGPoint(x: size.width/2 - 100, y: size.height - 210)
    addChild(redSprite)
}

Beachten Sie, wie wir beide subtrahieren mussten x und y Werte zum Zentrieren des Sprites. Wenn wir das verlassen hätten anchorPoint auf seinen Standardwert wäre es bereits auf dem zentriert gewesen x Achse. Es ist wichtig zu bedenken, dass Sie beim Ändern des Ankerpunkts möglicherweise einige Anpassungen an Ihrer Position vornehmen müssen.

Strukturierte Sprites

Diese rote Box eignet sich gut zum Üben der Positionierung, aber im Allgemeinen möchten Sie Ihr Sprite mit Grafiken für Ihr Spiel strukturieren.

Lassen Sie uns eine strukturierte erstellen SKSpriteNode. Fügen Sie den folgenden Code am unteren Rand des didMove(to:) Methode.

override func didMove(to view: SKView) {

    ...
        
    let player = SKSpriteNode(imageNamed: "player")
    player.position = CGPoint(x: size.width/2 , y: 300)
    addChild(player)
}

Hier verwenden wir den Convenience-Initialisierer init(imageNamed:), der als Parameter den Namen eines Bildes ohne die Erweiterung verwendet. Dies ist der einfachste Weg, um ein strukturiertes Sprite zu erstellen, da es die Textur für Sie aus dem Bild erstellt, das Sie übergeben.

Der andere Weg, um eine strukturierte zu erstellen SKSpriteNode ist ein zu erstellen SKTexture Verwenden Sie zunächst einen der Initiatoren, die eine Textur als Parameter verwenden.

Lassen Sie uns noch etwas erstellen SKSpriteNodes und ändern Sie einige ihrer Eigenschaften. Fügen Sie sie wieder unten hinzu didMove(to:) Funktion.

override func didMove(to view: SKView) {
    
    ...
    
    let enemy1 = SKSpriteNode(imageNamed: "enemy1")
    enemy1.position = CGPoint(x: 100 , y: 300)
    enemy1.xScale = 2
    addChild(enemy1)
        
        
    let enemy2 = SKSpriteNode(imageNamed: "enemy2")
    enemy2.position = CGPoint(x: size.width - 100 , y: 300)
    enemy2.zRotation = 3.14 * 90 / 180
    addChild(enemy2)
}

Hier schaffen wir zwei SKSpriteNodes, enemy1 und enemy2. Wir definieren die xScale sicher enemy1 beim 2 und ändere es zRotation sicher enemy2 drehe es 90 Grad. (Das zRotation Die Eigenschaft nimmt Werte im Bogenmaß an und ein positiver Wert zeigt eine Drehung gegen den Uhrzeigersinn an.)

Wir haben versucht, einige Eigenschaften eines Sprites zu ändern. Schauen Sie sich die Dokumentation für an SKNodes und SKSpriteNodes und versuchen Sie, einige der anderen Eigenschaften zu ändern, um die Auswirkungen zu sehen, die sie haben.

Sprite-Knoten eignen sich gut für Rechtecke und grundlegende Texturen, manchmal ist jedoch eine komplexere Form erforderlich. das SKShapeNode Haben Sie in diesen Fällen abgedeckt. Als nächstes betrachten wir das Formen von Knoten.

Knoten formen

Ein weiterer nützlicher Knoten ist der SKShapeNode. Dieser Knoten rendert eine Form, die durch einen Core Graphics-Pfad definiert ist. SKShapeNodes sind nützlich für Inhalte, die mit a nicht einfach zu erreichen sind SKSpriteNode. Diese Klasse ist speicherintensiver und hat eine geringere Leistung als die Verwendung von a SKSpriteNodeSie sollten versuchen, es sparsam zu verwenden.

Eine Form zuweisen SKShapeNodekönnen Sie eine definieren CGPath am Knoten path Eigentum. Es gibt jedoch einige Initialisierer, die vordefinierte Formen wie Rechtecke, Kreise und Ellipsen anbieten. Erstellen wir mit dem Convenience-Initialisierer einen Kreis init(circleOfRadius:).

Fügen Sie dann am Ende des Feldes Folgendes hinzu didMove(to:) Methode.

override func didMove(to view: SKView) {
        
    ...
        
    let circle = SKShapeNode(circleOfRadius: 50)
    circle.strokeColor = SKColor.green
    circle.fillColor = SKColor.blue
    circle.lineWidth = 8
    circle.position = CGPoint(x: size.width/2, y: 400)
    addChild(circle)
}

Wir ändern einige Eigenschaften des Formknotens, positionieren ihn und fügen ihn der Szene hinzu. Es ist sehr einfach, die vordefinierten Forminitialisierer zu verwenden. Erstellen Sie jedoch einen Komplex CGPath Manuell nimmt viel Zeit in Anspruch und ist nichts für schwache Nerven, da es sich normalerweise um komplexe Mathematik handelt.

Glücklicherweise gibt es ein Werkzeug, mit dem Sie Formen visuell zeichnen und exportieren können CGPath comme code Swift. Auschecken PaintCode wenn du mehr wissen willst.

Sprite-Knoten und Formknoten decken die meisten Fälle ab, aber manchmal möchten Sie Videos in Ihren Apps anzeigen. das SKVideoNode, die wir uns als nächstes ansehen werden, hat Sie abgedeckt.

Videoknoten

Der letzte Knoten, den wir uns ansehen werden, ist der SKVideoNode. Wie der Name schon sagt, können Sie mit diesem Knoten Videos in Ihren Spielen abspielen.

Es gibt verschiedene Möglichkeiten, eine zu erstellen SKVideoNode. Wir verwenden eine Instanz von a AVPlayerEin anderer verwendet nur den Namen einer Videodatei, die im App-Bundle gespeichert ist, und die dritte Methode ist die Verwendung von a URL.

Eine Sache zu beachten ist, dass das Video size Die Eigenschaft entspricht zunächst der Größe des Zielvideos. Sie können dies ändern size Eigenschaft jedoch, und das Video wird auf die neue Größe gestreckt.

Eine andere Sache zu wissen ist, dass die SKVideoNode bietet an play() und pause() nur Methoden. Wenn Sie mehr Kontrolle über Ihre Videos haben möchten, würden Sie a initialisieren SKVideoNode mit einem vorhandenen AVPlayer und verwenden Sie es, um Ihre Videos zu steuern.

Verwenden wir die einfachste Methode, um eine zu erstellen SKVideoNode. Fügen Sie am Ende des Feldes Folgendes hinzu didMove(to:) Methode.

override func didMove(to view: SKView) {
        
    ...

    let video = SKVideoNode(fileNamed: "video.mov")
    video.position = CGPoint(x: size.width/2,y: 600)
    addChild(video)
    video.play()
}

Hier haben wir den Intiailizer verwendet init(fileNamed:) um ein Video zu erstellen. Sie übergeben den Namen des Videos mit der Erweiterung. Ich habe dem Quellcode des Projekts kein Video beigefügt, aber wenn Sie diese Arbeit sehen möchten, können Sie ein Video mit dem Namen „video.mov„Zu deinem Projekt.

Fazit

Damit ist unsere Studie über Knoten abgeschlossen. Nachdem Sie diesen und den vorherigen Artikel gelesen haben, sollten Sie ein gutes Verständnis dafür haben SKNodes und ihre Unterklassen. Im nächsten Teil dieser Serie werden wir einen Blick darauf werfen SKActions und mit Physik in unseren Spielen. Danke fürs Lesen und wir sehen uns dort!

In der Zwischenzeit können Sie einige unserer anderen großartigen Kurse und Tutorials zum Erstellen von iOS-Apps mit Swift und SpriteKit lesen.

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 codiert haben.