hytopia 0.3.32 → 0.3.34

package/bin/scripts.js

@@ -268,6 +268,48 @@ function packageProject() {
     console.error('❌ Error: Could not read package.json file:', err.message);
     return;
   }
+
+  // Make sure assets exist and the model optimizer has been ran
+  const assetsDir = path.join(sourceDir, 'assets');
+  let hasOptimizedDir = false;
+  
+  if (fs.existsSync(assetsDir)) {
+    // Function to recursively check for .optimized directories
+    const checkForOptimizedDir = (dir) => {
+      const items = fs.readdirSync(dir);
+      
+      for (const item of items) {
+        const itemPath = path.join(dir, item);
+        const stats = fs.statSync(itemPath);
+        
+        if (stats.isDirectory()) {
+          if (item === '.optimized') {
+            hasOptimizedDir = true;
+            return true;
+          }
+          
+          // Check subdirectories
+          if (checkForOptimizedDir(itemPath)) {
+            return true;
+          }
+        }
+      }
+      
+      return false;
+    };
+    
+    checkForOptimizedDir(assetsDir);
+    
+    if (!hasOptimizedDir) {
+      console.warn('❌ Error: No .optimized directories found in the assets folder.');
+      console.warn('   Make sure your server has ran the optimizer for your models.');
+      console.warn('   This can be done by running your server with: bun --watch index.ts');
+      return;
+    }
+  } else {
+    console.warn('❌ Error: No assets directory found in the project.');
+    return;
+  }
   
   // Prepare to package
   const outputFile = path.join(sourceDir, `${projectName}.zip`);

package/examples/hole-in-wall-game/assets/ui/index.html

@@ -117,6 +117,21 @@
   hytopia.registerSceneUITemplate('player-queued', () => {
     return document.getElementById('player-queued').content.cloneNode(true);
   });
+
+  // MOBILE CONTROLS
+  // Handle jump button touch / untouch
+  const mobileJumpButton = document.getElementById('mobile-jump-button');
+  mobileJumpButton.addEventListener('touchstart', e => {
+    e.preventDefault();
+    mobileJumpButton.classList.add('active');
+    hytopia.pressInput(' ', true);
+  });
+
+  mobileJumpButton.addEventListener('touchend', e => {
+    e.preventDefault();
+    mobileJumpButton.classList.remove('active');
+    hytopia.pressInput(' ', false);
+  });
 </script>
 
 <!-- Game UI -->
@@ -153,6 +168,12 @@
   </div>
 </div>
 
+<div class="mobile-controls">
+  <a id="mobile-jump-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/jump.png" />
+  </a>
+</div>
+
 <!-- Styles -->
 <style>
   /* Global styles */
@@ -267,4 +288,51 @@
     left: 50%;
     transform: translateX(-50%);
   }
+
+  /* By default, we hide the mobile controls */
+  .mobile-controls {
+    display: none;
+  }
+
+  /*
+    We can use the body.mobile class to detect if we're on a mobile device.
+    The HYTOPIA game client will always add this class to the body element when running on a mobile device.
+  */
+  body.mobile .mobile-controls { /* If this css selector matches because we're on mobile, show the mobile controls */
+    display: flex;
+    gap: 14px;
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+  }
+
+  /* You can configure and style your buttons however you'd like. This is a minimalistic starting point. */
+  .mobile-button {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    width: 50px;
+    height: 50px;
+    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);
+  }
+  
+  .mobile-button img {
+    width: 22px;
+    height: 22px;
+  }
+
+  .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);
+  }  
 </style>