CustomUI Tutorial

Rocket League Plugin

🚀 Introduction

CustomUI is a plugin that allows players to create and display their own custom user interface (UI) directly inside Rocket League. This plugin gives players the freedom to design unique visual elements by adding a personal touch to the interface.

📦 Install BakkesMod and CustomUI

First things first, make sure you have BakkesMod installed. Once that’s done, download the CustomUI plugin. Then start BakkesMod and Rocket League.

📜 Table of Contents

• How to use
• Import different presets
• Create a new preset

How to use

🕹️ Step 1: Bind a key to open the CustomUI window inside the game

1. Inside Rocket League, open the BakkesMod settings by pressing F2.
2. Navigate to Plugins > CustomUI.
3. Bind a key to open the CustomUI window. By default, it’s usually set to F3, but feel free to change it to any key you prefer.

PS: The UI only appears when it’s needed—like the Boost UI in Freeplay or the full interface during matches. To set it up, the easiest way is to start a private match where the UI will show up.

⚙️ Step 2: Adjusting the UI

Once you’re in-game, you’ll see the UI appear. If it’s not positioned or sized how you want, don’t panic—that depends on your screen resolution and Rocket League’s interface scale.

1. Press F3 to open the CustomUI settings.
2. Choose a preset. You can find starting presets in the Discord server.
3. Use the Item Selector to pick which groups of items you want to display. You can even add multiple groups by clicking the + button on the right.
4. Adjust the position and size of each element to fit your setup.

Pro Tip: Don’t forget to hit Save, or your changes won’t apply!

How to import different Presets

📤 You can also import presets created by graphic designers, friends, or anyone who shares their setup.

1. Go to the Discord server and navigate to the Your Presets channel to access shared presets

2. Download the preset folder from a trusted source (only verified files shared via Drive links are accepted in the Discord).

3. Copy and paste the downloaded folder into the correct location:

   • Open the BakkesMod folder (you can access it via the BakkesMod window).
   • Navigate to data/CustomUI/Presets/ and paste the folder here.

4. Refresh or relaunch Rocket League, select the preset name and you’re good to go! Follow the same steps as before to tweak the position and size.

How to Create your own preset

📁 Step 1: Setting Up Your Folder

To create your own preset:

1. Open the BakkesMod folder via the BakkesMod window.
2. Navigate to: data/CustomUI/Presets/
3. Download the folder called TemplateCustomPreset.zip from the template-files channel on Discord and paste it here :
   • Rename your folder to match your preset’s name (e.g., TutoCustomUI).
   • Your folder must follow this structure:

     TutoCustomUI
     ├── fonts
     ├── image1.png
     ├── image2.png
     └── preset.json
     

🖌️ Step 2: Create Your Design

1. Start with the Photoshop Template Files

   • Download the diiferent Photoshop template that you want to modify from the template-files channel on Discord.
   • Modify the template files as needed to design your preset.

2. Choose Your Font

   • Download your preferred font and place it inside the fonts folder.
   • Alternatively, use the default font by leaving the fonts folder empty.

📝 Step 3: Editing the preset.json File

File Overview

The preset.json file serves as the blueprint for your design. Key components include:

• Font: Defines the font used for text elements.
• Image Paths: Contains links to your custom images for each UI element.
• BoostForm: Specifies the type of boost display (either Texture or Circle).

Steps to Edit

1. Open the preset.json file in a text editor (e.g., Notepad, Visual Studio).
2. Update the folderName field to match your preset’s folder name exactly.
3. Edit the following fields:
   • Font: Enter the name of the font you wish to use or leave empty ("") to use the default font.
   • Image Paths: Provide the paths to your custom design files:
     • boostDisplayImage: The background design for the boost display.
     • boostTextureImage: The texture for the exact amount of boost.
     • scoreImage: The design for the score component.
   • BoostForm:
     • Set to "Texture" and provide the path to your texture file in boostTextureImage.
     • Set to "Circle" and leave boostTextureImage empty ("").

PS 1: Avoid modifying other parts of the file to prevent potential issues.
PS 2: To link images inside the folder, use the format "TutoCustomUI\\YourImageName.png".

🖼️ Step 4: Using Artist Mode

Purpose:

Artist Mode allows precise editing of each element within your preset.

Steps:

1. Enable Artist Mode in the CustomUI window.

2. You can now edit each item individually, adjusting its position, size, and color for text:
   • Background boost image
   • Texture boost image
   • Boost text
   • Background score image
   • Text for your team’s score
   • Text for the opposite team's score
   • Gametime text

3. You can edit multiple objects simultaneously.

PS: Disable Artist Mode when you're finished to ensure only the boost and score elements are modified together.

🌍 Step 5: Sharing Your Preset

1. Zip your preset folder.
2. Share it on the Discord server (follow the server rules).