Einstieg in Bitsy

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.

Beispiele und Präsentation

Während des Webtalks führe ich in Bitsy mithilfe einer Präsentation ein. Darin verlinkt sind mehrere Beispiele, die hier auch direkt zusammengestellt sind.

Du kannst Dir die Beispiele hier gesamt herunterladen. Alle Beispiele sind jeweils in unter 15 Minuten entstanden, um zu verdeutlichen, was Einsteiger/innen mit geringem Aufwand realisieren können. Wer mehr Zeit investiert, kann mit Bitsy auch sehr viel komplexere Projekte realisieren.

Anleitung

Dein erstes Bitsy kannst Du in wenigen Minuten erstellen. Folge dazu diesen Schritten:

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.

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.

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.

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.

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:

  • Filebin: Einfachste Variante, ohne Registrierung. Das Twine bleibt für 1 Woche online.
  • Glitch: Ohne Registrierung für eine Woche; mit Registrierung dauerhaft.
  • Github: Registrierung erforderlich. Dauerhafte Speicherung und Anzeige via Github Pages

Links

  • Eine Liste mit sehr aufwändig gestalteten (und oft sehr beeindruckeden) Bitsys gibt es auf Itch.io
  • Wer nicht selbst malen, sondern bestehende Bilder verwenden und in sein Bitsy einspeisen will, kann dieses Image-zu-Pixel-Tool verwenden..
  • Jede Menge weitere 'Hacks' gibt es in dieser Liste
  • Auf Twitter werden in diesem Account Bitsy-Beispiele geteilt und auch regelmäßige Game Jams (= in einem bestimmten Zeitraum werden Bitsys zu einem bestimmten Thema gestaltet und geteilt) organisiert.
  • Der Quellcode für Bitsy ist auf Github veröffentlicht