Written by
2020-11-02

Web3 Gaming Standard: Saito UI/UX Upgrade

Delighted to share an update on the Web3 Gaming Standard. If you’re new to blockchain gaming and have no idea what this means, visit the Saito Arcade and checkout some of the community-developed games, all of which are open-source, provably-fair and programmed using the world’s first and best web3 gaming protocol.

In our latest release of the Saito Game Engine we have focused on improving support for cross-game UI and UX elements. In previous versions, a single class was responsible for managing the user interface: displaying cards, managing log and menu updates and providing a visual space where users could interact with the engine (i.e. “make moves”). We originally did things this way to abstract-away complexity from developers, but the more games that our community built the more obvious it became that this was the wrong approach.

Having easy ways to show information on players is a critical for complex games like Red Imperium. This screenshot shows the new standard menu which has been modded to show information on player-controlled sectors / planets / tech / strategy cards and more.

The problems became especially apparent when building Red Imperium. As you can see from the screenshot above, there is so much information that needs to be made accessible to users that our game devs ended up doing a lot of manual hacking to add UI elements. Changing these then became a total drag because of the complexity of overhauling a manually-created UI and the difficulty of adding new components. Red Imperium made it obvious we needed a simpler way to do things, and that is what you’re seeing in the new interface.

In the new system, all of the various UI components are broken up into independent classes. Games simply render the ones they need, and the components themselves handle whether they are being viewed on mobile or desktop devices. Available components include the game hud, game log, a mouseover cardbox for showing “popups” of cards, cardfans, overlays, hexagonal-grids and more. There is also a new and extensible top-left dropdown menu that allows developers to easily add new menus to their games.

Developers have already added card-trackers to the open source Twilight Struggle module. There is also a new statistics-tracking system available in the Game menu. The new design makes it easy for developers to add new features like this without disrupting the classic UI.

As you can see in this screenshot from Twilight Struggle, we’re already seeing community developers take advantage of these new features. As you can see above, Twilight Struggle now includes an open source “card tracker” while many developers are adding statistics trackers. In a more minor change, you’ll notice that most games also support player-to-player chat in addition to the general community chat. Private side-channel communications are an important feature in various multiplayer games, including Red Imperium and Bridge. We’re happy to be able to support them.

And work continues apace! In the next month we’re expecting to be able to share a general update to the Saito Arcade (to make game creation and management easier than ever!) along with the release of at least one of the non-trivial game. In the meantime, if you’re interested in gaming or have some free time and want to help out, please drop by the Saito Arcade and experience the future of online gaming for yourself!

Written by