Einstieg in die Character Animation in Videospielen

Einstieg in die Character Animation in Videospielen
Blockbasiertes Programmieren mit Microsoft MakeCode

by Mika Brandhofer

In dieser Übung machen Lernende erste Erfahrungen mit blockbasiertem Programmieren. Schüler*innen animieren einen Videospielcharakter und betten diesen in einen selbst gestalteten Hintergrund ein. Verwendet wird die Online-Plattform Microsoft MakeCode.

In dem Unterrichtskonzept geht es darum, dass Lernende erste Erfahrungen mit Character-Animation und Videospielprogrammierung machen. Verwendet wird dazu die Website Microsoft MakeCode https://arcade.makecode.com/.

In der ersten Einheit wird zuerst gemeinsam ein einfacher Hintergrund, zum Beispiel eine Wiese mit Himmel, gezeichnet. Anschließend werden eigene Videospielcharaktere erstellt. Für diesen wird eine Idle-Animation (eine Animation, die abgespielt wird, wenn der Charakter nicht bewegt wird) sowie ein einfacher Walk-Cycle (eine sich wiederholende Animation, die eine Gehbewegung darstellt) gezeichnet. Bevor gezeichnet werden kann, müssen die Lernenden die entsprechenden Codeblöcke in den Arbeitsbereich ziehen. Für das Designen des Charakters bietet die Website eine 16×16 Pixel Fläche, in der 15 verschiedenen Farben zur Auswahl stehen. Die Animation für das Gehen in eine Richtung kann kopiert und für die andere Richtung eingefügt und gespiegelt werden. Nun wurde eine Figur erstellt, die mit den Knöpfen der virtuellen Spielkonsole nach rechts und links gehen kann.

In der zweiten Einheit geht es darum, die Szene lebendiger zu machen. Die Lernenden sollen ihre Wiese in einen richtigen Lebensraum verwandeln, und etwas Natur in ihr Videospiel bringen. Dazu gibt es mehrere Möglichkeiten. Die Lernenden können beispielsweise Pflanzen zeichnen, die im Wind wehen oder Tiere, die über die Wiese laufen. Fortgeschrittene Schüler*innen können ihr Spiel so programmieren, dass beim Drücken eines Knopfes etwas passiert. Im Beispiel pflanzt der Charakter einen Baum, wenn der Knopf „A“ gedrückt wird.

Am Ende können die unterschiedlichen Elemente der Lerngruppe auch zu einem gemeinsamen Spiel zusammengefügt werden, indem der JavaScript Code kopiert wird.

Diese Codeblöcke sind notwendig, um einen Charakter, der nach links und rechts gehen kann, zu erstellen:

beim Start

  • setze Hintergrundbild auf (Bild zeichnen)
  • setze mySprite auf Sprite vom Typ Player
  • bewege mySprite mit Knöpfen vx 20 vy 0

wenn links Knopf gedrückt

  • animiere mySprite
  • Frames (Walk Circle nach links)
  • Intervall (ms) 500
  • Schleife ein

wenn rechts Knopf gedrückt

  • animiere mySprite
  • Frames (Walk Circle nach rechts)
  • Intervall (ms) 500
  • Schleife ein

wenn beliebig Knopf losgelassen

  • animiere mySprite
  • Frames (Idle Animation)
  • Intervall (ms) 500
  • Schleife ein

 

Diese Codeblöcke sind notwendig, um den Charakter einen Baum pflanzen zu lassen:

wenn A Knopf gedrückt

  • setze mySprite2 auf Sprite (Baum zeichnen) vom Typ Enemy
  • setze Position von mySprite2 auf x mySprite x y mySprite y

Die IDEA ist angelehnt an das Spiel “Bodenversiegelungs-Simulator”, das ich vor ein paar Jahren mit dem Programm Bitsy erstellt habe. https://mikabr.itch.io/bodenversiegelungs-simulator

Das Bild zeigt die Platform MakeCode. Links ist eine Spielkonsole abgebildet, auf der das Spiel gespielt werden kann. In der Mitte ist eine Liste mit Icons. Die Liste lautet: Sprites, Controller, Spiel, Musik, Szene, Info, Schleifen, Logik, Variablen, Mathematik, Animation, Erweiterungen, Fortgeschritten. Über der Liste ist ein Suchfeld. Rechts sind fünf Gruppen von Codeblöcken.
Übersicht Codeblöcke

Übersicht Codeblöcke © 2026 by Mika Brandhofer unter der Lizenz CC0 1.0 Universal

Das Bild zeigt einen Videospielemulator. In der Mitte ist das fertige Videospiel abgebildet.
Fertiges Spiel

Fertiges Spiel © 2026 by Mika Brandhofer unter der Lizenz CC0 1.0 Universal

Das Bild zeigt das Bearbeitungsfenster einer Animation von MakeCode. In der Mitte ist eine quadratische Fläche, in der ein Videospielcharakter gezeichnet wurde. Am linken Rand sind verschiedene Werkzeuge und 16 Farbfelder. Am rechten Rand sind die Einzelbilder der Animation. Am oberen Rand sind die Felder Editor, Galerie und meine Assets.
Charakter-Animation

Charakter-Animation © 2026 by Mika Brandhofer unter der Lizenz CC0 1.0 Universal

Mika Brandhofer studiert Lehramt für Mediengestaltung und Mathematik. Die IDEA wurde im Rahmen der Lehrveranstaltung “Mediale Kunst und Wissensräume” an der Kunstuniversität Linz entwickelt und getestet.

Die Website MakeCode bietet viele Tutorials in verschiedenen Schwierigkeitsgraden an. Es kann nützlich sein, im Vorhinein ein paar der Anleitungen (z.B. https://arcade.makecode.com/#tutorial:/tutorials/chase-the-pizza) durchzuspielen, um so unterschiedlichen Codeblöcke kennenzulernen.