hytopia 0.1.60 → 0.1.62

package/examples/wall-dodge-game/assets/ui/index.html

@@ -0,0 +1,249 @@
+<!-- Game Start Animation-->
+<script>
+  function formatTime(ms) {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    
+    const paddedMinutes = minutes.toString().padStart(2, '0');
+    const paddedSeconds = seconds.toString().padStart(2, '0');
+    
+    return `${paddedMinutes}:${paddedSeconds}`;
+  }
+  
+  function showGameOver(scoreTime, lastTopScoreTime) {
+    const gameOver = document.getElementById('game-over');
+    const scoreValue = document.getElementById('score-value');
+    const highScoreText = document.getElementById('high-score-text');
+    
+    scoreValue.textContent = formatTime(scoreTime);
+    highScoreText.style.display = scoreTime > lastTopScoreTime ? 'block' : 'none';
+    gameOver.style.opacity = 1;
+    
+    setTimeout(() => {
+      gameOver.style.opacity = 0;
+    }, 3000);
+  }
+
+  function showGameCountdown() {
+    const el = document.getElementById('countdown');
+    const show = (text, color) => {
+      el.style.opacity = 0;
+      setTimeout(() => {
+        el.textContent = text;
+        el.style.color = color;
+        el.style.opacity = 1;
+      }, 300);
+    };
+
+    [3, 2, 1].forEach((num, i) => {
+      setTimeout(() => show(num, '#ff0000'), i * 1000);
+    });
+    
+    setTimeout(() => {
+      show('GO!', '#00ff00');
+      setTimeout(() => el.style.opacity = 0, 1000);
+    }, 3000);
+  }
+
+  function updateLeaderboard(scores) {
+    const entriesDiv = document.getElementById('leaderboard-entries');
+    entriesDiv.innerHTML = '';
+
+    if (!scores.length) {
+      const noScoresRow = document.createElement('div');
+      noScoresRow.className = 'leaderboard-row';
+      noScoresRow.textContent = 'No Top Scores';
+      noScoresRow.style.display = 'flex';
+      noScoresRow.style.justifyContent = 'center';
+      entriesDiv.appendChild(noScoresRow);
+      return;
+    }
+
+    scores.forEach(({name, score}) => {
+      const row = document.createElement('div');
+      row.className = 'leaderboard-row';
+      
+      const username = document.createElement('span');
+      username.className = 'username';
+      username.textContent = name;
+      
+      const time = document.createElement('span');
+      time.className = 'time';
+      time.textContent = formatTime(score);
+      
+      row.appendChild(username);
+      row.appendChild(time);
+      entriesDiv.appendChild(row);
+    });
+  }
+
+  // Server to client UI data handlers
+  hytopia.onData(data => {
+    if (data.type === 'game-end') {
+      showGameOver(data.scoreTime, data.lastTopScoreTime);
+    }
+
+    if (data.type === 'game-start') {
+      showGameCountdown();
+    }
+
+    if (data.type === 'leaderboard') {
+      updateLeaderboard(data.scores);
+    }
+  });
+
+  // Register in-game scene UI templates, so server can
+  // instantiate instance with new SceneUI({ templateId: 'join-npc-message', ...etc });
+  hytopia.registerSceneUITemplate('join-npc-message', () => {
+    const template = document.getElementById('join-npc-message');
+    const clone = template.content.cloneNode(true);
+    return clone;
+  });
+</script>
+
+<!-- Game Start Countdown -->
+<div id="countdown"></div>
+
+<!-- Game End Animation -->
+<div id="game-over">
+  <div class="main-text">Game Over!</div>
+  <div class="score-text">Score: <span id="score-value"></span></div>
+  <div id="high-score-text">New personal high score!</div>
+</div>
+
+<!-- Leaderboard -->
+<div class="leaderboard">
+  <h2>Top Survivors</h2>
+  <div id="leaderboard-entries" class="leaderboard-entries">
+  </div>
+</div>
+
+<!-- Template for Join NPC Scene UI-->
+<template id="join-npc-message">
+  <div class="join-npc-message">
+    <h1>Join the game</h1>
+    <p>Jump on my platform to join the game</p>
+    <p style="margin-top: 5px;">(WASD to move, Spacebar to jump)</p>
+  </div>
+</template>
+
+<!-- Styles -->
+<style>
+  * {
+    font-family: Arial, sans-serif;
+    user-select: none;
+  }
+
+  .join-npc-message {
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 12px;
+    padding: 12px 20px;
+    color: white;
+    text-align: center;
+    position: relative;
+    margin-bottom: 15px;
+  }
+
+  .join-npc-message:after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid rgba(0, 0, 0, 0.8);
+  }
+
+  .join-npc-message h1 {
+    font-size: 18px;
+    margin: 0 0 8px 0;
+  }
+
+  .join-npc-message p {
+    font-size: 14px;
+    margin: 0;
+  }
+
+  #countdown {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 120px;
+    font-weight: bold;
+    opacity: 0;
+    transition: opacity 0.3s;
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
+  }
+
+  #game-over {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.5s;
+  }
+
+  #game-over .main-text {
+    font-size: 120px;
+    font-weight: bold;
+    color: #ff0000;
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
+  }
+
+  #game-over .score-text {
+    font-size: 48px;
+    margin-top: 20px;
+    color: white;
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
+  }
+
+  #game-over #high-score-text {
+    font-size: 36px;
+    margin-top: 15px;
+    color: #ffd700;
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
+    display: none;
+  }
+
+  .leaderboard {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 12px;
+    padding: 15px;
+    color: white;
+    min-width: 200px;
+  }
+
+  .leaderboard h2 {
+    font-size: 18px;
+    margin: 0 0 12px 0;
+    text-align: center;
+  }
+
+  .leaderboard-entries {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .leaderboard-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+  }
+
+  .username {
+    color: #fff;
+  }
+
+  .time {
+    color: #ffd700;
+  }
+</style>

package/examples/wall-dodge-game/index.ts

@@ -0,0 +1,336 @@
+import {
+  CollisionGroup,
+  ColliderShape,
+  BlockType,
+  Entity,
+  GameServer,
+  SceneUI,
+  startServer,
+  Player,
+  PlayerEntity,
+  PlayerEntityController,
+  RigidBodyType,
+  SimpleEntityController,
+  World,
+} from 'hytopia';
+
+import worldMap from './assets/map.json';
+
+const GAME_BLOCK_SIZE_RANGE = {
+  x: [ 0.5, 4 ],
+  y: [ 0.5, 4 ],
+  z: [ 0.5, 1.5 ],
+};
+
+const GAME_BLOCK_SPAWN_RANGE = {
+  x: [ -7, 7 ],
+  y: [ 1, 4 ],
+  z: [ -25, -25 ],
+};
+
+const GAME_BLOCK_RANDOM_TEXTURES = [
+  'textures/grass',
+  'textures/bricks.png',
+  'textures/glass.png',
+  'textures/gravel.png',
+  'textures/sand.png',
+  'textures/void_sand.png',
+];
+
+const GAME_BLOCK_DESPAWN_Z = 12; // Blocks will despawn when block z position is > than this.
+
+const GAME_BLOCK_COLLISION_GROUP = CollisionGroup.GROUP_1;
+
+const PLAYER_GAME_START_TIME = new Map<Player, number>(); // Player -> start time of current game
+const PLAYER_TOP_SCORES = new Map<Player, number>(); // Player -> highest ever score
+let GAME_TOP_SCORES: { name: string, score: number }[] = []; // array user [name, score]
+
+startServer(world => {
+  // Uncomment this to visualize physics vertices, will cause noticable lag.
+  // world.simulation.enableDebugRendering(true);
+  
+  world.loadMap(worldMap);
+  world.onPlayerJoin = player => onPlayerJoin(world, player);
+  world.onPlayerLeave = player => onPlayerLeave(world, player);
+
+  setupJoinNPC(world);
+  startBlockSpawner(world);
+});
+
+/**
+ * Creates and sets up the NPC the player can interact
+ * with to join the game.
+ */
+function setupJoinNPC(world: World) {
+  let focusedPlayer: PlayerEntity | null = null;
+
+  // Create our NPC
+  const joinNPC = new Entity({
+    controller: new SimpleEntityController(),
+    name: 'Join NPC',
+    modelUri: 'models/mindflayer.gltf',
+    modelLoopedAnimations: [ 'idle' ],
+    modelScale: 0.5,
+    rigidBodyOptions: {
+      type: RigidBodyType.FIXED, // It won't ever move, so we can use a fixed body
+      rotation: { x: 0, y: 1, z: 0, w: 0 }, // Rotate the NPC to face the player
+      colliders: [
+        { // Hitbox/body collider
+          shape: ColliderShape.CYLINDER,
+          radius: 0.3,
+          halfHeight: 1.2,
+          tag: 'body',
+        },
+        { // Create a sensor that teleports the player into the game
+          shape: ColliderShape.BLOCK,
+          halfExtents: { x: 1.5, y: 1, z: 1.5 }, // size it slightly smaller than the platform the join NPC is standing on
+          isSensor: true,
+          tag: 'teleport-sensor',
+          onCollision: (other: BlockType | Entity, started: boolean) => {
+            if (started && other instanceof PlayerEntity) {
+              startGame(other); // When a player entity enters this sensor, start the game for them
+            }
+          },
+        },
+        { // Create a sensor to detect players for a fun rotation effect
+          shape: ColliderShape.CYLINDER,
+          radius: 5,
+          halfHeight: 2,
+          isSensor: true, // This makes the collider not collide with other entities/objets
+          tag: 'rotate-sensor',
+          onCollision: (other: BlockType | Entity, started: boolean) => {
+            if (started && other instanceof PlayerEntity) {
+              focusedPlayer = other;
+            }
+          },
+        },
+      ],
+    },
+  });
+
+  // Rotate to face the last focused player position every 250ms
+  setInterval(() => {
+    if (focusedPlayer?.isSpawned) {
+      (joinNPC.controller! as SimpleEntityController).face(focusedPlayer.position, 2);
+    }
+  }, 250);
+
+  // Create the Scene UI over the NPC
+  const npcMessageUI = new SceneUI({
+    templateId: 'join-npc-message',
+    attachedToEntity: joinNPC,
+    offset: { x: 0, y: 1.75, z: 0 },
+  });
+
+  npcMessageUI.load(world);
+
+  joinNPC.spawn(world, { x: 1, y: 3.1, z: 15 });
+}
+
+/**
+ * Start spawning blocks in the game
+ */
+function startBlockSpawner(world: World) {
+  const spawnBlock = () => {
+    // Calculate random number of blocks to spawn (1-8)
+    const numBlocks = Math.floor(Math.random() * 8) + 1;
+    
+    for (let i = 0; i < numBlocks; i++) {
+      // Calculate random half extents within allowed ranges
+      const x = Math.max(0.5, Math.random() * GAME_BLOCK_SIZE_RANGE.x[1]);
+      const y = Math.max(0.5, Math.random() * GAME_BLOCK_SIZE_RANGE.y[1]); 
+      const z = Math.max(0.5, Math.random() * GAME_BLOCK_SIZE_RANGE.z[1]);
+      
+      const halfExtents = {
+        x: y > 0.5 ? 0.5 : x,
+        y: x > 0.5 ? 0.5 : y,
+        z,
+      };
+
+      // Calculate spawn point ranges accounting for block size
+      const spawnPoint = {
+        x: Math.random() * (GAME_BLOCK_SPAWN_RANGE.x[1] - GAME_BLOCK_SPAWN_RANGE.x[0] - halfExtents.x * 2) + GAME_BLOCK_SPAWN_RANGE.x[0] + halfExtents.x,
+        y: Math.random() * (GAME_BLOCK_SPAWN_RANGE.y[1] - GAME_BLOCK_SPAWN_RANGE.y[0] - halfExtents.y * 2) + GAME_BLOCK_SPAWN_RANGE.y[0] + halfExtents.y,
+        z: Math.random() * (GAME_BLOCK_SPAWN_RANGE.z[1] - GAME_BLOCK_SPAWN_RANGE.z[0] - halfExtents.z * 2) + GAME_BLOCK_SPAWN_RANGE.z[0] + halfExtents.z,
+      };
+
+      // Calculate random velocity between 5-10
+      const linearVelocity = 5 + Math.random() * 5;
+
+      // Apply random angular velocity 10% of the time
+      const angularVelocity = Math.random() < 0.1 ? {
+        x: (Math.random() - 0.5) * 5, // -5 to 5
+        y: (Math.random() - 0.5) * 5,
+        z: (Math.random() - 0.5) * 5,
+      } : {
+        x: 0,
+        y: 0, 
+        z: 0,
+      };
+
+      const blockEntity = new Entity({
+        blockTextureUri: GAME_BLOCK_RANDOM_TEXTURES[Math.floor(Math.random() * GAME_BLOCK_RANDOM_TEXTURES.length)],
+        blockHalfExtents: halfExtents,
+        rigidBodyOptions: {
+          type: RigidBodyType.KINEMATIC_VELOCITY,
+          linearVelocity: { x: 0, y: 0, z: linearVelocity },
+          angularVelocity,
+        },
+      });
+  
+      blockEntity.onTick = () => {
+        if (blockEntity.isSpawned && blockEntity.position.z > GAME_BLOCK_DESPAWN_Z) {
+          // TODO: drop it out of the world, despawn to fix platform collision bug
+          blockEntity.despawn();
+        }
+      };
+  
+      blockEntity.spawn(world, spawnPoint);
+
+      // Set groups after spawn so they apply to internally generated colliders too.
+      blockEntity.setCollisionGroupsForSolidColliders({
+        belongsTo: [ GAME_BLOCK_COLLISION_GROUP ],
+        collidesWith: [ CollisionGroup.PLAYER ],
+      });
+    }
+    
+    setTimeout(spawnBlock, 250 + Math.random() * 750);
+  };
+
+  spawnBlock();
+}
+
+function startGame(playerEntity: PlayerEntity) {
+  playerEntity.setPosition({ x: 1, y: 4, z: 1 });
+  playerEntity.setOpacity(0.3);
+  playerEntity.player.ui.sendData({ type: 'game-start' });
+  enablePlayerEntityGameCollisions(playerEntity, false);
+
+  PLAYER_GAME_START_TIME.set(playerEntity.player, Date.now());
+  
+  setTimeout(() => { // Game starts!
+    if (!playerEntity.isSpawned) return;
+
+    playerEntity.setOpacity(1);
+    enablePlayerEntityGameCollisions(playerEntity, true);
+  }, 3500);
+}
+
+function endGame(playerEntity: PlayerEntity) {
+  const startTime = PLAYER_GAME_START_TIME.get(playerEntity.player) ?? Date.now();
+  const scoreTime = Date.now() - startTime;
+  const lastTopScoreTime = PLAYER_TOP_SCORES.get(playerEntity.player) ?? 0;
+
+  if (scoreTime > lastTopScoreTime) {
+    PLAYER_TOP_SCORES.set(playerEntity.player, scoreTime);
+  }
+
+  playerEntity.player.ui.sendData({
+    type: 'game-end',
+    scoreTime,
+    lastTopScoreTime,
+  });
+
+  // Reset player to lobby area
+  playerEntity.setLinearVelocity({ x: 0, y: 0, z: 0 });
+  playerEntity.setPosition(getRandomSpawnCoordinate());
+
+  if (playerEntity.world) {
+    updateTopScores();
+  }
+}
+
+/**
+ * Handle players joining the game.
+ * We create an initial player entity they control
+ * and set up their entity's collision groups to not collider
+ * with other players.
+ */
+function onPlayerJoin(world: World, player: Player) {
+  // Load the game UI for the player
+  player.ui.load('ui/index.html');
+  sendPlayerLeaderboardData(player);
+
+  // Create the player entity
+  const playerEntity = new PlayerEntity({
+    player,
+    name: 'Player',
+    modelUri: 'models/player.gltf',
+    modelLoopedAnimations: [ 'idle' ],
+    modelScale: 0.5,
+  });
+
+  (playerEntity.controller as PlayerEntityController).sticksToPlatforms = false;
+
+  playerEntity.onTick = () => {
+    if (playerEntity.position.y < -3) {
+      // Assume the player has fallen off the map in the game
+      endGame(playerEntity);
+    }
+  };
+
+  // Spawn with a random X coordinate to spread players out a bit.
+  playerEntity.spawn(world, getRandomSpawnCoordinate());
+}
+
+/**
+ * Despawn the player's entity and perform any other
+ * cleanup when they leave the game. 
+ */
+function onPlayerLeave(world: World, player: Player) {
+  world.entityManager.getAllPlayerEntities(player).forEach(entity => {
+    endGame(entity); // explicitly end their game if they leave
+    entity.despawn(); // despawn their entity
+  });
+}
+
+/**
+ * Set collision groups for in the game.
+ * Enabled determines if we hit moving blocks, we can set this to false
+ * to give players a bit of time to setup before the game starts.
+ * We also con't collide with other players.
+ * Collision groups work on if both contacted colliders belong to a group the other collides with.
+ */
+function enablePlayerEntityGameCollisions(playerEntity: PlayerEntity, enabled: boolean) {
+  playerEntity.colliders.forEach(collider => {
+    collider.setCollisionGroups({
+      belongsTo: [ CollisionGroup.ENTITY, CollisionGroup.PLAYER ],
+      collidesWith: enabled ? 
+        [ CollisionGroup.BLOCK, CollisionGroup.ENTITY_SENSOR, GAME_BLOCK_COLLISION_GROUP ] : 
+        [ CollisionGroup.BLOCK, CollisionGroup.ENTITY_SENSOR ],
+    });
+  });
+}
+
+function getRandomSpawnCoordinate() {
+  const randomX = Math.floor(Math.random() * 15) - 6;
+
+  return { x: randomX, y: 10, z: 22 };
+}
+
+function updateTopScores() {
+  const topScores = Array.from(PLAYER_TOP_SCORES.entries())
+    .sort((a, b) => a[1] - b[1])
+    .map(([ player, score ]) => ({ player, score }));
+
+  // Get the top 10 highest scores
+  const updatedTopScores = topScores.slice(0, 10).map(({ player, score }) => ({ name: player.username, score }));
+
+  // Convert both arrays to strings for comparison
+  const currentScoresStr = JSON.stringify(GAME_TOP_SCORES);
+  const updatedScoresStr = JSON.stringify(updatedTopScores);
+
+  // Only update if scores have changed
+  if (currentScoresStr !== updatedScoresStr) {
+    GAME_TOP_SCORES = updatedTopScores;
+  }
+
+  GameServer.instance.playerManager.getConnectedPlayers().forEach(sendPlayerLeaderboardData);
+}
+
+function sendPlayerLeaderboardData(player: Player) {
+  player.ui.sendData({
+    type: 'leaderboard',
+    scores: GAME_TOP_SCORES,
+  });
+}

package/examples/wall-dodge-game/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "payload-game",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "hytopia": "latest",
+    "@hytopia.com/assets": "latest"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hytopia",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "description": "The HYTOPIA SDK makes it easy for developers to create massively multiplayer games using JavaScript or TypeScript.",
   "main": "server.js",
   "bin": {