Go Go-Karts!

What is Go Go-Karts?

Go Go-Karts is a 3D competitive couch multiplayer arcade kart racing game for the PC platform where players take control of a variety of characters who compete for the coveted winnerโ€™s tournament trophy. Players jump, drift, boost, and battle their way through unique tracks in a bright, exciting and colorful amusement park. Four available slots for couch multiplayer are allowed and any spaces not filled up by human players will be filled with AI controllers totaling the number of racers to eight.

Footage_0020005

What I did!

  • Created UI systems for single player and local multiplayer gameplay
  • Implemented independant UI Widgets to allow for easy updates through development cycle
  • Implemented generic controller input for UI systems in game
  • Implemented UI controllers to handle UI flow control in Menu sequences
  • Implemented a UI widget based flythrough camera allowing for cinematics using sequences in Unreal
  • Worked in Vertical Slice milestone strike team to implement features in short sprints
  • Worked in Beta milestone bug fixing team to ensure quality control and resolve experience issues

UI Systems

Split Screen System

The UI split screen systems for Go Go Karts were designed with the intent to allow easy modifications through development and keeping all UI Widgets independent of each other. This was achieved by creating multiple UMG Widgets that could be added as part of the player’s screen layout.

Below is an example of an independent UMG widget for the player positioning system.

By creating independent widgets to control specific parts of the user interface, designers could then easily implement split screen views for each case (single player or multi-player). This allowed for a fast development process while allowing changes in each sub-system to reflect on all player screen layouts.

Here’s the preview of the widget designer tab showing what the sub component would look like:

Below is an image of the single player widget that shows the use of custom UI Widgets in game.

This approach was maintained when developing the other HUD widgets such as the lap counter, coin meter and item system.

Menu Systems

Each menu screen was broken down into UMG Widgets that served specific purposes. By doing so, the logic for each screen in the game was maintained in the corresponding UMG Widget. This allowed for easy feature addition, modifications to existing systems and easy bug isolation in the UI pipeline.

Here is a image of our Main Menu in game.

Below is the blueprint implemented for the player Kart selection screen. Each code block was segmented based on the type of task being performed and maintained the use of functions to break down the blueprint into sub sections.

The core of this system was the selection block that allowed us to select a kart given a selection ID. This would then reflect on the widget by setting some images and UI element’s visibility.

Here is what the widget looked like in the designer tab:

One of the features required in the game UI was to have a tutorial section that displayed video playback of the various mechanics in game. Developing this system needed to use the Unreal Media player and trigger specific content playback based on controller events.

Below is the blueprint implementation of the core logic for the tutorial screen implemented in game.

By using the media player in Unreal along with some of our gamepad controller highlight code, we were able to create a nice tutorial screen that let us toggle between different videos depending on what button was selected

Utility UI Systems

In addition to creating in game UI, I also worked on developing UI Widgets that allowed performance analysis during the development process. One such widget is the FPS Counter which was designed to notify the developer when frame rates in the game were unstable or below the 60 FPS threshold. This widget was also developed with the intent to keep all logic independent of other game systems and implemented the use of a 5 second average FPS value while testing the game.

Below is the blueprint implemented for the FPS Counter for reference.

The FPS counter calculated an average frame rate over the span of 5 seconds based on the requirements from the lead team. Here is the logic implementation to calculate the average FPS along with a color indication on the widget for when the rate dropped 60 frames per second.

Below is an image of the FPS Counter being used for debugging during the bug fixing process.

FPSApplication

Some other widgets that provided utilities for other developers included the widget to show screen warning when a player was being targeted with a missile. The blueprint implementation is as follows:

This missile code was created on missile launch and the brief logic on the missile widget allowed it to scale to the correct screen size based on the number of players.

Other such widgets include the end of race standings widget that allowed us to retrieve player information at the end of a race or at the end of the grand prix. Below is the logic for the same:

Generic Controller Support

One of the challenges of the UI development process was to read controller events. In the version of Unreal Engine used for this project, UMG input events are not called for some states when using generic controllers. To counter this problem, I had to detect the current button that was focused for each frame and determine which visuals were to be displayed to the user.

Below is the blueprint logic for swapping slates based on controller events.

By using some tricks we were able to use the controller given the implementation of our code base, this included slate swapping and focus checks on all UI widget elements each frame to give us the right widget to swap the slate for.

Retrospective

What went well ๐Ÿ™‚

  • Communication within the sub team.
  • Organized bug fixing pipeline
  • Modular design implementation for UMG Widgets in game.
  • Rapid Iteration and use of Agile development methodology.

What went Wrong ๐Ÿ™

  • Miscommunication between sub-team and leads team in early stages of development.
  • Difficulties in creating a good mini-map to convey player position and track layout.
  • Poor task prioritization resulting in compromises on menu art.

What I learned ๐Ÿ™‚

  • Managing source control and clear folder structures is very important.
  • Tackling controller input in early stages of development makes future stages smoother.
  • Validating assets in the game ensures good quality is maintained.
  • Avoiding “hacky” code in early stages results in smoother development process in the long run.
  • Modular UI systems allow for changes to be made easier while development.
  • Creating utilities for testing during development help isolate bugs faster.
  • Systems must be designed early on with single and multi-player cases in mind.

Development Methodology

Go Go Karts was developed using an Agile development model with Scrum. The leads and producers planned milestones for the development of the game while the development team implemented features according to milestone requirements.

Development Specification

  • Role: UI/UX Programmer
  • Engine: Unreal Engine v4.21.2
  • Development Time: 3 Months
  • Team Size: 45

Download our game here!