Einführung in allgemeine Begriffe und Verwendung des Animationstools DragonBones (Bild)

Dieser Artikel bietet Ihnen eine Einführung in die allgemeinen Begriffe und die Verwendung des Animationstools DragonBones (Bilder). Ich hoffe, dass er für Sie hilfreich ist.

Wie erstelle ich lebendigere Animationseffekte mit geringeren Grafikkosten? Heute stelle ich Ihnen eine Reihe von Open-Source-Frameworks und -Tools für 2D-Skelettanimationen vor – DragonBones, das das Desktop-Skelettanimationsproduktionstool DragonBonesPro und eine mehrsprachige Version der DragonBones-Skelettanimationsbibliothek umfasst.

Das Folgende ist eine Einführung in die allgemeinen Begriffe und die Verwendung von DragonBones.

1. DragonBones Häufige Begriffe in der 2D-Skelettanimation

Skelett: „Skelett“ ist der am häufigsten verwendete Begriff in der 2D-Skelettanimation und bezieht sich im Allgemeinen auf viele Knochen, die aus einem Ganzen bestehen . DragonBones stellen auch einen Charakter dar, der Animationen enthalten kann.

Skelett (Knochen): Knochengitter oder Knochen ist die wichtigste Grundeinheit, aus der das Skelett im Skelettnetzwerk besteht. Die Knochen selbst können nicht zerlegt werden. Sie können im Skelett verschoben, gedreht, skaliert und relativ zueinander verschoben werden. Darüber hinaus kann zwischen Knochen eine Eltern-Kind-Beziehung bestehen. Im Allgemeinen führt die Bewegung des übergeordneten Knochens dazu, dass sich die untergeordneten Knochen zusammen bewegen. Wenn ein Charakter beispielsweise den Oberarm anhebt, wird dies auch der kleine Arm als untergeordneter Knochen des Oberarms tun entsprechend angehoben werden.

Slot: Der Slot ist ein Container zum Anzeigen von Bildern in Skelettanimationen und gehört zum Skelett. Jeder Slot kann mehrere Bilder enthalten, es wird jedoch jeweils nur ein Bild angezeigt. Jedes Knochengitter kann mehrere Schlitze enthalten. Der Slot verbindet die Animationslogikeinheit des Knochens und die Animationsanzeigeeinheit des Bildes und bildet das Bone-Slot-Bild, die grundlegende Knochenstruktur in der Skelettanimation von DragonBones.

Bild (Textur): Bild ist das Element, das das Bild anzeigt. Im 2D-Skelettsystem ist die Bedeutung von Bild und Textur nicht viel unterschiedlich, daher kann es hier auch als Textur bezeichnet werden.

Textursatz: Der Textursatz ist ein großes Bild, das aus gepackten Bildern besteht, was die Integration, Verbreitung und das Laden von Ressourcen im Spiel erleichtert. Wenn eine Hardwarebeschleunigungs-Engine oder Egret Runtime verwendet wird, kann der Textursatz die Rendering-Effizienz erheblich verbessern . Daher ist die von DragonBones bereitgestellte Standardschnittstelle zum Importieren von Ressourcen die Verwendung von Textursätzen.

Animations-Tweening: Wenn Designer eine Skelettanimation erstellen, müssen sie im Allgemeinen nicht den Charakter in jedem Frame bewegen, sondern nur den Schlüssel an einigen Schlüsselstellen (Schlüsselbildern). Der Schlüssel wird ersetzt durch prozedural generierte Tweens, bei denen es sich um Animations-Tweens handelt. Animations-Tweens können linear oder nichtlinear sein. Lineares Tweening bedeutet, dass die Komponenten im Tween mit konstanter Geschwindigkeit transformiert (übersetzt, gedreht, skaliert) werden. Nichtlineares Tweening wird im Allgemeinen durch verschiedene Kurven, DragonBones, dargestellt Standardmäßig werden Bezier-Kurven verwendet, um nichtlineares Tweening darzustellen.

Animationsübergang: Der Animationsübergang bezieht sich auf den Übergangseffekt, der beim Wechsel von einer Animation zu einer anderen entsteht. DragonBones bietet eine Übergangseffektfunktion beim Wechseln beweglicher Animationsoberflächen. Solange eine Übergangszeit festgelegt ist, kann automatisch ein sanfter Übergangseffekt generiert werden.

Animationsfusion: Die dynamische Oberflächenfusion bietet die Funktion, dass ein Charakter mehrere Animationen gleichzeitig abspielt. Diese Funktion wird im Allgemeinen in zwei Situationen verwendet. Der erste Typ besteht darin, dass, wenn die Animation einer Figur relativ komplex ist, der Oberkörper und der Unterkörper möglicherweise separat animiert werden müssen und dann nach Belieben kombiniert werden können. Der zweite Typ ist, wenn eine Figur beim Laufen erschossen werden muss und der Körper sich nach hinten lehnt, d. h. die Lauf- und Erschießungsanimationen werden gleichzeitig eingefügt. Die Animationsfusionsfunktion erfüllt diese beiden Anforderungen, indem sie Gewichte für verschiedene Animationen festlegt und Animationsmasken zu verschiedenen Knochenpfaden hinzufügt. Es ist zu beachten, dass DragonBones die Animationsfusionsfunktion nur im Normalmodus bereitstellt und der Geschwindigkeitsmodus diese Funktion nicht bereitstellt.

Vorwärtsdynamik (FK) und Rückwärtsdynamik (IK): Bei der Skelettanimation wird im Allgemeinen die Bewegung der untergeordneten Knochen durch die übergeordneten Knochen beeinflusst, z. B. die Drehung des Oberarms und die Drehung des Unterarms der Rotation folgen, das nennt man Vorwärtsdynamik, das heißt, der Vater wirkt auf das Kind. Natürlich gibt es auch in der realen Welt die umgekehrte Situation: Wenn Sie beispielsweise mit dem Unterarm geschlagen werden, wird dieser auch mit Gewalt bewegt Reverse Power-Studie. Bei der Steuerung der Bone-Pfad-Anpassungsaktionen in DragonBones entsprechen die Bones im Allgemeinen den Gesetzen der Vorwärtsdynamik, d. h. wenn der übergeordnete Bone angepasst wird, sind auch die untergeordneten Bones betroffen. Wenn Sie die Animation durch umgekehrte Dynamik anpassen möchten, können Sie dazu das entsprechende IK-Tool auswählen.

Öffnen Sie nach Abschluss der Installation zunächst die Willkommensoberfläche und wählen Sie das Projekt aus, wie in Abbildung 1 dargestellt.

Abbildung 1

Öffnen Sie dann das von Ihnen ausgewählte Projekt, wie in Abbildung 2 gezeigt.

Bild 2

Im Folgenden finden Sie eine Erläuterung zur Verwendung der einzelnen Tools in Abbildung 2

1 Systemsymbolleiste

Die Systemsymbolleiste enthält die am häufigsten verwendeten Funktionen Die Tastenfunktionen von links nach rechts sind: Neues Projekt, Projekt öffnen, Projekt speichern, Rückgängig machen, Wiederherstellen, Importieren, Exportieren, Vorschau der Arbeitsteilung, wie in Abbildung 3 dargestellt.

Abbildung 3

Neues Projekt: Wird zum Erstellen eines neuen Projekts verwendet. Klicken Sie auf diese Schaltfläche, um das Dialogfeld „Neues Projekt“ zu öffnen.
Projekt öffnen: Wird zum Öffnen eines vorhandenen Projekts verwendet. Klicken Sie auf diese Schaltfläche, um das vom System angegebene Dateidialogfeld zu öffnen.
Projekt speichern: Wenn Änderungen am aktuellen Projekt vorgenommen werden, leuchtet die Schaltfläche „Projekt speichern“ auf. Wenn Sie auf die Schaltfläche klicken, wird das aktuelle Projekt gespeichert. Die Schaltfläche „Projekt speichern“ wird abgeblendet.
Rückgängig: Wird verwendet, um den letzten Bearbeitungsvorgang rückgängig zu machen.
Wiederherstellen: Wird verwendet, um den letzten rückgängig gemachten Bearbeitungsvorgang wiederherzustellen.
Importieren: Wird zum Importieren eines unterstützten Projektdateiformats verwendet. Durch Klicken auf diese Schaltfläche wird das Importdialogfeld geöffnet.
Exportieren: Wird zum Exportieren des Projekts verwendet. Durch Klicken auf diese Schaltfläche wird das Exportdialogfeld geöffnet.
Vorschau: Vorschau des laufenden Effekts der Animation im Browser. Wenn Ihr Projekt mehrere Animationsclips enthält, können Sie mit einem linken Mausklick im Browser zwischen diesen wechseln.
Arbeitsteilung: Öffnen Sie die Seite zur Arbeitsteilung und zum Hochladen.

2. Hauptszenensymbolleiste

Die Hauptszenensymbolleiste wird zum Wechseln des Mausmodus während Szenenoperationen verwendet. Von links nach rechts sind dies: Auswahlwerkzeug, Posewerkzeug , Handwerkzeug und Knochenerstellungswerkzeug, wie in Abbildung 4 dargestellt.

Abbildung 4

Auswahlwerkzeug: Wenn Sie einen Knochen auswählen, klicken Sie mit der Maus auf den Knochen selbst, halten Sie die linke Taste gedrückt, um ihn zu verschieben, und Sie können Bewegen Sie das Skelett beliebig in X- und Y-Richtung. Klicken Sie mit der Maus auf die rote X-Achse (oder die grüne Y-Achse), um in eine einzelne X-Achsen-Richtung (Y-Achse) zu verschieben. Ziehen Sie das Bild selbst mit der Maus in den Schlitz und halten Sie die linke Taste gedrückt, um es zu verschieben. Sie können die Knochen in jede X- und Y-Richtung verschieben. Klicken Sie auf die rote X-Achse (oder die grüne Y-Achse), um die einzelne X-Achse (Y-Achse) auszuwählen. In die Richtung übersetzen. Ziehen Sie den Zoom-Griff mit der Maus, um den Slot zu vergrößern. Steckdosen können durch Klicken und Halten der Maus in anderen Bereichen gedreht werden (Steckdosen können nur im Skelettmontagemodus ausgewählt und ihren Status geändert werden).

Pose-Werkzeug: Wenn ein Knochen ausgewählt ist, dreht sich der Knochen beim Ziehen mit der Maus. Wenn zwei oder mehr Knochen ausgewählt sind, folgen die ausgewählten Knochen den IK-Regeln und dem Ziehen der Maus.

Werkzeug „Knochen erstellen“: Wählen Sie das Werkzeug „Knochen erstellen“, klicken Sie mit der linken Maustaste in der Hauptszene und ziehen Sie, um Knochen zu erstellen. Darüber hinaus unterstützt die Hauptszene auch einige gängige Vorgänge:
Drücken und ziehen Sie das Mausrad, um in die DragonBones Pro-Szene hinein- und herauszuzoomen.
Wenn sich die Maus auf dem Auswahlwerkzeug oder Handwerkzeug befindet, doppelklicken Sie irgendwo mit der linken Maustaste, um die Szenengröße auf 100 % wiederherzustellen.
Klicken Sie mit der rechten Maustaste auf einen beliebigen Bereich, um die Auswahl aufzuheben.

Gewichtstool: Das Gewicht stellt den Anteil der Haut dar, die von verschiedenen Knochenverformungen betroffen ist. Es ist wichtig, das Gewicht jedes Hautscheitels angemessen zuzuordnen.

3. Sichtbares optionales Filterfeld

Das sichtbare optionale Filterfeld dient zum Ein- und Ausschalten der Sichtbarkeit, Optionalität und Vererbung von Bones und Slots. Die Bearbeitung Der Schalter ist in Abbildung 5 dargestellt.

Abbildung 5

Sichtbar: Wenn eingeschaltet, ist der Knochen oder Schlitz in der Hauptszene sichtbar; wenn er ausgeschaltet ist, ist der Knochen oder Schlitz nicht sichtbar sichtbar in der Hauptszene sichtbar.
Optional: Wenn aktiviert, können Bones oder Slots in der Hauptszene ausgewählt werden; wenn deaktiviert, können Bones oder Slots nicht in der Hauptszene ausgewählt werden.
Vererbung: Wenn diese Option aktiviert ist, erbt der Bone oder Slot die Bearbeitung des übergeordneten Bones. Wenn sie deaktiviert ist, erbt der Bone oder Slot nicht die Bearbeitung des übergeordneten Bones.

4. Transformationsfenster

Das Transformationsfenster wird zum Anzeigen und Ändern der X- und Y-Koordinaten (relativ zum übergeordneten Knochen), der Skalierung und des Rotationswinkels verwendet Knochen oder Slots und die Größe des Bildes (wird nur für Slots und Bilder angezeigt). Das Transformationsfeld ist in Abbildung 6 dargestellt.

Abbildung 6

5. Szenenbaum-Panel

Das Szenenbaum-Panel wird zum Anzeigen und Bearbeiten verwendet Die Hauptszene Die Eltern-Kind-Baumbeziehung zwischen Knochen und Schlitzen ist in Abbildung 7 dargestellt.

Bild 7

Die Schaltflächen in der oberen rechten Ecke sind: Intelligente Filterung, Schaltfläche zum Erstellen eines Skeletts und Schaltfläche zum Löschen. Im Skelett-Montagemodus wird durch Doppelklicken auf einen Knochen oder Schlitz im Szenenbaum ein Umbenennungsfenster geöffnet. Dieses Bedienfeld ist sowohl unter Skeleton-Rigging als auch unter Animation sichtbar, kann jedoch unter Animation nicht bearbeitet werden. Knochen und Slots können im Szenenbaum überprüft werden.

Das Folgende ist die Bearbeitung der Bone-Vererbungsbeziehung im Szenenbaum:

Die Vererbungsbeziehung zwischen Bones kann durch Ziehen im Szenenbaumfenster geändert werden.

Untergeordnete Knochen können zu Knochen gezogen werden, die sich auf derselben Ebene oder über dem übergeordneten Knochen befinden.

Der übergeordnete Bone kann nicht unter seine untergeordneten Bones und die darunter liegenden Bones gezogen werden

6. Hierarchiepanel

Das Das Hierarchie-Panel wird zum Anzeigen und Bearbeiten der oberen und unteren hierarchischen Beziehungen von Slots in der Hauptszene verwendet. Die hierarchische Beziehung zwischen Slots kann durch Ziehen geändert werden. Nachdem Sie den Steckplatz ausgewählt haben, können Sie auch auf die Schaltflächen „Eine Ebene nach oben“ und „Eine Ebene nach unten“ in der oberen rechten Ecke oder auf die Tastenkombination [] klicken, um die hierarchische Beziehung zu ändern. Dieses Bedienfeld wird nur im Skelettbaugruppenmodus angezeigt. Das Hierarchiefeld ist in Abbildung 8 dargestellt.

Abbildung 8

7. Ressourcenpanel

Alle im Projekt verwendeten Bilder werden in der Ressource gespeichert Panel Mitte. Die Ressourcenbibliothek jedes DragonBonesPro-Projekts entspricht einem Ordner, der tatsächlich im System im Ordner vorhanden ist Alle von Pro unterstützten PNG-Bilder werden im Ressourcenfenster angezeigt. Über andere Systemordner zu DragonBones Ziehen Sie PNG-Dateien per Drag-and-Drop in das Ressourcenfenster von Pro, um Bilder zur Ressourcenbibliothek hinzuzufügen. Die entsprechenden PNG-Dateien werden auch in den entsprechenden Ressourcenbibliotheksordner kopiert. Sie können auch auf die Schaltfläche „Ressourcen importieren“ klicken und im Popup-Systemfenster die hinzuzufügende Ressourcen-PNG-Datei angeben. Das Ressourcenfenster ist in Abbildung 9 dargestellt.

Abbildung 9

Die Schaltflächen in der oberen rechten Ecke sind: Schaltfläche „Ressource importieren“, Schaltfläche „Bibliotheksordner öffnen“ und Schaltfläche „Pfad ändern“. Dieses Panel kann nur im Skelettbaugruppenmodus angezeigt werden.

8. Schaltfläche zum Umschalten des Bearbeitungsmodus

Die Schaltfläche zum Umschalten des Bearbeitungsmodus befindet sich in der oberen linken Ecke der Szene und wird zum Umschalten zwischen Skelettbaugruppe und verwendet Animationsproduktion, wie in Abbildung 10 gezeigt.

Abbildung 10

9. Animationspanel

Das Animationspanel wird zum Anzeigen und Bearbeiten von Animationsclips verwendet , wie in Abbildung 11 gezeigt.

Abbildung 11

Die Schaltflächen in der oberen rechten Ecke sind: Schaltfläche „Animationsclip erstellen“, Schaltfläche „Animationsclip klonen“, Schaltfläche „Animationsclip umbenennen und löschen“. Dieses Panel kann nur unter Animation angezeigt werden. Die drei Parameter unter dem Animationsfeld sind:

Animationszeit: nicht editierbar, Einheit ist s. Die tatsächliche Dauer des Animationsclips wird anhand der Bildrate und der Gesamtzahl der Bilder des Animationsclips berechnet.
Übergangszeit: Der Standardwert ist 0, editierbar, Einheit ist s. Wird verwendet, um die Übergangszeit zwischen verschiedenen sich bewegenden Oberflächen im Spiel festzulegen.
Anzahl der Wiedergaben: Der Standardwert ist 0 und kann bearbeitet werden. Wird verwendet, um die Anzahl der Wiederholungen der Animation im Spiel festzulegen. Bei der Einstellung 0 bedeutet dies eine unendliche Wiederholung.

10. Zeitleistenfenster

Das Zeitleistenfenster wird zum Bearbeiten von Animationsclips verwendet, wie in Abbildung 12 dargestellt.

Abbildung 12

Wiedergabesteuerungstool

Wiedergabesteuerungstool im Timeline-Panel zur Steuerung der Animationswiedergabe Clips. Von links nach rechts: Schaltfläche „Zurück zum ersten Bild“, Schaltfläche „Vorheriges Bild“, Rückspultaste, Wiedergabetaste, Schaltfläche „Nächstes Bild“, Schaltfläche „Letztes Bild“, Schieberegler zur Steuerung der Wiedergabegeschwindigkeit, aktuelles Bild, aktuelle Zeit, Bildrate, wie in Abbildung 13 dargestellt . Der Steuerbereich des Schiebereglers zur Steuerung der Wiedergabegeschwindigkeit beträgt 0,1x~10x. Aktuelles Bild: bearbeitbar, geben Sie eine bestimmte Bildnummer ein und der grüne Wiedergabezeiger springt zur entsprechenden Bildnummer. Ziehen Sie den grünen Zeiger oder spielen Sie den sich bewegenden Kreis ab, und der Wert des aktuellen Frames ändert sich entsprechend. Aktuelle Zeit: Nicht bearbeitbar, berechnet basierend auf dem aktuellen Bild und der Bildrate. Bildrate: editierbar, Standard ist 24fps. Legen Sie die Anzahl der Animationsbilder pro Sekunde fest, wie in Abbildung 13 dargestellt.

Abbildung 13

Symbolleiste für die Rahmenbearbeitung

Symbolleiste für die Frame-Bearbeitung, von links nach rechts: unnötige Frames löschen, mehrere Frames bearbeiten, Zwiebelschalen-Schaltfläche, Frame nach rechts verschieben, Frame nach links verschieben, automatische Keyframe-Schaltfläche, Kurveneditor, wie in Abbildung 14 dargestellt .

Abbildung 14

Unnötige Frames löschen: Suchen Sie automatisch nach unnötigen Keyframes in der gesamten Timeline und löschen Sie diese. Das Löschen unnötiger Keyframes kann die Animationsdatei verkleinern, ohne die Animationspräsentation überhaupt zu beeinträchtigen.
Zwiebelschalen-Taste: Schaltet die Zwiebelschalen-Funktion ein und aus.
Mehrere Frames bearbeiten: Wählen Sie mehrere Frames aus, um Kurven stapelweise zu bearbeiten.
Keyframes nach links verschieben, Keyframes nach rechts verschieben: Durch Klicken auf die Schaltfläche werden alle Keyframes nach rechts (links) vom ausgewählten Keyframe verschoben. Wenn das letzte Bild auf der linken Seite bereits einen Keyframe hat, können Sie es nicht mehr nach links verschieben. Die Schaltfläche „Keyframe nach links verschieben“ wird ausgegraut. Das Gleiche gilt für die rechte Seite.
Auto-Keyframe-Schaltfläche: Diese Schaltfläche hat zwei Zustände: Weiß ist ausgeschaltet und Rot ist eingeschaltet. Wenn diese Option aktiviert ist, werden bei Änderungen an Bones oder Slots automatisch Keyframes auf dem Rahmen des grünen Abspielkopfs und der entsprechenden Bone- oder Slot-Ebene hinzugefügt.
Kurveneditor: Kurveneditor In diesem Bereich können Sie Tweening zwischen Bildern anwenden, um unterschiedliche Tweening-Effekte zu erzielen.

Timeline-Symbolleiste

Timeline-Symbolleiste, von links nach rechts: Liste einklappen, Liste erweitern, Schaltfläche „Rahmen kopieren“, Schaltfläche „Rahmen ausschneiden“, Schaltfläche „Rahmen einfügen“ und Schaltfläche „Rahmen löschen“, wie in Abbildung 15 dargestellt.

Abbildung 15

Liste einklappen: Alle Ebenen auf der Zeitleiste einklappen.
Liste erweitern: Alle Ebenen auf der Zeitleiste erweitern.
Schaltfläche „Frame kopieren“: Klicken Sie nach der Auswahl des Keyframes auf diese Schaltfläche. Die Parameter des Frames werden in die Zwischenablage kopiert.
Schaltfläche „Rahmen ausschneiden“: Klicken Sie auf diese Schaltfläche, nachdem Sie den Keyframe ausgewählt haben, und die Parameter des Rahmens werden in die Zwischenablage ausgeschnitten.
Schaltfläche „Frame einfügen“: Die Frame-Parameter in der Zwischenablage können in jede Frame-Nummer und jede Ebene in der Zeitleiste eingefügt werden (Frames der Bone-Ebene und der Slot-Ebene können nicht ineinander eingefügt werden, und die Parameter werden im Schlüsselbild aufgezeichnet sind die gleichen wie die des vorherigen Schlüssels. Der relative Änderungswert des Frames (der relative Änderungswert von Frame 0 ist 0) und kann auch vorhandene Schlüsselbilder überschreiben.
Schaltfläche „Rahmen löschen“: Löschen Sie den aktuell ausgewählten Rahmen.
Schaltfläche „Keyframe hinzufügen“: Diese Schaltfläche verfügt über 3 Statusschaltflächen. Weiß bedeutet keine Änderungen und keine Keyframes. Gelb zeigt Änderungen an, es wurden keine Keyframes hinzugefügt oder aktualisiert. Rot zeigt an, dass keine Änderungen vorgenommen wurden und Keyframes hinzugefügt oder aktualisiert wurden. Im weißen oder gelben Zustand werden durch Klicken auf diese Schaltfläche Keyframes auf dem Frame hinzugefügt oder aktualisiert, in dem sich der grüne Wiedergabezeiger befindet, und auf der entsprechenden Bone- oder Slot-Ebene. Das Klicken im roten Zustand hat keine Auswirkung. Wenn der Knochen oder Schlitz im roten oder weißen Zustand geändert wird, wird die Schaltfläche gelb und zeigt damit an, dass der Knochen oder Schlitz geändert wurde. Diese Schaltfläche ist nicht verfügbar, wenn kein Knochen oder Slot ausgewählt ist.
Kurvendiagramm-Panel-Schaltfläche: Schaltet das Kurvendiagramm-Panel ein und aus.

Timeline-Zoom-Tool

Das Timeline-Zoom-Tool wird verwendet, um die Skalierung der Timeline zu steuern, wie in Abbildung 16 dargestellt. Auf der linken Seite befinden sich die Schaltflächen „An den Bildschirm anpassen“ und die Schaltflächen „–“ und „+“ steuern das Vergrößern und Verkleinern. Durch Ziehen des Schiebereglers kann auch das Zoomen gesteuert werden. Wie in Abbildung 16 dargestellt.

Abbildung 16

Zwiebelschalen-Werkzeug

Nachdem die Zwiebelschalenfunktion aktiviert wurde, N Frames davor und danach wird gleichzeitig eine Schattenkarte angezeigt (Standard ist 3 Frames), die es Animatoren erleichtert, Charakterbewegungen besser zu positionieren und kontinuierliche Animationen flüssiger zu gestalten. Rufen Sie den Animationsmodus auf und klicken Sie auf die Schaltfläche „Zwiebelhäuten“ in der Timeline-Symbolleiste, um die Funktion „Zwiebelhäuten“ zu aktivieren, wie in Abbildung 17 dargestellt.

Abbildung 17

Nachdem die Zwiebelschalenfunktion aktiviert wurde, erscheint die Animation in der Hauptszene in Blau (führendes Bild) und Rot (nachfolgende Bilder). ) Schatten zeigt die Animation einen Schattenbildeffekt, wie in Abbildung 18 dargestellt.

Abbildung 18

Gleichzeitig erscheint der grüne Wiedergabezeiger der Timeline und der Anzeigebereich der Zwiebelschale wird standardmäßig um 3 angepasst Bilder vorher und nachher, und die linke Seite wird angepasst. Der Griff ist rot und der Einstellgriff auf der rechten Seite ist blau, wie in Abbildung 19 dargestellt.

Bild 19

Ziehen Sie am blauen oder roten Griff, um die Anzahl der von der blauen oder roten Zwiebelschale angezeigten Bilder anzupassen. Je mehr Bilder Sie abdecken, desto mehr Schatten werden im Hauptmenü angezeigt. Der Anzeigebereich der Zwiebelschale bewegt sich, wenn sich der grüne Wiedergabezeiger bewegt. Während der Animationswiedergabe wird der Zwiebelschalen-Anzeigebereich auf dem grünen Wiedergabezeiger ausgeblendet. In der Hauptszene werden die roten und blauen Schattenbilder zusammen mit der Originalanimation abgespielt. Die Animationsaktion des blauen Schattenbilds geht der Originalanimation voraus und die Animationsaktion des roten Schattenbilds hinkt der Originalanimation hinterher.

Eigenschaften der Zwiebelschale: Der längste Anzeigebereich der blauen oder roten Zwiebelschale darf die Länge des Animationsclips selbst nicht überschreiten. Obwohl der Animationsclip standardmäßig in einer Schleife abgespielt wird, wird in der Hauptszene keine rote Zwiebel-Schattenpuppe angezeigt, wenn sich der grüne Wiedergabezeiger auf Bild 0 befindet. Wenn sich der grüne Einfügezeiger am letzten Bild befindet, wird in der Hauptszene keine blaue Zwiebelschattenpuppe angezeigt.

Zeitleiste

Die Schlüsselbilder in der Knochenebene sind weiß, die Schlüsselbilder in der Slot-Ebene sind gelb und die Schlüsselbilder in der Ereignisebene sind rot. Wenn Ereignisse und Sprünge enthalten sind, ist der Bone-Keyframe des Sounds rosa. Die erste Ebene der Zeitleiste ist die Anordnung sich bewegender Oberflächen und kann nicht direkt bearbeitet werden. Nach dem Hinzufügen von Keyframes zu einer anderen Ebene erscheint ein rautenförmiges Quadrat auf der Ebene des Animationsclips, das darauf hinweist, dass sich Keyframes in einer oder mehreren Ebenen darunter befinden den aktuellen Frame. Weiß steht für Keyframes der Knochenebene, Gelb für Keyframes der Slot-Ebene, Rot für Keyframes der Ereignisebene und Rosa für Sky-Keyframes, bei denen mehrere Ebenen gemischt sind. Durch Auswahl des Diamantfelds werden alle Keyframes unter dieser Frame-Nummer ausgewählt. Sie können als Ganzes nach links und rechts schwenken, ziehen, kopieren, ausschneiden, einfügen und löschen. Solange Keyframes an der entsprechenden Bildnummer vorhanden sind, erscheint eine rote Linie auf dem Timeline-Lineal und das Timeline-Lineal scrollt mit den Auf- und Ab-Bildlaufleisten der Timeline und ist immer sichtbar. Die erste Ebene der Zeitleiste ist die Bone-Ebene oder Ereignisebene und die zweite Ebene ist die Slot-Ebene. Die Slot-Ebene ist relativ zur Bone-Ebene um eine Ebene nach rechts eingerückt. Die hierarchische Beziehung zwischen übergeordneten und untergeordneten Knochen wird in der Zeitleiste nicht widergespiegelt. Es gibt nur eine Ereignisschicht. Die ausgewählte Ebene wird hervorgehoben und die Knochen oder Schlitze der entsprechenden Ebene werden ebenfalls ausgewählt. Wenn umgekehrt die Knochen oder Schlitze ausgewählt werden, wird auch die entsprechende Ebene ausgewählt. Keyframes können an eine beliebige Stelle in derselben Ebene der Zeitleiste gezogen werden. Das Zeitleistenfenster ist in Abbildung 20 dargestellt gezeigt.

Abbildung 20

Kurveneditor

Kurveneditor In diesem Bereich können Sie den Rahmen bearbeiten und Tweening anwenden zwischen Bildern, um unterschiedliche Tweening-Effekte zu erzielen. Wenn Sie beispielsweise möchten, dass der Armschwung einer Figur während einer laufenden Aktion zuerst schneller und dann langsamer wird, können Sie den ersten Keyframe unter den ersten beiden Keyframes der Armschwungaktion auswählen und dann auf der Zeitleiste auf die Kurvenschaltfläche klicken Wie in 21 gezeigt, öffnen Sie das Kurveneditor-Panel.

Abbildung 21

Lineares Tweening wird standardmäßig zwischen Schlüsselbildern verwendet. Im Kurveneditor ist es nur eine gerade Linie. Unten im Bedienfeld sehen Sie eine Reihe von Schaltflächen, bei denen es sich um einige im Tool voreingestellte Beschleunigungseffekte handelt, wie in Abbildung 22 dargestellt.

Abbildung 22

Durch Klicken auf diese Schaltflächen kann die Kurve schnell in den entsprechenden Effekt geändert werden, von links nach rechts: kein Tweening, lineares Tweening, Einsprechen, Aussprechen, Einblenden und Aussprechen (Einblenden bedeutet zuerst langsam und dann schnell, Ausblenden bedeutet zuerst schnell und dann langsam, Einblenden und Aussprechen bedeutet einmal schnell und dann langsam), wie in Abbildung 23 dargestellt.

Abbildung 23

Wenn Sie mit den Auswirkungen dieser Voreinstellungen nicht zufrieden sind, können Sie auch die Kontrollpunkte (weiß) auf den Steuerleisten ziehen Beide Enden der Kurve (die hohlen Punkte) stammen von der freien Anpassungskurve, wie in Abbildung 24 dargestellt. Derzeit kann der Kontrollpunkt nur zwischen 100 % und 200 % eingestellt werden. Diese Einschränkung wird in zukünftigen Versionen gelockert. Wenn die Kurve in den Bereich mit negativen Werten eintritt, bedeutet dies, dass die Animation zunächst eine Zeit lang in Rückwärtsrichtung und dann in Vorwärtsrichtung ausgeführt wird. Eine Kurve über 100 % bedeutet, dass die Animation über die Zielposition hinaus und dann in die entgegengesetzte Richtung zur Zielposition läuft.

Abbildung 24

Es ist erwähnenswert, dass der Bearbeitungseffekt der Kurve in Echtzeit und vom Designer in der Animation der Szene widergespiegelt werden kann Sie können die Animation abspielen und gleichzeitig den Kurvenvorschaueffekt anpassen. Darüber hinaus ändert die Anpassung der Kurve die Animationsdaten sofort und erfordert nicht, dass der Designer erneut auf die Keyframe-Schaltfläche klickt, um die Änderung zu bestätigen. Wenn Sie mit dem Änderungseffekt nicht zufrieden sind, können Sie mit der Rückgängig-Funktion zum Zustand vor der Änderung zurückkehren.

3. Neues Animationsprojekt

DragonBonesPro bietet praktische und schnelle Projekte.

1. Erstellen Sie ein neues Projekt

Öffnen Sie ein neues Projekt auf der Willkommens-Homepage und ein Dialogfeld wird angezeigt, um eine Kielanimation zu erstellen, wie in Abbildung 25 gezeigt .

Abbildung 25

Klicken Sie, um eine Kielanimation zu erstellen. Die folgenden Optionen werden angezeigt: Skelettanimationsvorlage, Frame-by-Frame-Animationsvorlage, Tween-Animationsvorlage , benutzerdefiniert, wie in Abbildung 26 dargestellt.

Abbildung 26

Klicken Sie auf die entsprechende Vorlage und die entsprechende Vorlage wird in der Erstellungsspalte ausgewählt. Sie haben lediglich unterschiedliche Parameter und die gleiche Funktion. Sie können auch nach dem Erstellen des Projekts mit der rechten Maustaste auf die Ressourcen klicken und eine neue Komponente wird angezeigt, wie in Abbildung 27 dargestellt.

Abbildung 27

Klicken Sie auf die neue Komponente und die gleiche Auswahl wird angezeigt, wie in Abbildung 28 dargestellt.

Abbildung 28

2. Bilder hinzufügen und löschen

Bilder per Drag & Drop aus dem Ressourcenbibliothek zum Hauptfenster hinzufügen:

Wenn keine Ebene ausgewählt ist oder der aktuelle Frame der ausgewählten Ebene einen Keyframe ungleich Null hat, wird der Timeline automatisch eine nach dem Bildnamen benannte Bildebene hinzugefügt.
Wenn eine Ebene ausgewählt ist und der aktuelle Frame keinen Keyframe hat, wird ein Keyframe zum aktuellen Frame hinzugefügt und das Bild wird zum Keyframe hinzugefügt.
Wenn die Ebene ausgewählt ist und der aktuelle Frame ein leerer Keyframe ist, wird das Bild dem leeren Keyframe hinzugefügt und der leere Keyframe wird zu einem nicht leeren Keyframe.

3. Ebenenreihenfolge

Sie können die Überlagerungsreihenfolge der Ebenen per Drag & Drop in der Zeitleiste ändern.

4. Import und Export von Projekten

Projekt DragonBones Pro importieren Unterstützt derzeit den Import von DragonBones-Datendateien (einschließlich JSON und XML) und Datenpaketdateien (einschließlich PNG und Zip) in mehreren Formaten. Darüber hinaus unterstützt DragonBones Pro unterstützt Import-Plug-Ins, um das Format importierter Daten zu erweitern. Das offiziell angekündigte Spine 2.x-Import-Plug-in und das Cocos 1.x-Import-Plug-in können DragonBones helfen Pro importiert Spine- und Cocos-Datendateien. Die Importmethode ist sehr einfach: Ziehen Sie einfach die Datendatei oder Datenpaketdatei, die importiert werden soll, per Drag & Drop in die Software. Wenn es sich bei der importierten Datendatei um eine Datendatei handelt, wird die folgende Abbildung angezeigt: Die in 29 gezeigte Schnittstelle.

Abbildung 29

Die Software sucht intelligent nach der Textursatzdatei in dem Verzeichnis, in dem sich die Datendatei befindet Ein gefundenes Bild ist falsch. Denken Sie daran, den Pfad manuell zu ändern, da das Bild sonst nicht gefunden wird. Wenn Sie eine Datenpaketdatei importieren, können Sie den Textursatz nicht finden. Darüber hinaus generiert die Software automatisch den Projektnamen. Wenn Sie ihn ändern müssen, können Sie ihn manuell ändern.
DragonBonesPro kann das Projekt in das JSON- oder XML-Format exportieren. Das Bild kann in Form eines Textursatzes oder einer Bilddatei vorliegen. Das Exportfenster ist in Abbildung 30 dargestellt.

Abbildung 30

Der Ausgabepfad ist standardmäßig „Mein Dokument + Projektname“, der Benutzer kann ihn beim Exportieren manuell angeben zip-Paket, die Paketdatei wird im angegebenen Ausgabepfad angezeigt.

Wenn Sie den Projektordner exportieren, wird unter dem angegebenen Ausgabepfad ein Unterverzeichnis mit demselben Namen wie das Projekt erstellt, das Datendateien und Bilder enthält.

Das Ausgabeverhältnis ist standardmäßig auf 1.

Benutzer können numerische Werte eingeben, um die Skalierung exportierter Elemente zu steuern.

"Füllfarbe" Das Kontrollkästchen ist standardmäßig deaktiviert (transparenter Hintergrund). Nach dem Aktivieren kann der Benutzer auf das Farbquadrat rechts klicken, um das Farbauswahlfenster zu öffnen und die Farbe auszuwählen, die als Hintergrundfarbe „Pack zip“ verwendet werden soll. Das Kontrollkästchen ist standardmäßig deaktiviert, was bedeutet, dass der Projektordner in Form eines ZIP-Pakets exportiert wird. Die PSD-Datei wird unten in eine DragonBones-Datendatei konvertiert Eine Skriptdatei PSExportDB, jsx wird im Pro-Installationsverzeichnis bereitgestellt. Wird verwendet, um Konstruktionszeichnungen in Photoshop in Daten und Bilder im DragonBones-Format zu exportieren.

Hinweis: Auf Mac-Systemen müssen Sie DragonBones in der Anwendung finden Pro.app, klicken Sie dann mit der rechten Maustaste und wählen Sie Paketinhalt anzeigen.

Die Skriptdatei befindet sich unter /Contents/Resources/. Die Exportmethode ist wie folgt: Öffnen Sie die Entwurfszeichnung in Photshop, wählen Sie dann den Befehl „Datei->Skript->Durchsuchen“ im Menü und öffnen Sie dann „Suchen“. PSExportDBjsx-Datei im Systemspeicherort-Beispiel, wählen Sie „Öffnen“ und das folgende Dialogfeld wird angezeigt:

PNGs exportieren, um Bilder zu exportieren
ExportISON, um JSON-Dateien zu exportieren
Ausgeblendete Ebenen ignorierenAusgeblendete Ebenen ignorieren
Bildskalierung insgesamt Das Skalierungsverhältnis

wird nach Bedarf eingestellt. Klicken Sie auf die Schaltfläche „OK“ und Photoshop beginnt mit dem Exportieren. Nach Abschluss des Exports wird ein Verzeichnis mit DrgonBmes {PSD-Dateiname} in dem Verzeichnis generiert Wenn Sie gleichzeitig PNGs und JSON exportieren, befindet sich darunter eine JSON-Datei und ein Textuer-Verzeichnis mit demselben Namen wie die PSD-Datei.

Unter Textur befinden sich alle PNG-Bilddateien. Anschließend ziehen Sie einfach die exportierte Datendatei in DragonBones Nach der Einrichtung des Bildprotokolls in Pro kann der Import abgeschlossen werden. Nach dem Import sind die relative Position, Größe und hierarchische Beziehung der Bilder genau die gleichen wie in Photoshop.

Das obige ist der detaillierte Inhalt vonEinführung in allgemeine Begriffe und Verwendung des Animationstools DragonBones (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!