The Wheel

Oct 5

The Wheel is a custom roulette wheel built in Godot using C#. Users can add options to the list, set their weights, and spin the wheel to choose a random outcome. This project was built over the course of a little over a month and features additionally functionality, such as customization, a save system, and Twitch Chat integration.

Major Systems

Spinning The Wheel

Upon clicking the Spin button, the Wheel will spin at a constant wind up and wind down speed for a set duration of time. To provide the desired variance with each spin, a random angle from 0 to 360 is chosen at the time of spin start. This angle is broken down and slowly added to the current rotation of the wheel as it speeds up to prevent it from being obvious to the naked eye.

Options on the wheel are added dynamically. This means that when new options are added on the list on the left, they display immediately, correctly partitioned with the other options, on the right. This behavior carries over to the option weight and the enable/disable settings for each option. When an option is given a larger weight, it recalculates to take up a larger portion of the wheel, and if the option is disabled, it will fail to show up altogether.

Option Management

Users are able to add and remove options to the list for them to display on the wheel.
Options can be given a name, a weight value, and can be enabled or disabled.
Each option can also be deleted, so long as there is more than a single option still on the list.
Disabled options cannot be deleted, have their names or their weights changed, and they do not show up on the wheel.

Twitch Chat Integration

The checkbox next to the menu icon in the top left corner of the option area marks the Chat Integration toggle. When this is enabled, the application establishes a connection with the current live streaming platform this application is being used for. Currently, this is just Twitch, but it might expand to YouTube in the future.

Following a successful connection, the application will scan all incoming messages to see if they contain the title of any of the enabled options in the list. If there’s a match, that option will increase in weight by one, giving that option a better chance of being selected.

After a user has voted, their username is stored to verify that there is only one vote per user. After the spin button is activated or the application closes, this list is cleared. This functionality was built for the sole purpose of increasing interactivity with the audience.

UI Programming

Generally speaking, almost everything in this application is UI programming. Godot has three different categories when it comes to assets and everything in this program came from their UI branch.

That said, there was a big focus on my part when it came to making sure every asset reacted to the users input in some way or form. Sometimes it was making assets react differently when they were pressed vs. highlighted, and sometimes it was making sure to update visual components to match their state behind-the-scenes. One other major element involved was part of the customization system - in order to properly shift colors for the application in real time to match the value being selected in the color picker, I had to access and update themes across the application dynamically.

Customization

To help give the application a more personal touch, many of the elements of the UI can be changed to different colors. This can range from the general background of the application to the font colors on each of the menus.

With the integration of the newer art assets by Atori, some elements were locked from customization. This includes elements such as the grape vines, the headers on the pop ups, and some of the UI borders on certain assets.

Save System

To allow for more ease of use, the application incorporates a save and load system for housing multiple lists. This system captures all options currently within the option list, as well as their current weight and whether enabled or not. Additionally, the save system stores the current customization settings, allowing the user to have custom themes for each list if desired.

Audio

The game features a sound effect that plays when the wheel begins spinning. The audio in the game was created using Anvil Studio. I integrated the audio into the application and gave the user control over the volume via the Menu. The audio is configured to play dynamically based on how fast the wheel is actively spinning.

Art Assets

The Wheel truly came to life after Atori got involved. All art assets, from the font, to the color scheme, to the grape vines, were developed by Atori. Atori Sakamoto is an incredibly skilled UI Artist who I have had the pleasure of working with on previous projects, most notably being the mobile title Deepcover. They did an extraordinary job of bringing life, atmosphere, and personality to this project.

Below is a comparison of how elements of the application looked at the beginning of the project, to how they turned out after Atori got their hands on it.

Please check out their portfolio here: Atori Sakamoto