hytopia-ui

HYTOPIA UI Library

This is the core library required for any in-game HYTOPIA UI.

Even if you are not using the data features, this library must be imported in your UI because of the internally managed cross-frame communication it sets up and handles.

The HYTOPIA UI Library automatically handles configuring cross-frame communication between the game scene and your developed UI within HYTOPIA's sandboxed UI environment.

Installation

This library must always be included in your UI. Not doing so will break HYTOPIA's cross-frame communication and prevent UI and game focus from working!

If you're using a framework and need to install and import the package for extended feature use, you can do so by running the following command:

npm install hytopia-ui

If you're using vanilla HTML & JavaScript for your UI, or would prefer to include this using a

<script src="https://unpkg.com/hytopia-ui@latest/dist/index.umd.js"></script>

Sending & Receiving UI State Data

To send data to your game server, you can do so as follows:

// The data object sent can be any shape and have any properties or values.
// We recommend minimizing the amount of data sent where possible. Sending
// or receiving too much UI data too frequently can create latency issues
// on poor connections.
hytopia.ui.sendData({
  some: 'data',
});

To receive data sent from the server to the UI, you can do so as follows:

// data is an object that can have any
// properties with any JSON compatible values
hytopia.ui.onData = data => { 
  console.log('received data from server:', data);
};

Data sent from the player UI to the game server will be received by the server as being from that specific player. You can fully control the UI data state and interactions between client and server uniquely for each player.

Data received from the server will be received by the UI as an object with any properties and values. You can use this data to update the UI state or interact with the game server in any way you see fit. UI Data can be sent from the server globally or to a unique player, you have full control over this through the HYTOPIA SDK.