Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. SceneKit
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:

German (Deutsch) translation by Katharina 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).

iOS App Template

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

App Information

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

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

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

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:

Initial scene

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:

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

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.

Scene with some deleted nodes

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.

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.

Animated button

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.

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:

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.

First sphere moves towards the second

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).

Particle system template

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

Particle system type

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.

Xcodes particle system editor

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
Particle system attributes 1
Particle system attributes 2

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

Finished particle system

Ö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.

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

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

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.

Explosion when the two spheres collide

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.

Advertisement
Advertisement
Advertisement
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.