🖼️Boe6's vehicles: GUI Images

Next we get to create the GUI images for the vehicle. This includes the call menu, dealership website, and the vehicle’s manufacturer logo.

First we’ll update the vehicle brand’s logo.

Locate the file referenced in your UIIcon.Brand_Logo: record and add it to the project.

Example: base\gameplay\gui\common\icons\weapon_manufacturers.inkatlas

Open the .inkatlas file, and navigate to: “RDTDataViewModel > slots > 1/0 > texture”

Add the first “weapon_manufacturers.xbm” file to your project.

Move and rename both .inkatlas and .xbm to appropriate paths.

Examples:

boe6\mini_cooper\assets\logos.inkatlas

boe6\mini_cooper\assets\logos.xbm

Update Mini_Logo Tweak .yaml Record, example:

atlasResourcePath: boe6\mini_cooper\assets\logos.inkatlas

Update .inkatlas > slots > texture. Example:

Save and test. Please note you’ll see this texture when scanning the car. It should show as the new car’s default logo.

Now we update the .xbm file.

Open the .xbm in wKit, and open the “setup” path.

Example:

Please note that you’ll need these settings for properly importing and exporting .xbm files shortly.

Export your logos.xbm file as a .tga file.

Export example:

.tga files can be edited by any photo editor that supports the alpha channels. I use Photoshop, and I believe paint.net is also supported.

You’ll need a logo source that is black and white, black being transparent. Ensure your logo is 100% solid white.

Aim to replace a similarly shaped logo in the existing image. Make sure you update both the RGB and alpha channels.

Examples:

Save the .tga file, and make sure to not use compression.

Open the Import Tool (under Tools) and refresh.

Select the edited .tga file, and set the import settings to mirror those in the “setup” options in the .xbm file. We viewed this earlier.

In my case, I changed Compression to TCM_DXTAlpha

Save and test that the mirror car’s brand still renders when scanned.

Open the .inkatlas in wkit and switch the tab to “Part Mapping”

Find and select your logo, example:

Edit the inkTextureAtlas > RDTDataViewModel > slots 0/1 > parts > logo replacing. Change the partName to your brand. Example:

Delete other logo maps under "parts" to clean up the file.

Example of clean slots:

Open “clippingRectInUVCoords” to fix the bounds of your logo on the Part Mapping.

Updated clipping example:

Update UIIcon.Brand_Logo: Tweak, atlasPartName: Brand.

Example:

atlasPartName: mini

Save and test.

Logo should now show as the updated image when scanned in-game. Example:

Call Menu and Virtual Car Dealer Images

The call menu vehicle icon, or the dealerAtlasPath is similar to other UI atlas textures.

Verify your .xbm image has the right setup/import attributes:

Link the .xbm to the .inkatlas with updated file paths and update the .inkatlas clipping values.

Update Virtual Car Dealer Tweaks

Don't forget to update your .yaml tweaks as well. Example:

Vehicle.boe6_mini_cooper.dealerPrice: 63000
Vehicle.boe6_mini_cooper.dealerCred: 8
Vehicle.boe6_mini_cooper.dealerAtlasPath: "boe6/mini_cooper/assets/boe6_mini_cooper_vcd.inkatlas"
Vehicle.boe6_mini_cooper.dealerPartName: "boe6_mini_cooper_vcd"

The images should display properly on both the vehicle call menu, and the virtual car dealer website.