Erstelle 2D-Spiele mit Tiniest2D
Sprites und Animation
Lesson 3 of 11 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
Erstellung von Assets
Assets sind die Teile, die dein Spiel verwendet: Bilder, Szenen, Töne und Objekte. In Tiniest2D erstellst du die meisten Assets, indem du eine Variable im Skript schreibst. Der Editor erkennt Konstruktoren wie Sprite() und lässt dich das Asset visuell bearbeiten.

Sprites
Sprites sind Pixel-Art-Bilder. Sie werden für Charaktere, Wände, Münzen, Schaltflächen, Geschosse, Hintergründe und alles andere, was gezeichnet werden muss, verwendet. Ein Sprite kann ein einzelnes Bild oder eine kleine Animation aus mehreren Frames sein.
Um ein Sprite zu erstellen, deklariere eine Variable mit dem Sprite()-Konstruktor:
var playerSprite = Sprite(16, 16)
var coin = Sprite(8, 8)
var wall = Sprite(32, 32)
Die Zahlen sind Breite und Höhe in Pixeln. Nach dem Speichern wirst du den Variablennamen in einer dunklen Box sehen - dies zeigt an, dass es sich um ein Sprite-Asset handelt.
Um ein Sprite zu bearbeiten:
- Strg+Klick auf den Namen der Sprite-Variable
- Der Sprite-Editor öffnet sich
Steuerungen des Sprite-Editors

Der Sprite-Editor ist der Ort, an dem du das Bild Pixel für Pixel zeichnest. Wenn du neu in der Pixelkunst bist, fange klein an: 8x8 oder 16x16 Sprites sind einfacher zu lesen, zu bearbeiten und zu animieren.
| Steuerung | Aktion |
|---|---|
| Linksklick | Pixel mit aktueller Farbe malen |
| Rechtsklick | Pixel (transparent) löschen |
| Mittlere Maustaste ziehen | Ansicht bewegen |
| Mausrad | Herauszoomen/einzoomen |
| Farbpalette | Klicken, um Farbe auszuwählen |
| Breite/Höhe +/- | Sprite skalieren |
| Kollisionsumschalter | Kollisionseinschränkungen aktivieren/deaktivieren |
| Kollisionsversätze | L/T/R/B-Kollisionsabstände anpassen |
| Kollisionsanzeige | Kollisionseinschränkungen vorschau |
| Leertaste | Animation Vorschau umschalten |
| Links/Rechts-Pfeile | Zwischen Frames navigieren |
| Escape | Zurück zum Skripteditor |
Animationspanel
Animationen entstehen, indem mehrere Sprite-Frames schnell hintereinander gezeigt werden. Zum Beispiel könnte ein gehender Charakter einen Frame mit dem linken Fuß nach vorne und einen anderen mit dem rechten Fuß nach vorne haben.

Das Animationspanel (in der linken Seitenleiste) ermöglicht es dir, Sprite-Frames zu verwalten:
| Steuerung | Aktion |
|---|---|
| FPS +/- | Animationsgeschwindigkeit anpassen (Frames pro Sekunde) |
| Frame hinzufügen | Einen neuen leeren Frame am Ende hinzufügen |
| Frame kopieren | Den aktuellen Frame duplizieren (nach dem aktuellen eingefügt) |
| Frame löschen | Aktuellen Frame löschen (nur wenn mehr als 1 Frame vorhanden) |
| Frame-Streifen | Auf Thumbnails unten klicken, um Frames auszuwählen |
Wenn ein Sprite mehrere Frames hat, animieren sich die Objekte, die es verwenden, automatisch zur Laufzeit. Jedes Objekt verfolgt unabhängig seinen eigenen Animationsstatus.