Skip to content
Snippets Groups Projects
Commit 94f37f48 authored by psy's avatar psy
Browse files

Merge branch 'deinkoks-master-patch-88654' into 'master'

Refactoring, done by @Lisk.

See merge request rc3/howto!41
parents 883a00bf 791f8fd9
Branches
Tags
1 merge request!41Refactoring, done by @Lisk.
Pipeline #4002 passed
...@@ -4,10 +4,9 @@ HowTo rC3 world maps ...@@ -4,10 +4,9 @@ HowTo rC3 world maps
This year's remote event will feature a kind of 2D adventure, the rc3 world. This tutorial is intended to show how content and maps can be contributed. This year's remote event will feature a kind of 2D adventure, the rc3 world. This tutorial is intended to show how content and maps can be contributed.
If you have any questions after reading this tutorial, or feel like its missing something, please feel free to contact us via [mail](mailto:world@rc3.world), and we'll do our best to extend this tutorial. If you have any questions after reading this tutorial, or feel like its missing something, please feel free to contact us via [mail](mailto:world@rc3.world), and we'll do our best to extend this tutorial.
## Maintenance ## Metainformationen
We are curently working on the test server, expect downtimes.
## Disclaimer ### Disclaimer
This tutorial is "work in progess", hence its worth checking it from time to time since it will be changed and extended continuously. This tutorial is "work in progess", hence its worth checking it from time to time since it will be changed and extended continuously.
### Updates ### Updates
...@@ -23,7 +22,7 @@ This tutorial is "work in progess", hence its worth checking it from time to tim ...@@ -23,7 +22,7 @@ This tutorial is "work in progess", hence its worth checking it from time to tim
* 2020-12-22: Cross-Assembly Links added. * 2020-12-22: Cross-Assembly Links added.
* 2020-12-25: Added [exitUrl List](exitUrls.en.md) * 2020-12-25: Added [exitUrl List](exitUrls.en.md)
## Known Bugs ### Known Bugs
Following bugs are known and worked on: Following bugs are known and worked on:
* Exits on the outer most right tiles dont work * Exits on the outer most right tiles dont work
* exitUrl in combination wir multiple exits to the same map leads to confusion in starting points. * exitUrl in combination wir multiple exits to the same map leads to confusion in starting points.
...@@ -31,8 +30,10 @@ Following bugs are known and worked on: ...@@ -31,8 +30,10 @@ Following bugs are known and worked on:
* Loading a tileset twice (with the same name) results in interesting rendering bugs (e.g. missing tiles in WorkAdventure) * Loading a tileset twice (with the same name) results in interesting rendering bugs (e.g. missing tiles in WorkAdventure)
* Tilesets with dimensions above 4096px may cause problems in some browsers. * Tilesets with dimensions above 4096px may cause problems in some browsers.
## Limitations ## Quick overview
Instances wont scale indefinetly, please keep that in mind while building maps. From our experience the limit is somewhere around 200 players. Maps for 2k players wont make any sense. Please dont try to build lecture halls. There's no sense in idling in the game while watching talks.
### Limitations
Instances wont scale indefinitely, please keep that in mind while building maps. From our experience the limit is somewhere around 200 players. Maps for 2k players wont make any sense. Please dont try to build lecture halls. There's no sense in idling in the game while watching talks.
Regardless of this you can choose the map size relativly fleixble. Regardless of this you can choose the map size relativly fleixble.
Maps in the ballpark of 128x128 tils run quite smooth, maps with 1000x1000 tiles will come with a significant loading time. Maps in the ballpark of 128x128 tils run quite smooth, maps with 1000x1000 tiles will come with a significant loading time.
...@@ -40,13 +41,30 @@ We hence recomend using a number of smaller maps rather than a single big one. ...@@ -40,13 +41,30 @@ We hence recomend using a number of smaller maps rather than a single big one.
External links will be sent through a dereferrer. External links will be sent through a dereferrer.
## Starter-Kit ### Starter-Kit
We provide a [starter kit](https://git.cccv.de/rc3/world-map-starterkit) in case you don't know how/where to start with your map. We provide a [starter kit](https://git.cccv.de/rc3/world-map-starterkit) in case you don't know how/where to start with your map.
Just clone the repository and get your assembly started. Just clone the repository and get your assembly started.
## Tiles / Sprites ### Tiles / Sprites
The maps consist of so-called tiles or sprites. There appears to be a historical difference between these 2 terms, however we do use them interchangeably. For the rC3 map 32x32 tiles are recomended, as different tile sizes may lead to problems. Tiles may have transparent parts and should be stored in the png format. The maps consist of so-called tiles or sprites. There appears to be a historical difference between these 2 terms, however we do use them interchangeably. For the rC3 map 32x32 tiles are recomended, as different tile sizes may lead to problems. Tiles may have transparent parts and should be stored in the png format.
### Layer and attributes
In order for a tile to have more properties than its look, you have to assign the appropriate attributes.
This is done using layers: A layer carries attributes, and stores for which fields they should apply.
### How will it be linked into the the rC3 world?
To be able to contribute maps to the world, you need to [register an assembly](https://signup.c3assemblies.de/) and contact [world@rc3.world](mailto:world@rc3.world) naming your assembly name.
Please store your maps in a git repo of your choice and and notify us in our backend with the URL to clone the repo. Our world infrastructure will then spawn an instance for you and embed the map.
We will pull the maps from your git repo on a regular basis. Players need to reload their page to see the newest version (no live-reload).
### Entrypoint / Lobby / Exit
We create central Entrymaps to join the world and lead to the different assembly maps. Please drop us an email via [world@rc3.world](mailto:world@rc3.world) naming your assemblyname, that we can reserve an exitpoint to your assembly. Besides that we would ask you to reserve a spot for an exit back to the lobby maps on your map. Tiles and the address for the jump will be provided by us via mail.
# Map design
## Tiles
### Finding tiles: ### Finding tiles:
* There are many tiles available on the internet, often combined into tilesets (multiple tiles for one topic) * There are many tiles available on the internet, often combined into tilesets (multiple tiles for one topic)
* Some examples of websites offering awesome tiles: * Some examples of websites offering awesome tiles:
...@@ -66,7 +84,15 @@ You can design your own tiles as well as change exisiting tiles, this is usually ...@@ -66,7 +84,15 @@ You can design your own tiles as well as change exisiting tiles, this is usually
* Use transparency if you have to model transitions between different materials. This is more flexible and saves you time by not modeling every transition. * Use transparency if you have to model transitions between different materials. This is more flexible and saves you time by not modeling every transition.
* Pixel-Art Workshop by blinry: [media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop](https://media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop) * Pixel-Art Workshop by blinry: [media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop](https://media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop)
## Tile integration ### Walls and collision
To mark tiles as impervious, you have to open the them in the tile editor and set the custom property `collides` (bool true) for the specific tile. (Do not confuse this with a layer property!)
Tiled provides custom collision shapes for tiles, however these are ignored by our software.
![](img/edit_tileset.png)
![](img/cp_collides.png)
### Tile integration
Linking to external tilesets in TSX format is not possible, tiles need to be embedded in tiled (see below). (PNG files need to be uploaded to the server as well.) Linking to external tilesets in TSX format is not possible, tiles need to be embedded in tiled (see below). (PNG files need to be uploaded to the server as well.)
## Maps ## Maps
...@@ -80,10 +106,31 @@ When creating a new map please ensure the following conditions are met: ...@@ -80,10 +106,31 @@ When creating a new map please ensure the following conditions are met:
* When creating a map it might be useful to use a infite size map, however when saving you need to select a fixed size. * When creating a map it might be useful to use a infite size map, however when saving you need to select a fixed size.
### Map design ### Map design
A map may consist of any number of tile layers. Your map needs a start layer which defines where your players spawn. This layer needs to be called "_start_". Additionally you need a layer called "_floorLayer_" of the type object layer on which the players move. A map may consist of any number of tile layers. Your map needs a start layer which defines where your players spawn. This layer needs to be called `start`. Additionally you need a layer called `floorLayer` of the type object layer on which the players move.
![](img/layer.png) ![](img/layer.png)
For a better mapping experience, highlight the current layer:
![](img/settings_show_animations.png)
## Special layers
There are a few special layers which are used for additional features. Except for the start layer these layers are created through the custom properties of individual layers.
### Start layer
Your map needs a start layer named `start`. All locations in this layer that contain a tile (no matter which) will be spawn points for new players. A random tile of this layer will be selected upon entry if there are multiple tiles. It's best if you push this layer to the bottom of your stack, this way the layers above will cover the start tiles.
It's possible to create additional start layers to define more entry points, this for example allows users to jump across the map. These layers work in a similar way as the start layer: Just place tiles anywhere you'd like players to spawn. These layers have no naming requirement, but need the custom property `startLayer` (bool true). The name of this layer will also function as the jump address that is needed for spawning there. E.g. if your map is called `foo.json` and the start layer that you want to jump to is called `bar`, then the jump address/marker is called `foo.json#bar`.
![](img/cp_startlayer.png)
### Exit Layer
Similar to the start layer you can define exits. You create a layer, put a tile on the areas you want the exits to be and give the layer the custom property `exitUrl` (string). The value of the property should be the map and start layer of the map you want to join to, for example `foo.json#bar` to get to the map `foo.json` and the layer `bar`.
![](img/cp_exiturl.png)
#### World Exit #### World Exit
We recommend the following tile for your exit(s) back to the lobby map for a more consistent user experience. We recommend the following tile for your exit(s) back to the lobby map for a more consistent user experience.
...@@ -91,50 +138,40 @@ We recommend the following tile for your exit(s) back to the lobby map for a mor ...@@ -91,50 +138,40 @@ We recommend the following tile for your exit(s) back to the lobby map for a mor
You individual exitUrls are listed [here](exitUrls.en.md) You individual exitUrls are listed [here](exitUrls.en.md)
#### Highlight current layer
For a better mapping experience, highlight the current layer:
![](img/settings_show_animations.png) There will probably placeholders for links to other assemblies. Once there are news we will add them here. [TODO]
#### Special layers #### Crossy-Assembly links
There are a few special layers which are used for additional features. Except for the start layer these layers are created through the custom properties of individual layers. There will be placeholders which get automatically replaced by the right url. Example for a placeholder: `{<SLUG>/map.json#YourStartLayer}`. **< and > are important and need to stay in the placeholder!**
##### Start layer You can find _your slug_ in the Maschinenraum under Organisational Data -> Basic Data -> "Slug".
Your map needs a start layer named "_start_". All locations in this layer that contain a tile (no matter which) will be spawn points for new players. A random tile of this layer will be selected upon entry if there are multiple tiles. It's best if you push this layer to the bottom of your stack, this way the layers above will cover the start tiles. It's possible to create additional start layers to define more entry points, this for example allows users to jump across the map. These layers work in a similar way as the start layer: Just place tiles anywhere you'd like players to spawn. These layers have no naming requirement, but need the custom property "_startLayer_" (bool true). The name of this layer will also function as the jump address that is needed for spawning there. E.g. if your map is called _foo.json_ and the start layer that you want to jump to is called "_bar_", then the jump address/marker is called _foo.json#bar_.
![](img/cp_startlayer.png) If you want to link to the foobar assembly for example and the foobar assemblys slug is `foobar`, the value for the exit layer would be `{<foobar>/main.json}`.
##### Exit Layer Attention: This does **not** work for the test instance.
Similar to the start layer you can define exits. You create a layer, put a tile on the areas you want the exits to be and give the layer the custom property "_exitUrl_" (string). The value of the property should be the map and start layer of the map you want to join to, for example "_foo.json#bar_" to get to the map _foo.json_ and the layer _bar_.
![](img/cp_exiturl.png)
There will probably be a placeholder for links to other assemblies. As soon as there are news about this, we'll put them here. [TODO] ## Advanced content
##### Embedding websites ### Embedding websites
You can embed websites that will open when stepping on certain tiles. To do this, give the layer the property "openWebsite" (string). Use https. You can embed websites that will open when stepping on certain tiles. To do this, give the layer the property `openWebsite` (string). Use https.
![](img/cp_openwebsite.png) ![](img/cp_openwebsite.png)
##### Embedding jitsi ### Embedding jitsi
Jitsi rooms may be embedded into maps in the same way. Simple set the custom property "jitsiRoom" (string) and input the room name as the value. Jitsi rooms may be embedded into maps in the same way. Simple set the custom property `jitsiRoom` (string) and input the room name as the value.
![](img/cp_jitsiroom.png) ![](img/cp_jitsiroom.png)
By default jitsi rooms will be bound to the instance, this is to ensure that everyone has their own "hackcenter". Please prefix your room with "shared", should you want to share a jitsi room across instaces. (e.g. "shared our jitsiroom"). No external jitsi rooms will be allowed only the ones provided by us. By default jitsi rooms will be bound to the instance, this is to ensure that everyone has their own "hackcenter". Please prefix your room with `shared`, should you want to share a jitsi room across instaces. (e.g. `shared our jitsiroom`). No external jitsi rooms will be allowed only the ones provided by us.
##### Silent areas ### Silent areas
Should you not want audio and video communication between participants in certain areas, you can set the custom property "silent" bool true in a layer defining the area. Should you not want audio and video communication between participants in certain areas, you can set the custom property `silent` bool true in a layer defining the area.
![](img/cp_silent.png) ![](img/cp_silent.png)
#### Walls and collision ### Walls / non-accessible areas
To mark tiles as impervious, you have to open the them in the tile editor and set the custom property "collides" (bool true) for the specific tile. (Do not confuse this with a layer property!) For a change, this is not a layer property, but a tile property. For a description, see the Tiles section above.
Tiled provides custom collision shapes for tiles, however these are ignored by our software.
![](img/edit_tileset.png)
![](img/cp_collides.png)
### Animated Tiles ### Animated Tiles
Tiles can be combined to animations (loops), for example to make floating water or bliking lights look better. Therefore all frames need to be a single 32x32 tile. Tiles can be combined to animations (loops), for example to make floating water or bliking lights look better. Therefore all frames need to be a single 32x32 tile.
...@@ -156,28 +193,24 @@ Bigger animations need to animated in tiled tile by tile. This however is relati ...@@ -156,28 +193,24 @@ Bigger animations need to animated in tiled tile by tile. This however is relati
(Occationally some tiles dont run in sync with the rest, Cthulu knows why...) (Occationally some tiles dont run in sync with the rest, Cthulu knows why...)
### Sound ### Sound
Layers with the property "playAudio" (String) will play a sound associated with the tile. Only mp3 files included via a relativ path to your map are supported. External files can not be included. If you want to include streams, please write an email to [world@rc3.world](mailto:world@rc3.world). If you want to loop the audio please use the property "playAudioLoop" (string) instead. Layers with the property `playAudio` (String) will play a sound associated with the tile. Only mp3 files included via a relativ path to your map are supported. External files can not be included. If you want to include streams, please write an email to [world@rc3.world](mailto:world@rc3.world). If you want to loop the audio please use the property `playAudioLoop` (string) instead.
![](img/cp_playaudio.png) ![](img/cp_playaudio.png)
Please only use **GEMA-free** sound snippets! If you embed streams you will also be required to keep a tracklist to be able to proove to GEMA that you only played "gema-free music". Please only use **GEMA-free** sound snippets! If you embed streams you will also be required to keep a tracklist to be able to proove to GEMA that you only played "gema-free music".
### Saving and exporting maps
Maps need to be saved as json files, tilesets should be embedded prior to this. The relevant files the will be you map in json format and will use the tilesets in png format. Infinite maps need to be converted to finite dimension maps before exporting. To do so just untick the "infinite" tick box and safe.
![](img/map_properties.png)
### Licenses # Packaging, Deployment and Infrastructure
If you use CC-BY tiles or pictures or want to use your own license, you can add a file named "_COPYRIGHT_". This file has to be on the same level as your map file.
## How will it be linked into the the rC3 world? ## Saving and exporting maps
To be able to contribute maps to the world, you need to [register an assembly](https://signup.c3assemblies.de/) and contact [world@rc3.world](mailto:world@rc3.world) naming your assembly name. Maps need to be saved as json files, tilesets should be embedded prior to this. The relevant files the will be you map in json format and will use the tilesets in png format. Infinite maps need to be converted to finite dimension maps before exporting. To do so just untick the "infinite" tick box and safe.
Please store your maps in a git repo of your choice and and notify us in our backend with the URL to clone the repo. Our world infrastructure will then spawn an instance for you and embed the map. ![](img/map_properties.png)
We will pull the maps from your git repo on a regular basis. Players need to reload their page to see the newest version (no live-reload). ## Licenses
If you use CC-BY tiles or pictures or want to use your own license, you can add a file named `COPYRIGHT`. This file has to be on the same level as your map file.
### Folder structure ## Folder structure
Please ensure that the right folder structure is used when saving your maps: Please ensure that the right folder structure is used when saving your maps:
* The start map needs to be called main.json and be in the main dir * The start map needs to be called main.json and be in the main dir
...@@ -190,29 +223,19 @@ A example map might look like this: ...@@ -190,29 +223,19 @@ A example map might look like this:
. .
├── bla ├── bla
│ ├── COPYRIGHT │ ├── COPYRIGHT
└── keks.json └── keks.json
├── blubb.json ├── blubb.json
├── COPYRIGHT ├── COPYRIGHT
├── foo ├── foo
├── bar.json ├── bar.json
└── tileset2.png └── tileset2.png
├── main.json ├── main.json
└── tileset.png └── tileset.png
``` ```
### Entrypoint / Lobby / Exit
We create central Entrymaps to join the world and lead to the different assembly maps. Please drop us an email via [world@rc3.world](mailto:world@rc3.world) naming your assemblyname, that we can reserve an exitpoint to your assembly. Besides that we would ask you to reserve a spot for an exit back to the lobby maps on your map. Tiles and the address for the jump will be provided by us via mail.
### Crossy-Assembly links
There will be placeholders which get automatically replaced by the right url. Example for a placeholder: `{<SLUG>/map.json#YourStartLayer}`. **< and > are important and need to stay in the placeholder!**
You can find _your slug_ in the Maschinenraum under Organisational Data -> Basic Data -> "Slug".
If you want to link to the foobar assembly for example and the foobar assemblys slug is `foobar`, the value for the exit layer would be `{<foobar>/main.json}`.
Attention: This does **not** work for the test instance.
### Testing ## Testing
For testing you may put the map on any server reachable by https and embed the URL in our test instance. Lets assume your map is stored under _https://example.com/mymaps/foo.json_ then the URL to test it would be *https://test.visit.at.wa-test.rc3.cccv.de/_/global/example.com/mymaps/foo.json*. The option to load external maps is just for testing and will be disabled for rC3. For testing you may put the map on any server reachable by https and embed the URL in our test instance. Lets assume your map is stored under _https://example.com/mymaps/foo.json_ then the URL to test it would be *https://test.visit.at.wa-test.rc3.cccv.de/_/global/example.com/mymaps/foo.json*. The option to load external maps is just for testing and will be disabled for rC3.
You might need to set the matching CORS Headers on the server serving the map. You might need to set the matching CORS Headers on the server serving the map.
......
...@@ -7,10 +7,9 @@ Zum Congress wird es eine Art 2D-Adventure, die rC3.world geben. ...@@ -7,10 +7,9 @@ Zum Congress wird es eine Art 2D-Adventure, die rC3.world geben.
Dieses Tutorial soll erklären, wie Karten und Inhalte zur rC3.world beigesteuert werden können. Dieses Tutorial soll erklären, wie Karten und Inhalte zur rC3.world beigesteuert werden können.
Falls danach noch Fragen offen sind, meldet euch gerne per [Email](mailto:world@rc3.world) und wir versuchen das Tutorial zu ergänzen. Falls danach noch Fragen offen sind, meldet euch gerne per [Email](mailto:world@rc3.world) und wir versuchen das Tutorial zu ergänzen.
## Maintenance ## Metainformationen
Wir bauen aktuell den Testserver um, es wird zu Einschränkungen kommen.
## Disclaimer ### Disclaimer
Dieses Tutorial ist ein work in progress und wird immer mal wieder erweitert, es lohnt sich daher mehrfach hier vorbeizuschauen. Dieses Tutorial ist ein work in progress und wird immer mal wieder erweitert, es lohnt sich daher mehrfach hier vorbeizuschauen.
### Updates ### Updates
...@@ -26,7 +25,7 @@ Dieses Tutorial ist ein work in progress und wird immer mal wieder erweitert, es ...@@ -26,7 +25,7 @@ Dieses Tutorial ist ein work in progress und wird immer mal wieder erweitert, es
* 2020-12-22: Cross-Assembly Links ergänzt. * 2020-12-22: Cross-Assembly Links ergänzt.
* 2020-12-25: Liste der exitUrls ergänzt. * 2020-12-25: Liste der exitUrls ergänzt.
## Known Bugs ### Known Bugs
Folgende Bugs sind aktuell bekannt, wir versuchen bereits, Lösungen dafür zu finden: Folgende Bugs sind aktuell bekannt, wir versuchen bereits, Lösungen dafür zu finden:
* Ausgänge können nicht auf dem rechten Rand der Karte liegen * Ausgänge können nicht auf dem rechten Rand der Karte liegen
...@@ -35,7 +34,9 @@ Folgende Bugs sind aktuell bekannt, wir versuchen bereits, Lösungen dafür zu f ...@@ -35,7 +34,9 @@ Folgende Bugs sind aktuell bekannt, wir versuchen bereits, Lösungen dafür zu f
* das gleiche Tileset (mit dem gleichen Namen) mehrfach einbetten führt zu Darstellungsfehlern in WorkAdventure * das gleiche Tileset (mit dem gleichen Namen) mehrfach einbetten führt zu Darstellungsfehlern in WorkAdventure
* Tilesets > 4096px Kantenlänge scheinen in manchen Browsern Probleme zu machen. * Tilesets > 4096px Kantenlänge scheinen in manchen Browsern Probleme zu machen.
## Limitierungen ## Schnell-Überblick
### Limitierungen
Instanzen skalieren nicht unendlich, bitte denkt beim Karten erstellen daran. Unsere Erfahrung zeigt, dass das Limit irgendwo bei 200 Nutzer:innen liegt. Karten für 2k Spieler:innen ergeben also keinen Sinn. Bitte versucht nicht, Vortragssäle nachzubauen. Es ergibt schlichtweg keinen Sinn, im Spiel zu idlen und währenddessen Talks zu schauen. Instanzen skalieren nicht unendlich, bitte denkt beim Karten erstellen daran. Unsere Erfahrung zeigt, dass das Limit irgendwo bei 200 Nutzer:innen liegt. Karten für 2k Spieler:innen ergeben also keinen Sinn. Bitte versucht nicht, Vortragssäle nachzubauen. Es ergibt schlichtweg keinen Sinn, im Spiel zu idlen und währenddessen Talks zu schauen.
Die Map-Größe kann davon unabhängig relativ flexibel dimensioniert werden. Die Map-Größe kann davon unabhängig relativ flexibel dimensioniert werden.
...@@ -44,12 +45,27 @@ Wir raten eher zu mehreren kleineren Karten anstelle einer riesigen. ...@@ -44,12 +45,27 @@ Wir raten eher zu mehreren kleineren Karten anstelle einer riesigen.
Ausgehenden Links wird ein Dereferrer vorgeschaltet. Ausgehenden Links wird ein Dereferrer vorgeschaltet.
## Starter-Kit ### Starter-Kit
Falls ihr nicht wisst wo/wie ihr anfangen sollt haben wir inzwischen auch ein [Starter-Kit](https://git.cccv.de/rc3/world-map-starterkit) für euch das ihr einfach forken könnt. Falls ihr nicht wisst wo/wie ihr anfangen sollt haben wir inzwischen auch ein [Starter-Kit](https://git.cccv.de/rc3/world-map-starterkit) für euch das ihr einfach forken könnt.
## Tiles / Sprites ### Tiles / Sprites
Grundlegend bestehen die Karten aus sogenannten Tiles oder Sprites. Historisch gibt es wohl Unterschiede zwischen den Begriffen, wir werden sie hier aber synonym verwenden. Für die rC3.world werden Tiles in der Größe 32x32 empfohlen, Tiles in anderen Größen können zu Problemen führen. Tiles können Transparenz beinhalten und liegen im png-Format vor. Grundlegend bestehen die Karten aus sogenannten Tiles oder Sprites. Historisch gibt es wohl Unterschiede zwischen den Begriffen, wir werden sie hier aber synonym verwenden. Für die rC3.world werden Tiles in der Größe 32x32 empfohlen, Tiles in anderen Größen können zu Problemen führen. Tiles können Transparenz beinhalten und liegen im png-Format vor.
### Layer und Attribute
Damit ein Tile weitergehende Eigenschaften als sein Aussehen hat, müssen entsprechende Attribute zugeordnet werden. Dies erfolgt über Layer: Das Layer trägt Attribute, und speichert für welche Felder sie gelten sollen.
### Wie kommts später in die world?
Um Karten in der Welt einbringen zu können, müsst ihr ein [Assembly anmelden](https://signup.c3assemblies.de/) und euch anschließend kurz unter Angabe eures Assemblynamens unter [world@rc3.world](mailto:world@rc3.world) melden.
Eure Karten legt ihr dann bitte in einem git Repo eurer Wahl ab und teilt später in unserem Backend die URL mit, unter der das Repo geklont werden kann. Unsere world-Infrastruktur wird anschließend eine Instanz für euch spawnen, das Karten-Repo pullen und diese dort einbinden.
Wir werden eure Karten regelmäßig aus eurem git Repo aktualisieren und die aktuellsten Karten ausspielen. Damit Spieler:innen die neue Version sehen, müssen sie die Seite aber neu laden.
### Einstiegspunkt / Lobby / Exit
Wir gestalten zentrale Einstiegskarten, über die man dann zu euren Assembly-Karten gelangt. Meldet euch dafür bitte unter Angabe eures Assemblynamens bei [world@rc3.world](mailto:world@rc3.world), damit wir einen Ausgang zu eurer Karte vorsehen können. Außerdem bitten wir euch, einen Platz für einen Ausgang zurück zur Lobby freizuhalten. Tiles und die genaue Sprungadresse dafür teilen wir euch dann per Mail mit.
# Kartengestatung
## Tiles
### Tiles finden ### Tiles finden
* Tiles gibt es massig im Internet, häufig zu Tilesets (mehrere Tiles zu einem Thema) zusammengefasst. * Tiles gibt es massig im Internet, häufig zu Tilesets (mehrere Tiles zu einem Thema) zusammengefasst.
* Seiten auf denen ihr schöne Tiles finden könnt sind zum Beispiel: * Seiten auf denen ihr schöne Tiles finden könnt sind zum Beispiel:
...@@ -69,7 +85,14 @@ Tiles können auch selbst gestaltet bzw. vorhandene verändert werden, was häuf ...@@ -69,7 +85,14 @@ Tiles können auch selbst gestaltet bzw. vorhandene verändert werden, was häuf
* Falls ihr Übergänge von Materialien gestalten müsst, nutzt Transparenz und baut Übergänge von einem Material zu Transparenz, das ist vielseitiger nutzbar und erspart euch, zu jedem anderen Material einen Übergang gestalten zu müssen. * Falls ihr Übergänge von Materialien gestalten müsst, nutzt Transparenz und baut Übergänge von einem Material zu Transparenz, das ist vielseitiger nutzbar und erspart euch, zu jedem anderen Material einen Übergang gestalten zu müssen.
* Pixel-Art Workshop von blinry: [media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop](https://media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop) * Pixel-Art Workshop von blinry: [media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop](https://media.ccc.de/v/34C3-jugend-hackt-1016-pixel_art_workshop)
## Tiles einbinden ### Wände / Kollisionen
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.
![](img/edit_tileset.png)
![](img/cp_collides.png)
### Tiles einbinden
Tilesets müssen in Tiled in die Map eingebunden werden, ein Verweis auf externe Tilesets im TSX Format ist nicht möglich. (Das heißt nicht, dass die Bilddateien mit eingebunden sind. PNG-Dateien müssen ebenfalls auf den Server geladen werden.) Tilesets müssen in Tiled in die Map eingebunden werden, ein Verweis auf externe Tilesets im TSX Format ist nicht möglich. (Das heißt nicht, dass die Bilddateien mit eingebunden sind. PNG-Dateien müssen ebenfalls auf den Server geladen werden.)
...@@ -84,10 +107,29 @@ Achtet beim Erstellen einer neuen Karte auf folgende Einstellungen: ...@@ -84,10 +107,29 @@ Achtet beim Erstellen einer neuen Karte auf folgende Einstellungen:
* Während des Erstellens kann es sinnvoll sein, eine unendliche Karte zu verwenden statt vorab eine Größe festzulegen. Dies muss beim finalen Speichern der Karte wieder auf eine feste Größe geändert werden. * Während des Erstellens kann es sinnvoll sein, eine unendliche Karte zu verwenden statt vorab eine Größe festzulegen. Dies muss beim finalen Speichern der Karte wieder auf eine feste Größe geändert werden.
### Karte gestalten ### Karte gestalten
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.
![](img/layer.png) ![](img/layer.png)
Für ein leichteres Gestalten hebt euch den aktuellen Layer hervor:
![](img/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`.
![](img/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.
![](img/cp_exiturl.png)
#### World-Exit #### World-Exit
Als einheitlichen, wiedererkennbaren Ausgang zur Lobby-Karte empfehlen wir dieses Tile zu verwenden: Als einheitlichen, wiedererkennbaren Ausgang zur Lobby-Karte empfehlen wir dieses Tile zu verwenden:
...@@ -95,51 +137,41 @@ Als einheitlichen, wiedererkennbaren Ausgang zur Lobby-Karte empfehlen wir diese ...@@ -95,51 +137,41 @@ Als einheitlichen, wiedererkennbaren Ausgang zur Lobby-Karte empfehlen wir diese
Eure individuellen exitUrls findet ihr [hier](exitUrls.md) Eure individuellen exitUrls findet ihr [hier](exitUrls.md)
#### Aktuellen Layer hervorheben
Für ein leichteres Gestelten hebt euch den aktuellen Layer hervor:
![](img/settings_show_animations.png) #### Cross-Assembly Links
Es wird Platzhalter geben welche automatisch mit dem richtigen Link ersetzt werden.
#### Spezielle Layer Beispiel für einen Platzhalter: `{<SLUG>/map.json#YourStartLayer}`. **Die <> sind wichtig und müssen drin bleiben.**
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 _Euren Slug_ findet ihr im Maschinenraum unter Organisational Data -> Basic Data -> "Kurzname"
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_. Ihr wollt zum Beispiel direkt auf die Assembly foobar linken und der Slug vom foobar Assembly lautet `foobar`, dann ergibt sich `{<foobar>/main.json}` für euren Exit-Layer.
![](img/cp_startlayer.png) Gegenwärtig müsst ihr die Slugs anderer Assemblies dort erfragen, ihr könnt sie nicht selbst im Maschinenraum sehen.
##### Exit Layer Achtung: Das funktioniert **nicht** auf der Testinstanz.
Ä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.
![](img/cp_exiturl.png)
Es wird voraussichtlich Platzhalter für Links zu anderen Assemblies geben, sobald es Neuigkeiten dazu gibt, werden wir diese hier nachtragen. [TODO] ## Weitergehende Inhalte
##### Webseite einbinden ### 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! 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!
![](img/cp_openwebsite.png) ![](img/cp_openwebsite.png)
##### Jitsi einbinden ### Jitsi einbinden
Auf die selbe Art könnt ihr auch Jitsi Räume in eure Karte einbinden. Setzt dazu einfach die custom property "_jitsiRoom_" (string) und gebt ihr als Wert den Namen den euer Jitsi Raum haben soll. Auf die selbe Art könnt ihr auch Jitsi Räume in eure Karte einbinden. Setzt dazu einfach die custom property `jitsiRoom` (string) und gebt ihr als Wert den Namen den euer Jitsi Raum haben soll.
![](img/cp_jitsiroom.png) ![](img/cp_jitsiroom.png)
Jitsi Räume sind per default an die Instanz gebunden, damit jeder sein eigenes "Hackcenter" haben kann, falls ihr einen Jitsi Raum über mehrere Instanzen sharen wollt, prefixt ihn mit "shared" (Beispiel: "shared Unser Jitsiraum"). Es können keine externen Jitsi Server angegeben, sondern nur von uns bereitgestellte genutzt werden. Jitsi Räume sind per default an die Instanz gebunden, damit jeder sein eigenes "Hackcenter" haben kann, falls ihr einen Jitsi Raum über mehrere Instanzen sharen wollt, prefixt ihn mit `shared` (Beispiel: `shared Unser Jitsiraum`). Es können keine externen Jitsi Server angegeben, sondern nur von uns bereitgestellte genutzt werden.
##### Stille Bereiche ### 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. 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.
![](img/cp_silent.png) ![](img/cp_silent.png)
#### Wände / Kollisionen ### Wände / nicht begehbare Bereiche
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. Das ist ausnahmsweise kein Layer, sondern eine Tile-Eigenschaft. Beschreibung siehe weiter oben bei den Tiles.
![](img/edit_tileset.png)
![](img/cp_collides.png)
### Animationen ### 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. 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.
...@@ -161,30 +193,26 @@ Größere Animationen über mehrere Tiles müssen in Tiled Tile für Tile animie ...@@ -161,30 +193,26 @@ Größere Animationen über mehrere Tiles müssen in Tiled Tile für Tile animie
(Gelegentlich laufen einzelne Tiles nicht synchron zum Rest, wir wissen doch auch nicht..) (Gelegentlich laufen einzelne Tiles nicht synchron zum Rest, wir wissen doch auch nicht..)
### Sound ### Sound
Layer mit der Property "playAudio" (string) spielen beim Betreten der zugehörigen Tiles Sound ab. Unterstütz werden mp3-Dateien, die relativ zum Pfad der Karte eingebunden werden können. Externe mp3-Dateien können nicht eingebunden werden. Falls ihr Streams eimbinden wollt wendet euch bitte an [world@rc3.world](mailto:world@rc3.world). Soll sich der Audioschnipsel wiederholen so verwendet stattdessen einfach "playAudioLoop" (string) als Property. 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. Falls ihr Streams eimbinden wollt wendet euch bitte an [world@rc3.world](mailto:world@rc3.world). Soll sich der Audioschnipsel wiederholen so verwendet stattdessen einfach `playAudioLoop` (string) als Property.
![](img/cp_playaudio.png) ![](img/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. 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.
### Karte speichern / exportieren
# 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. 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. 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.
![](img/map_properties.png) ![](img/map_properties.png)
### Lizenzen ## 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. 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.
## Wie kommts später in die world?
Um Karten in der Welt einbringen zu können, müsst ihr ein [Assembly anmelden](https://signup.c3assemblies.de/) und euch anschließend kurz unter Angabe eures Assemblynamens unter [world@rc3.world](mailto:world@rc3.world) melden.
Eure Karten legt ihr dann bitte in einem git Repo eurer Wahl ab und teilt später in unserem Backend die URL mit, unter der das Repo geklont werden kann. Unsere world-Infrastruktur wird anschließend eine Instanz für euch spawnen, das Karten-Repo pullen und diese dort einbinden.
Wir werden eure Karten regelmäßig aus eurem git Repo aktualisieren und die aktuellsten Karten ausspielen. Damit Spieler:innen die neue Version sehen, müssen sie die Seite aber neu laden.
### Verzeichnisstruktur ## Verzeichnisstruktur
Achtet beim Ablegen eurer Karten bitte auf die Verzeichnisstruktur, folgende Dinge solltet ihr konkret beachten: Achtet beim Ablegen eurer Karten bitte auf die Verzeichnisstruktur, folgende Dinge solltet ihr konkret beachten:
* Eure Startkarte muss main.json heißen und im Hauptverzeichnis liegen. * Eure Startkarte muss main.json heißen und im Hauptverzeichnis liegen.
...@@ -198,32 +226,18 @@ Hier ein Beispiel wie ein Verzeichnis mit Karten exemplarisch aussehen könnte: ...@@ -198,32 +226,18 @@ Hier ein Beispiel wie ein Verzeichnis mit Karten exemplarisch aussehen könnte:
. .
├── bla ├── bla
│ ├── COPYRIGHT │ ├── COPYRIGHT
└── keks.json └── keks.json
├── blubb.json ├── blubb.json
├── COPYRIGHT ├── COPYRIGHT
├── foo ├── foo
├── bar.json ├── bar.json
└── tileset2.png └── tileset2.png
├── main.json ├── main.json
└── tileset.png └── tileset.png
``` ```
### Einstiegspunkt / Lobby / Exit
Wir gestalten zentrale Einstiegskarten, über die man dann zu euren Assembly-Karten gelangt. Meldet euch dafür bitte unter Angabe eures Assemblynamens bei [world@rc3.world](mailto:world@rc3.world), damit wir einen Ausgang zu eurer Karte vorsehen können. Außerdem bitten wir euch, einen Platz für einen Ausgang zurück zur Lobby freizuhalten. Tiles und die genaue Sprungadresse dafür teilen wir euch dann per Mail mit.
### Cross-Assembly Links
Es wird Platzhalter geben welche automatisch mit dem richtigen Link ersetzt werden.
Beispiel für einen Platzhalter: `{<SLUG>/map.json#YourStartLayer}`. **Die <> sind wichtig und müssen drin bleiben.**
_Euren Slug_ findet ihr im Maschinenraum unter Organisational Data -> Basic Data -> "Kurzname"
Ihr wollt zum Beispiel direkt auf die Assembly foobar linken und der Slug vom foobar Assembly lautet `foobar`, dann ergibt sich `{<foobar>/main.json}` für euren Exit-Layer.
Gegenwärtig müsst ihr die Slugs anderer Assemblies dort erfragen, ihr könnt sie nicht selbst im Maschinenraum sehen.
Achtung: Das funktioniert **nicht** auf der Testinstanz.
### Testen ## 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://test.visit.at.wa-test.rc3.cccv.de/_/global/example.com/mymaps/foo.json*. Die Möglichkeit externe Karten einzubinden existiert nur zum Testen und wird zum rC3 deaktiviert werden. 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://test.visit.at.wa-test.rc3.cccv.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. Ggf. kann es sein, dass ihr passende CORS Header auf dem ausliefernden Webserver setzen müsst.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment