Bitsy: Mini-Spiele im Browser erstellen

Schon lange möchte ich in meinem Blog Bitsy vorstellen. In diesem Beitrag erhältst Du eine Einführung in die Nutzung des Tools und Anregungen, wie es zum Lehren und Lernen genutzt werden kann.

Was ist Bitsy?

Bitsy ist ein minimalistisches Tool zur Spiele-Erstellung. Der Code ist Open Source (MIT Lizenz). Entwickelt hat die Software Adam Le Doux – ursprünglich nur für sich selbst, aber inzwischen haben sehr viele Menschen daran Gefallen gefunden.

Die Charakterisierung des Tools als minimalistisch bezieht sich zum einen auf die erstellten Spiele: Sie sind alle im Pixel-Stil gestaltet und haben damit einen charmanten Retro-Look. Zum anderen sind auch die Gestaltungsmöglichkeiten beim Erstellen bewusst einfach gehalten. Bitsy ist vor diesem Hintergrund vor allem deshalb toll, weil trotz oder gerade wegen dieses Minimalismus unwahrscheinlich vielfältige und kreative Spiele entstehen können.

Inspirationen zu erstellten Bitsy-Spielen findet man zum Beispiel über den Twitter-Account Bitsy Pieces

Wie nutze ich Bitsy?

Bitsy wird im Browser geöffnet und genutzt. Man muss nichts installieren und sich auch nirgendwo anmelden. Fertig erstellte Spiele können als HTML-Datei herunter geladen und dann auch offline im Browser geöffnet und gespielt werden. Weiter unten stelle ich zudem eine Veröffentlichungsmöglichkeit über die Plattform ‘Glitch’ vor.

Wie erstelle ich ein erstes Spiel mit Bitsy?

Im Netz finden sich mehrere Editoren für Bitsy. Du kannst zum Beispiel den von Adam Le Doux auf Itch.io zur Verfügung gestellten Editor nutzen. Der direkte Link lautet: ledoux.itch.io/bitsy.

Nach dem Öffnen des Links musst Du noch auf ‘Run Tool’ klicken und gelangst dann direkt in die Entwicklungsumgebung. Geöffnet wird ein erstes Beispiel-Spiel, auf dessen Grundlage man mit relativ geringem Aufwand sein erstes eigenes Spiel ‘remixen’ kann. (Die Spiele-Erstellung erfolgt dabei lokal im Cache des Browsers. Wird der Cache geleert, ist das selbst erstellte Spiel also gelöscht. Fertige Spiele oder auch Zwischenstände deshalb am besten herunterladen.)

Um ein Spiel zu erstellen, hilft es, sich zunächst die unterschiedlichen, möglichen Spielelemente zu verdeutlichen:

  • Das Spiel findet in einem oder mehreren Räumen statt.
  • Die bewegliche Figur, die durch die Räume wandelt, ist der Avatar. Er kann mit Pixeln und Farbauswahl individuell gestaltet und sogar animiert werden.
  • Umrandungen sind Tiles. Sie können durchlässig oder undurchlässig (im Sinne einer Mauer) gestaltet werden.
  • Sprites sind Objekte, denen der Avatar begegnet und die mit ihm sprechen können.
  • Darüber hinaus gibt es Gegenstände, die zum Beispiel eingesammelt werden können.

Bei der Spieleerstellung wähle ich zunächst in der ersten Palette den gewünschten Raum. Mithilfe der zweiten Palette gestalte ich einen Avatar, das Symbol für die Tiles und beliebig viele Sprites und Objekte. Ich platziere diese Dinge im Raum, indem ich mit der Maus auf die gewünschte Stelle klicke. Wenn ich sie entfernen will, klicke ich wieder darauf. Weitere Einstellungsmöglichkeiten werden mir jeweils angezeigt.

In der Titelzeile sollte ich noch einen Intro-Text für das Spiel eingeben. Danach probiere ich das Spiel mit Klick auf ‘Spielen’ am besten einfach einmal aus.

Diese ersten Schritte der Spiele-Erstellung zeige ich im folgenden Online-Tutorial.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Welche weiteren Funktionen gibt es?

Wenn das Spiel mehr sein soll als ein Herumspazieren einer Figur in einem Raum (wobei gerade das bei Bitsy aus meiner Sicht mit die schönsten Spiele sind), dann sollte man sich näher mit den folgenden Funktionen beschäftigen:

  • Ich kann Bedingungen in Kombination mit den erfolgten Handlungen festlegen. Einfachstes Beispiel: ein Objekt beginnt einen anderen Dialog, wenn der Avatar zuvor einen Gegenstand eingesammelt hat – als wenn er direkt zu dem Objekt läuft. Um Bedingungen festzulegen, öffnet man die ‘Dialoge’ Karte, klickt auf ein Sprite oder einen Gegenstand und legt die gewünschte Bedingung fest.
  • Ich kann Exits einrichten. Dabei handelt es sich um Übergänge von einem Raum zum nächsten. Das Feld des ‘Exits’ wird in meinem Raum mit einem schwarzen Doppelpfeil markiert. Mittels Drag and Drop kann ich ihnen auch eine andere Position geben.
  • Ich kann ein oder mehrere Enden bestimmen. Das ist ein kurzer Text, der erscheint, wenn der Avatar ein bestimmtes Feld erreicht.

Auch für diese weiteren Funktionen gibt es hier einen kurzen Screencast zum besseren Verständnis.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Das erstellte ‘Spiel’ kannst Du Dir hier als Beispel ansehen

Wie nutze ich Bitsy zum Lernen?

Mit Bitsy können zum einen ’einfach so’ Spiele erstellt und Kreativität ermöglicht werden. Daneben kann ich mir auch die folgenden Übungen und Aufgaben gut vorstellen:

  • ein Bitsy-Spiel, das die Lerngruppe/ die Klasse vorstellt (ein Avatar ‘besucht’ nacheinander die Lernenden, die in einem oder mehrere Räume in Pixel-Gestaltung platziert werden und wird von ihnen mit einem typischen Spruch begrüßt)
  • ein Bitsy-Spiel, das eine Figur aus einem Roman/ Gedicht/ Theaterstück zum Avatar hat, der die Handlung nachspielt.
  • ein Bitsy-Spiel, das ein Ereignis aus der Perspektive einer historischen/ zeitgenössischen Person nachspielt.
  • ein Bitsy-Spiel, mit dem Lernende ein Dilemma/ die aktuelle Stimmung/ ein Problem zum Ausdruck bringen.
  • ein Bitsy-Spiel, das vereinbarte Regeln vorstellt und erlebbar macht.

Insgesamt ist Bitsy für mich damit – ähnlich wie das Open Source Tool Twine, das ich in einem früheren Tutorial vorgestellt habe – eine gute Möglichkeit zur kreativen Reflexion von Inhalten und zur aktiven Mediengestaltung dazu.

Da es erfahrungsgemäß nur kurze Zeit braucht, um die Spiel-Erstellungsmechanismen zu verstehen, sind erste Erfolgserlebnisse schnell vorhanden – und Lust auf weiteres Gestalten entsteht. Ein erstes, einfaches Bitsy-Spiel lässt sich in einer 45minütigen Unterrichtsstunde durchaus realisieren. Ohne weitere Gestaltung und in noch einer sehr Rohversion entstand dieses kurze Intro zu Momo zum Beispiel in gerade einmal 10 Minuten.

Technisch sind all diese Varianten mit der oben vorgestellten Kurzeinführung in Bitsy umsetzbar. Von der Initiative Creative Gaming gibt es ein empfehlenswetres Handout (als OER veröffentlicht, danke!), das sich gut an Lernende als eine Art Spickzettel verteilen lässt. Du kannst es Dir hier herunterladen. (Titel: Gamedesign mit Bitsy, Urheber: Initiative Creative Gaming, Lizenz: CC BY SA, Website: Creative Gaming)

Wie kann ich Bitsy-Spiele veröffentlichen und teilen?

Bitsy-Spiele lassen sich aus der Entwicklungsumgebung heraus als HTML-Datei exportieren. Diese Datei kann ich anschließend einfach öffnen – und das Spiel offline spielen. Außerdem kann ich eine Spiele-Datei später erneut in die Entwicklungs-Plattform hochladen – und auf diese Weise an einem begonnenen Spiel weiter arbeiten bzw. eine neue Version erstellen.

Wenn ich mein Spiel auch im Internet veröffentlichen will, habe ich mehrere Möglichkeiten:

  • Viele Bitsy-Nutzer/innen verwenden die Spiele-Plattform itch.io. Diese erfordert allerdings eine kostenfreie Registrierung. Denkbar wäre es in der Schule z.B. dass die Lehrperson einen Klassenaccount anlegt und die erstellten Spiele der Schüler/innen dort hochlädt.
  • Ohne Registrierung kann man die Plattform Glitch nutzen. Dazu muss man nur das Projekt MeinBitsy remixen, die index-html Datei komplett löschen und mit dem Inhalt der herunter geladenen Spiele-Datei ersetzen. Ich kann dem Projekt auch eine eigene URL geben. Näheres zu Glitch habe ich hier erklärt.
  • Da HTML die Sprache des Internets ist, kann ich die Datei auch beliebig auf einer eigenen Website/ einem Blog veröffentlichen.

Viel Spaß beim Ausprobieren!


Beitrag merken & teilen

Hier kannst Du dir den Link zum Beitrag kopieren - beispielsweise um ihn für Dich zu speichern oder mit anderen zu teilen. Wenn Du den Link in den Suchschlitz im Fediverse einfügst, kannst Du den Beitrag von dort aus kommentieren. Die Kommentare erscheinen dann nach Freigabe hier auf der Website.