Eine Einführung in SceneKit: Benutzerinteraktion, Animationen & Physik

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product image — What You'll Be Creating

Das ist der zweite Teil unserer Einführungsserie auf SceneKit. In diesem Tutorial gehe ich davon aus, dass Sie mit den im ersten Teil erläuterten Konzepten vertraut sind, einschließlich der Einrichtung einer Szene mit Lichtern, Schatten, Kameras, Knoten und Materialien.

In diesem Tutorial werde ich Ihnen einige der komplizierteren, aber auch nützlicheren Funktionen von SceneKit vorstellen, wie z. B. Animation, Benutzerinteraktion, Partikelsysteme und Physik. Durch das Implementieren dieser Features können Sie interaktive und dynamische 3D-Inhalte anstelle von statischen Objekten erstellen, wie im vorherigen Lernprogramm.

1. Einrichten der Szene

Erstellen Sie ein neues Xcode-Projekt basierend auf der Vorlage iOS > Application > Einzelansicht Anwendungsvorlage (iOS > Application > Single View Application template).

Benennen Sie das Projekt, legen Sie Language to Swift und Devices to Universal fest.

Öffnen Sie ViewController.swift und importieren Sie das SceneKit-Framework.

1	import UIKit
2	import SceneKit

Deklarieren Sie als Nächstes die folgenden Eigenschaften in der ViewController-Klasse.

var sceneView: SCNView!
var camera: SCNNode!
var ground: SCNNode!
var light: SCNNode!
var button: SCNNode!
var sphere1: SCNNode!
var sphere2: SCNNode!

Wir richten die Szene in der viewDidLoad-Methode wie unten gezeigt ein.

override func viewDidLoad() {
    super.viewDidLoad()
    
    sceneView = SCNView(frame: self.view.frame)
    sceneView.scene = SCNScene()
    self.view.addSubview(sceneView)
    
    let groundGeometry = SCNFloor()
    groundGeometry.reflectivity = 0
    let groundMaterial = SCNMaterial()
    groundMaterial.diffuse.contents = UIColor.blueColor()
    groundGeometry.materials = [groundMaterial]
    ground = SCNNode(geometry: groundGeometry)
    
    let camera = SCNCamera()
    camera.zFar = 10000
    self.camera = SCNNode()
    self.camera.camera = camera
    self.camera.position = SCNVector3(x: -20, y: 15, z: 20)
    let constraint = SCNLookAtConstraint(target: ground)
    constraint.gimbalLockEnabled = true
    self.camera.constraints = [constraint]
    
    let ambientLight = SCNLight()
    ambientLight.color = UIColor.darkGrayColor()
    ambientLight.type = SCNLightTypeAmbient
    self.camera.light = ambientLight
    
    let spotLight = SCNLight()
    spotLight.type = SCNLightTypeSpot
    spotLight.castsShadow = true
    spotLight.spotInnerAngle = 70.0
    spotLight.spotOuterAngle = 90.0
    spotLight.zFar = 500
    light = SCNNode()
    light.light = spotLight
    light.position = SCNVector3(x: 0, y: 25, z: 25)
    light.constraints = [constraint]
    
    let sphereGeometry = SCNSphere(radius: 1.5)
    let sphereMaterial = SCNMaterial()
    sphereMaterial.diffuse.contents = UIColor.greenColor()
    sphereGeometry.materials = [sphereMaterial]
    sphere1 = SCNNode(geometry: sphereGeometry)
    sphere1.position = SCNVector3(x: -15, y: 1.5, z: 0)
    sphere2 = SCNNode(geometry: sphereGeometry)
    sphere2.position = SCNVector3(x: 15, y: 1.5, z: 0)
    
    let buttonGeometry = SCNBox(width: 4, height: 1, length: 4, chamferRadius: 0)
    let buttonMaterial = SCNMaterial()
    buttonMaterial.diffuse.contents = UIColor.redColor()
    buttonGeometry.materials = [buttonMaterial]
    button = SCNNode(geometry: buttonGeometry)
    button.position = SCNVector3(x: 0, y: 0.5, z: 15)
    
    sceneView.scene?.rootNode.addChildNode(self.camera)
    sceneView.scene?.rootNode.addChildNode(ground)
    sceneView.scene?.rootNode.addChildNode(light)
    sceneView.scene?.rootNode.addChildNode(button)
    sceneView.scene?.rootNode.addChildNode(sphere1)
    sceneView.scene?.rootNode.addChildNode(sphere2)
}

Die Implementierung von viewDidLoad sollte Ihnen bekannt vorkommen, wenn Sie den ersten Teil dieser Serie gelesen haben. Alles, was wir tun, ist die Szene, die wir in diesem Tutorial verwenden werden. Die einzigen neuen Dinge sind die SCNFloor-Klasse und die zFar-Eigenschaft.

Wie der Name schon sagt, wird die SCNFloor-Klasse verwendet, um einen Boden oder Boden für die Szene zu erstellen. Dies ist viel einfacher im Vergleich zum Erstellen und Drehen eines SCNPlane wie im vorherigen Tutorial.

Die zFar-Eigenschaft bestimmt, wie weit die Kamera in der Entfernung sehen kann oder wie weit das Licht von einer bestimmten Quelle entfernt sein kann. Erstellen und führen Sie Ihre App aus. Ihre Szene sollte ungefähr so aussehen:

2. Benutzerinteraktion

Benutzerinteraktion wird in SceneKit durch eine Kombination der UIGestureRecognizer-Klassen- und Treffertests behandelt. Um beispielsweise ein Antippen zu erkennen, fügen Sie zuerst einem SCNView einen UITapGestureRecognizer hinzu, ermitteln die Position des Tap in der Ansicht und sehen, ob er mit einem der Knoten in Kontakt steht oder auf einen dieser Knoten trifft.

Um besser zu verstehen, wie dies funktioniert, verwenden wir ein Beispiel. Wenn ein Knoten angetippt wird, entfernen wir ihn aus der Szene. Fügen Sie der viewDidLoad-Methode der ViewController-Klasse das folgende Code-Snippet hinzu:

override func viewDidLoad() {
    super.viewDidLoad()
    
    sceneView = SCNView(frame: self.view.frame)
    sceneView.scene = SCNScene()
    self.view.addSubview(sceneView)
        
    let tapRecognizer = UITapGestureRecognizer()
    tapRecognizer.numberOfTapsRequired = 1
    tapRecognizer.numberOfTouchesRequired = 1
    tapRecognizer.addTarget(self, action: "sceneTapped:")
    sceneView.gestureRecognizers = [tapRecognizer]
        
    ...
}

Fügen Sie als Nächstes der ViewController-Klasse die folgende Methode hinzu:

func sceneTapped(recognizer: UITapGestureRecognizer) {
    let location = recognizer.locationInView(sceneView)
    
    let hitResults = sceneView.hitTest(location, options: nil)
    if hitResults?.count > 0 {
        let result = hitResults![0] as! SCNHitTestResult
        let node = result.node
        node.removeFromParentNode()
    }
}

Bei dieser Methode erhalten Sie zuerst die Position des Tap als CGPoint. Als Nächstes verwenden Sie diesen Punkt, um einen Treffer-Test für das sceneView-Objekt durchzuführen und die SCNHitTestResult-Objekte in einem Array namens hitResults zu speichern. Der options-Parameter dieser Methode kann ein Wörterbuch mit Schlüsseln und Werten enthalten, über das Sie in der Dokumentation von Apple nachlesen können. Wir überprüfen dann, ob der Treffertest mindestens ein Ergebnis zurückgegeben hat, und wenn dies der Fall ist, entfernen wir das erste Element im Array von seinem übergeordneten Knoten.

Wenn der Treffertest mehrere Ergebnisse zurückgibt, werden die Objekte nach ihrer z-Position sortiert, dh nach der Reihenfolge, in der sie aus der Sicht der aktuellen Kamera angezeigt werden. Wenn Sie beispielsweise in der aktuellen Szene auf eine der beiden Kugeln oder auf die Schaltfläche tippen, wird der angetippte Knoten das erste Element im zurückgegebenen Array bilden. Da der Boden jedoch aus Sicht der Kamera direkt hinter diesen Objekten erscheint, ist der Bodenknoten ein weiterer Punkt in der Ergebnismatrix, der zweite in diesem Fall. Das geschieht, weil ein Abgriff an derselben Stelle den Bodenknoten treffen würde, wenn die Kugeln und der Knopf nicht vorhanden wären.

Erstellen und starten Sie Ihre App und tippen Sie auf die Objekte in der Szene. Sie sollten verschwinden, wenn Sie auf jeden tippen.

Jetzt, da wir feststellen können, wann ein Knoten angetippt wurde, können wir mit dem Hinzufügen von Animationen beginnen.

3. Animation

Es gibt zwei Klassen, die zum Ausführen von Animationen in SceneKit verwendet werden können:

SCNAction
SCNTransaktion

SCNAction-Objekte sind sehr nützlich für einfache und wiederverwendbare Animationen wie Bewegung, Rotation und Skalierung. Sie können beliebig viele Aktionen zu einem benutzerdefinierten Aktionsobjekt kombinieren.

Die SCNTransaction-Klasse kann dieselben Animationen ausführen, ist jedoch in mancher Hinsicht vielseitiger, z. B. beim Animieren von Materialien. Diese zusätzliche Vielseitigkeit geht jedoch auf Kosten von SCNTransaction-Animationen, die nur die gleiche Wiederverwendbarkeit wie eine Funktion haben und der Aufbau über Klassenmethoden erfolgt.

Für Ihre erste Animation zeige ich Ihnen Code mit den Klassen SCNAction und SCNTransaction. In diesem Beispiel wird der Button nach unten bewegt und weiß, wenn er angetippt wird. Aktualisieren Sie die Implementierung der Methode sceneTapped(_:) wie unten gezeigt.

func sceneTapped(recognizer: UITapGestureRecognizer) {
    let location = recognizer.locationInView(sceneView)
        
    let hitResults = sceneView.hitTest(location, options: nil)
    if hitResults?.count > 0 {
        let result = hitResults![0] as! SCNHitTestResult
        let node = result.node
            
        if node == button {
            SCNTransaction.begin()
            SCNTransaction.setAnimationDuration(0.5)
            let materials = node.geometry?.materials as! [SCNMaterial]
            let material = materials[0]
            material.diffuse.contents = UIColor.whiteColor()
            SCNTransaction.commit()
                
            let action = SCNAction.moveByX(0, y: -0.8, z: 0, duration: 0.5)
            node.runAction(action)
        }
    }
}

In der Methode sceneTapped(_:) erhalten wir einen Verweis auf den Knoten, den der Benutzer angetippt hat, und prüfen, ob das die Taste in der Szene ist. Wenn das der Fall ist, animieren wir sein Material von rot nach weiß mit der SCNTransaction-Klasse und verschieben es entlang der y-Achse in einer negativen Richtung mithilfe einer SCNAction-Instanz. Die Dauer der Animation ist auf 0,5 Sekunden eingestellt.

Erstellen und starten Sie Ihre App erneut und tippen Sie auf die Schaltfläche. Es sollte sich nach unten bewegen und seine Farbe in Weiß ändern, wie im folgenden Screenshot gezeigt.

4. Physik

Mit dem SceneKit-Framework können Sie realistische physikalische Simulationen erstellen. Die Funktionalität, die die Physiksimulationen von SceneKit bieten, ist umfangreich und reicht von einfachen Geschwindigkeiten, Beschleunigungen und Kräften über Gravitations- und elektrische Felder bis hin zur Kollisionserkennung.

Was Sie in der aktuellen Szene tun werden, ist, ein Gravitationsfeld auf eine der Kugeln aufzubringen, so dass die zweite Kugel aufgrund der Schwerkraft in Richtung der ersten Kugel gezogen wird. Diese Schwerkraft wird aktiv, wenn die Taste gedrückt wird.

Das Setup für diese Simulation ist sehr einfach. Verwenden Sie ein SCNPhysicsBody-Objekt für jeden Knoten, für den Sie von der Physiksimulation betroffen sein sollen, und ein SCNPhysicsField-Objekt für jeden Knoten, der die Quelle eines Felds sein soll. Aktualisieren Sie die viewDidLoad-Methode wie unten gezeigt.

override func viewDidLoad() {
    ...

    buttonGeometry.materials = [buttonMaterial]
    button = SCNNode(geometry: buttonGeometry)
    button.position = SCNVector3(x: 0, y: 0.5, z: 15)
    
    // Physics
    let groundShape = SCNPhysicsShape(geometry: groundGeometry, options: nil)
    let groundBody = SCNPhysicsBody(type: .Kinematic, shape: groundShape)
    ground.physicsBody = groundBody
    
    let gravityField = SCNPhysicsField.radialGravityField()
    gravityField.strength = 0
    sphere1.physicsField = gravityField
    
    let shape = SCNPhysicsShape(geometry: sphereGeometry, options: nil)
    let sphere1Body = SCNPhysicsBody(type: .Kinematic, shape: shape)
    sphere1.physicsBody = sphere1Body
    let sphere2Body = SCNPhysicsBody(type: .Dynamic, shape: shape)
    sphere2.physicsBody = sphere2Body
    
    sceneView.scene?.rootNode.addChildNode(self.camera)
    sceneView.scene?.rootNode.addChildNode(ground)
    sceneView.scene?.rootNode.addChildNode(light)
    
    ...
}

Wir beginnen mit der Erstellung einer SCNPhysicsShape-Instanz, die die tatsächliche Form des Objekts angibt, das an der Physiksimulation beteiligt ist. Für die grundlegenden Formen, die Sie in dieser Szene verwenden, sind die Geometrieobjekte vollkommen in Ordnung. Bei komplizierten 3D-Modellen ist es jedoch besser, mehrere primitive Formen zu kombinieren, um eine ungefähre Form Ihres Objekts für die Physiksimulation zu erstellen.

Aus dieser Form erstellen Sie dann eine SCNPhysicsBody-Instanz und fügen sie dem Boden der Szene hinzu. Das ist notwendig, da jede SceneKit-Szene standardmäßig ein vorhandenes Gravitationsfeld besitzt, das jedes Objekt nach unten zieht. Der Kinematic-Typ, den Sie diesem SCNPhysicsBody geben, bedeutet, dass das Objekt an Kollisionen beteiligt ist, aber nicht von Kräften beeinflusst wird (und nicht aufgrund der Schwerkraft fallen wird).

Als Nächstes erstellen Sie das Gravitationsfeld und weisen es dem ersten Sphärenknoten zu. Nach dem gleichen Prozess wie für den Boden erstellen Sie dann einen Physikkörper für jede der beiden Sphären. Sie geben die zweite Sphäre jedoch als Dynamic-Physikkörper an, weil Sie möchten, dass sie von dem von Ihnen erzeugten Gravitationsfeld beeinflusst und bewegt wird.

Zuletzt müssen Sie die Stärke dieses Feldes einstellen, um es zu aktivieren, wenn die Schaltfläche angetippt wird. Fügen Sie der Methode sceneTapped(_:) die folgende Zeile hinzu:

func sceneTapped(recognizer: UITapGestureRecognizer) {
    ...
        if node == button {
            ...
            sphere1.physicsField?.strength = 750
        }
    }
}

Erstellen und starten Sie Ihre App, tippen Sie auf die Schaltfläche und beobachten Sie, wie sich die zweite Kugel langsam auf die erste beschleunigt. Beachten Sie, dass es einige Sekunden dauern kann, bis sich die zweite Kugel bewegt.

Es gibt nur noch eine Sache, die Kugeln explodieren zu lassen, wenn sie kollidieren.

5. Kollisionserkennung und Partikelsysteme

Um den Effekt einer Explosion zu erzeugen, nutzen wir die SCNParticleSystem-Klasse. Ein Partikelsystem kann von einem externen 3D-Programm, Quellcode oder, wie ich Ihnen gleich zeigen werde, Xcode's Partikelsystemeditor erstellt werden. Erstellen Sie eine neue Datei, indem Sie Command+N drücken, und wählen Sie Scenekit Particle System im Abschnitt iOS > Ressource (iOS > Resource section).

Partikelsystem VorlageStellen Sie die Partikelsystemvorlage auf Reactor ein. Klicken Sie auf Weiter, benennen Sie die Datei Explosion und speichern Sie sie in Ihrem Projektordner.

Im Projektnavigator sehen Sie nun zwei neue Dateien, Explosion.scnp und spark.png. Das Bild spark.png ist eine vom Partikelsystem verwendete Ressource, die Ihrem Projekt automatisch hinzugefügt wird. Wenn Sie Explosion.scnp öffnen, werden Sie in Xcode in Echtzeit animiert und gerendert angezeigt. Der Partikelsystemeditor ist ein sehr leistungsfähiges Werkzeug in Xcode und ermöglicht es Ihnen, ein Partikelsystem anzupassen, ohne es programmatisch zu machen.

Wenn das Partikelsystem geöffnet ist, gehen Sie rechts zum Attribute-Inspektor und ändern Sie die folgenden Attribute im Emitter-Bereich:

Geburtenrate bis 300
Richtungsmodus auf Zufällig

Ändern Sie die folgenden Attribute im Simulation-Abschnitt :

Lebensdauer bis 3
Geschwindigkeitsfaktor auf 2

Und schließlich, ändern Sie die folgenden Attribute im Abschnitt Lebenszyklus:

Emission dur. bis 1
Looping to Plays einmal

Ihr Partikelsystem sollte nun in alle Richtungen schießen und ähnlich dem folgenden Screenshot aussehen:

Öffnen Sie ViewController.swift und sorgen Sie dafür, dass Ihre ViewController-Klasse dem SCNPhysicsContactDelegate-Protokoll entspricht. Dieses Protokoll ist notwendig, um eine Kollision zwischen zwei Knoten zu erkennen.

1	class ViewController: UIViewController, SCNPhysicsContactDelegate

Ordnen Sie als Nächstes die aktuelle ViewController-Instanz als contactDelegate Ihres physicsWorld-Objekts in der viewDidLoad-Methode zu

override func viewDidLoad() {
    super.viewDidLoad()
    
    sceneView = SCNView(frame: self.view.frame)
    sceneView.scene = SCNScene()
    sceneView.scene?.physicsWorld.contactDelegate = self
    self.view.addSubview(sceneView)
    
    ...
}

.Implementieren Sie schließlich die physicsWorld (_:didUpdateContact:)-Methode in der ViewController-Klasse:

func physicsWorld(world: SCNPhysicsWorld, didUpdateContact contact: SCNPhysicsContact) {
    if (contact.nodeA == sphere1 || contact.nodeA == sphere2) && (contact.nodeB == sphere1 || contact.nodeB == sphere2) {
        let particleSystem = SCNParticleSystem(named: "Explosion", inDirectory: nil)
        let systemNode = SCNNode()
        systemNode.addParticleSystem(particleSystem)
        systemNode.position = contact.nodeA.position
        sceneView.scene?.rootNode.addChildNode(systemNode)
        
        contact.nodeA.removeFromParentNode()
        contact.nodeB.removeFromParentNode()
    }
}

Wir prüfen zunächst, ob die beiden an der Kollision beteiligten Knoten die beiden Kugeln sind. Wenn das der Fall ist, laden wir das Partikelsystem aus der Datei, die wir gerade erstellt haben, und fügen es einem neuen Knoten hinzu. Schließlich entfernen wir beide Sphären aus der Szene.

Erstellen und starten Sie Ihre App erneut und tippen Sie auf die Schaltfläche. Wenn sich die Kugeln berühren, sollten sie beide verschwinden und Ihr Partikelsystem sollte erscheinen und beleben.

Schlussfolgerung

In diesem Tutorial habe ich Ihnen gezeigt, wie Sie Benutzerinteraktion, Animation, Physiksimulation und Partikelsysteme mithilfe des SceneKit-Frameworks implementieren. Die Techniken, die Sie in dieser Serie gelernt haben, können auf jedes Projekt mit beliebig vielen Animationen, Physiksimulationen usw. angewendet werden.

Sie sollten nun komfortabel eine einfache Szene erstellen und dynamische Elemente wie Animation und Partikel-Systeme hinzufügen. Die Konzepte, die Sie in dieser Serie gelernt haben, sind auf die kleinste Szene mit einem einzelnen Objekt bis hin zu einem großen Spiel anwendbar.