Skip to content

3. HUD and User Interactions

Dev Patel edited this page Dec 10, 2024 · 5 revisions

HUD

The main HUD when playing the game can be found in the scene in the root directory called start_map.tscn. This has the layout of the HUD and a couple of other elements like the toolbar all in the Canvas Layer titled HUD. The code related to the HUD can be found in start_map.gd in the ‘scripts’ directory. Note that not everything in there is related to the HUD as it handles a lot of the behavior of clicking tiles. The function relating to button presses can be found in there. The only code relating to the achievement menu, store, and dashboard here is the code that instantiates them. If you want to see how they work, refer to their documentation.

ToolsMenu

The toolsMenu node is an instance of the Toolbar.tscn scene that can be found in the ui/hud/Toolbar directory. It handles the creation of the toolbar on the hud. In the code, you can create new sections and add buttons to them in the ready() function since that will call when we make the toolbar. And then based on the button name, you want to add the desired functionality in the function called button_pressed(). In the match statement, add a string with your button name and then “_button” and you can add the desired functionality after.

PauseMenu

The PauseMenu is in its own Canvas Layer outside the HUD so that it is drawn over it. It is defaulted to not visible but is turned visible whenever the player presses escape or the pause button. It has a couple of different buttons but all the functionality for these can be found in start_map.gd as well. The game does pause whenever the player is in the pause menu.

Achievement Menu

The achievement scene looks more complicated than it is. Besides the BG and title, most of the information is stored in a VBox container called achievements. This will always hold 4 things, the Label that says unlocked, the HBox for unlocked achievements, the Label that says locked and HBox that stores locked achievements. The HBox’s are empty at first.

AchievementMenu.gd

On _ready() we get all of the locked and unlocked achievements. We loop over these lists and at the beginning and after every 3 achievements, we create a new VBox Container that is what actually stores the achievement icons. We add a control node at the beginning, for spacing, and then populate it with the next 3 achievements. The VBox is added to the respective HBox for locked or unlocked achievements and then we work on populating the next one. Achievement.gd contains the code for updating the fields in the Achievement.tscn.

Achievement Popups

The code that handles an achievement popup is found in Overlay.gd. The Overlay.tscn just contains it’s animation player to play the fade animation and the OverlayControl that we can control the modulate of to create the fade in and out effect. OverlayPopup.gd is responsible for updating the values in the icon.

Overlay.gd

Handles the fading in of the mission complete notification. AchievementPop() is called whenever an achievement is complete. This creates a new popup object and stores it in OverlayControl with it’s visibility off and we store the name of the object in the queue. Once the animation is about to start playing, we call animationStart which will turn the first node in the queue visible and play the fade in effect (which modifies the modulate of the OverlayControl). At the end we call animationEnd

Office

Sensor Graphs

Currently there are 3 sensors: tide, rain, wind. Each have their own gdscript files. The graphs pull the data from their respective type. For example, for tide, SeaLevel.gd contains monthlySeaLevels[] which contains the sea level for each month. It reads the array and plots those values as the y axis. The array contains a max of 12 points with the first element getting removed when max is exceeded. This means the array stores data for the last 12 months.

create_labels():

  • Creates the month and y-axis labels

draw_data()

  • Draws the actual points using the array data. Then draws lines connecting the points

update_min_max()

  • This is an important function that dynamically adjusts the y axis when the y value exceeds the current max or min. The function ensures the graph stays within set bounds.