{"id":873,"date":"2026-10-23T00:14:00","date_gmt":"2026-10-22T22:14:00","guid":{"rendered":"https:\/\/0o5.de\/magazin\/glossar\/sprite\/"},"modified":"2026-10-23T00:14:00","modified_gmt":"2026-10-22T22:14:00","slug":"sprite","status":"publish","type":"page","link":"https:\/\/0o5.de\/magazin\/glossar\/sprite\/","title":{"rendered":"Sprite: Bedeutung, Spritesheet und Animation erkl\u00e4rt"},"content":{"rendered":"\n<div id=\"definition\" class=\"wp-block-group gl-def is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"gl-def__label wp-block-paragraph\">Kurz erkl\u00e4rt <span>\u00b7 Grafik &amp; Sound<\/span><\/p>\n\n\n\n<p class=\"gl-def__text wp-block-paragraph\">Ein Sprite ist eine eigenst\u00e4ndige 2D-Grafik \u2013 etwa eine Spielfigur, ein Gegner oder ein Geschoss \u2013, die unabh\u00e4ngig vom Hintergrund \u00fcber den Bildschirm bewegt wird. Animiert wird ein Sprite, indem mehrere Einzelbilder schnell nacheinander gezeigt werden.<\/p>\n\n\n\n<p class=\"gl-def__alt wp-block-paragraph\">Auch: Sprites, Sprite-Grafik, Spritesheet, Sprite-Sheet, Hardware-Sprite, Software-Sprite<\/p>\n<\/div>\n\n\n\n<figure class=\"gl-anim\" id=\"animation\"><input type=\"checkbox\" class=\"gl-anim__pause\" id=\"gl-pause-sprite\"><label for=\"gl-pause-sprite\" class=\"gl-anim__btn\"><span class=\"gl-anim__p\">Animation anhalten<\/span><span class=\"gl-anim__r\">Animation fortsetzen<\/span><\/label><div class=\"gl-anim__stage\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"g-sprite\" viewBox=\"0 0 640 360\" role=\"img\" aria-labelledby=\"g-sprite-t g-sprite-d\">\n<title id=\"g-sprite-t\">Sprite einfach erkl\u00e4rt<\/title>\n<desc id=\"g-sprite-d\">Oben liegt ein Spritesheet mit vier Einzelbildern einer laufenden Figur; ein goldener Rahmen springt alle 0,2 Sekunden zum n\u00e4chsten Bild. Unten l\u00e4uft dieselbe Figur als Sprite mit gestricheltem Rahmen \u00fcber eine Landschaft, die stehen bleibt, und zeigt dabei immer das gerade markierte Einzelbild.<\/desc>\n<style>\n.g-sprite{font-family:\"Space Grotesk\",system-ui,sans-serif}\n.g-sprite .bg{fill:#131823}\n.g-sprite .pane{fill:#1d2433}\n.g-sprite .cell{fill:url(#ID-ck)}\n.g-sprite .far{fill:none;stroke:#2f8f5b;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}\n.g-sprite .near{fill:none;stroke:#4ade80;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}\n.g-sprite .tor{fill:none;stroke:#4ade80;stroke-width:13;stroke-linecap:round}\n.g-sprite .head{fill:#4ade80}\n.g-sprite .eye{fill:#0e1117}\n.g-sprite .hl{fill:none;stroke:#ffd700;stroke-width:3}\n.g-sprite .num{fill:#aab3c5;font-size:15px;text-anchor:middle}\n.g-sprite .lbl{fill:#e8ebf2;font-size:17px}\n.g-sprite .sm{fill:#aab3c5;font-size:15px}\n.g-sprite .big{fill:#ffd700;font-size:24px;font-weight:700}\n.g-sprite .sky{fill:#1d2433}\n.g-sprite .hill{fill:#242c3d}\n.g-sprite .tree{fill:#2a3a3a}\n.g-sprite .gr{fill:#3a2f2a}\n.g-sprite .grass{fill:#2f8f5b}\n.g-sprite .box{fill:none;stroke:#ffd700;stroke-width:2;stroke-dasharray:6 5}\n.g-sprite .arr{fill:none;stroke:#ffd700;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}\n.g-sprite .trail{fill:none;stroke:#aab3c5;stroke-width:2;stroke-dasharray:3 7;opacity:.6}\n.g-sprite .k{animation:g-sprite-slot .8s steps(1,end) -.1s infinite}\n.g-sprite .k1{animation-delay:-.7s}\n.g-sprite .k2{animation-delay:-.5s}\n.g-sprite .k3{animation-delay:-.3s}\n.g-sprite .hl{animation:g-sprite-hl .8s steps(1,end) -.1s infinite}\n.g-sprite .run{animation:g-sprite-run 6s linear infinite}\n@keyframes g-sprite-slot{0%{opacity:1}25%{opacity:0}100%{opacity:0}}\n@keyframes g-sprite-hl{0%{transform:translateX(0)}25%{transform:translateX(72px)}50%{transform:translateX(144px)}75%{transform:translateX(216px)}100%{transform:translateX(216px)}}\n@keyframes g-sprite-run{0%{transform:translateX(0);opacity:0}4%{transform:translateX(18px);opacity:1}94%{transform:translateX(436px);opacity:1}100%{transform:translateX(464px);opacity:0}}\n@media (prefers-reduced-motion:reduce){.g-sprite *{animation:none!important}.g-sprite .k1,.g-sprite .k2,.g-sprite .k3{opacity:0}.g-sprite .run{transform:translateX(200px)}}\n<\/style>\n<defs><pattern id=\"g-sprite-ck\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\"><rect width=\"16\" height=\"16\" fill=\"#242c3d\"\/><path d=\"M0 0h8v8H0zM8 8h8v8H8z\" fill=\"#2e3850\"\/><\/pattern><\/defs>\n<rect class=\"bg\" width=\"640\" height=\"360\" rx=\"18\"\/>\n<text class=\"lbl\" x=\"40\" y=\"32\">Spritesheet: 4 Einzelbilder<\/text>\n<rect class=\"cell\" x=\"40\" y=\"44\" width=\"64\" height=\"80\" rx=\"4\"\/>\n<g transform=\"translate(40 44)\"><path class=\"far\" d=\"M30 50L23 61L13 67M32 31L24 40L18 47\"\/><path class=\"tor\" d=\"M32 29L30 48\"\/><path class=\"near\" d=\"M30 50L38 61L47 72M32 31L39 39L46 35\"\/><circle class=\"head\" cx=\"34\" cy=\"16\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"14\" r=\"2\"\/><\/g>\n<text class=\"num\" x=\"72\" y=\"144\">1<\/text>\n<rect class=\"cell\" x=\"112\" y=\"44\" width=\"64\" height=\"80\" rx=\"4\"\/>\n<g transform=\"translate(112 44)\"><path class=\"far\" d=\"M30 47L30 58L21 63M32 28L29 37L27 45\"\/><path class=\"tor\" d=\"M32 26L30 45\"\/><path class=\"near\" d=\"M30 47L35 58L31 71M32 28L35 37L39 44\"\/><circle class=\"head\" cx=\"34\" cy=\"13\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"11\" r=\"2\"\/><\/g>\n<text class=\"num\" x=\"144\" y=\"144\">2<\/text>\n<rect class=\"cell\" x=\"184\" y=\"44\" width=\"64\" height=\"80\" rx=\"4\"\/>\n<g transform=\"translate(184 44)\"><path class=\"far\" d=\"M30 50L38 61L47 72M32 31L39 39L46 35\"\/><path class=\"tor\" d=\"M32 29L30 48\"\/><path class=\"near\" d=\"M30 50L23 61L13 67M32 31L24 40L18 47\"\/><circle class=\"head\" cx=\"34\" cy=\"16\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"14\" r=\"2\"\/><\/g>\n<text class=\"num\" x=\"216\" y=\"144\">3<\/text>\n<rect class=\"cell\" x=\"256\" y=\"44\" width=\"64\" height=\"80\" rx=\"4\"\/>\n<g transform=\"translate(256 44)\"><path class=\"far\" d=\"M30 47L35 58L31 71M32 28L35 37L39 44\"\/><path class=\"tor\" d=\"M32 26L30 45\"\/><path class=\"near\" d=\"M30 47L30 58L21 63M32 28L29 37L27 45\"\/><circle class=\"head\" cx=\"34\" cy=\"13\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"11\" r=\"2\"\/><\/g>\n<text class=\"num\" x=\"288\" y=\"144\">4<\/text>\n<rect class=\"hl\" x=\"38\" y=\"42\" width=\"68\" height=\"84\" rx=\"6\"\/>\n<rect class=\"pane\" x=\"344\" y=\"44\" width=\"256\" height=\"100\" rx=\"12\"\/>\n<text class=\"sm\" x=\"362\" y=\"72\">gerade gezeigt:<\/text>\n<text class=\"big k\" x=\"362\" y=\"106\">Bild 1<\/text>\n<text class=\"big k k1\" x=\"362\" y=\"106\">Bild 2<\/text>\n<text class=\"big k k2\" x=\"362\" y=\"106\">Bild 3<\/text>\n<text class=\"big k k3\" x=\"362\" y=\"106\">Bild 4<\/text>\n<text class=\"sm\" x=\"362\" y=\"132\">alle 0,2 s das n\u00e4chste Bild<\/text>\n<path class=\"arr\" d=\"M184 156V176M176 168l8 9 8-9\"\/>\n<rect class=\"sky\" x=\"40\" y=\"184\" width=\"560\" height=\"140\" rx=\"12\"\/>\n<path class=\"hill\" d=\"M40 300Q120 236 210 290Q300 240 380 292Q470 226 600 288V300H40Z\"\/>\n<path class=\"tree\" d=\"M150 300l18-54 18 54zM470 300l16-46 16 46z\"\/>\n<rect class=\"gr\" x=\"40\" y=\"300\" width=\"560\" height=\"24\"\/><rect class=\"grass\" x=\"40\" y=\"298\" width=\"560\" height=\"6\"\/>\n<path class=\"trail\" d=\"M74 288H560\"\/>\n<g transform=\"translate(52 220)\"><g class=\"run\"><g class=\"k\"><path class=\"far\" d=\"M30 50L23 61L13 67M32 31L24 40L18 47\"\/><path class=\"tor\" d=\"M32 29L30 48\"\/><path class=\"near\" d=\"M30 50L38 61L47 72M32 31L39 39L46 35\"\/><circle class=\"head\" cx=\"34\" cy=\"16\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"14\" r=\"2\"\/><\/g><g class=\"k k1\"><path class=\"far\" d=\"M30 47L30 58L21 63M32 28L29 37L27 45\"\/><path class=\"tor\" d=\"M32 26L30 45\"\/><path class=\"near\" d=\"M30 47L35 58L31 71M32 28L35 37L39 44\"\/><circle class=\"head\" cx=\"34\" cy=\"13\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"11\" r=\"2\"\/><\/g><g class=\"k k2\"><path class=\"far\" d=\"M30 50L38 61L47 72M32 31L39 39L46 35\"\/><path class=\"tor\" d=\"M32 29L30 48\"\/><path class=\"near\" d=\"M30 50L23 61L13 67M32 31L24 40L18 47\"\/><circle class=\"head\" cx=\"34\" cy=\"16\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"14\" r=\"2\"\/><\/g><g class=\"k k3\"><path class=\"far\" d=\"M30 47L35 58L31 71M32 28L35 37L39 44\"\/><path class=\"tor\" d=\"M32 26L30 45\"\/><path class=\"near\" d=\"M30 47L30 58L21 63M32 28L29 37L27 45\"\/><circle class=\"head\" cx=\"34\" cy=\"13\" r=\"9\"\/><circle class=\"eye\" cx=\"38\" cy=\"11\" r=\"2\"\/><\/g><rect class=\"box\" x=\"4\" y=\"0\" width=\"56\" height=\"78\" rx=\"3\"\/><text class=\"sm\" x=\"6\" y=\"-8\">Sprite<\/text><\/g><\/g>\n<text class=\"sm\" x=\"204\" y=\"174\">Im Spiel<\/text><text class=\"sm\" x=\"600\" y=\"174\" text-anchor=\"end\">Hintergrund bleibt stehen<\/text>\n<text class=\"lbl\" x=\"320\" y=\"348\" text-anchor=\"middle\">Ein Sprite: eigene Grafik, die frei \u00fcber dem Hintergrund l\u00e4uft<\/text>\n<\/svg><\/div><figcaption><b>So funktioniert\u2019s:<\/b> Ein Spritesheet mit vier Einzelbildern: Der goldene Rahmen springt alle 0,2 Sekunden weiter, und die Figur im Spiel zeigt immer genau dieses Bild, w\u00e4hrend sie \u00fcber den stehenden Hintergrund l\u00e4uft.<\/figcaption><\/figure>\n\n\n\n<nav class=\"mag-toc\" aria-label=\"Inhalt\"><details><summary>Inhalt<\/summary><ol><li><a href=\"#bedeutung\">Was ist ein Sprite?<\/a><\/li><li><a href=\"#animation-sprite\">Wie funktioniert eine Sprite-Animation?<\/a><\/li><li><a href=\"#hardware-software\">Hardware-Sprites und Software-Sprites<\/a><\/li><li><a href=\"#unterschied\">Unterschied zu Kachel, Pixel-Art und 3D-Modell<\/a><\/li><li><a href=\"#beispiele\">Sprite in Spielen auf Player 0o5<\/a><\/li><li><a href=\"#anleitung\">So animierst du eine Figur mit einem Spritesheet<\/a><\/li><li><a href=\"#faq\">H\u00e4ufige Fragen<\/a><\/li><li><a href=\"#verwandte-begriffe\">Verwandte Begriffe<\/a><\/li><\/ol><\/details><\/nav>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bedeutung\">Was ist ein Sprite?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Sprite ist ein kleines Bild, das ein Spiel frei \u00fcber eine gr\u00f6\u00dfere Szene legt: deine Spielfigur, Gegner, M\u00fcnzen, Geschosse oder der Mauszeiger. Der Hintergrund bleibt dabei unver\u00e4ndert, nur der Sprite wandert an eine neue Stelle oder wechselt sein Bild.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das englische Wort <em>sprite<\/em> bedeutet Kobold oder Geist. Der Name passt zur urspr\u00fcnglichen Technik: Ein Grafikchip legte solche Figuren erst beim Aufbau des Bildes \u00fcber den Hintergrund. Im Bildspeicher waren sie gar nicht vorhanden \u2013 sie schienen wie ein Geist \u00fcber den Bildschirm zu spuken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Heute nennt man fast jede bewegliche 2D-Grafik in einem Spiel Sprite, egal, wie sie technisch auf den Bildschirm kommt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"animation-sprite\">Wie funktioniert eine Sprite-Animation?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Sprite bewegt sich auf zwei Arten: Er \u00e4ndert seine Position, und er wechselt sein Bild. F\u00fcr eine Laufbewegung zeichnet man mehrere Einzelbilder, englisch Frames \u2013 etwa vier bis acht Phasen eines Schritts. Das Spiel zeigt sie nacheinander, zum Beispiel alle 0,1 Sekunden das n\u00e4chste, und beginnt danach wieder von vorn.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit nicht jedes Einzelbild eine eigene Datei braucht, liegen alle Bilder nebeneinander auf einem Blatt, dem <strong>Spritesheet<\/strong>. Das Spiel schneidet f\u00fcr jedes Bild nur den passenden Ausschnitt heraus. Der Hintergrund rund um die Figur ist durchsichtig, damit die Szene dahinter sichtbar bleibt.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position und Ankerpunkt:<\/strong> Ein Punkt, meist zwischen den F\u00fc\u00dfen, bestimmt, wo der Sprite steht.<\/li>\n\n<li><strong>Spiegeln:<\/strong> L\u00e4uft die Figur nach links, wird das Bild einfach gespiegelt \u2013 das spart die H\u00e4lfte der Zeichnungen.<\/li>\n\n<li><strong>Ebene:<\/strong> Eine Reihenfolge legt fest, was vorn liegt, etwa ob die Figur vor oder hinter einem Busch steht.<\/li>\n\n<li><strong>Animationstempo:<\/strong> Gute Spiele koppeln den Bildwechsel an die vergangene Zeit, nicht an die <a href=\"https:\/\/0o5.de\/magazin\/glossar\/bildrate\/\">Bildrate<\/a> \u2013 sonst l\u00e4uft die Figur auf schnellen Ger\u00e4ten hektischer.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group mag-tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"mag-tip__text wp-block-paragraph\"><strong>Tipp:<\/strong> Ob ein Treffer z\u00e4hlt, entscheidet meist nicht das sichtbare Bild, sondern eine unsichtbare <a href=\"https:\/\/0o5.de\/magazin\/glossar\/hitbox\/\">Hitbox<\/a>. Sie ist oft etwas kleiner als der Sprite, damit Ber\u00fchrungen fair wirken.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hardware-software\">Hardware-Sprites und Software-Sprites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fr\u00fche Spielger\u00e4te und viele <a href=\"https:\/\/0o5.de\/magazin\/glossar\/heimcomputer\/\">Heimcomputer<\/a> hatten Grafikchips mit eingebauter Sprite-Technik. Sie konnten nur eine begrenzte Zahl kleiner Figuren gleichzeitig darstellen, nahmen dem Prozessor daf\u00fcr aber viel Arbeit ab. Lagen zu viele Sprites auf einer Bildzeile, lie\u00dfen Spiele sie oft abwechselnd aufblitzen \u2013 das bekannte Sprite-Flackern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rechner ohne solche Hardware mussten Figuren selbst in den Bildspeicher schreiben und den Hintergrund danach wiederherstellen. Man spricht von Software-Sprites. Der <a href=\"https:\/\/0o5.de\/magazin\/glossar\/robotron-z9001\/\">Robotron Z9001<\/a> kennt nicht einmal Pixelgrafik: Seine Spielfiguren bestehen aus Grafikzeichen des Zeichensatzes, also aus <a href=\"https:\/\/0o5.de\/magazin\/glossar\/blockgrafik\/\">Blockgrafik<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Heute ist Sprite-Hardware kaum noch n\u00f6tig. Ein Browser zeichnet \u00fcber ein <a href=\"https:\/\/0o5.de\/magazin\/glossar\/html5-canvas\/\">HTML5-Canvas<\/a> oder <a href=\"https:\/\/0o5.de\/magazin\/glossar\/webgl\/\">WebGL<\/a> Tausende Sprites pro Bild. Ein Rest der alten Technik lebt im Mauszeiger weiter, den viele Grafikkarten als Hardware-Sprite \u00fcber das Bild legen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"unterschied\">Unterschied zu Kachel, Pixel-Art und 3D-Modell<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/0o5.de\/magazin\/glossar\/kachel\/\">Kachel<\/a>:<\/strong> ein fester Baustein im Raster der Spielwelt, etwa ein St\u00fcck Boden oder Wand. Ein Sprite ist dagegen frei beweglich und liegt \u00fcber diesem Raster.<\/li>\n\n<li><strong><a href=\"https:\/\/0o5.de\/magazin\/glossar\/pixel-art\/\">Pixel-Art<\/a>:<\/strong> ein Zeichenstil. Viele Sprites sind Pixel-Art, aber ein Sprite kann genauso gemalt, vorgerendert oder aus Textzeichen gebaut sein.<\/li>\n\n<li><strong>3D-Modell:<\/strong> ein K\u00f6rper aus Fl\u00e4chen, den das Spiel aus jedem Blickwinkel berechnet. Auch 3D-Spiele nutzen Sprites \u2013 f\u00fcr Symbole oder flache Bilder, die sich immer zur Kamera drehen, sogenannte Billboards.<\/li>\n\n<li><strong><a href=\"https:\/\/0o5.de\/magazin\/glossar\/partikeleffekt\/\">Partikeleffekt<\/a>:<\/strong> besteht oft aus Hunderten winziger Sprites, die nur Sekundenbruchteile leben.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wie aus einem 3D-Modell ein fertiges Sprite-Bild wird, erkl\u00e4rt der Artikel \u00fcber <a href=\"https:\/\/0o5.de\/magazin\/glossar\/vorgerenderte-grafik\/\">vorgerenderte Grafik<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"beispiele\">Sprite in Spielen auf Player 0o5<\/h2>\n\n\n\n<ul class=\"gl-games\"><li class=\"gl-game\"><a class=\"gl-game__img\" href=\"https:\/\/0o5.de\/magazin\/palast-z9001-251\/\" tabindex=\"-1\" aria-hidden=\"true\"><img src=\"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/palast-z9001-1-768x480.jpg\" alt=\"\" width=\"768\" height=\"480\" loading=\"lazy\" decoding=\"async\"><\/a><div class=\"gl-game__body\"><h3 class=\"gl-game__name\"><a href=\"https:\/\/0o5.de\/magazin\/palast-z9001-251\/\">Palast Z9001<\/a><\/h3><p>In <a href=\"https:\/\/0o5.de\/magazin\/palast-z9001-251\/\">Palast Z9001<\/a> hat der Held Tamo 108 Bewegungsbilder in 34 Bewegungsfolgen, vom Rennen bis zum Fechten. Weil der Z9001 keine Grafikkarte hat, bestehen alle diese Einzelbilder aus Viertelblock-Zeichen \u2013 eine Sprite-Animation ohne Pixelgrafik.<\/p><p class=\"gl-game__links\"><a class=\"gl-game__play\" href=\"https:\/\/0o5.de\/games\/z9001\/palast\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Spiel \u00f6ffnen|Palast Z9001\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>Palast Z9001 spielen<\/span><\/a><a class=\"gl-game__guide\" href=\"https:\/\/0o5.de\/magazin\/palast-z9001-251\/\">Zum Guide<\/a><\/p><\/div><\/li><li class=\"gl-game\"><a class=\"gl-game__img\" href=\"https:\/\/0o5.de\/magazin\/kugelkuller-156\/\" tabindex=\"-1\" aria-hidden=\"true\"><img src=\"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/kugelkuller-1-768x480.jpg\" alt=\"\" width=\"768\" height=\"480\" loading=\"lazy\" decoding=\"async\"><\/a><div class=\"gl-game__body\"><h3 class=\"gl-game__name\"><a href=\"https:\/\/0o5.de\/magazin\/kugelkuller-156\/\">Kugelkuller<\/a><\/h3><p>Die 11 Kugeln in <a href=\"https:\/\/0o5.de\/magazin\/kugelkuller-156\/\">Kugelkuller<\/a> tragen Gesichter. Wird es eng im Glas, schauen sie besorgt \u2013 ein Sprite kann also je nach Spielzustand ein anderes Bild zeigen.<\/p><p class=\"gl-game__links\"><a class=\"gl-game__play\" href=\"https:\/\/0o5.de\/games\/puzzle\/kugelkuller\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Spiel \u00f6ffnen|Kugelkuller\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>Kugelkuller spielen<\/span><\/a><a class=\"gl-game__guide\" href=\"https:\/\/0o5.de\/magazin\/kugelkuller-156\/\">Zum Guide<\/a><\/p><\/div><\/li><li class=\"gl-game\"><a class=\"gl-game__img\" href=\"https:\/\/0o5.de\/magazin\/bananenduell-238\/\" tabindex=\"-1\" aria-hidden=\"true\"><img src=\"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/bananenduell-1-768x480.jpg\" alt=\"\" width=\"768\" height=\"480\" loading=\"lazy\" decoding=\"async\"><\/a><div class=\"gl-game__body\"><h3 class=\"gl-game__name\"><a href=\"https:\/\/0o5.de\/magazin\/bananenduell-238\/\">Bananenduell<\/a><\/h3><p><a href=\"https:\/\/0o5.de\/magazin\/bananenduell-238\/\">Bananenduell<\/a> zeigt in der v2 animierte Figuren auf den D\u00e4chern und eine rotierende Banane mit Leuchtspur. Grafik und Kl\u00e4nge entstehen im Spiel selbst.<\/p><p class=\"gl-game__links\"><a class=\"gl-game__play\" href=\"https:\/\/0o5.de\/games\/action\/bananenduell\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Spiel \u00f6ffnen|Bananenduell\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>Bananenduell spielen<\/span><\/a><a class=\"gl-game__guide\" href=\"https:\/\/0o5.de\/magazin\/bananenduell-238\/\">Zum Guide<\/a><\/p><\/div><\/li><li class=\"gl-game\"><a class=\"gl-game__img\" href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\" tabindex=\"-1\" aria-hidden=\"true\"><img src=\"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/huepfhoch-1-768x480.jpg\" alt=\"\" width=\"768\" height=\"480\" loading=\"lazy\" decoding=\"async\"><\/a><div class=\"gl-game__body\"><h3 class=\"gl-game__name\"><a href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\">H\u00fcpfhoch<\/a><\/h3><p>In <a href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\">H\u00fcpfhoch<\/a> schaltest du mit M\u00fcnzen sechs Figuren frei, von Bobbel \u00fcber Fritzi Frosch bis Zorg. So tauscht das Spiel das Aussehen deiner Spielfigur aus.<\/p><p class=\"gl-game__links\"><a class=\"gl-game__play\" href=\"https:\/\/0o5.de\/games\/jumpnrun\/huepfhoch\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Spiel \u00f6ffnen|H\u00fcpfhoch\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>H\u00fcpfhoch spielen<\/span><\/a><a class=\"gl-game__guide\" href=\"https:\/\/0o5.de\/magazin\/huepfhoch-152\/\">Zum Guide<\/a><\/p><\/div><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"anleitung\">So animierst du eine Figur mit einem Spritesheet<\/h2>\n\n\n\n<ol class=\"wp-block-list gl-steps\">\n<li>Zeichne vier bis acht Phasen der Bewegung, alle in derselben Gr\u00f6\u00dfe, zum Beispiel 32 \u00d7 32 Pixel.<\/li>\n\n<li>Lege die Einzelbilder ohne L\u00fccke nebeneinander auf ein Blatt \u2013 das ist dein Spritesheet.<\/li>\n\n<li>Lass den Hintergrund rund um die Figur durchsichtig.<\/li>\n\n<li>Bestimme im Programm die aktuelle Bildnummer aus der vergangenen Zeit, etwa alle 100 Millisekunden eins weiter.<\/li>\n\n<li>Zeichne aus dem Blatt nur den Ausschnitt dieser Bildnummer an die Position der Figur.<\/li>\n\n<li>Spiegle das Bild, wenn die Figur in die andere Richtung l\u00e4uft.<\/li>\n\n<li>Lege die Hitbox getrennt fest, damit sie nicht mit jedem Einzelbild ihre Gr\u00f6\u00dfe \u00e4ndert.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">H\u00e4ufige Fragen zu Sprite<\/h2>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Was ist ein Sprite in Spielen?<\/summary>\n<p class=\"wp-block-paragraph\">Ein Sprite ist eine bewegliche 2D-Grafik wie eine Spielfigur, ein Gegner oder ein Geschoss. Das Spiel legt sie \u00fcber den Hintergrund und bewegt oder animiert sie unabh\u00e4ngig davon.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Was ist ein Spritesheet?<\/summary>\n<p class=\"wp-block-paragraph\">Ein Spritesheet ist ein Bild, auf dem alle Einzelbilder einer Figur nebeneinander liegen. Das Spiel schneidet daraus das jeweils passende Bild heraus und zeigt die Bilder schnell nacheinander.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Warum hei\u00dft es Sprite?<\/summary>\n<p class=\"wp-block-paragraph\">Sprite ist englisch f\u00fcr Kobold oder Geist. Fr\u00fche Grafikchips legten die Figuren nur beim Bildaufbau \u00fcber den Hintergrund; im Bildspeicher waren sie nicht zu finden und schienen \u00fcber den Bildschirm zu spuken.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Ist ein Sprite dasselbe wie Pixel-Art?<\/summary>\n<p class=\"wp-block-paragraph\">Nein. Sprite beschreibt die Rolle einer Grafik im Spiel, Pixel-Art einen Zeichenstil. Viele Sprites sind Pixel-Art, sie k\u00f6nnen aber auch gemalt oder aus 3D-Modellen vorgerendert sein.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details mag-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Gibt es Sprites auch in 3D-Spielen?<\/summary>\n<p class=\"wp-block-paragraph\">Ja. 3D-Spiele nutzen Sprites etwa f\u00fcr Partikel, Symbole oder flache Bilder, die sich immer zur Kamera drehen. Die meisten Figuren sind dort aber 3D-Modelle.<\/p>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"verwandte-begriffe\">Verwandte Begriffe<\/h2>\n\n\n\n<ul class=\"gl-rel\"><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/kachel\/\"><small>Grafik &amp; Sound<\/small><b>Kachel (Tile)<\/b><span>Boden, Wand, Wasser: Wie Spiele ganze Welten aus wenigen Kacheln und einer Zahlenkarte bauen \u2013 und warum das Speicher und Arbeit spart.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/pixel-art\/\"><small>Grafik &amp; Sound<\/small><b>Pixel-Art<\/b><span>Jedes Pixel z\u00e4hlt: Was Pixel-Art ausmacht, wie Figuren mit wenigen Farben entstehen und welche Spiele auf 0o5.de den Retro-Look pflegen.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/hitbox\/\"><small>Spielmechanik<\/small><b>Hitbox<\/b><span>Die Grafik zeigt die Figur, die Hitbox entscheidet \u00fcber Treffer. Was eine Hitbox ist, warum sie oft kleiner als die Figur ist und was eine Hurtbox ist.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/partikeleffekt\/\"><small>Grafik &amp; Sound<\/small><b>Partikeleffekt<\/b><span>Hunderte winzige Teilchen, ein paar Regeln: Wie Partikeleffekte Funken, Rauch und Konfetti in Spiele bringen \u2013 und warum man sie abschalten kann.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/vorgerenderte-grafik\/\"><small>Grafik &amp; Sound<\/small><b>Vorgerenderte Grafik<\/b><span>Einmal lange rechnen, dann nur noch anzeigen: Wie vorgerenderte Grafik aufwendige 3D-Bilder in Spiele bringt \u2013 und warum der Blickwinkel dann feststeht.<\/span><\/a><\/li><li><a href=\"https:\/\/0o5.de\/magazin\/glossar\/html5-canvas\/\"><small>Technik &amp; Plattform<\/small><b>HTML5-Canvas<\/b><span>Die Leinwand im Browser: Auf dem Canvas malen Spiele ihr Bild Pixel f\u00fcr Pixel \u2013 meist 60-mal pro Sekunde neu.<\/span><\/a><\/li><\/ul>\n\n\n\n<p class=\"gl-back\"><a class=\"mag-btn mag-btn--ghost\" href=\"https:\/\/0o5.de\/magazin\/glossar\/\">\u2190 Alle 199 Begriffe im Spiele-Glossar<\/a><a class=\"mag-btn mag-btn--play\" href=\"https:\/\/0o5.de\/\" data-s05-cat=\"Glossar\" data-s05-ev=\"Zur Spieleseite|Sprite\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\" fill=\"currentColor\"\/><\/svg><span>Zu den Spielen<\/span><\/a><\/p>\n\n\n\n<script type=\"application\/ld+json\">{\"@context\": \"https:\/\/schema.org\", \"@graph\": [{\"@type\": \"DefinedTerm\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#begriff\", \"name\": \"Sprite\", \"description\": \"Ein Sprite ist eine eigenst\u00e4ndige 2D-Grafik \u2013 etwa eine Spielfigur, ein Gegner oder ein Geschoss \u2013, die unabh\u00e4ngig vom Hintergrund \u00fcber den Bildschirm bewegt wird. Animiert wird ein Sprite, indem mehrere Einzelbilder schnell nacheinander gezeigt werden.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/\", \"inLanguage\": \"de\", \"inDefinedTermSet\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/#glossar\"}, \"subjectOf\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#richSnippet\"}, \"alternateName\": [\"Sprites\", \"Sprite-Grafik\", \"Spritesheet\", \"Sprite-Sheet\", \"Hardware-Sprite\", \"Software-Sprite\"], \"sameAs\": [\"https:\/\/de.wikipedia.org\/wiki\/Sprite_(Computergrafik)\", \"https:\/\/en.wikipedia.org\/wiki\/Sprite_(computer_graphics)\"], \"image\": \"https:\/\/0o5.de\/magazin\/wp-content\/uploads\/2026\/10\/glossar-sprite.jpg\"}, {\"@type\": \"DefinedTermSet\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/#glossar\", \"name\": \"Spiele-Glossar von Player 0o5\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/\", \"inLanguage\": \"de\", \"publisher\": {\"@id\": \"https:\/\/0o5.de\/magazin\/#organization\"}}, {\"@type\": \"WebPage\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#webpage\", \"about\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#begriff\"}, \"mainEntity\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#begriff\"}, \"isPartOf\": {\"@id\": \"https:\/\/0o5.de\/magazin\/#website\"}, \"speakable\": {\"@type\": \"SpeakableSpecification\", \"cssSelector\": [\".gl-def__text\"]}, \"keywords\": \"sprite spiel, spritesheet, sprite animation, sprite grafik, hardware-sprite, 2d spielfigur grafik\", \"mentions\": [{\"@id\": \"https:\/\/0o5.de\/games\/z9001\/palast\/#spiel\"}, {\"@id\": \"https:\/\/0o5.de\/games\/puzzle\/kugelkuller\/#spiel\"}, {\"@id\": \"https:\/\/0o5.de\/games\/action\/bananenduell\/#spiel\"}, {\"@id\": \"https:\/\/0o5.de\/games\/jumpnrun\/huepfhoch\/#spiel\"}], \"relatedLink\": [\"https:\/\/0o5.de\/magazin\/glossar\/kachel\/\", \"https:\/\/0o5.de\/magazin\/glossar\/pixel-art\/\", \"https:\/\/0o5.de\/magazin\/glossar\/hitbox\/\", \"https:\/\/0o5.de\/magazin\/glossar\/partikeleffekt\/\", \"https:\/\/0o5.de\/magazin\/glossar\/vorgerenderte-grafik\/\", \"https:\/\/0o5.de\/magazin\/glossar\/html5-canvas\/\"]}, {\"@type\": \"FAQPage\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#faq\", \"inLanguage\": \"de\", \"mainEntity\": [{\"@type\": \"Question\", \"name\": \"Was ist ein Sprite in Spielen?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Ein Sprite ist eine bewegliche 2D-Grafik wie eine Spielfigur, ein Gegner oder ein Geschoss. Das Spiel legt sie \u00fcber den Hintergrund und bewegt oder animiert sie unabh\u00e4ngig davon.\"}}, {\"@type\": \"Question\", \"name\": \"Was ist ein Spritesheet?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Ein Spritesheet ist ein Bild, auf dem alle Einzelbilder einer Figur nebeneinander liegen. Das Spiel schneidet daraus das jeweils passende Bild heraus und zeigt die Bilder schnell nacheinander.\"}}, {\"@type\": \"Question\", \"name\": \"Warum hei\u00dft es Sprite?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Sprite ist englisch f\u00fcr Kobold oder Geist. Fr\u00fche Grafikchips legten die Figuren nur beim Bildaufbau \u00fcber den Hintergrund; im Bildspeicher waren sie nicht zu finden und schienen \u00fcber den Bildschirm zu spuken.\"}}, {\"@type\": \"Question\", \"name\": \"Ist ein Sprite dasselbe wie Pixel-Art?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Nein. Sprite beschreibt die Rolle einer Grafik im Spiel, Pixel-Art einen Zeichenstil. Viele Sprites sind Pixel-Art, sie k\u00f6nnen aber auch gemalt oder aus 3D-Modellen vorgerendert sein.\"}}, {\"@type\": \"Question\", \"name\": \"Gibt es Sprites auch in 3D-Spielen?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Ja. 3D-Spiele nutzen Sprites etwa f\u00fcr Partikel, Symbole oder flache Bilder, die sich immer zur Kamera drehen. Die meisten Figuren sind dort aber 3D-Modelle.\"}}]}, {\"@type\": \"HowTo\", \"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\", \"name\": \"So animierst du eine Figur mit einem Spritesheet\", \"inLanguage\": \"de\", \"about\": {\"@id\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#begriff\"}, \"step\": [{\"@type\": \"HowToStep\", \"position\": 1, \"text\": \"Zeichne vier bis acht Phasen der Bewegung, alle in derselben Gr\u00f6\u00dfe, zum Beispiel 32 \u00d7 32 Pixel.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\"}, {\"@type\": \"HowToStep\", \"position\": 2, \"text\": \"Lege die Einzelbilder ohne L\u00fccke nebeneinander auf ein Blatt \u2013 das ist dein Spritesheet.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\"}, {\"@type\": \"HowToStep\", \"position\": 3, \"text\": \"Lass den Hintergrund rund um die Figur durchsichtig.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\"}, {\"@type\": \"HowToStep\", \"position\": 4, \"text\": \"Bestimme im Programm die aktuelle Bildnummer aus der vergangenen Zeit, etwa alle 100 Millisekunden eins weiter.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\"}, {\"@type\": \"HowToStep\", \"position\": 5, \"text\": \"Zeichne aus dem Blatt nur den Ausschnitt dieser Bildnummer an die Position der Figur.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\"}, {\"@type\": \"HowToStep\", \"position\": 6, \"text\": \"Spiegle das Bild, wenn die Figur in die andere Richtung l\u00e4uft.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\"}, {\"@type\": \"HowToStep\", \"position\": 7, \"text\": \"Lege die Hitbox getrennt fest, damit sie nicht mit jedem Einzelbild ihre Gr\u00f6\u00dfe \u00e4ndert.\", \"url\": \"https:\/\/0o5.de\/magazin\/glossar\/sprite\/#anleitung\"}]}]}<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Spielfiguren, Gegner, Geschosse: Was ein Sprite ist, wie Spritesheets funktionieren und warum der Name nach einem Kobold klingt.<\/p>\n","protected":false},"author":1,"featured_media":680,"parent":42,"menu_order":167,"comment_status":"closed","ping_status":"closed","template":"glossar-begriff","meta":{"footnotes":""},"class_list":["post-873","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages\/873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/comments?post=873"}],"version-history":[{"count":0,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages\/873\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/pages\/42"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/media\/680"}],"wp:attachment":[{"href":"https:\/\/0o5.de\/magazin\/wp-json\/wp\/v2\/media?parent=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}