In-Game UI Customisation

[Digital 2966]

In-Game UI (User Interface) Customisation

 

This guide will cover how to find community created UI's, how to install UI's (with the official Launcher), and how to design your own custom UI.

 

A few examples of UI's I have created:

 

Spoiler

Metro

 

 

 

Unify

 

 

 

 

 

Finding Community UI's

 

Spoiler

Finding custom UI's created by the community is easy, which can be found by going to Community -> Media -> Show your work! -> Custom UI Packs (or click here). This forum is where all UI's are shared. Once you have created your own UI, this is where you can share it!

 

 

 

Installing Custom UI's

 

Spoiler

Once you have downloaded a UI that you like the look of, you need to install it in the TruckersMP Data directory.

 

Navigate to C:\ProgramData\TruckersMP\data - If you cannot see the ProgramData folder, you need to change your File Explorer settings.

 

In this directory are 3 folders: ats, ets2, and shared. Each contain UI files for their respective games, or files shared across both games.

 

If the UI pack does not already include it, you must create copies of the 3 folders and name them: ats_mod, ets2_mod and shared_mod. The launcher will load modified files ONLY if they are in these folders.

 

Copy the modified files from your UI pack into these 3 folders, respectively. For example, if you want to modify the ETS2 ui_skin.png in ets2\ui\ui_skin.png, you need to copy this into ets2_mod\ui\ui_skin.png

 

When this is setup the launcher will load your modified file(s) every time. Enjoy!

 

 

 

Designing Your Own UI

 

Spoiler

Now the basics are out of the way, we get onto the more tricky part.

 

To get started, open up the TruckersMP Data directory: C:\ProgramData\TruckersMP\data. This is where the UI files are stored and need to be edited to create your own UI 'pack'. There are 3 folders inside the data folder. American Truck Simulator and Euro Truck Simulator 2 have separate directories, named ats an ets2, allowing you to create a unique UI for each game if you wish to. The 3rd is a shared folder which all games use.

 

For the launcher to load any modified files, you must copy the 3 folders and name them ats_mod, ets2_mod and shared_mod.

 

ETS2/ATS Files

 

There are a lot of files, so below will explain what each one is for.

 

Let's use ETS2 for this example. Open ets2_mod then open the ui folder. (ATS has similar files, but we'll focus on ETS2). Inside the ui folder, you will find a few image files. The files you want to focus on editing for making a UI pack are:

 

authors.png - Located in the top left corner of the login screen for Credits.

background0.png, background1.png, background2.png - Used as backgrounds on the login screen. These load in a random order.

cursor.png - The mouse/cursor used for navigating windows in the mod.

refresh.png - A fairly new button on the login screen to refresh the server list.

settings.png - Icon in PlayerView (TAB) to access mod Settings.

speedlimiter.png - Speed limit icon in the server list (90).

ui_skin.png - The main attraction that we will be working with. More information later in the guide.

 

Shared Files

 

In shared_mod\ui are a bunch of icons used in the UI for both games. Most of these you won't usually edit. The main icons are:

 

napalony_klakson.png - The horn icon next to players names.

speaker.png, speaker_off.png - Used in the PlayerView (TAB) menu to toggle mute on a player.

steam_profile.png - PlayerView (TAB) link to a player's Steam account.

truckersmp_profile.png - PlayerView (TAB) link to a player's TruckersMP account.

 

You can edit the other icons, but generally, they are kept to default. You do not need to edit ANY icon to create a custom UI pack.

 

Fonts

 

To use a custom Font in your UI, go to shared_mod\fonts

 

The font the mod currently uses is OpenSans, and we need to replace this font with a different one. There are lots of websites where you can get fonts from, but we'll go with https://fonts.google.com in this guide. Find a font that you like, and download it. It may be in a ZIP file, so simply unzip it and locate the .ttf file.

 

You need to rename this downloaded font to OpenSans.ttf, then replace the one in shared_mod\fonts. The new font MUST be called OpenSans.ttf, otherwise, the MP mod won't recognise it.

 

UI Skin

 

The actual UI Skin, or 'Sprite' you can edit is the ui_skin.png file. This is the main file where most of the work is required to customise your UI.

 

The UI Skin (ui_skin.png) file can be edited with free programs such as Paint.NET, GIMP, or the popular (paid) Photoshop. This allows you to change the colour or shape of windows, buttons, checkboxes and much more. Again, we will use ETS2 in this guide. Open ets2_mod\ui\ui_skin.png in your preferred image editing program.

 

There are a lot of different shapes, colours and arrows all in this one image. Everything you see in a UI - from buttons, arrows, windows, drop-downs and colours are ALL in this one file.

 

I have developed a basic guideline for the UI Sprite, which includes references to each element of the sprite. Download the ZIP in the link below, and open either .HTML file. Hover your mouse over each element and a dialog should highlight what it is used for.

 

http://www.mediafire.com/file/zk2jz7xhj76dbbx/TruckersMP_UI_Sprite_Guideline.zip/file

5

 

If you need any help at all with UI's, or find something was not covered in this guide please let me know below.

 

Good luck!

Edited January 9 by Digital

[[VIVA] ismail [TR] 1189]

Good work mate.   

[mati216PL 374]

Nice guide

[[TSRVTC] Janty 33]

nice fella

[DiegoLBC1 161]

Thanks for share it, @Digi7al 

[[T.G.E][01] Lorena* 2438]

¡¡Very good guide!! 
It can be seen that it is not a guide that was done in 3 minutes if not in a long time and can also see the effort you put in it, so for that reason...
I leave you my +1

[Coppekss 515]

Very good guide

[Guest Ali / 21]]

 Good Guide

[HamitCanKilic 1242]

Thanks for share it, @Digi7al

[Pillow 2497]

Thanks for this guide @Digi7al! It's very helpful for me and I guess others too xD

Great work! 

[Racyen 201]

Hello @ all,

 

i have the Problem since the Update who Support ETS 1.27.1 , i can´t install the Ui Pack with the automatic Installer.

 

and this Step "2) Navigate to the UI pack you just downloaded, then copy & replace the data folder into C:\ProgramData\TruckersMP"

since Truckers MP use the Launcher i dont have there data folder"

 

Greetings

    Racyen

[Guest Pilot VTC - Victor]

@racyen, because of the update it doesn't work. Go grab some paint brushes and design your own UI. It's simple.

[Racyen 201]

@Ripsterk i don´t have the Data Folder.

 

i have only this Files

 

[Digital 2966]

2 hours ago, racyen said:

@Ripsterk i don´t have the Data Folder.

 

i have only this Files

 

 

You are in the incorrect directory. You need to go into C:\ProgramData\TruckersMP. You are going into the Launcher directory which does not contain the data. Just go to Start and paste C:\ProgramData\TruckersMP into the search field, then press Enter. It should take you to the directory with the data folder. 

 

[Racyen 201]

oh man sorry, guys.

 

in Windows 10 that Folder are Invinsible :x

 

Thank you. Have a happy Easter Weekend

[Guest Meto]

Thanks for the info @Digi7al

[El1teZombiezHD 1577]

@racyen type %programdata% into Run

[Guest Azyer]

This was actually help me use the unofficial launcher and the UI Pack mod thing 

[Encrypted_ 243]

Does anyone have a video tutorial on this ? I don't understand.

[Garret_Dexeau 223]

Thanks for that!!! I was trying to figure out how to do it for a long time. 

[Encrypted_ 243]

24 minutes ago, Canis Latrans said:

Thanks for that!!! I was trying to figure out how to do it for a long time. 

Can you give me steps on how to do it?

 

[Garret_Dexeau 223]

2 hours ago, Encrypted_Data0 said:

Can you give me steps on how to do it?

 

 

It is on Digital's post, hidden in a spoiler. 

[Truck Boy 9]

Thank you for share it

[xTH3xMoDsZx 240]

Quote

Fonts

 

To use a custom Font in your UI, go to shared_mod\fonts

 

The font the mod currently uses is OpenSans, and we need to replace this font with a different one. There are lots of websites where you can get fonts from, but we'll go with https://fonts.google.com in this guide. Find a font that you like, and download it. It may be in a ZIP file, so simply unzip it and locate the .ttf file.

 

You need to rename this downloaded font to OpenSans.ttf, then replace the one in shared_mod\fonts. The new font MUST be called OpenSans.ttf, otherwise, the MP mod won't recognise it.

 

I followed this - but it doesn't work... @Digital

[ZolaKluke 19]

@xTH3xMoDsZx Did you name the files correctly, make sure they're .ttf versions and also I don't know if you need to, but have you installed the font's by double clicking them and clicking install?