Bitsy ist ein offenes Webtool zur Gestaltung minimalistischer Pixel-Umgebungen. Das Tool ist technisch nicht auf einen bestimmten Einsatzzweck beschränkt: Präsentationen, Tipps und Tricks, Spiele, Geschichten oder virtuelle Rundgänge – in Bitsy ist möglich, was einem einfällt.
📄 Bitsy erklärt
Um einen ersten Eindruck zu Bitsy zu gewinnen, kannst Du Dir einzelne Beispiele ansehen:
Alle diese Beispiele sind bewusst einfach gehalten, um zu zeigen, was mit Bitsy schon in ca. 15 Minuten erstellt werden kann. Wer mehr Zeit investiert, kann deutlich schickere und komplexere Umgebungen gestalten. Um das Tool kennenzulernen, startest Du am besten erst einmal simpel. Folge dazu diesen Schritten:
Schritt 1: Bitsy Editor öffnen
Du findest einen Bitsy-Editor zum Beispiel auf der Website meinbitsy.de. Gestaltet wird mit mehreren Paletten. Zentral ist hier die Palette Räume. Auf dieser entsteht Dein Bitsy und kann jederzeit testweise gespielt werden. Standardmäßig ist ein erster Raum (= ein Pixel-Raster) vorgegeben. Du kannst beliebig viele Räume und Übergänge zwischen ihnen ergänzen.
Schritt 2: Elemente erstellen und einfügen
In der Palette Zeichnen gestaltest Du einen Avatar sowie so genannte Tiles, Sprites und Objekte. Du fügst immer das in Deinen Raum ein, das gerade aktiviert ist. Alle Zeichen-Elemente sind im Pixel-Stil gestaltet. Du kannst sie mit Animationen versehen, indem Du zwei Versionen in den bereitgestellten Frames gestaltest.
- Avatar: Jedes Bitsy hat einen Avatar, d.h. den ‘laufenden’ Charakter des Spiels.
- Tile: Mit Tiles malst Du die Umgebung. Tiles können als Mauer gestaltet sein oder durchlässig für Deinen Avatar. Du kannst beliebig viele Tles erstellen und verwenden. Auf diese Weise kannst Du auch komplexe Bilder malen.
- Sprite: Sprites sind in Deinem Bitsy Objekte, mit denen Dein Avatar interagieren kann. Du kannst beliebig viele Sprites erstellen. Jeder Sprite wird aber immer nur je einmal verwendet. Nach der Interaktion bleibt er im Spiel.
- Objekt: Objekte sind etwas, das der Avatar einsammeln kann und auf diese Weise z.B. Aufgaben erfüllen kann. Objekte können mehrmals verwendet werden.
Schritt 3: Dialoge gestalten
Mit Sprites und mit Objekten können Dialoge verbunden werden. Sie werden dann angezeigt, wenn Dein Avatar das jeweilige Feld erreicht. Die enfachste Dialogform ist, dass immer wenn der Avatar kommt, ein identischer Text erscheint. Spannender werden Dialoge, wenn man verzweigte Möglichkeiten nutzt. Zum Beispiel könnte ein Sprite zunächst die Aufgabe stellen, ein bestimmtes Objekt zu holen. Wenn das Objekt geholt ist, wird ein anderer Dialog angezeigt.
Schritt 4: Farben und Übergänge
Wie dargestellt gibt es bei Bitsy mehrere Räume, die mit Übergängen miteinander verbunden werden können. Für den Übergang können unterschiedliche Effekte festgelegt werden. Jedem Raum kann eine andere Farbpalette zugeteilt werden. Dabei gibt es je eine Farbe für Avatare/ Objekte/ Sprites, für Tiles und für den Hintergrund. Um Farbkombinationen zu entwickeln kann z.B. dieser Online-Farbmixer hilfreich sein.
Schritt 5: Bitsy veröffentlichen
Du kannst Dein Bitsy jederzeit als .html-Datei herunterladen. Du kannst diese Datei per Mail oder via Messenger teilen. Sie kann in jedem Browser geöffnet werden. Alternativ kannst Du sie auf Deiner eigenen Website online stellen (z.B. in WordPress über den Media Upload) oder über die folgenden Webdienste:
Im folgenden Auszug des OERcamp Webtalk zu Bitsy ist die Erstellung detailliert erklärt. Du startest auf der Website meinbitsy.de
📝 Übung: Erstelle Dein erstes Bitsy
Mithilfe des Videos und der oben dargestellten Schritt-für-Schritt Anleitung kannst Du ein erstes eigenes Bitsy erstellen. Wenn Du nicht weiterkommst oder Unklarheiten hast, dann frage mich per Mail via support@ebildungslabor.de
💬 Austausch: Bitsy zum Lehren und Lernen nutzen!
Einige Ideen zur Nutzung von Bitsy zum Lehren und Lernen sind in den obigen Beispielen bereits angedeutet. Grundsätzlich ist Bitsy weniger für ein Tool zur Erstellung von Lerninhalten durch Lehrende, sondern eher zur kreativen Auseinandersetzung mit Lerninhalten durch Lernende selbst. Unter anderem können Lernebde Bitsys erstellen zu literarischen Werken, zur Darstellung historischer Epochen, zum Erzählen über sich selbst …
Nutze die Kommentarfunktion, um erstellte Bitsys zu teilen und auch um Dich mit anderen über Ideen zur Nutzung auszutauschen.
Elke
Hallo,
ist es richtig, dass hier Tutorial auf Twine verweist?
Nele
Nein, das war ein Übertragungsfehler. Ist jetzt gelöscht. Danke fürs Bescheid sagen 🙂
Elke
Hallo,
bei mir kommt bei den Beispielen jeweils nur ein Startbild? Ist das richtig?
Nele
Ja, so starten alle Bitsys. Wenn Du auf die Pfeiltaste nach unten klickst, müsste es weitergehen.
Helke
Bei mir passiert nichts, wenn ich auf die Pfeiltaste drücke /-:
Helke
Jetzt hab ich es verstanden, sorry. Ich habe auf den Pfeil im Bild geklickt. Hier passiert nichts. Wenn ich die runter-Pfeiltaste auf meiner Tastatur klicke klappt es.
Nele
Sehr gut herausgefunden. Mit Pfeil auf der Tastatur ist es richtig.