Jump to content
It's time to downgrade!

In-Game UI Customisation

Digital

By Digital ,
in TruckersMP Settings

 Share Followers 7
Phon
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

  • Project Coordinator
Digital

Digital 4172

Posted
  • Project Coordinator
Posted (edited)

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

fdRafOm.png

 

 

 

Unify

xalSuR0.png

 
 

 

 

 

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 by Digital
  • Like 7
  • Thanks 1
  • Upvote 8
Link to post
Share on other sites
[T.G.E][01] Lorena*

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

Posted
Posted

¡¡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 post
Share on other sites
Racyen

Racyen 270

Posted
Posted

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

Link to post
Share on other sites
  • Project Coordinator
Digital

Digital 4172

Posted
  • Author
  • Project Coordinator
Posted
2 hours ago, racyen said:

@Ripsterk i don´t have the Data Folder.

 

i have only this Files

 

Unbenannt.jpg

 

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. 

 

Bkv0l3y.png

Link to post
Share on other sites
  • 6 months later...
  • 7 months later...
KGT l xTH3xMoDsZx l UK

KGT l xTH3xMoDsZx l UK 280

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

169325408_role_RetiredTeamMember(1).png.

est 2014 - 2019


 

Link to post
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
 Share
Followers 7
Go to topic listing
×
×
  • Create New...