#vibeverse

Connect Your Game to the Vibeverse

Create portals that connect players to other games in the jam, forming an interconnected metaverse experience.

Implementation Guide Visit Portal Hub

Portal transportation between Vibeverse games

Why Add Portals to Your Game?

Portals create an interconnected experience between all games in the jam, enhancing player engagement and discovery.

More Players

Get more players through the portal network as gamers discover your game through other experiences.

Interconnected Worlds

Create a sense of a larger metaverse where player actions and identities persist across different games.

Game Discoverability

Increase your game's visibility in the jam by connecting it to the broader Vibeverse ecosystem.

Player Continuity

Maintain player state across games with parameters like username, color, and position.

Enhanced Gameplay

Create unique gameplay mechanics that leverage the portal system for puzzles or progression.

Community Building

Join a network of connected games that collectively create a larger gaming universe.

See the Vibeverse in Action

Loading tweet examples...

Portal Implementation Guide

Follow these steps to add portals to your game and join the Vibeverse.

How Portals Work

1
Create Entry & Exit Portals
Add visible portals in your game that players can enter. Label them as 'Vibeverse Portal' so players know they can travel between games.
2
URL Redirection System
When a player enters an exit portal, redirect them to portal.pieter.com with query parameters to maintain their state.
3
State Persistence
Pass player data (username, color, position, etc.) via URL parameters to maintain continuity between games.
4
Return Portal
When receiving a player from another game (via ?portal=true), create a special return portal that sends them back to the game they came from.
5
Instant Load
Ensure your game loads instantly when a player arrives via portal - no loading screens or input prompts to maintain seamless transitions.

View Sample ThreeJS Implementation

Portal URL Parameter Guide

Basic Parameters (Recommended)

username=

Player's username or name

color=

Player's color (hex or name like 'red')

speed=

Player's movement speed in meters/second

ref=

The URL of the game the player is coming from

portal=true

Added automatically to indicate player came from portal

Advanced Parameters (Optional)

avatar_url=

URL to player's avatar image

team=

Player's team or faction

speed_x=

X-axis velocity component

speed_y=

Y-axis velocity component

speed_z=

Z-axis velocity component

rotation_x=

X-axis rotation

rotation_y=

Y-axis rotation

rotation_z=

Z-axis rotation

Example URL

portal.pieter.com/?username=levelsio&color=red&speed=5&ref=fly.pieter.com

This URL would transport a player named "levelsio" with red color and speed of 5 m/s, coming from fly.pieter.com

Portal Code Example

Here's a simplified example of how to implement portals in your game.

Exit Portal Implementation

// Creating an exit portal in your game
function createExitPortal(position, destination) {
  // Create visual effect for the portal
  const portal = new PortalMesh({
    position,
    radius: 2,
    color: 0x6366f1, // Indigo color
    particleCount: 500
  });
  
  // Add interaction with the portal
  portal.onPlayerEnter = (player) => {
    // Get player data to pass to next game
    const playerData = {
      username: player.username,
      color: player.color,
      speed: player.speed,
      ref: window.location.hostname
    };
    
    // Create the portal URL with parameters
    const portalUrl = new URL('http://portal.pieter.com');
    
    // Add all player data as query parameters
    Object.entries(playerData).forEach(([key, value]) => {
      portalUrl.searchParams.append(key, value);
    });
    
    // Redirect to the portal URL
    window.location.href = portalUrl.toString();
  };
  
  return portal;
}

Entry Portal Implementation

// When your game loads, check for portal parameters
function initGame() {
  // Get URL parameters
  const urlParams = new URLSearchParams(window.location.search);
  const isFromPortal = urlParams.get('portal') === 'true';
  
  if (isFromPortal) {
    // Extract player data from URL
    const playerData = {
      username: urlParams.get('username') || 'Player',
      color: urlParams.get('color') || 'blue',
      speed: parseFloat(urlParams.get('speed') || '5'),
      refGame: urlParams.get('ref')
    };
    
    // Create player with the extracted data
    const player = createPlayer(playerData);
    
    // Create a return portal to the original game
    if (playerData.refGame) {
      createReturnPortal(
        player.position.clone().add(new Vector3(0, 0, -5)),
        playerData.refGame,
        playerData
      );
    }
    
    // Skip intro screens and put player directly in game
    startGameImmediately(player);
  } else {
    // Normal game start for players not coming from portal
    showIntroScreen();
  }
}

Return Portal Implementation

// Create a return portal to send player back
function createReturnPortal(position, destination, playerData) {
  // Create visual effect for the return portal
  const returnPortal = new PortalMesh({
    position,
    radius: 2,
    color: 0x8b5cf6, // Purple color
    particleCount: 500
  });
  
  // Add a sign or indicator
  const portalSign = createText3D({
    text: "Return to " + destination,
    position: position.clone().add(new Vector3(0, 3, 0)),
    color: 0xffffff
  });
  
  // Add interaction with the portal
  returnPortal.onPlayerEnter = (player) => {
    // Create return URL with all the same parameters
    const returnUrl = new URL('http://' + destination);
    
    // Add all player data as query parameters
    Object.entries(playerData).forEach(([key, value]) => {
      returnUrl.searchParams.append(key, value);
    });
    
    // Add portal=true parameter
    returnUrl.searchParams.append('portal', 'true');
    
    // Add ref parameter as current game
    returnUrl.searchParams.append('ref', window.location.hostname);
    
    // Redirect to the return URL
    window.location.href = returnUrl.toString();
  };
  
  return returnPortal;
}

Portal FAQ

Common questions about implementing and using Vibeverse portals.

Is implementing portals mandatory for the game jam?

No, adding portals is optional but highly encouraged. Games with portals will be featured in the Vibeverse Portal network, potentially bringing more players to your game.

What if my game uses a different player movement system?

The portal system is flexible. You can adapt the speed and rotation parameters to match your game's movement system, or simply use the username and color parameters if that's all you need.

How do I test if my portal implementation works?

You can test your implementation by:

1. Creating a local test page that simulates incoming portal traffic with URL parameters

2. Testing the redirection by manually adding parameters to your game's URL

3. Setting up two local instances of your game to test portal transitions between them

Will players lose progress when using portals?

Portal transitions are designed to be seamless for player identity (username, appearance), but game-specific progress would need to be handled by your game's save system. Consider using localStorage or a backend if you want progress to persist when players return.

What does the portal.pieter.com site actually do?

The portal.pieter.com site acts as a central hub and redirector. It receives players from one game, potentially shows them a brief transition effect, and then redirects them to another game while preserving their parameters. It also helps distribute players across games in the Vibeverse network.

How should portals look in my game?

There's no strict requirement for portal appearance. You can design them to fit your game's aesthetic - they could be magical doorways, technological teleporters, mysterious rifts, or even mundane objects like paintings or mirrors. Just make sure they're clearly labeled as 'Vibeverse Portal' so players understand their function.