Beginner tutorial to making dashboard HUD

only_a_ptr

Lead Developer
Administrator
Developer
Joined
Jan 31, 2018
Messages
133
Location
Prague, CZ
Hello.

I'm adding new elements to dashboard (https://github.com/RigsOfRods/rigs-of-rods/pull/2937) so for testing I need a dashboard .layout which uses them.

Our docs (https://docs.rigsofrods.org/vehicle-creation/making-custom-hud/) are detailed and up-to-date, but rather technical. Also the provided GUI tools are not extremely intuitive. Since I just got familiar with them, I decided to make a tutorial of it.

This tutorial doesn't require any knowledge of graphics, programming or the game - everything will be gently explained.

This is what we'll create: a minimal HUD with just one indicator.
ror dashtut.png
 
OP
OP
only_a_ptr

only_a_ptr

Lead Developer
Administrator
Developer
Joined
Jan 31, 2018
Messages
133
Location
Prague, CZ
Step1: download and configure the editor

Use the "Gui Editor 4" link in our docs: https://docs.rigsofrods.org/vehicle-creation/making-custom-hud/#required-software.
It's a portable package. Unpack it anywhere and run "GUIEditor.exe". You'll be greeted by OGRE renderer setup dialog:

01 - gui editor render setup.png


Select a rendering subsystem (DirectX or OpenGL) and setup parameters (resolution is very low by default, fullscreen is on by default).
After you click OK, the editor will create file 'ogre.cfg' and won't display this dialog again. To make it appear, stop the application, delete the file and start the application. You can also edit the file directly, it's an INI-like text file.
 
OP
OP
only_a_ptr

only_a_ptr

Lead Developer
Administrator
Developer
Joined
Jan 31, 2018
Messages
133
Location
Prague, CZ
Step2: Create graphics.

As I promised, I don't expect you to have any graphics skills or software. We'll use Windows Paint for the job. Bring up the Windows10 start menu and type 'mspaint'.

02 - mspaint.png


First, go to File > Properties and set Width and Height to 100. That's more than enough. The size will be specified in the GUI editor and the game will stretch/shrink the graphics as needed.

Then, play with the painting tools. We'll do a dashboard lamp indicator - a widget showing "turned on/off".
To make it work, it must be 2 PNG images with a name that starts the same and ends "-on.png" and "-off.png".

I named mine "sillyindicatortex-off.png" and "sillyindicatortex-on.png":
sillyindicatortex-off.png
sillyindicatortex-on.png
 
OP
OP
only_a_ptr

only_a_ptr

Lead Developer
Administrator
Developer
Joined
Jan 31, 2018
Messages
133
Location
Prague, CZ
Step3: Create and test working directory.

We want to save our files where the game can pick them up.
Go to Documents\My Games\Rigs of Rods\mods and create directory "dash_tutorial1". Place the graphics there.

Next, we need a vehicle to use the dashboard with. It can be anything. I used a copy of our bundled "Agora S" bus: https://github.com/RigsOfRods/content/blob/master/agora/95bbUID-agoras.truck. Go to that page, download the file by clicking "Raw" button and then Ctrl+S to save it using your browser. Save it to your working directory as "dash_tutorial_agoras.truck".

Finally, we need to change the name of our vehicle to avoid mixup with the real Agora bus S. Open the file in a text editor (bring up start menu, type 'notepad', start Notepad, use File>Open to open the file). The first line is the display name. Change it to dashtut Agora S.

Now, restart Rigs of Rods, load any terrain and load the modified Agora.

03 - LoaderUI.png
 
Last edited:
OP
OP
only_a_ptr

only_a_ptr

Lead Developer
Administrator
Developer
Joined
Jan 31, 2018
Messages
133
Location
Prague, CZ
Step4: Create the dashboard .layout file

When you start the GUI editor, a file 'unnamed.layout' is created for you. We'll change the name later.

On right side go to Widgets tab, click TextBox button and add a text box to the canvas by clicking and dragging the mouse
04 - textbox empty.png


Then switch to Properties tab and set up the text box. The most important field is the Layer - without it, the element won't be displayed. Use "Main" for the foreground elements.

04B - textbox hello.png


Finally, in top menubar, select File > Save as... and save the file as "dash_tutorial.layout"
 
OP
OP
only_a_ptr

only_a_ptr

Lead Developer
Administrator
Developer
Joined
Jan 31, 2018
Messages
133
Location
Prague, CZ
Step5: attach the HUD layout to the vehicle.

Open the .truck file as in step 3. Go to the end of file, and before the 'end' keyword add this:
Code:
guisettings
    dashboard dash_tutorial.layout

Documentation: https://docs.rigsofrods.org/vehicle-creation/fileformat-truck/#guisettings

Now, when you load the vehicle in game, the Hello! should appear on screen in the left corner, as seen in the first post.

Please note: there's a bug in the game - if you reload the vehicle by any means, the dashboard layout will remain in memory and won't be updated. The only solution is to restart the game. Fix is underway: https://github.com/RigsOfRods/rigs-of-rods/pull/2966
 
Top