Jump to content

In-Game UI Customisation

Message added by Phon,

This guide is outdated and may not contain updated, recent or correct information. Please bear this in mind if following this guide.


It is intended that this guide will be updated by the author soon.

Recommended Posts

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:














Finding Community UI's



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



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 (old client) or C:\Users\Your Username\AppData\Roaming\TruckersMP\installation\data (new client) NEW- 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



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 (old client) or C:\Users\Your Username\AppData\Roaming\TruckersMP\installation\data (new client) NEW. 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.




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.





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!

  • Like 7
  • Thanks 1
  • Upvote 9
Link to comment
Share on other sites

¡¡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

  • Upvote 1

           Old ranks:              
   roles_game-moderator-leader.png.f8705625 - image.png.7837814402f73c303120645d2f3effc4.png -  roles_trial-game-moderator.png.78e7ac97d  
   roles_support.png.fc5b5f89970695aabd7092 - roles_community-moderator.png.629b933bb2
Spanish - Portugués

Link to comment
Share on other sites

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"




Link to comment
Share on other sites

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. 



Link to comment
Share on other sites

  • 6 months later...
  • 7 months later...



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



In Game Administrator - 2014 - 2019


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.