WorkAdventure sipgate Map

In diesem Repo soll unser neues virtuelles Büro entstehen.

Du möchtest einfach nur ins Büro? Dann besuche den Slack-Channel: #sipgate-workadventure, um den Link zur Map zu bekommen.

Du willst mit das Büro nachbauen? Super! Jeder ist willkommen der mitmachen möchte :) Alles was du dafür brauchst findest du hier.

Tools you will need

Um loszustarten brauchst du:

git
Einen GitHub-Account
Einen Tile Map Editor (z.B. Tiled Map Editor)
"Tile sets" (i.e. images) Die wichtigsten sind bereits in diesem Projekt importiert. Wenn du neue hinzufügst, achte darauf, dass die Lizenz eine Open Source Lizenz ist und ergänze bitte die Copyright-Tabelle. Du findest weitere Tilesets z.B. auf OpenGameArt.org.

Was kann ich beitragen?

Du kannst gerne deinen Teamraum füllen, neue Sprites bauen die mehr nach sipgate aussehen oder sipgate einfach hübscher machen :)

Da es zu merge-Konflikten kommen kann, wenn mehrere gleichzeitig an einer Datei arbeiten, wollen wir uns im Slack-Channel absprechen. Vielleicht nutzen wir auch einfach das 3D Token vom Hubot :)

Cloning this repo

Um dich zu beteiligen, check einfach dieses Repo aus.

Bist du noch nicht in der sipgate Orga im öffentlichen Github so sprich kurz mit Mathias, Celina oder Ben und lass dich hinzufügen, dann kannst du dieses Repo auch bearbeiten.

Loading the map in Tiled

In Tiled kannst du einfach durch "File" -> "Open" eine der .json Files öffnen und losstarten.

Falls du etwas Hilfe im Umgang mit Tilded brauchst, schau dochmal hier:

About WorkAdventu.re maps

Um eine Karte zu entwerfen, die von WorkAdventure gelesen werden kann, musst du einige Einschränkungen beachten.

Insbesondere müsst du:

eine Startposition für die Spieler festlegen
den "floor layer" konfigurieren (so dass WorkAdventure Zeichen über dem Boden, aber unter der Decke korrekt anzeigen kann)
schließlich kannst du auch Ausgänge platzieren, die auf andere Karten verweisen

All dies wird in der WorkAdventure-Dokumentation beschrieben.

Und auf der howto rc3 Seite sind auch ein paar Infos zu finden.

Howto: Übersichtlichkeit

Da jede Karte nur eine Datei hat, wollen wir mit den Layern versuchen etwas Ordnung zu halten.

Aktuell gibt es folgende Layer:

stuffFront (Dinge die über der Spielerfigur angezeigt werden sollen)
floorLayer (Die Eben für die Chars)
stuffTop (Dinge im Hintergrund - Layer 1)
stuffBottom (Dinge im Hintergrund - Layer 2)
blockingObjectsTop (Dinge im Hintergrund die blockieren - Layer 1)
blockingObjectsBottom (Dinge im Hintergrund die blockieren - Layer 2)
wall (Die Wand)
link_ (Links zu andern Seiten)
jitsi_ (Links zu Jitsi Meeting Räumen)
map_ (Links zu anderen Karten)
start (Startposition der Spieler)
bottom (der Boden)
clearMap (der Hintergrund)

Für manche Stuff/BlockingObject gibt es 2 Layer, weil manchmal möchte man z.B. einen Computer haben und darüber eine Pflanze positionieren. Dafür braucht man dann einfach 2 Layer.

Wir wollen versuchen die neu platzierten Objekte den Layern zuzuordnen.

Fragen

Du brauchst Hilfe? Join: Slack-Channel: #sipgate-workadventure oder frag Celina oder Mathias

Wie muss man Assets aufbereiten, damit keine Renderbugs entstehen?

Es gibt einen Assets Ordner, wo die Orginal-Dateien liegen und einen assets-converted Ordner, wo die Bilder liegen, die wir in Tiles benutzen müssen.

Wenn du nur die Karte im Tiles baust/bearbeitest:

Für dich ändert sich praktisch nichts.

Wenn du neue Sprites bei Tiles in die Karte lädst:

Achte darauf IMMER die konvertierten Sprites aus dem assets-converted Ordner zu benutzen.
Beim Importieren MUSST du "margin":1 und "spacing":2 eingeben.

Wenn du Sprites Editierst

Einmalig npm installausführen
Achte darauf die Orginal-Daten im assets/ Ordner zu ändern, die im Ordner assets-converted/ werden immer wieder automatisch überschrieben
Wenn du fertig bist mit dem Editieren der Sprites, einmal npm run convert laufen lassen

Warum haben wir das gemacht: Es behebt den Bug, dass beim laufen überall so häßliche schwarze / pinke Balken auf der Karte erscheinen. Das kam daher, dass die tiles in den Sprites kein Padding um sich hatten. Dies fixt das npm tool was nun die Bilder konvertiert.

Pushing the map

Wenn Deine Änderungen fertig sind, musst du sie nur "committen" und an GitHub zurück "puschen". Warten einfach ein paar Minuten, die sipgate Karte wird automatisch geladen. Nach einer Minute kannst du auf unserem Workadventure Server die neue Karte erkunden.

Änderungen an der Map lokal ausprobieren.

Du kannst Änderungen an der Map lokal ausprobieren. Dazu musst du dir vorab Node.js installieren und folgendes in einem Terminal tun:

# Change to this directory
cd path/to/workadventure-office

# Install dependencies
npm install

# Start local webserver
npm start

Du solltest den aktuellen Stand der Map jetzt unter https://play.workadventu.re/_/global/localhost:8080/overworld.json ausprobieren können. Um auf den von dir bearbeiteten Teil der Map zu kommen ist evtl. etwas URL-Frikulatur von Nöten.

Aufgaben

Hier ist eine unvollständige Liste an Dingen, die noch zu tun sind

Die Seite hinter einer Authentifizierung verstecken (Google?)
Man könnte noch ein Watch script schreiben, was beim editieren der Sprites beim speichern automatisch konvertiert.

SylvainRamousse/WA_workadventure-office