UNPKG

hytopia

Version:

The HYTOPIA SDK makes it easy for developers to create massively multiplayer games using JavaScript or TypeScript.

102 lines (89 loc) 3.25 kB
<!-- 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 using HTML, CSS and Javascript. You can build simple UIs, to highly complex ones. UI capabilities are as powerful as building a regular web page - there are close to no limitations on what is possible. 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. 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>