hytopia 0.3.32 → 0.3.34

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

@@ -100,6 +100,21 @@
     const clone = template.content.cloneNode(true);
     return clone;
   });
+
+  // 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 Start Countdown -->
@@ -119,6 +134,13 @@
   </div>
 </div>
 
+<!-- MOBILE CONTROLS -->
+<div class="mobile-controls">
+  <a id="mobile-jump-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/jump.png" />
+  </a>
+</div>
+
 <!-- Template for Join NPC Scene UI-->
 <template id="join-npc-message">
   <div class="join-npc-message">
@@ -246,4 +268,51 @@
   .time {
     color: #ffd700;
   }
+
+  /* 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>

package/package.json

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

package/examples/child-entity/assets/models/.optimized/sword/sword.gltf

@@ -1,356 +0,0 @@
-{
-  "asset": {
-    "generator": "glTF-Transform v4.1.1",
-    "version": "2.0"
-  },
-  "accessors": [
-    {
-      "type": "SCALAR",
-      "componentType": 5123,
-      "count": 36,
-      "bufferView": 0,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 24,
-      "max": [
-        0.140625,
-        1.7109375,
-        0.03125
-      ],
-      "min": [
-        -0.171875,
-        0.5234375,
-        -0.09375
-      ],
-      "bufferView": 1,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 24,
-      "bufferView": 1,
-      "byteOffset": 12
-    },
-    {
-      "type": "VEC2",
-      "componentType": 5126,
-      "count": 24,
-      "bufferView": 1,
-      "byteOffset": 24
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 24,
-      "max": [
-        0.0625,
-        1.0625,
-        0.0625
-      ],
-      "min": [
-        -0.0625,
-        0.625,
-        -0.0625
-      ],
-      "bufferView": 2,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC2",
-      "componentType": 5126,
-      "count": 24,
-      "bufferView": 2,
-      "byteOffset": 12
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 24,
-      "max": [
-        0.09375,
-        0.15625,
-        0.09375
-      ],
-      "min": [
-        -0.15625,
-        -0.09375,
-        -0.09375
-      ],
-      "bufferView": 3,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC2",
-      "componentType": 5126,
-      "count": 24,
-      "bufferView": 3,
-      "byteOffset": 12
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 24,
-      "max": [
-        0.15625,
-        0.09375,
-        0.0000625000029685907
-      ],
-      "min": [
-        -0.15625,
-        -0.09375,
-        3.469446951953614e-18
-      ],
-      "bufferView": 4,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC2",
-      "componentType": 5126,
-      "count": 24,
-      "bufferView": 4,
-      "byteOffset": 12
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 24,
-      "max": [
-        0.515625,
-        -0.01718750037252903,
-        0.046875
-      ],
-      "min": [
-        -0.171875,
-        -0.20468750596046448,
-        -0.140625
-      ],
-      "bufferView": 5,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC2",
-      "componentType": 5126,
-      "count": 24,
-      "bufferView": 5,
-      "byteOffset": 12
-    }
-  ],
-  "bufferViews": [
-    {
-      "buffer": 0,
-      "byteOffset": 0,
-      "byteLength": 72,
-      "target": 34963
-    },
-    {
-      "buffer": 0,
-      "byteOffset": 72,
-      "byteLength": 768,
-      "byteStride": 32,
-      "target": 34962
-    },
-    {
-      "buffer": 0,
-      "byteOffset": 840,
-      "byteLength": 480,
-      "byteStride": 20,
-      "target": 34962
-    },
-    {
-      "buffer": 0,
-      "byteOffset": 1320,
-      "byteLength": 480,
-      "byteStride": 20,
-      "target": 34962
-    },
-    {
-      "buffer": 0,
-      "byteOffset": 1800,
-      "byteLength": 480,
-      "byteStride": 20,
-      "target": 34962
-    },
-    {
-      "buffer": 0,
-      "byteOffset": 2280,
-      "byteLength": 480,
-      "byteStride": 20,
-      "target": 34962
-    }
-  ],
-  "samplers": [
-    {
-      "magFilter": 9728,
-      "minFilter": 9728,
-      "wrapS": 33071,
-      "wrapT": 33071
-    }
-  ],
-  "textures": [
-    {
-      "source": 0,
-      "sampler": 0
-    }
-  ],
-  "images": [
-    {
-      "mimeType": "image/png",
-      "uri": "baseColor.png"
-    }
-  ],
-  "buffers": [
-    {
-      "uri": "sword.bin",
-      "byteLength": 2760
-    }
-  ],
-  "materials": [
-    {
-      "alphaMode": "MASK",
-      "alphaCutoff": 0.05,
-      "doubleSided": true,
-      "pbrMetallicRoughness": {
-        "metallicFactor": 0,
-        "baseColorTexture": {
-          "index": 0
-        }
-      }
-    }
-  ],
-  "meshes": [
-    {
-      "primitives": [
-        {
-          "attributes": {
-            "POSITION": 1,
-            "NORMAL": 2,
-            "TEXCOORD_0": 3
-          },
-          "mode": 4,
-          "material": 0,
-          "indices": 0
-        }
-      ]
-    },
-    {
-      "primitives": [
-        {
-          "attributes": {
-            "POSITION": 4,
-            "TEXCOORD_0": 5,
-            "NORMAL": 2
-          },
-          "mode": 4,
-          "material": 0,
-          "indices": 0
-        }
-      ]
-    },
-    {
-      "primitives": [
-        {
-          "attributes": {
-            "POSITION": 6,
-            "TEXCOORD_0": 7,
-            "NORMAL": 2
-          },
-          "mode": 4,
-          "material": 0,
-          "indices": 0
-        }
-      ]
-    },
-    {
-      "primitives": [
-        {
-          "attributes": {
-            "POSITION": 8,
-            "TEXCOORD_0": 9,
-            "NORMAL": 2
-          },
-          "mode": 4,
-          "material": 0,
-          "indices": 0
-        }
-      ]
-    },
-    {
-      "primitives": [
-        {
-          "attributes": {
-            "POSITION": 10,
-            "TEXCOORD_0": 11,
-            "NORMAL": 2
-          },
-          "mode": 4,
-          "material": 0,
-          "indices": 0
-        }
-      ]
-    }
-  ],
-  "nodes": [
-    {
-      "name": "cube",
-      "translation": [
-        0.01562500004975372,
-        0.3515625,
-        0.031249999975123153
-      ],
-      "mesh": 0
-    },
-    {
-      "name": "cube",
-      "translation": [
-        0,
-        -0.375,
-        4.419015442517403e-26
-      ],
-      "mesh": 1
-    },
-    {
-      "name": "cube",
-      "translation": [
-        0.03125,
-        0.09531250000000013,
-        -4.9753690750664564e-11
-      ],
-      "mesh": 2
-    },
-    {
-      "name": "cube",
-      "translation": [
-        0,
-        2.15625,
-        -3.469446951953614e-18
-      ],
-      "mesh": 3
-    },
-    {
-      "name": "cube",
-      "translation": [
-        -0.17187499993780792,
-        0.8921875000000001,
-        0.0468750002736453
-      ],
-      "mesh": 4
-    }
-  ],
-  "scenes": [
-    {
-      "name": "blockbench_export",
-      "nodes": [
-        0,
-        1,
-        2,
-        3,
-        4
-      ]
-    }
-  ],
-  "scene": 0
-}

package/examples/child-entity/assets/models/.optimized/sword.gltf

@@ -1,136 +0,0 @@
-{
-  "asset": {
-    "generator": "glTF-Transform v4.1.1",
-    "version": "2.0"
-  },
-  "accessors": [
-    {
-      "type": "SCALAR",
-      "componentType": 5123,
-      "count": 180,
-      "bufferView": 0,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 120,
-      "max": [
-        0.328125,
-        1.8984375,
-        0.0625
-      ],
-      "min": [
-        -0.359375,
-        -0.3499999940395355,
-        -0.125
-      ],
-      "bufferView": 1,
-      "byteOffset": 0
-    },
-    {
-      "type": "VEC3",
-      "componentType": 5126,
-      "count": 120,
-      "bufferView": 1,
-      "byteOffset": 12
-    },
-    {
-      "type": "VEC2",
-      "componentType": 5126,
-      "count": 120,
-      "bufferView": 1,
-      "byteOffset": 24
-    }
-  ],
-  "bufferViews": [
-    {
-      "buffer": 0,
-      "byteOffset": 0,
-      "byteLength": 360,
-      "target": 34963
-    },
-    {
-      "buffer": 0,
-      "byteOffset": 360,
-      "byteLength": 3840,
-      "byteStride": 32,
-      "target": 34962
-    }
-  ],
-  "samplers": [
-    {
-      "magFilter": 9728,
-      "minFilter": 9728,
-      "wrapS": 33071,
-      "wrapT": 33071
-    }
-  ],
-  "textures": [
-    {
-      "source": 0,
-      "sampler": 0
-    }
-  ],
-  "images": [
-    {
-      "mimeType": "image/png",
-      "uri": "baseColor.png"
-    }
-  ],
-  "buffers": [
-    {
-      "uri": "sword.bin",
-      "byteLength": 4200
-    }
-  ],
-  "materials": [
-    {
-      "alphaMode": "MASK",
-      "alphaCutoff": 0.05,
-      "doubleSided": true,
-      "pbrMetallicRoughness": {
-        "metallicFactor": 0,
-        "baseColorTexture": {
-          "index": 0
-        }
-      }
-    }
-  ],
-  "meshes": [
-    {
-      "primitives": [
-        {
-          "attributes": {
-            "POSITION": 1,
-            "NORMAL": 2,
-            "TEXCOORD_0": 3
-          },
-          "mode": 4,
-          "material": 0,
-          "indices": 0
-        }
-      ]
-    }
-  ],
-  "nodes": [
-    {
-      "name": "cube",
-      "translation": [
-        0.01562500004975372,
-        0.3515625,
-        0.031249999975123153
-      ],
-      "mesh": 0
-    }
-  ],
-  "scenes": [
-    {
-      "name": "blockbench_export",
-      "nodes": [
-        0
-      ]
-    }
-  ],
-  "scene": 0
-}