Interactive RPG Online Poster Session

Poster Session is a web-based platform designed to make virtual academic conferences engaging. Instead of clicking through static lists, attendees spawn as avatars in a 2D medieval world. They can walk around, explore clustered research topics, meet authors in virtual meeting rooms, level up by reading papers, and participate in a scavenger hunt.

---

Gallery

The Grand Lobby	The World Map
Spawn point & Hall of Fame	Poster World

The Grand Archives	Poster View
Searchable paper repository	Paper Poster

---

Table of Contents

1. Features & Mechanics
2. Data Preparation
3. Map Generation
4. Running the Application
5. Advanced
6. Roadmap
7. Credits

---

Features & Mechanics

The world is divided into three main views - the lobby, the library, and the world map.

The library serves as a searchable database of the presented papers and is linked with the map - you can teleport to any poster's location. The map is a customizable 2d world. It has multiple interactive elements described below. The core layout consists of poster "villages" containing posters clustered by topic. Each village contains a central meeting point that links to a meeting room for live discussions.

Beyond reading papers, players can explore the landscape, solve hidden puzzles, navigate mazes...

Main Features

• Map Customization: The whole map can be generated via a simple tool and can include elements like stones, walls, portals, and many more.
• The Grand Archives: A thematic searchable list view for quick access to specific papers.
• Gamification:
  • Leaderboard: Users level up and gain better armor by visiting posters.
  • Crossword: A hidden scavenger hunt within the map.
• Chat: Proximity-based chat system for attendees.

Game Elements & Sprites

The world has various interactive entities. Here is what you can add to your map:

	Poster Stand The core of the conference. Each stand is assigned a research paper. If a player walks up to it and presses SPACE, they can view information about it.
	Meeting Point One per each poster cluster. Stepping near it allows the player to launch the associated meeting room to discuss with the authors.
	Stones & Walls Can be used to define village borders, create mazes, or just fragment the landscape. Since stones are individual obstacles, while walls create continuous barriers. We, for example, used the walls to create a large maze in the map.
	Portal Teleports players to another portal when they enter it. Useful for larger maps.
	Signpost You can hide them throughout the world. Gold signpost contains the crossword assignment. Standard signposts each carries a single clue. Solving the puzzle grants the title of "Lord".

---

Data Preparation

Before generating the map, you need to structure your conference data in the following way:

1. The map_generation/data Directory

Place the following files in map_generation/data/:

• paper_metadata.json: The core database.

  {
    "101": {
      "title": "Deep Learning on Medieval Manuscripts",
      "authors": "Doe, John; Smith, John",
      "first_author": "John Doe",
      "paper_type": "Regular",
      "abstract": "We propose a method to...",
      "paper_link": "...",
      "video_link": "...", 
      "availability": [
         { "start": "2026-01-29 11:00", "end": "2026-01-29 12:00" },
         { "start": "2026-01-30 15:00", "end": "2026-01-30 16:00" }
      ]
    },
    ...
  }

  • The papers are indexed by their (numerical) ids.
  • paper_type can be any string. The poster list will then provide filtering by all categories appearing in the data.
  • paper_link links to the paper pdf.
  • video_link and availability are optional additional information that will get displayed for posters that have them.

• clustering_by_metadata.json: Defines how papers are grouped on the map.

  {
    "Computer Vision": [101, 102, 105],
    "NLP": [201, 204]
  }

  • Individual fields are cluster names. The value is a list of corresponding paper ids.

• links.txt: Meeting room URLs (one per line) to be distributed among clusters. There should be one per each cluster.

• backup_links.txt (Optional): Backup global meeting rooms if main links fail (those are shown for each poster, we had 2 on our conference).

• crossword.txt (Optional): If you want to include a crossword puzzle, you can provide one like in this example:

  *****pixel
  **charles*
  ****data**
  *****golem
  *****user*
  castle****
  
  6
  
  Unit of a digital image.
  Famous Czech monarch after whom a Prague bridge is named.
  Information, usually organized into some structure. A term derived from latin "given".
  Legendary creature made of clay from Prague folklore, brought to life by a Rabbi.
  A person who interacts with a system.
  Medieval fortress, often built on a hill.
  

  • The first part of the file contains the puzzle solution itself, with asterisks filling out empty positions.
  • The second part (separated by an empty line) tells the column in which the answer is (1-indexed).
  • The third part contains clues for the individual rows, each on a separate line.

  ⚠️ Note: If you provide a crossword like this, the scripts presume you'll provide exactly enough signposts for each clue (+ the main signpost for the crossword itself).

2. The api/uploads Directory

This directory stores the actual assets for the papers.

• Structure: api/uploads/<paper_id>/
• Required files per folder:
  • poster.pdf: The poster file.
  • poster_thumb.png: A thumbnail preview.

⚠️ Note: If any of those files are missing for a paper, they will not appear in the UI.

---

Map Generation

Once your data is ready, follow these steps to generate the game world.

Step 1: Layout Editor

Open the map editor tool to design the physical layout (walls, spawn points).

cd map_generation/
pip install -r requirements.txt  # (recommended to use a venv)
python3 layout_generator.py

Layout Editor UI

• The world is composed of squared tiles (even the background img is created from them). Each tile can contain a sprite. In the UI, you can select map size, place tile backgrounds and place sprites. Select the background/sprite on the right and click a square to place it.
• Output: data/map_layout.json, data/map_layout_sprites.json

⚠️ Important: Currently, map dimensions are not automatically synced. After generating a layout, you must manually update the map size parameters in the data/game_config.json file. The formula is $width = (columns - 1) * (tilesize - overlap) + tilesize$, similarly for height with rows. Unless you change the tilesize and overlap parameters in map_generation/render_map.py, the values are 128 and 12, respectively. So for example for our map of size 77x77, the width and height were both 8944.

Step 2: Cluster Assignment

After designing the layout, run the clustering tool. It visualizes your poster stands and meeting points placements on the map and allows you to group them into villages.

# still in the map_generation/ directory
python3 cluster_tool.py

Cluster Tool UI

• Click on the posters and meeting points to select them. When you selected one meeting point and its group of poster stands, click on Create Cluster to save the selection. After you grouped all stands, click on Save JSON to save the output.
• Output: data/cluster_groups.json

Step 3: Data Preprocessing

Once the logical layout is finished, you need to render the visual map (from the tile images) and process the sprite data for the frontend.

# still in the map_generation/ directory
python3 render_map.py
python3 process_sprites.py

• This will generate files used by the application (in data/ dir) and the png map image. Compress the map (for faster web loading) and move it to assets:

cwebp -q 25 data/map.png -o static/map/assets/background.webp

---

Running the Application

The application is containerized using Docker, making deployment straightforward:

docker compose up --build -d

When running, the application will be available at <your_server_ip>:5000. To change the port, you can modify the docker-compose.yml file.

---

Advanced

Game Config

You can change sprite size, proximity, color, chat, player size, and more in data/game_config.json.

Background nuances

For some backgrounds, there exists more tile images. Right now it's just for paths, but this can be easily extended. map_generation/data/tile_mapping.json maps tile names to their corresponding files. Here, if there are multiple file options, they can be specified in a list alongside the probabilities that the corresponding image is used when generating the tile.

Roadmap

• Error Handling: Generation scripts may fail silently if input data is not as expected (e.g., crossword clues count does not match the map signpost count).

• UX: Map generation tool could be made more user-friendly.

• Docker: Encapsulating the map rendering and data generation process within the Docker build.

• User File Locations: Potentially separate user-defined content files from those generated by the tools to make the data locations less messy.

Credits

Created by: Benjamin Verner & Vojtěch Kloda

Assets & Attribution:

• Tile & Sprite Graphics: Generated by Gemini and chatGPT.
• Player Sprites: craftpix.net free sprites.
• Tech Stack: Built with Phaser 3 and Flask-SocketIO.