Introduction:
As our team steadily became accustomed to working remotely due to the recent COVID-19 outbreak, we began to focus more on polishing Guilded in order to hopefully release it in the near future. One major area we wanted to adjust was the game's tutorial. While it functioned well enough and did its job of teaching players how to navigate the gameplay space, it was also extremely long and - for some testers - condescending. As such, we decided to swap out the current tutorial with a far more efficient, usable system - creating hover-over effects for certain buttons and shortening the tutorial accordingly, which would let us teach players while still letting them proceed at their own pace.
Creating the Hover-Over Effects:
My job over these past couple weeks was twofold. First, I was to perform some balancing work on Guilded via constant playtesting and iteration. Second, I was to create and implement the hover-over effects in Unity. For the sake of this post, I will be focusing primarily on the latter.
I chose to create two different types of hover-over effects, which our team could use in different situations. The first was a text box with a fixed position, which appears above, below, to the left, or to the right of the selected button, depending on an enum checked in the inspector.
The above picture shows one such example of the hover-over box. When the player's mouse cursor is atop one of the buttons in the "Relationships" screen, text appears below it informing the player of each button's purpose. Developers can adjust this information in the inspector on the right via the following variables under the "Hover Box" header:
Box Direction determines the box's direction relative to the button.
Hover Box determines which object instantiates when the player's cursor enters the designated area.
Box Offset determines the box's position relative to the hovered-over button. Originally, it would always appear centered on one axis (while above or below the button, it is centered on the x-axis; while to the left or right, it is centered on the y-axis). However, I felt that this was too restrictive, and it sometimes resulted in the box being too far away or too close to the connected button, depending on the image's size. By including this variable, developers can add an offset to suit their preferences.
Centered Size Squish allows developers to increase or decrease the box's size along its "locked" axis. In this example, this value decreases the box's width by 60 pixels, making it appear more in-line with the selected button.
Non Centered Size allows developers to increase or decrease the box's size along its "unlocked" axis. In this example, the value 30 means that the box will be 30 pixels tall, with some internal code ensuring that its top remains at the same location to make offsetting it easier. If this variable is not set, the size of the box's "unlocked" axis will automatically be the same as its size along its "locked" axis, creating a perfect square.
The second hover-over effect was a simple bit of text, which - rather than being locked to a specific position - follows the player's mouse. An example of this in action can be seen below:
In this image, text appears to the left of the player's cursor while their mouse cursor is over the "Embark" button. As with the boxes, developers can adjust several variables pertaining to this text in the inspector via the following variables under the "Hover Text" header:
Text Direction determines the box's position relative to the button. Unlike the boxes, text can only appear to the right or left of the mouse cursor.
Hover Text determines which object instantiates when the player's cursor enters the designated area.
Text Lines determines the number of lines of text that appear in the object. In this case, the developer has decided to split the text into two separate lines to keep it from spreading too far to the left.
It is my sincere hope that these effects - and the simplicity with which developers can implement them in-game - will help us to create a faster, less comprehensive tutorial than the one that is currently in-game. In doing so, we can let players get to the meat of Guilded's gameplay more quickly while still teaching them how to play.