hytopia 0.3.13 → 0.3.14

package/boilerplate/assets/map.json

@@ -3,260 +3,113 @@
     {
       "id": 1,
       "name": "bricks",
-      "textureUri": "blocks/bricks.png",
-      "isCustom": false
+      "textureUri": "blocks/bricks.png"
     },
     {
       "id": 2,
       "name": "clay",
-      "textureUri": "blocks/clay.png",
-      "isCustom": false
+      "textureUri": "blocks/clay.png"
     },
     {
       "id": 3,
-      "name": "coal-ore",
-      "textureUri": "blocks/coal-ore.png",
-      "isCustom": false
+      "name": "diamond-ore",
+      "textureUri": "blocks/diamond-ore.png"
     },
     {
       "id": 4,
-      "name": "cobblestone",
-      "textureUri": "blocks/cobblestone.png",
-      "isCustom": false
+      "name": "dirt",
+      "textureUri": "blocks/dirt.png"
     },
     {
       "id": 5,
-      "name": "creep",
-      "textureUri": "blocks/creep.png",
-      "isCustom": false
+      "name": "dragons-stone",
+      "textureUri": "blocks/dragons-stone.png"
     },
     {
       "id": 6,
-      "name": "diamond-block",
-      "textureUri": "blocks/diamond-block.png",
-      "isCustom": false
+      "name": "glass",
+      "textureUri": "blocks/glass.png"
     },
     {
       "id": 7,
-      "name": "diamond-ore",
-      "textureUri": "blocks/diamond-ore.png",
-      "isCustom": false
+      "name": "grass",
+      "textureUri": "blocks/grass"
     },
     {
       "id": 8,
-      "name": "dirt",
-      "textureUri": "blocks/dirt.png",
-      "isCustom": false
+      "name": "gravel",
+      "textureUri": "blocks/gravel.png"
     },
     {
       "id": 9,
-      "name": "dragon_block",
-      "textureUri": "blocks/dragon_block",
-      "isCustom": false
+      "name": "ice",
+      "textureUri": "blocks/ice.png"
     },
     {
       "id": 10,
-      "name": "dragons-stone",
-      "textureUri": "blocks/dragons-stone.png",
-      "isCustom": false
+      "name": "infected-shadowrock",
+      "textureUri": "blocks/infected-shadowrock.png"
     },
     {
       "id": 11,
-      "name": "emerald-block",
-      "textureUri": "blocks/emerald-block.png",
-      "isCustom": false
+      "name": "log-side",
+      "textureUri": "blocks/log"
     },
     {
       "id": 12,
-      "name": "emerald-ore",
-      "textureUri": "blocks/emerald-ore.png",
-      "isCustom": false
+      "name": "log-top",
+      "textureUri": "blocks/log"
     },
     {
       "id": 13,
-      "name": "ghost-dirt",
-      "textureUri": "blocks/ghost-dirt.png",
-      "isCustom": false
+      "name": "mossy-coblestone",
+      "textureUri": "blocks/mossy-coblestone.png"
     },
     {
       "id": 14,
-      "name": "glass",
-      "textureUri": "blocks/glass.png",
-      "isCustom": false
+      "name": "nuit",
+      "textureUri": "blocks/nuit.png"
     },
     {
       "id": 15,
-      "name": "gold-ore",
-      "textureUri": "blocks/gold-ore.png",
-      "isCustom": false
+      "name": "oak-leaves",
+      "textureUri": "blocks/oak-leaves.png"
     },
     {
       "id": 16,
-      "name": "grass",
-      "textureUri": "blocks/grass",
-      "isCustom": false
+      "name": "oak-planks",
+      "textureUri": "blocks/oak-planks.png"
     },
     {
       "id": 17,
-      "name": "gravel",
-      "textureUri": "blocks/gravel.png",
-      "isCustom": false
+      "name": "sand",
+      "textureUri": "blocks/sand.png"
     },
     {
       "id": 18,
-      "name": "ice",
-      "textureUri": "blocks/ice.png",
-      "isCustom": false
+      "name": "shadowrock",
+      "textureUri": "blocks/shadowrock.png"
     },
     {
       "id": 19,
-      "name": "infected-shadowrock-core",
-      "textureUri": "blocks/infected-shadowrock-core.png",
-      "isCustom": false
+      "name": "stone",
+      "textureUri": "blocks/stone.png"
     },
     {
       "id": 20,
-      "name": "infected-shadowrock",
-      "textureUri": "blocks/infected-shadowrock.png",
-      "isCustom": false
-    },
-    {
-      "id": 21,
-      "name": "iron-ore",
-      "textureUri": "blocks/iron-ore.png",
-      "isCustom": false
-    },
-    {
-      "id": 22,
-      "name": "lava",
-      "textureUri": "blocks/lava.png",
-      "isCustom": false
-    },
-    {
-      "id": 23,
-      "name": "log",
-      "textureUri": "blocks/log",
-      "isCustom": false
-    },
-    {
-      "id": 24,
-      "name": "mossy-coblestone",
-      "textureUri": "blocks/mossy-coblestone.png",
-      "isCustom": false
-    },
-    {
-      "id": 25,
-      "name": "nuit-leaves",
-      "textureUri": "blocks/nuit-leaves.png",
-      "isCustom": false
-    },
-    {
-      "id": 26,
-      "name": "nuit",
-      "textureUri": "blocks/nuit.png",
-      "isCustom": false
-    },
-    {
-      "id": 27,
-      "name": "oak-leaves",
-      "textureUri": "blocks/oak-leaves.png",
-      "isCustom": false
-    },
-    {
-      "id": 28,
-      "name": "oak-planks",
-      "textureUri": "blocks/oak-planks.png",
-      "isCustom": false
-    },
-    {
-      "id": 29,
-      "name": "sand-light",
-      "textureUri": "blocks/sand-light.png",
-      "isCustom": false
-    },
-    {
-      "id": 30,
-      "name": "sand",
-      "textureUri": "blocks/sand.png",
-      "isCustom": false
-    },
-    {
-      "id": 31,
-      "name": "sandstone-light",
-      "textureUri": "blocks/sandstone-light.png",
-      "isCustom": false
-    },
-    {
-      "id": 32,
-      "name": "sandstone",
-      "textureUri": "blocks/sandstone.png",
-      "isCustom": false
-    },
-    {
-      "id": 33,
-      "name": "shadow-pebble",
-      "textureUri": "blocks/shadow-pebble.png",
-      "isCustom": false
-    },
-    {
-      "id": 34,
-      "name": "shadowrock",
-      "textureUri": "blocks/shadowrock.png",
-      "isCustom": false
-    },
-    {
-      "id": 35,
-      "name": "snow",
-      "textureUri": "blocks/snow.png",
-      "isCustom": false
-    },
-    {
-      "id": 36,
       "name": "stone-bricks",
-      "textureUri": "blocks/stone-bricks.png",
-      "isCustom": false
+      "textureUri": "blocks/stone-bricks.png"
     },
     {
-      "id": 37,
-      "name": "stone",
-      "textureUri": "blocks/stone.png",
-      "isCustom": false
-    },
-    {
-      "id": 38,
-      "name": "swirl-rune",
-      "textureUri": "blocks/swirl-rune.png",
-      "isCustom": false
-    },
-    {
-      "id": 39,
+      "id": 21,
       "name": "void-sand",
-      "textureUri": "blocks/void-sand.png",
-      "isCustom": false
+      "textureUri": "blocks/void-sand.png"
     },
     {
-      "id": 40,
-      "name": "void_grass",
-      "textureUri": "blocks/void_grass",
-      "isCustom": false
-    },
-    {
-      "id": 41,
-      "name": "voidsoil",
-      "textureUri": "blocks/voidsoil.png",
-      "isCustom": false
-    },
-    {
-      "id": 42,
-      "name": "water-flow",
-      "textureUri": "blocks/water-flow.png",
-      "isCustom": false
-    },
-    {
-      "id": 43,
+      "id": 22,
       "name": "water-still",
       "textureUri": "blocks/water-still.png",
-      "isCustom": false
+      "isLiquid": true
     }
   ],
   "blocks": {
@@ -2767,6 +2620,5 @@
     "3,2,-11": 19,
     "3,3,-11": 19,
     "-1,1,12": 11
-  },
-  "entities": {}
+  }
 }

package/boilerplate/assets/ui/index.html

@@ -0,0 +1,102 @@
+<!--
+This is a basic boilerplate example of how to implement simple game UI,
+and also configure additional buttons for mobile compatibility.
+-->
+
+<script>
+  // Handle interact button touch / untouch
+  const mobileInteractButton = document.getElementById('mobile-interact-button');
+  mobileInteractButton.addEventListener('touchstart', e => {
+    e.preventDefault(); // Prevents mobile highlight/select/copy popup behaviors
+    mobileInteractButton.classList.add('active'); // more immediate feedback to add/remove active class
+    hytopia.pressInput('ml', true);
+  });
+
+  mobileInteractButton.addEventListener('touchend', e => {
+    e.preventDefault();
+    mobileInteractButton.classList.remove('active');
+    hytopia.pressInput('ml', false);
+  });
+
+  // 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>
+
+<!--
+  HYTOPIA allows you to build completely custom UI uses HTML, CSS and Javascript.
+  You can build simple UIs, to highly complex ones. UI capabilities are as powerful
+  as building a regaulr web page - there are no limitations on what you can do.
+
+  Remember, HYTOPIA sandboxes your UI & UI scripts, so external network requests or
+  other unsafe actions likely won't work as you expect in production.
+-->
+
+<div class="mobile-controls">
+  <a id="mobile-interact-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/target.png" />
+  </a>
+
+  <a id="mobile-jump-button" class="mobile-button">
+    <img src="{{CDN_ASSETS_URL}}/icons/jump.png" />
+  </a>
+</div>
+
+<style>
+  /* 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.
+    HYTOPIA 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/boilerplate/index.ts

@@ -87,6 +87,9 @@ startServer(world => {
   
     playerEntity.spawn(world, { x: 0, y: 10, z: 0 });
 
+    // Load our game UI for this player
+    player.ui.load('ui/index.html');
+
     // Send a nice welcome message that only the player who joined will see ;)
     world.chatManager.sendPlayerMessage(player, 'Welcome to the game!', '00FF00');
     world.chatManager.sendPlayerMessage(player, 'Use WASD to move around.');

package/examples/mobile-controls/README.md

@@ -0,0 +1,3 @@
+# mobile-controls
+
+A simple demonstration showing how to create a mobile user interface for phones and tablets.