hytopia 0.3.9 → 0.3.11

package/examples/hygrounds/assets/ui/index.html

@@ -25,7 +25,7 @@
 
 <!-- Leaderboard -->
 <div class="leaderboard">
-  <div class="leaderboard-title">HyGrounds Deathmatch</div>
+  <div class="leaderboard-title">Deathmatch</div>
   <div class="leaderboard-timer">0:00</div>
   <div class="leaderboard-players-count">Players: 0</div>
   <div class="leaderboard-header">
@@ -61,6 +61,26 @@
   </div>
 </div>
 
+<div class="mobile-buttons-container">
+  <div id="mobile-reload-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/mobile-reload.png" />
+  </div>  
+  
+  <div id="mobile-interact-button" class="mobile-button">E</div>
+  
+  <div id="mobile-jump-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/mobile-jump.png" />
+  </div>
+  
+  <div id="mobile-attack-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/mobile-shoot.png" />
+  </div>
+  
+  <div id="mobile-place-block-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/mobile-place-block.png" />
+  </div>
+</div>
+
 <div class="materials-counter">
   <img src="{{CDN_ASSETS_URL}}/icons/block.png" alt="Materials Icon" class="materials-icon">
   <span class="materials-amount">0</span>
@@ -504,6 +524,73 @@
       timerInterval = setInterval(updateTimer, 1000);
     }
   });
+
+  // Mobile UI Controls
+  const inventorySlots = document.querySelectorAll('.inventory-slot');
+
+  inventorySlots.forEach((slot, index) => {
+    slot.addEventListener('click', () => {
+      hytopia.sendData({
+        type: 'inventory-select',
+        index: index,
+      })
+    });
+  });
+
+  const mobileInteractButton = document.getElementById('mobile-interact-button');
+  mobileInteractButton.addEventListener('touchstart', () => {
+    mobileInteractButton.classList.add('active');
+    hytopia.pressInput('e', true);
+  });
+
+  mobileInteractButton.addEventListener('touchend', () => {
+    mobileInteractButton.classList.remove('active');
+    hytopia.pressInput('e', false);
+  });
+
+  const mobileReloadButton = document.getElementById('mobile-reload-button');
+  mobileReloadButton.addEventListener('touchstart', () => {
+    mobileReloadButton.classList.add('active');
+    hytopia.pressInput('r', true);
+  });
+
+  mobileReloadButton.addEventListener('touchend', () => {
+    mobileReloadButton.classList.remove('active');
+    hytopia.pressInput('r', false);
+  });
+
+  const mobileJumpButton = document.getElementById('mobile-jump-button');
+  mobileJumpButton.addEventListener('touchstart', () => {
+    mobileJumpButton.classList.add('active');
+    hytopia.pressInput(' ', true);
+  });
+
+  mobileJumpButton.addEventListener('touchend', () => {
+    mobileJumpButton.classList.remove('active');
+    hytopia.pressInput(' ', false);
+  });
+
+  const mobileAttackButton = document.getElementById('mobile-attack-button');
+  mobileAttackButton.addEventListener('touchstart', () => {
+    mobileAttackButton.classList.add('active');
+    hytopia.pressInput('ml', true);
+  }, { passive: true });
+
+  mobileAttackButton.addEventListener('touchend', () => {
+    mobileAttackButton.classList.remove('active');
+    hytopia.pressInput('ml', false);
+  }, { passive: true });
+
+  const mobilePlaceBlockButton = document.getElementById('mobile-place-block-button');
+  mobilePlaceBlockButton.addEventListener('touchstart', () => {
+    mobilePlaceBlockButton.classList.add('active');
+    hytopia.pressInput('mr', true);
+  });
+
+  mobilePlaceBlockButton.addEventListener('touchend', () => {
+    mobilePlaceBlockButton.classList.remove('active');
+    hytopia.pressInput('mr', false);
+  });
 </script>
 
 <!-- UI Styles -->
@@ -737,7 +824,7 @@
     right: 20px;
     display: flex;
     gap: 10px;
-    z-index: 99;
+    z-index: 999;
   }
 
   .inventory-slot {
@@ -1028,7 +1115,9 @@
     background: rgba(0, 0, 0, 0.7);
     border-radius: 5px;
     padding: 10px;
-    width: 200px;
+    width: 15%;
+    max-width: 200px;
+    max-height: 40%;
     font-family: 'Arial', sans-serif;
     color: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -1119,4 +1208,131 @@
     max-width: 160px;
     text-overflow: ellipsis;
   }
+
+  .mobile-buttons-container {
+    display: none;
+  }
+
+  /* Mobile UI */
+  body.mobile .hud {
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 35px;
+    right: auto;
+  }
+
+  body.mobile .inventory-hud {
+    bottom: 30px;
+  }
+
+  body.mobile .inventory-slot {
+    width: 45px;
+    height: 45px;
+  }
+
+  body.mobile .slot-number {
+    font-size: 12px;
+    top: -16px;
+  }
+
+  body.mobile .slot-name {
+    font-size: 8px;
+    bottom: -14px;
+  }
+
+  body.mobile .slot-quantity {
+    font-size: 10px;
+  }
+
+  body.mobile .shield-bar,
+  body.mobile .health-bar {
+    width: 120px;
+    height: 16px;
+  }
+
+  body.mobile .shield-text,
+  body.mobile .health-text {
+    font-size: 0.7em;
+  }
+
+  body.mobile .shield-icon,
+  body.mobile .health-icon {
+    width: 10px;
+    height: 10px;
+  }
+
+  body.mobile .leaderboard-title {
+    font-size: 14px;
+  }
+
+  body.mobile .leaderboard-timer {
+    font-size: 12px;
+  }
+
+  body.mobile .leaderboard-players-count {
+    font-size: 12px;
+  }
+
+  body.mobile .leaderboard-header {
+    font-size: 10px;
+  }
+
+  body.mobile .leaderboard-player {
+    font-size: 10px;
+  }
+
+  body.mobile .materials-counter {
+    right: 20px;
+    bottom: 115px;
+    font-size: 12px;
+  }
+
+  body.mobile .floating-number {
+    font-size: 14px;
+  }
+
+  body.mobile div > canvas { /* hide three debugger panels */
+    display: none !important;
+  }
+
+  body.mobile .mobile-buttons-container {
+    display: flex;
+    gap: 10px;
+    position: fixed;
+    bottom: 113px;
+    right: 118px;
+    user-select: none;
+  }
+
+  body.mobile .mobile-button {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    width: 45px;
+    height: 45px;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    user-select: none;
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform, background-color;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  }
+
+  body.mobile .mobile-button.active {
+    transform: scale(0.92);
+    background-color: rgba(0, 0, 0, 0.75);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  body.mobile .mobile-button img {
+    width: 25px;
+    height: 25px;
+  }
 </style>

package/examples/hygrounds/classes/ChestEntity.ts

@@ -1,5 +1,6 @@
 import {
   Audio,
+  BallColliderOptions,
   Collider,
   Entity,
   EntityOptions,
@@ -30,7 +31,7 @@ export default class ChestEntity extends Entity {
         gravityScale: 0.3, // we want it to drop slow when spawned mid-game in the sky randomly.
         colliders: [
           {
-            ...Collider.optionsFromModelUri('models/environment/chest.gltf'),
+            ...Collider.optionsFromModelUri('models/environment/chest.gltf') as BallColliderOptions,
             radius: 0.45, // collider isn't calculating perfect because of the coin positions in the model.
             bounciness: 0.25,
           }

package/examples/hygrounds/classes/GamePlayerEntity.ts

@@ -9,6 +9,7 @@ import {
   QuaternionLike,
   World,
   PlayerEntityController,
+  PlayerUIEvent,
 } from 'hytopia';
 
 import ChestEntity from './ChestEntity';
@@ -337,6 +338,15 @@ export default class GamePlayerEntity extends PlayerEntity {
   private _setupPlayerUI(): void {
     this.nametagSceneUI.setViewDistance(8); // lessen view distance so you only see player names when close
     this.player.ui.load('ui/index.html');
+
+    // Handle inventory selection from mobile UI
+    this.player.ui.on(PlayerUIEvent.DATA, (payload) => {
+      const { data } = payload;
+
+      if (data.type === 'inventory-select') {
+        this.setActiveInventorySlotIndex(data.index);
+      }
+    });
   }
 
   private _setupPlayerCamera(): void {

package/examples/hygrounds/classes/GunEntity.ts

@@ -244,6 +244,10 @@ export default abstract class GunEntity extends ItemEntity {
   }
 
   public updateAmmoIndicatorUI(reloading: boolean = false): void {
+    if (!this.parent) {
+      return;
+    }
+
     const player = this.parent as GamePlayerEntity;
 
     player.player.ui.sendData(reloading ? {

package/examples/hygrounds/classes/ItemEntity.ts

@@ -90,6 +90,7 @@ export default class ItemEntity extends Entity {
       this.parent.dropActiveInventoryItem();
       setTimeout(() => {
         this.despawn();
+        this.stopDespawnTimer();
       }, 0);
     }
 
@@ -167,7 +168,9 @@ export default class ItemEntity extends Entity {
     if (this._despawnTimer) return;
 
     this._despawnTimer = setTimeout(() => {
-      this.despawn();
+      if (this.isSpawned) {
+        this.despawn();
+      }
     }, ITEM_DESPAWN_TIME_MS);
   }
 

package/examples/hygrounds/classes/weapons/PistolEntity.ts

@@ -6,7 +6,7 @@ import type GamePlayerEntity from '../GamePlayerEntity';
 const DEFAULT_PISTOL_OPTIONS: GunEntityOptions = {
   ammo: 15,
   damage: 18,
-  fireRate: 6,
+  fireRate: 4,
   heldHand: 'right',
   iconImageUri: 'icons/pistol.png',
   idleAnimation: 'idle_gun_right',
@@ -33,7 +33,7 @@ export default class PistolEntity extends GunEntity {
     super.shoot();
     
     // Cancel input since pistol requires click-to-shoot
-    (this.parent as GamePlayerEntity).player.input.ml = false;
+    // (this.parent as GamePlayerEntity).player.input.ml = false;
   }
 
   public override getMuzzleFlashPositionRotation(): { position: Vector3Like, rotation: QuaternionLike } {

package/examples/hygrounds/classes/weapons/RevolverEntity.ts

@@ -33,7 +33,7 @@ export default class RevolverEntity extends GunEntity {
     super.shoot();
     
     // Cancel input since pistol requires click-to-shoot
-    (this.parent as GamePlayerEntity).player.input.ml = false;
+    // (this.parent as GamePlayerEntity).player.input.ml = false;
   }
 
   public override getMuzzleFlashPositionRotation(): { position: Vector3Like, rotation: QuaternionLike } {

package/examples/hygrounds/classes/weapons/RocketLauncherEntity.ts

@@ -36,7 +36,7 @@ export default class RocketLauncherEntity extends GunEntity {
     super.shoot();
     
     // Cancel input since rocket launcher requires click-to-shoot
-    (this.parent as GamePlayerEntity).player.input.ml = false;
+    // (this.parent as GamePlayerEntity).player.input.ml = false;
   }
 
   public override getMuzzleFlashPositionRotation(): { position: Vector3Like, rotation: QuaternionLike } {

package/examples/hygrounds/classes/weapons/ShotgunEntity.ts

@@ -6,7 +6,7 @@ import type GamePlayerEntity from '../GamePlayerEntity';
 const DEFAULT_SHOTGUN_OPTIONS: GunEntityOptions = {
   ammo: 4,
   damage: 13,
-  fireRate: 0.8,
+  fireRate: 1.3,
   heldHand: 'both',
   iconImageUri: 'icons/shotgun.png',
   idleAnimation: 'idle_gun_both',
@@ -33,7 +33,7 @@ export default class ShotgunEntity extends GunEntity {
     super.shoot();
     
     // Cancel input since shotgun requires click-to-shoot
-    (this.parent as GamePlayerEntity).player.input.ml = false;
+    // (this.parent as GamePlayerEntity).player.input.ml = false;
   }
 
   public override getMuzzleFlashPositionRotation(): { position: Vector3Like, rotation: QuaternionLike } {

package/examples/hygrounds/gameConfig.ts

@@ -60,11 +60,11 @@ export const CHEST_OPEN_DESPAWN_MS = 20 * 1000; // 20 seconds
 export const CHEST_DROP_ITEMS = [
   {
     itemId: 'ak47',
-    pickWeight: 0.5,
+    pickWeight: 0.7,
   },
   {
     itemId: 'auto-shotgun',
-    pickWeight: 0.5,
+    pickWeight: 0.6,
   },
   {
     itemId: 'auto-sniper',
@@ -76,15 +76,15 @@ export const CHEST_DROP_ITEMS = [
   },
   {
     itemId: 'gravity-potion',
-    pickWeight: 0.4,
+    pickWeight: 0.3,
   },
   {
     itemId: 'light-machine-gun',
-    pickWeight: 0.5,
+    pickWeight: 0.6,
   },
   {
     itemId: 'medpack',
-    pickWeight: 1,
+    pickWeight: 1.2,
   },
   {
     itemId: 'mining-drill',
@@ -92,27 +92,27 @@ export const CHEST_DROP_ITEMS = [
   },
   {
     itemId: 'pistol',
-    pickWeight: 1,
+    pickWeight: 1.5,
   },
   {
     itemId: 'revolver',
-    pickWeight: 0.5,
+    pickWeight: 0.9,
   },
   {
     itemId: 'rocket-launcher',
-    pickWeight: 0.4,
+    pickWeight: 0.3,
   },
   {
     itemId: 'shotgun',
-    pickWeight: 0.5,
+    pickWeight: 0.8,
   },
   {
     itemId: 'shield-potion',
-    pickWeight: 1,
+    pickWeight: 1.2,
   },
   {
     itemId: 'submachine-gun',
-    pickWeight: 0.5,
+    pickWeight: 1.0,
   },
 ]
 

package/examples/zombies-fps/classes/PurchaseBarrierEntity.ts

@@ -1,5 +1,5 @@
 import {
-  ColliderOptions,
+  BlockColliderOptions,
   ColliderShape,
   CollisionGroup,
   Entity,
@@ -14,7 +14,7 @@ import GameManager from './GameManager';
 import GamePlayerEntity from './GamePlayerEntity';
 import InteractableEntity from './InteractableEntity';
 
-const WALL_COLLIDER_OPTIONS: ColliderOptions = {
+const WALL_COLLIDER_OPTIONS: BlockColliderOptions = {
   shape: ColliderShape.BLOCK,
   collisionGroups: {
     belongsTo: [ CollisionGroup.BLOCK ],

package/examples/zombies-fps/classes/WeaponCrateEntity.ts

@@ -6,6 +6,7 @@ import {
   Vector3Like,
   World,
   SceneUI,
+  ColliderShape,
 } from 'hytopia';
 
 import GamePlayerEntity from './GamePlayerEntity';
@@ -70,7 +71,7 @@ export default class WeaponCrateEntity extends InteractableEntity {
   public constructor(options: WeaponCrateEntityOptions) {
     const colliderOptions = Collider.optionsFromModelUri('models/environment/weaponbox.gltf');
 
-    if (colliderOptions.halfExtents) { // make it taller for better interact area
+    if (colliderOptions.shape === ColliderShape.BLOCK && colliderOptions.halfExtents) { // make it taller for better interact area
       colliderOptions.halfExtents.y = 3;
     }
 

package/package.json

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