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
HTML
<!--
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>