iOS 8: Was ist neu in SpriteKit, Teil 2

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Dieses Tutorial gibt einen Überblick über die neuen Funktionen des SpriteKit-Frameworks, die in iOS 8 eingeführt wurden. Die neuen Funktionen sollen die Unterstützung erweiterter Spieleffekte vereinfachen und unterstützen benutzerdefinierte OpenGL ES-Fragment-Shader, Beleuchtung, Schatten und erweiterte Funktionen Physik-Effekte und -Animationen sowie Integration in SceneKit. In diesem Tutorial erfahren Sie, wie Sie diese neuen Funktionen implementieren.

Serienformat

Diese Serie ist in zwei Tutorials unterteilt und behandelt die wichtigsten neuen Funktionen des SpriteKit-Frameworks. Im ersten Teil werfen wir einen Blick auf Shader, Beleuchtung und Schatten. Im zweiten Teil werde ich über Physik und SceneKit-Integration sprechen.

Obwohl jeder Teil dieser Serie für sich steht, empfehle ich, Schritt für Schritt zu folgen, um die neuen Funktionen des SpriteKit-Frameworks richtig zu verstehen. Nachdem Sie beide Teile gelesen haben, können Sie mit den neuen Funktionen des SpriteKit-Frameworks sowohl einfache als auch fortgeschrittenere Spiele erstellen.

Laden Sie das Xcode-Projekt, das wir im vorherigen Artikel erstellt haben, von GitHub herunter, wenn Sie mitmachen möchten.

1. Physik

In iOS 8 führte SpriteKit neue Physikfunktionen ein, wie z. B. Physik pro Pixel, Einschränkungen, inverse Kinematik und Physikfelder.

Bei der Kinematik wird die 3D-Position des Endes einer verknüpften Struktur unter Berücksichtigung der Winkel aller Gelenke berechnet. Inverse Kinematics (IK) macht das Gegenteil. Welche Winkel müssen die Gelenke angesichts des Endpunkts der Struktur bilden, um diesen Endpunkt zu erreichen? Das folgende Bild verdeutlicht diese Konzepte.

Mit SpriteKit verwenden Sie Sprites, um Gelenke darzustellen, die die Eltern-Kind-Beziehung verwenden, um eine gemeinsame Hierarchie zu erstellen. Für jede Beziehung definieren Sie die inversen kinematischen Einschränkungen für jedes Gelenk und steuern den minimalen und maximalen Drehwinkel zwischen ihnen. Beachten Sie, dass sich jedes Gelenk um seinen Ankerpunkt dreht.

Schritt 1: Inverse Kinematik (IK)

Öffnen Sie den PhysicsSceneEditor und fügen Sie das croquette-o.png-Sprite zum gelben Rechteck hinzu. Wählen Sie das Sprite aus und ändern Sie den Name im SKNode Inspector in Root. Setzen Sie den Physics Definition Body Type auf None.

Fügen Sie ein zweites Sprite, wood.png, hinzu und ändern Sie seinen Name in FirstNode. Ändern Sie das Parent Feld in Root. Verschieben Sie FirstNode, indem Sie es rechts neben Root platzieren und die Größe ändern, um ein Rechteck wie unten gezeigt zu erstellen. Setzen Sie den Physics Definition Body Type auf None.

Das Ergebnis sollte der folgenden Szene ähneln.

Beachten Sie, dass bei Auswahl eines Sprite-Knotens in der Mitte ein weißer Kreis angezeigt wird. Dieser Kreis repräsentiert den Ankerpunkt des Sprite-Knotens, um den jede Drehung ausgeführt wird.

Schritt 2: Fügen Sie weitere Sprites hinzu

Befolgen Sie die vorherigen Schritte und fügen Sie zwei weitere Sprites hinzu.

Erster Sprite

Fügen Sie ein weiteres croquette-o.png-Sprite hinzu.
Ändern Sie den Name SecondNode.
Ändern Sie das Parent Element in FirstNode.
Positionieren Sie es rechts von FirstNode.
Ändern Sie den Physics Definition Body Type in None.

Zweiter Sprite

Fügen Sie ein weiteres wood.png-Sprite hinzu.
Ändern Sie das Feld Name in ThirdNode.
Ändern Sie das Parent Element in SecondNode.
Positionieren Sie es rechts von SecondNode.
Ändern Sie die Größe, um ein Rechteck zu erstellen.
Ändern Sie den Physics Definition Body Type in None.

Das Ergebnis sollte der folgenden Szene ähneln.

Schritt 3: Bearbeiten und simulieren

Um die gemeinsamen Verbindungen, Interaktionen und Einschränkungen zu testen, müssen Sie Ihr Projekt nicht erstellen und ausführen. Xcode bietet zwei Modi: Bearbeiten und Simulieren.

Der Simulationsmodus bietet eine Echtzeit-Testumgebung, während der Bearbeitungsmodus zum Erstellen und Bearbeiten Ihrer Szene verwendet wird. Bisher haben wir im Bearbeitungsmodus gearbeitet. Beachten Sie, dass alle Änderungen, die Sie im Simulationsmodus vornehmen, nicht gespeichert werden.

Am unteren Rand des Szeneneditors können Sie sehen, in welchem Modus Sie gerade arbeiten. Wenn die untere Leiste des Szeneneditors weiß ist, befinden Sie sich im Bearbeitungsmodus. Ein blauer Hintergrund zeigt an, dass Sie sich im Simulationsmodus befinden. Klicken Sie auf die Beschriftung in der unteren Leiste, um zwischen den beiden Modi zu wechseln.

Ändern Sie den Modus, um die Sprites FirstNode, SecondNode und ThirdNode zu simulieren und auszuwählen. Sie können mehrere Sprites auswählen, indem Sie Befehlstaste drücken.

Drücken Sie anschließend Umschalt-Strg-Klick und bewegen Sie die Sprites in der Szene. Das Ergebnis ist, dass die Sprite-Knoten animiert und gedreht werden. Die Drehung ist jedoch seltsam und muss korrigiert werden.

Schritt 4: IK-Einschränkungen

Wechseln Sie zurück in den Bearbeitungsmodus und fügen Sie den Sprite-Knoten einige Einschränkungen hinzu. Wählen Sie jeden Sprite-Knoten aus und ändern Sie seine Eigenschaften wie folgt.

Wählen Sie die Root- und SecondNode-Sprite-Knoten aus und setzen Sie den IK Constraints Max Angle auf 0. Wählen Sie die Sprite-Knoten für FirstNode und ThirdNode aus und setzen Sie den Anchor Point X auf 0 und den IK Constraints Max Angle auf 90.

Durch Ändern dieser Eigenschaften ändern sich Position und Größe der Sprite-Knoten. Passen Sie nach dem Hinzufügen der Einschränkungen ihre Größe und Position manuell an und wechseln Sie in den Simulationsmodus, um die neuen Einschränkungen zu testen, die wir hinzugefügt haben.

Der folgende Screenshot zeigt die korrekte Konfiguration der Einschränkungen.

Schritt 5: Magnetfeldknoten

Neu in SpriteKit sind auch Magnetfelder. Mal sehen, wie das funktioniert, indem wir der Physikszene ein Magnetfeld hinzufügen. Öffnen Sie PhysicsScene.m und eine Instanzvariable mit dem Namen magnetFieldNode vom Typ SKFieldNode.

1	@implementation PhysicsScene {
2	SKFieldNode *magneticFieldNode;
3	}

In der didMoveToView:-Methode konfigurieren wir zuerst die Szene, indem wir eine SKPhysicsBody-Instanz für die Szene erstellen und eine Gravitationskraft hinzufügen. Das bedeutet, dass alle Knoten in der Szene nach unten gezogen werden.

1	SKPhysicsBody *physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];
2	[self.physicsWorld setGravity:CGVectorMake(0, -9)];
3	[self setPhysicsBody:physicsBody];

Um das magneticFieldNode-Objekt zu konfigurieren, müssen Sie seinen Physikkörper sowie seine Position und Stärke konfigurieren. Beachten Sie, dass jeder SKFieldNode seine eigenen Eigenschaften hat. Das folgende Codefragment zeigt, wie der Magnetfeldknoten konfiguriert wird. Wir fügen der Szene den neuen Knoten als untergeordneten Knoten hinzu.

magneticFieldNode = [SKFieldNode magneticField];
[magneticFieldNode setPhysicsBody:[SKPhysicsBody bodyWithCircleOfRadius:80]];
[magneticFieldNode setPosition:CGPointMake(100, 100)];
[magneticFieldNode setStrength:3];
[self addChild:magneticFieldNode];

Schritt 6: Interaktionen

Um das Magnetfeld in Aktion zu sehen, müssen wir einige Knoten hinzufügen, mit denen die Magnetfeldnote interagieren kann. Im folgenden Codefragment erstellen wir dreihundert Sprites. Beachten Sie, dass jeder Sprite-Knoten einen eigenen Physikkörper hat und wir die affectedByGravity-Eigenschaft auf YES setzen.

for (int i = 0; i < 300; i++) {
        
    SKSpriteNode *node4 = [SKSpriteNode spriteNodeWithTexture:[SKTexture textureWithImageNamed:@"wood.png"] size:CGSizeMake(25, 25)];
    [node4 setPhysicsBody:[SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(25, 25)]];
    [node4 setPosition:CGPointMake(arc4random()%640, arc4random()%950)];
    [node4.physicsBody setDynamic:YES];
    [node4.physicsBody setAffectedByGravity:YES];
    [node4.physicsBody setAllowsRotation:true]; 
    [node4.physicsBody setMass:0.9];
        
    [self addChild:node4];
}

Die abgeschlossene didMoveToView:-Methode sollte aussehen:

-(void)didMoveToView:(SKView *)view {
    SKPhysicsBody *physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];
    [self.physicsWorld setGravity:CGVectorMake(0, -9)];
    [self setPhysicsBody:physicsBody];
    
    magneticFieldNode = [SKFieldNode magneticField];
    [magneticFieldNode setPhysicsBody:[SKPhysicsBody bodyWithCircleOfRadius:80]];
    [magneticFieldNode setPosition:CGPointMake(100, 100)];
    [magneticFieldNode setStrength:3];
    [self addChild:magneticFieldNode];
    
    for (int i = 0; i < 300; i++) {
        SKSpriteNode *node4 = [SKSpriteNode spriteNodeWithTexture:[SKTexture textureWithImageNamed:@"wood.png"] size:CGSizeMake(25, 25)];
        [node4 setPhysicsBody:[SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(25, 25)]];
        [node4 setPosition:CGPointMake(arc4random()%640, arc4random()%950)];
        [node4.physicsBody setDynamic:YES];
        [node4.physicsBody setAffectedByGravity:YES];
        [node4.physicsBody setAllowsRotation:true];
        [node4.physicsBody setMass:0.9];
        
        [self addChild:node4];
    }
}

Bevor wir die Anwendung erstellen und ausführen, überschreiben wir die Methode touchMoved:withEvent:, damit Sie den Magnetfeldknoten durch Tippen auf Ihren Finger verschieben können.

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    for (UITouch *touch in touches) {
        [magneticFieldNode setPosition:[touch locationInNode:self]];
    }
}

Erstellen Sie die Anwendung und führen Sie sie aus, um die Wirkung des Magnetfeldknotens auf die Szene zu testen. Weitere Informationen zum Simulieren der Physik mit dem SpriteKit-Framework finden Sie in der Apple-Dokumentation zu diesem Thema.

2. SceneKit-Integration

SceneKit ist ein hochrangiges Objective-C-Framework zum Erstellen von Anwendungen und Spielen, die 3D-Grafiken verwenden. Es unterstützt den Import, die Bearbeitung und das Rendern von 3D-Assets. Der Rendering-Algorithmus erfordert nur die Beschreibung der Inhalte, Animationen und Aktionen Ihrer Szene, die Sie ausführen möchten.

Mit SceneKit können Sie jetzt 3D-Inhalte mit SpriteKit erstellen und bereitstellen. SceneKit hat eine Baumstruktur und kann auf zwei Arten verwendet werden:

eigenständige SceneKit-Umgebung
in SpriteKit integriert

SceneKit verfügt über eine Baumhierarchiezusammensetzung. In einer eigenständigen SceneKit-Umgebung ist die Basisklasse für die Baumstruktur eine SCNNode-Instanz, wie in der folgenden Abbildung dargestellt. Ein SCNNode-Objekt selbst hat keinen sichtbaren Inhalt, wenn die Szene, die es enthält, gerendert wird. Es definiert einfach eine Position im Raum, die die Position, Drehung und Skalierung eines Knotens relativ zu seinem übergeordneten Knoten darstellt.

Wenn Sie SceneKit in eine SpriteKit-basierte App integrieren, müssen Sie ein SK3DNode-Objekt als Stammobjekt für Ihre Szene definieren. Dies bedeutet, dass sich die Kernhierarchie von SceneKit ändert:

Beachten Sie, dass nicht jeder untergeordnete Knoten im obigen Diagramm erforderlich ist. Sie definieren und konfigurieren nur die Knoten, die Ihren Anforderungen entsprechen. Sie können beispielsweise einen SCNLight-Knoten hinzufügen, um die Szene zu beleuchten, auch wenn Sie keinen SCNCamera-Knoten in die Szene aufnehmen.

Schritt 1: Live-Vorschau der Modelle

SpriteKit und SceneKit unterstützen eine Reihe von Dateiformaten zum Importieren von Modellen. Sie können diese Modelle in Echtzeit in Xcode in der Vorschau anzeigen. Im Ordner Texturen Ihres Projekts (Ressourcen > Texturen) befindet sich eine Datei mit dem Namen ship.dae. Wenn Sie diese Datei auswählen, wird eine neue Benutzeroberfläche angezeigt (siehe Abbildung unten).

Auf der linken Seite des Editors sehen Sie zwei Gruppen:

Entitäten: Diese Gruppe enthält Informationen zu den vordefinierten Animationen, Kamerapositionen, Lichtern und Materialien, die in der Modelldatei definiert sind. Die von uns geöffnete Datei enthält nur Informationen zur Geometrie und zum Material des Modells.
Szenendiagramm: Diese Gruppe enthält Informationen zum ursprünglichen Objektnetz. In diesem Fall wurde das Objekt als Ganzes erstellt und Sie sehen nur ein einziges Netz.

Schritt 2: Importieren eines externen Modells

Um SceneKit in Kombination mit SpriteKit zu verwenden, müssen Sie die SceneKit-Bibliothek aus dem SceneKit-Framework importieren. Öffnen Sie SceneKitScene.m und fügen Sie es wie unten gezeigt hinzu.

1	#include <SceneKit/SceneKit.h>

Wir werden das in ship.dae gespeicherte Modell als 3D-Szene verwenden. Erstellen Sie in der didMoveToView:-Methode das SCNScene-Objekt, das eine Szene aus dieser Datei lädt.

1	SCNScene *shipScene = [SCNScene sceneNamed:@"ship.dae"];

Erinnern Sie sich an die Baumhierarchie, die ich zuvor erwähnt habe? Um das shipScene-Objekt zum SKScene-Objekt hinzuzufügen, sind zwei Schritte erforderlich:

Erstellen Sie ein SK3DNode-Objekt
Definieren Sie eine zu rendernde SceneKit-Szene

In diesem Fall ist die zu rendernde Szene die shipScene. Beachten Sie, dass Sie auch die Position und Größe des Knotens definieren.

1	SK3DNode *sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(300, 300)];
2	[sk3DNodeFist setPosition:CGPointMake(200,300)];
3	[sk3DNodeFist setScnScene:shipScene];

Fügen Sie schließlich das SK3DNode-Objekt als untergeordneten Knoten zum SKScene-Objekt hinzu.

1	[self addChild:sk3DNodeFist];

Um das Endergebnis ein wenig ansprechender zu gestalten, setzen Sie die Hintergrundfarbe der Szene wie unten gezeigt auf Grün.

1	[self setBackgroundColor:[SKColor greenColor]];

So sollte die vollständige didMoveToView:-Methode aussehen. Erstellen Sie die Anwendung und führen Sie sie aus, um das Ergebnis anzuzeigen.

-(void)didMoveToView:(SKView *)view {
    [self setBackgroundColor:[SKColor greenColor]];
    
    SCNScene *shipScene = [SCNScene sceneNamed:@"ship.dae"];
    
    SK3DNode *sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(300, 300)];
    [sk3DNodeFist setPosition:CGPointMake(200,300)];
    [sk3DNodeFist setScnScene:shipScene];
    [self addChild:sk3DNodeFist];
}

Schritt 3: Erstellen einer benutzerdefinierten Szene

Erstellen wir eine komplexere Szene, die mehrere SCNNode-Objekte enthält. Für diese zweite Szene müssen wir ein weiteres SK3DNode-Objekt erstellen.

1	SK3DNode *sk3DNode = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(400, 400)];
2	[sk3DNode setPosition:CGPointMake(150,200)];

Als Nächstes erstellen wir das SCNScene-Objekt, das die untergeordneten Szenenknoten enthält.

1	SCNScene *sceneObject = [SCNScene scene];

Dieses sceneObject hat drei Knoten:

Kamera: Dieser Knoten wird verwendet, um die Szene durch eine bestimmte Position zu betrachten.
Licht: Mit diesem Knoten können Sie verschiedene Materialeigenschaften des 3D-Objekts anzeigen. Normalerweise definieren Sie den Lichttyp und die Farbe.
3D-Objekt: Dies ist das importierte oder definierte Objekt in Ihrem Code. Mit SceneKit können Sie standardmäßig mehrere parametrische 3D-Objekte definieren, z. B. Torus, Box, Pyramide, Kugel, Zylinder, Kegel, Rohr, Kapsel, Boden, 3D-Text oder eine benutzerdefinierte Form.

Für jeden einzelnen Knoten führen Sie immer drei Aktionen aus. Nehmen wir als Beispiel den Kameraknoten.

Erstellen Sie ein SCNCamera-Objekt und definieren Sie seine Eigenschaften.
Erstellen Sie einen SCNNode, dem die SCNCamera zugewiesen wird.
Fügen Sie den SCNNode als untergeordneten Knoten zum SCNScene-Objekt hinzu.

Lassen Sie uns nun die drei Knoten erstellen, die ich zuvor erwähnt habe. Dies ist, was wir implementieren müssen, um den Kameraknoten zu erstellen.

SCNCamera *camera = [SCNCamera camera];
SCNNode *cameraNode = [SCNNode node];
[cameraNode setCamera:camera];
[cameraNode setPosition:SCNVector3Make(0, 0, 40)];
[sceneObject.rootNode addChildNode:cameraNode];

Standardmäßig befinden sich der Kamerastandort und die 3D-Szene am Ursprung (0,0,0). Mit der Positionseigenschaft können Sie die Kamera entlang der drei x-, y- und z-Achsen anpassen, um ihre Position zu ändern.

Der Lichtknoten erfordert etwas mehr Arbeit, aber das folgende Codefragment sollte leicht zu verstehen sein.

SCNLight *spotLight = [SCNLight light];
[spotLight setType:SCNLightTypeDirectional];
[spotLight setColor:[SKColor redColor]];

SCNNode *spotLightNode = [SCNNode node];
[spotLightNode setLight:spotLight];
[spotLightNode setPosition:SCNVector3Make(0, 0, 5)];
[cameraNode addChildNode:spotLightNode];
[sceneObject.rootNode addChildNode:spotLightNode];

Wir erstellen auch ein Torus-Objekt, wie im folgenden Code-Snippet gezeigt.

1	SCNTorus *torus= [SCNTorus torusWithRingRadius:13 pipeRadius:1.5];
2	SCNNode *torusNode = [SCNNode nodeWithGeometry:torus];
3	[torusNode setTransform:SCNMatrix4MakeRotation(M_PI / 3, 0, 1, 0)];
4	[sceneObject.rootNode addChildNode:torusNode];

Schließlich legen wir die Szene fest, die wir rendern möchten, und fügen den sk3DNode als untergeordneten Knoten der SKScene-Instanz hinzu.

1	[sk3DNode setScnScene:sceneObject];
2	[self addChild:sk3DNode];

So sollte die endgültige didMoveToView:-Methode aussehen.

-(void)didMoveToView:(SKView *)view {
    [self setBackgroundColor:[SKColor greenColor]];

    SCNScene *shipScene = [SCNScene sceneNamed:@"ship.dae"];
    
    SK3DNode *sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(300, 300)];
    [sk3DNodeFist setPosition:CGPointMake(200,300)];
    [sk3DNodeFist setScnScene:shipScene];
    [self addChild:sk3DNodeFist];
    
    SK3DNode *sk3DNode = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(400, 400)];
    [sk3DNode setPosition:CGPointMake(150,200)];
    
    SCNScene *sceneObject = [SCNScene scene];
    
    SCNCamera *camera = [SCNCamera camera];
    SCNNode *cameraNode = [SCNNode node];
    [cameraNode setCamera:camera];
    [cameraNode setPosition:SCNVector3Make(0, 0, 40)];
    [sceneObject.rootNode addChildNode:cameraNode];
    
    SCNLight *spotLight = [SCNLight light];
    [spotLight setType:SCNLightTypeDirectional];
    [spotLight setColor:[SKColor redColor]];
    
    SCNNode *spotLightNode = [SCNNode node];
    [spotLightNode setLight:spotLight];
    [spotLightNode setPosition:SCNVector3Make(0, 0, 5)];
    [cameraNode addChildNode:spotLightNode];
    [sceneObject.rootNode addChildNode:spotLightNode];
    
    SCNTorus *torus= [SCNTorus torusWithRingRadius:13 pipeRadius:1.5];
    SCNNode *torusNode = [SCNNode nodeWithGeometry:torus];
    [torusNode setTransform:SCNMatrix4MakeRotation(M_PI / 3, 0, 1, 0)];
    [sceneObject.rootNode addChildNode:torusNode];
    
    [sk3DNode setScnScene:sceneObject];
    [self addChild:sk3DNode];
}

Erstellen Sie die Anwendung und führen Sie sie aus. Sie sollten etwas Ähnliches wie den folgenden Screenshot sehen.

Schritt 4: Animieren der Szene

Sie können die Szene mit der CABasicAnimation-Klasse animieren. Sie müssen nur eine Instanz von CABasicAnimation erstellen, indem Sie animationWithKeyPath: aufrufen. Die Animation, die wir im folgenden Codefragment erstellen, wird auf unbestimmte Zeit wiederholt und hat eine Dauer von fünf Sekunden. Fügen Sie der didMoveToView:-Methode den folgenden Codeausschnitt hinzu.

CABasicAnimation *torusRotation = [CABasicAnimation animationWithKeyPath:@"rotation"];
torusRotation.byValue = [NSValue valueWithSCNVector4:SCNVector4Make(1, 1, 0, 4.0*M_PI)];
[torusRotation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[torusRotation setRepeatCount:INFINITY];
[torusRotation setDuration:5.0];

[torusNode addAnimation:torusRotation forKey:nil];

Erstellen Sie die Anwendung und führen Sie sie aus, um die Animation zu testen.

3. Mehr SpriteKit

Wenn Sie mehr über SpriteKit erfahren möchten, empfehlen wir Ihnen, die folgenden SpriteKit-Tutorials zu lesen:

Wenn Sie mehr über das SpriteKit-Framework erfahren möchten, empfehlen wir Ihnen, das SpriteKit-Programmierhandbuch von Apple zu lesen oder die Framework-Referenz zu durchsuchen.

Abschluss

Damit ist das zweite Tutorial dieser zweiteiligen Serie zu den neuen Funktionen des in iOS 8 eingeführten SpriteKit-Frameworks abgeschlossen. In diesem Teil haben Sie gelernt, wie Sie die Physiksimulation verwenden und SceneKit integrieren. Wenn Sie Fragen oder Kommentare haben, können Sie eine Zeile in die Kommentare einfügen.