Komponente „Sprite Sheet“

Diese Komponente wird nicht für AMPHTML-Anzeigen, Videoanzeigen und Bildanzeigen unterstützt.

Mit der Komponente „Sprite Sheet“ können Sie Sprite-Animationen erstellen oder einzelne Bild-Sprites separat anzeigen, während Sie nur eine einzige Bildquelldatei verwenden.

  

Die Animation wurde anhand eines Sprite Sheets mit acht Sprites erstellt. Jedes Sprite kann auch unabhängig von der Animation einzeln angezeigt werden.

So fügen Sie Ihrem Projekt die Komponente „Sprite Sheet“ hinzu:

1. Öffnen Sie das Steuerfeld Komponenten und dann den Ordner Grafiken und Effekte.
2. Ziehen Sie die Komponente Sprite Sheet  in den Anzeigebereich.
3. Gehen Sie im Steuerfeld Eigenschaften zum Eigenschaftenbereich Sprite Sheet und geben Sie im Feld Quelle die URL der Sprite-Sheet-Bilddatei ein. Wenn die Quelldatei lokal gespeichert ist, klicken Sie auf Durchsuchen , um die Datei im Dateisystem Ihres Computers auszuwählen.
4. Geben Sie für das Sprite, das Sie anzeigen lassen möchten, Werte für X Offset, Y Offset, Frame-Breite und Frame-Höhe ein. Wenn Sie eine Animation erstellen, ist dieses Sprite im ersten Frame der Animation zu sehen.
5. Führen Sie abhängig davon, wofür Sie das Sprite Sheet verwenden, die folgenden Schritte aus.

   Wenn Sie andere Sprites anzeigen lassen möchten:

   1. Fügen Sie eine weitere Komponente des Typs „Sprite Sheet“ hinzu.
   2. Konfigurieren Sie die neue Komponente mithilfe derselben Quelle, aber mit den Offsets und den Frame-Abmessungen für das Sprite, das Sie in dieser Komponente anzeigen lassen möchten.

   Wenn Sie eine Sprite-Animation erstellen möchten:

   1. Maximieren Sie im Steuerfeld Eigenschaften für die Komponente „Sprite Sheet“ den Abschnitt Erweiterte Eigenschaften.
   2. Geben Sie die Anzahl der Frames in der Animation ein. Für die Komponente wird ein Sprite pro Frame angezeigt. Dabei wird angenommen, dass jedes Sprite dieselbe Größe hat.
   3. Klicken Sie das Kästchen Automatische Wiedergabe an, wenn die Animation automatisch gestartet werden soll. Sie können die Animation auch auslösen, indem Sie über die Aktion Sprite Sheet > Wiedergabe oder Animation umschalten (siehe unten) ein Ereignis einrichten.

Eigenschaften

Eigenschaft	Beschreibung
Name	Name der Komponente
Quelle	Die URL für das Bild, das als Sprite Sheet verwendet wird. Kann an dynamische Daten gebunden werden.
X Offset	Der Abstand in Pixeln vom linken Rand des Sprite Sheets zum Sprite
Y Offset	Der Abstand in Pixeln vom oberen Rand des Sprite Sheets zum Sprite
Frame-Breite	Die Breite des Sprites in Pixeln
Frame-Höhe	Die Höhe des Sprites in Pixeln
Ausrichtung	Die Position des Sprites innerhalb der Komponente: center (zentriert) bottom (unten) bottom left (unten links) bottom right (unten rechts) left (links) right (rechts) top (oben) top left (oben links) top right (oben rechts)
Skalierung	Wenn einzublendende Sprites eine andere Größe als die Komponente haben, gibt es verschiedene Möglichkeiten der Anpassung: Größe an Frame anpassen Auf Frame zuschneiden Keine Bild strecken, um Frame zu füllen

Erweiterte Eigenschaften

Mithilfe der erweiterten Eigenschaften können Sie eine Sprite-Animation konfigurieren. Klicken Sie im Bereich mit den Komponenteneigenschaften neben Erweiterte Eigenschaften auf das Symbol zum Maximieren , um die folgenden Eigenschaften zu bearbeiten:

Eigenschaft	Beschreibung
Number of Frames	Die Anzahl der Frames, aus denen die Animation besteht. Wenn Sie eine Zahl eingeben, die größer als die Anzahl der Sprites im Sprite Sheet ist, enthält die Animation am Ende leere Frames.
Duration	Die Dauer der einzelnen Frames in Millisekunden.
Number of Loops	Die Anzahl der Animationsschleifen. Setzen Sie den Wert auf 0, wenn die Animation fortlaufend wiederholt werden soll.
Automatische Wiedergabe	Wenn diese Option aktiviert ist, wird die Animation automatisch wiedergegeben.
End on frame one	Falls diese Option aktiviert ist, wird die Animation nach der letzten Schleife mit dem ersten Frame beendet.
Reverse (Rückwärts wiedergeben)	Wenn diese Option aktiviert ist, wird die Animation rückwärts wiedergegeben.

Ereignisse und Aktionen

Von der Komponente „Sprite Sheet“ gesendete Ereignisse

Sie können basierend auf den folgenden Ereignissen der Komponente „Sprite Sheet“ andere Aktionen auslösen:

Ereignis	Beschreibung
Pausiert	Wird ausgelöst, wenn die Animation pausiert wurde
Beendet	Wird ausgelöst, wenn die Animation abgeschlossen ist
Wiedergabe gestartet	Wird ausgelöst, wenn die Wiedergabe der Animation gestartet wird
Erneut abgespielt	Wird ausgelöst, wenn die Animation neu gestartet wird

Wenn Sie eines dieser Ereignisse im Dialogfeld Ereignis auswählen möchten, legen Sie die Komponente „Sprite Sheet“ als Ziel fest.

Von der Komponente „Sprite Sheet“ ausgeführte Aktionen

Folgende Aktionen der Komponente „Sprite Sheet“ können als Reaktion auf andere Ereignisse ausgelöst werden:

Aktion	Konfigurationsoptionen
Neue Animation erstellen	X Offset: der Abstand in Pixeln vom linken Rand des Sprite Sheets zum Sprite. Y Offset: der Abstand in Pixeln vom oberen Rand des Sprite Sheets zum Sprite. Frame-Breite: die Breite des Sprites in Pixeln. Frame-Höhe: die Höhe des Sprites in Pixeln. Frames: die Anzahl der Frames, aus denen die Animation besteht. Duration: die Dauer der einzelnen Frames in Millisekunden. Loops: die Anzahl der Animationsschleifen. Wenn dieser Wert auf „0“ gesetzt ist, wird die Animation fortlaufend wiederholt. Automatische Wiedergabe: Wenn diese Option aktiviert ist, wird die Animation automatisch wiedergegeben. Reverse (Rückwärts wiedergeben): Wenn diese Option aktiviert ist, wird die Animation rückwärts wiedergegeben.
Wiedergabe	Die Animation wird ab der aktuellen beendeten oder pausierten Stelle wiedergegeben.
Pausieren	Die aktuelle Animation wird pausiert.
Animation umschalten	Hiermit wird zwischen Wiedergabe und Pausieren umgeschaltet.
Erneut abspielen	Die Animation wird ab dem ersten Frame wiedergegeben.
Zurück	Der vorherige Frame in der Serie wird angezeigt.
Vor	Der nächste Frame in der Serie wird angezeigt.
Zu Frame springen	Der angegebene Frame wird angezeigt.

Wenn Sie eine dieser Aktionen im Dialogfeld Ereignis auswählen, legen Sie die Komponente „Sprite Sheet“ als Empfänger fest.

Informationen zum Konfigurieren von Ereignissen

Vorschau ansehen

Nachdem Sie eine Quelle, Abstände und Frame-Abmessungen angegeben haben, ist in Google Web Designer im Anzeigebereich eine statische Vorschau der Komponente „Sprite Sheet“ zu sehen. So können Sie erkennen, ob Sie das Sprite richtig angegeben haben.

Sprite-Animationen lassen sich in der Web Designer-Benutzeroberfläche nicht als Vorschau anzeigen. Wenn Sie eine Sprite-Animation wiedergeben möchten, sehen Sie sich eine Vorschau des Dokuments in Ihrem bevorzugten Browser an. Klicken Sie dazu rechts oben auf die Schaltfläche Vorschau.