infra:workadventure:maps

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung
Vorherige Überarbeitung
infra:workadventure:maps [2021/05/28 09:46] nobyinfra:workadventure:maps [2021/05/28 11:21] (aktuell) noby
Zeile 1: Zeile 1:
 ====== Howto Workadventure Maps ====== ====== Howto Workadventure Maps ======
 +
 +Diese Seite basiert auf [[https://howto.rc3.world/maps.html]] mit diversen Ergänzungen.
 +
 ===== Schnell-Überblick ===== ===== Schnell-Überblick =====
 ==== Limitierungen ==== ==== Limitierungen ====
Zeile 38: Zeile 41:
 Um Tiles als undurchgängig zu markieren, müsst ihr diese im Tileeditor öffnen und die custom property ''collides'' (bool true) für das jeweilige Tile (nicht mit Layern verwechseln!) setzen. Vergesst nicht euer Tileset anschließend zu speichern! Tiled bietet zwar auch die Möglichkeit collision shapes für einzelne Tiles festzulegen, diese werden von der Software allerdings ignoriert. Um Tiles als undurchgängig zu markieren, müsst ihr diese im Tileeditor öffnen und die custom property ''collides'' (bool true) für das jeweilige Tile (nicht mit Layern verwechseln!) setzen. Vergesst nicht euer Tileset anschließend zu speichern! Tiled bietet zwar auch die Möglichkeit collision shapes für einzelne Tiles festzulegen, diese werden von der Software allerdings ignoriert.
  
-{{:infra:workadventure:maps:edit_tileset.png?400 |}} {{:infra:workadventure:maps:cp_collides.png?400 |}}+{{ :infra:workadventure:maps:edit_tileset.png?400 |}} {{ :infra:workadventure:maps:cp_collides.png?400 |}}
  
 === Tiles einbinden === === Tiles einbinden ===
Zeile 55: Zeile 58:
 Eine Karte kann aus beliebig vielen übereinander gelegten Tile Layern bestehen. Eure Karte braucht dabei mindestens einen Startlayer, der definiert, wo auf der Karte neue Spieler:innen spawnen. Dieses Layer muss zwingend ''start'' heißen. Außerdem braucht ihr ein Object Layer ''floorLayer'' das definiert, auf welchem Layer sich die Spielfigur bewegt. Eine Karte kann aus beliebig vielen übereinander gelegten Tile Layern bestehen. Eure Karte braucht dabei mindestens einen Startlayer, der definiert, wo auf der Karte neue Spieler:innen spawnen. Dieses Layer muss zwingend ''start'' heißen. Außerdem braucht ihr ein Object Layer ''floorLayer'' das definiert, auf welchem Layer sich die Spielfigur bewegt.
  
-{{:infra:workadventure:maps:layer.png?400 |}}+{{ :infra:workadventure:maps:layer.png |}} 
 + 
 +Für ein leichteres Gestalten hebt euch den aktuellen Layer hervor: 
 +{{ :infra:workadventure:maps:settings_show_animations.png |}} 
 + 
 +==== Spezielle Layer ==== 
 +Es gibt ein paar spezielle Layer bzw. Zusatzfunktionen für Layer. Diese werden bis auf das Start Layer über die custom properties der einzelnen Layer abgebildet. 
 + 
 +=== Start Layer === 
 +Eure Karte braucht zwingend ein Start Layer mit dem Namen ''start''. Alle Stellen in diesem Layer, die ein Tile (egal welches) enthalten, sind später Startpunkte für neue Spielfiguren. Gibt es mehrere Tiles, wird beim Betreten zufällig eines davon als Startpunkt ausgewählt. Schiebt dieses Layer am besten ganz nach unten in eurem Stack, die Tiles, die Startpunkte markieren, werden dann einfach von den darüberliegenden verdeckt. 
 + 
 +Außerdem könnt ihr weitere Start Layer erstellen, um weitere Einstiegspunkte zu definieren, zum Beispiel um an bestimmte Stellen auf eurer Karte zu springen. Diese Layer funktionieren ähnlich wie der eigentliche Start Layer (also einfach beliebige Tiles an die Stelle, wo die Spielfigur spawnen soll), können beliebig heißen, brauchen allerdings eine custom property ''startLayer'' (bool true). Der Name dieses Layers ist auch die "Sprungadresse", die ihr zum Betreten über dieses Layer braucht. Wenn eure Karte also ''foo.json'' heißt und der Start Layer, auf den ihr springen wollt, ''bar'', dann wäre die Sprungmarke dafür ''foo.json#bar''
 + 
 +{{ :infra:workadventure:maps:cp_startlayer.png |}} 
 + 
 +=== Exit Layer === 
 +Ähnlich wie beim Start Layer könnt ihr Exits definieren. Ihr erzeugt ein Layer, packt an die Stellen an denen ihr Ausgänge haben wollt ein Tile, und gebt dem Layer die custom property ''exitUrl''. Dieser gebt ihr als Wert (string) die Karte bzw. den Startpunkt auf dieser Karte zu der ihr springen wollt, zum Beispiel also ''foo.json#bar'' um auf die Karte foo.json und dort auf einen Startpunkt auf dem Layer bar zu springen. 
 + 
 +{{ :infra:workadventure:maps:cp_exiturl.png |}} 
 + 
 +==== Weitergehende Inhalte ==== 
 +=== Webseite einbinden === 
 +Ihr könnt Webseiten einbinden, die sich beim Betreten von bestimmten Tiles öffnen. Analog zu Start und Exit Layern legt ihr ein Layer dafür an, setzt Tiles an die entsprechenden Stellen und gebt dem Layer die custom property ''openWebsite'' (string). Verwendet https! 
 + 
 +{{ :infra:workadventure:maps:cp_openwebsite.png |}} 
 + 
 +=== Jitsi einbinden === 
 +Jitsi Räume sind per default an die Instanz gebunden, damit jeder sein eigenes "Hackcenter" haben kann. Es können keine externen Jitsi Server angegeben, sondern nur von uns bereitgestellte genutzt werden. 
 + 
 +=== Stille Bereiche === 
 +Solltet ihr in gewissen Bereichen keine Audio/Video Kommunikation zwischen den Teilnehmern wollen, so könnt ihr hierfür einen eigenen Layer anlegen und diesem die custom property ''silent'' (bool true) geben. 
 + 
 +{{ :infra:workadventure:maps:cp_silent.png |}} 
 + 
 +=== Wände / nicht begehbare Bereiche === 
 +Das ist ausnahmsweise kein Layer, sondern eine Tile-Eigenschaft. Beschreibung siehe weiter oben bei den Tiles. 
 + 
 +=== Animationen === 
 +Tiles können zu Animationen (Loops) zusammengeführt werden, um z.B. fließendes Wasser oder blinkende Lichter darzustellen. Dazu müssen alle "Frames" einer Animation jeweils ein eigenes 32x32 Tile sein. Bearbeitet dazu in Tiled das Tileset, wählt das zu animierende Tile (oder ein beliebiges leeres Tile) aus und klickt auf den Animation Editor: 
 +{{ :infra:workadventure:maps:animation_editor.png |}} 
 + 
 +Dann können alle Tiles, die Bestandteil der Animation sein sollen, per drag and drop in die "playlist" gezogen werden und die Anzeigedauer in Millisekunden kann eingestellt werden: 
 +{{ :infra:workadventure:maps:animation.png |}} 
 + 
 +Im Map-Editor sollten die Animationsloops auch schon dargestellt werden, wenn die Option im "view" Menü gesetzt ist: 
 +{{ :infra:workadventure:maps:settings_show_animations.png |}} 
 + 
 +**Hinweis:** Die Engine macht Tile-Updates nur alle 100ms, also werden Animationen mit Framedurations unter 100ms vermutlich nicht gut aussehen oder gar nicht funktionieren. 
 +Größere Animationen über mehrere Tiles müssen in Tiled Tile für Tile animiert werden, funktionieren aber relativ problemlos. (Gelegentlich laufen einzelne Tiles nicht synchron zum Rest, wir wissen doch auch nicht..) 
 + 
 +=== Sound === 
 +Layer mit der Property ''playAudio'' (string) spielen beim Betreten der zugehörigen Tiles Sound ab. Unterstützt werden mp3-Dateien, die relativ zum Pfad der Karte eingebunden werden können. Externe mp3-Dateien können nicht eingebunden werden. Soll sich der Audioschnipsel wiederholen so verwendet stattdessen einfach ''playAudioLoop'' (string) als Property. 
 +{{ :infra:workadventure:maps:cp_playaudio.png |}} 
 + 
 +Bitte verwendet nur **GEMA-freie** Soundschnipsel! Falls ihr Streams einbindet müsst ihr außerdem eine Trackliste anlegen um der GEMA nachweisen zu können, dass ihr nur freie Musik gespielt habt. 
 + 
 +==== Paketierung, Deployment und Infrastruktur ==== 
 +=== Karte speichern / exportieren === 
 +Karten müssen als json gespeichert werden, Tilesets sollten vorher eingebunden werden. Die relevanten Dateien sind anschließend eure Karten im json-Format und die verwendeten Tilesets als png. 
 + 
 +Unendliche Karten müsst ihr vor dem Speichern in endliche umwandeln, hierzu einfach in den properties der Karte den Haken bei "infinite" entfernen und speichern. 
 +{{ :infra:workadventure:maps:map_properties.png |}} 
 + 
 +=== Lizenzen === 
 +Sofern ihr CC-BY Tiles / Bilder verwendet oder eure eigene Lizenz verwenden wollt, könnt ihr dies in der Datei ''COPYRIGHT'' tun. Die Datei muss auf der selben Verzeichnisebene wie eure Karte liegen. 
 + 
 +=== Verzeichnisstruktur === 
 +Achtet beim Ablegen eurer Karten bitte auf die Verzeichnisstruktur, folgende Dinge solltet ihr konkret beachten: 
 +  * Eure Startkarte muss im Hauptverzeichnis liegen. 
 +  * Andere Karten können in eigenen Ordnern oder auch im Hauptverzeichnis liegen. 
 +  * Achtet bei Verlinkungen der Karten in eurer Karte auf die korrekte relative URL. 
 +  * Achtet auf die Pfade eurer Tilesets (zur Not direkt im json anpassen). 
 + 
 +Hier ein Beispiel wie ein Verzeichnis mit Karten exemplarisch aussehen könnte: 
 + 
 +<file> 
 +
 +├── bla 
 +│   ├── COPYRIGHT 
 +│   └── keks.json 
 +├── blubb.json 
 +├── COPYRIGHT 
 +├── foo 
 +│   ├── bar.json 
 +│   └── tileset2.png 
 +├── main.json 
 +└── tileset.png 
 +</file> 
 + 
 +=== Testen === 
 +Zum Testen könnt ihr eure Dateien einfach auf einen beliebigen per https erreichbaren Server legen und über die URL auf unserer Testinstanz einbinden. Nehmen wir an, eure Karte läge unter ''https://example.com/mymaps/foo.json'', so wäre die URL zum Testen ''https://wa.binary-kitchen.de/_/global/example.com/mymaps/foo.json''. Die Möglichkeit externe Karten einzubinden existiert nur zum Testen und wird zum rC3 deaktiviert werden. 
 + 
 +Ggf. kann es sein, dass ihr passende CORS Header auf dem ausliefernden Webserver setzen müsst.
  • infra/workadventure/maps.1622195212.txt.gz
  • Zuletzt geändert: 2021/05/28 09:46
  • von noby