The Sign Editor: Tutorial

Modding school: Learn it from the masters
Post Reply
User avatar
MandelSoft
Lead Developer
Posts: 3835
Joined: 08 Aug 2013 10:48
Location: Delft [NL]

10 Apr 2016 17:33

Introduction

Since patch 1.13, the way navigation signs work in Euro Truck Simulator 2 has changed. The old legacy fixed-slots-and-text-overlay navigation sign system requires a lot of models and textures that have to be created. This system is limited by the number of available slots and is quire inflexible in creating various variants of signs without a lot of redundancy or extra work.

An example of this are city entrance and exit signs. If you create such a sign, you need a proper texture with city name baked within it. However, you can’t re-use this texture for overlays; you need another texture, and not only for each city name, but also for each alignment or country variant.
The new sign system is integrated in ETS2 itself and the signs are assembled on-the-fly within the editor. A designer is able to create various types of signs only using limited set of assets. All of the texts in the sign (eg. city names) are text boxes that use predefined font asseds. Images are now depicted as image objects stored in an image collection called an atlas. Backgrounds for texts or images are objects called frames.

To minimize work of designers, one must distinguish between two different types of signs: sign templates and sign overrides:
  • A sign template is reusable base layout of a sign with. Such template contains a number of images (eg. for arrows) and frames (eg. for backgrounds or borders) and texts (eg. for cities names). Each sign template is connected with a sign model. The size and position of the objects, as well as their default settings can be edited within the sign template.
  • A sign override is actual instance of a sign in the map that uses a sign template and specify actual values, like text overrides (route numbers, destinations), transparency settings, font and text alignment. However, the position and size of objects can however not be changed. Each sign override uses exactly one sign template.
Sign templates and sign overrides can be edited in a WYSIWYG editor – The Sign Editor. There you can add new objects into the template or modify properties of existing ones in override. Sign templates are categorised in sets called a project. A project holds data relevant to one style of signs (eg. pro_germany, containing all signs in Germany). A project has palettes of available fonts, colours, frames and image atlases, as well as templates associated to the project.

This tutorial encompasses the following chapters: NOTE: this tutorial does NOT cover creating new sign fonts, as this requires specialised non-publicly available software.

User avatar
MandelSoft
Lead Developer
Posts: 3835
Joined: 08 Aug 2013 10:48
Location: Delft [NL]

10 Apr 2016 17:33

Editable Sign Models
The new sign system contains editable sign models. These editable sign models differ from old sign models in the number of locators and its hookups. Legacy sign models have more locators: one locator for each slot that may hold text/image overlay with hookup, eg. hookup sign.road_1 for name of the road. Also, legacy sign models usually have some images in texture (eg. arrows) baked within the model. Editable sign models have one locator/hookup for each area that can be modified in the sign editor.

An sign in the legacy signage style technically looks like this::
Image

An sign in the new editable signage style technically looks like this:
Image

Editable area hookups are defined in /base/unit/hookup folder in sign_area_*.sii files. For example you can create sign_editable_area hookup and set the size as 3.7 x 0.8 meters. It is recommended to name such file as sign.area.370x80.sii, but that is up to you. Size of the area is important because there may be inserted images, texts, etc. only within the area. Also, there is allocated a texture according to the size of the area. That means the bigger the area, the bigger the texture. If you need different area sizes, you must create hookup files in /base/unit/hookup folder. If the sign consists of more parts (eg. highway navigation signs) there should be one area for each.
The locator for the hookup should be located infront of the model, for example 5-10 cm, to make sure the sign doesn’t flicker
4
Example of a sii description of an editable sign area with 5.6 × 2.6 meters:

Code: Select all

SiiNunit
{
  sign_editable_area : sign.area.560x260 {
    width: 5.6
    height: 2.6
  }
}
Example of a sii description of an area with content that will shine. This is usefull eg. for LED displays with numbers etc.

Code: Select all

SiiNunit
{
  sign_editable_area : sign.area.560x260.shiny {
    width: 5.6
    height: 2.6
    shining: true
  }
}
This is all you need to know about the models for the sign editor.

User avatar
MandelSoft
Lead Developer
Posts: 3835
Joined: 08 Aug 2013 10:48
Location: Delft [NL]

10 Apr 2016 17:34

Sign Image Atlasses and Frames
This section handles the image assets for sign templates. These images are in DDS format. There are two types that behave differently in the sign editor: image atlasses and frames. Each type is being described in the sections below

Image atlas
To avoid great number of small textures, the images are part of atlases. An atlas contains several related images. For example there may be an atlas that defines available images for navigation signs of Switzerland.

Example of image atlas:
Image

Definitions of atlases are stored in /base/def/sign/atlas folder in sii files. In a definition you must specify:
  • atlas name
  • texture (material) path
  • texture width and height coordinates for all contained images – UV coordinates (in pixels) in the texture
  • names for all contained images
The UV coordinates are in pixels and they define the distance from the left of the texture (for left and right part of coords) and the distance from the top of the texture (for the top and bottom part of coords). It is the same as in frames.

Example of an SII definition of an atlas:

Code: Select all

SiiNunit
{
image_atlas : atlas.ch
{
  atlas_name: "Atlas CH"
  material_path: "/material/sign/atlas/atlas_ch.mat"
  
  # names
  images_names: 18
  images_names[0]: "Arrow vertical"
  images_names[1]: "Arrow horizontal"
  images_names[2]: "Arrow down lane"
  images_names[3]: "Arrow exit lane"
  images_names[4]: "Arrow exit"
  images_names[5]: "Arrow split large"
  images_names[6]: "Horizontal line"
  images_names[7]: "Vertical line"

  images_names[8]: "Land Oval AT"
  images_names[9]: "Land Oval DE"
  images_names[10]: "Land Oval FR"
  images_names[11]: "Land Oval FL"
  images_names[12]: "Land Oval IT"

  images_names[13]: "Symbol Exit"
  images_names[14]: "Symbol Interchange"
  images_names[15]: "Symbol Autobahn"

  images_names[16]: "Route Shield Autobahn (Opaque)"
  images_names[17]: "Route Shield Europe (Opaque)"
  
  # left right bottom top
  images_coords: 18
  images_coords[0]:  ( 80, 140, 140,  60)
  images_coords[1]:  (  0,  80, 200, 140)
  images_coords[2]:  (  0,  80,  60,   0)
  images_coords[3]:  (  0,  80, 140,  60)
  images_coords[4]:  ( 80, 160,  60,   0)
  images_coords[5]:  (  0, 256, 512, 256)
  images_coords[6]:  (240, 304, 224, 192)
  images_coords[7]:  (208, 240,  64,   0)

  images_coords[8]:  (240, 304,  64,   0)
  images_coords[9]:  (304, 368,  64,   0)
  images_coords[10]: (240, 304, 128,  64)
  images_coords[11]: (304, 368, 128,  64)
  images_coords[12]: (240, 304, 192, 128)

  images_coords[13]: (384, 512, 128,   0)
  images_coords[14]: (384, 512, 256, 128)
  images_coords[15]: (416, 512, 384, 256)

  images_coords[16]: (416, 512, 448, 384)
  images_coords[17]: (416, 512, 512, 448)
}
}
Frame
In the sign editor you can add frames into the sign template. A frame defines a shape that is rendered on the sign. Frames are usually backgrounds or borders. The difference between an image and a frame is that frames look always good if you scale them up or down. If you resize an image over its native size, it is blurry.

Frames consists of one texture (material) and a definition that describes how the texture should be applied. Frame structure:

Image

Definitions of frames are stored in /base/def/sign/frame folder in sii files. In a definition you must specify:
  • texture (material) path
  • border width and height – defines size of corners and vertical and horizontal parts
  • corner coordinates – UV coordinates (in pixels) in the texture for the corner part
  • horizontal coordinates – UV coordinates (in pixels) in the texture for the horizontal part
  • vertical coordinates – UV coordinates (in pixels) in the texture for the vertical part
  • center coordinates – UV coordinates (in pixels) in the texture for the center part
  • Border width defines the size of horizontal, vertical and corner parts. Its size is in meters.
NOTE: The UV coordinates are in pixels and they mean the distance from the left of the texture (for left and right part of coords) and the distance from the top of the texture (for the top and bottom part of coords).

Below is an example of a sii description of a frame:

Code: Select all

SiiNunit
{
sign_frame_template : blue_rnd
{
frame_name: "Blue rounded"  material: "/material/sign/frame/blue_rounded.mat"
border_width: 0.1 
border_height: 0.1
corner_coords_l: 0
corner_coords_r: 40
corner_coords_b: 40
corner_coords_t: 0
horizontal_coords_l: 40
horizontal_coords_r: 64
horizontal_coords_b: 40
horizontal_coords_t: 0
vertical_coords_l: 0
vertical_coords_r: 40
vertical_coords_b: 40
vertical_coords_t: 64
center_coords_l: 40
center_coords_r: 60
center_coords_b: 40
center_coords_t: 64
}
}
TIP: You can use a white frame for several sign elements and colour them differently in the sign editor. This way, you may only need 1 route shield background and 1 edge for any route shield colour combination.
Your daily dose of wisdom!
╔═══╗────╔═╗╔═╗────╔╗
║╔═╗║────║║╚╝║║────║║
║╚═╝╠═╦══╣╔╗╔╗╠══╦═╝╠══╗
║╔══╣╔╣╔╗║║║║║║╔╗║╔╗║══╣
║║──║║║╚╝║║║║║║╚╝║╚╝╠══║
╚╝──╚╝╚══╩╝╚╝╚╩══╩══╩══╝
Don't ask us for a release date; we don't know either.

User avatar
MandelSoft
Lead Developer
Posts: 3835
Joined: 08 Aug 2013 10:48
Location: Delft [NL]

10 Apr 2016 17:34

The Sign Editor
The sign editor is a tool for creating and modifying sign templates and sign overrides. It allows you to choose project which controls available properties and items. It has support for clipboard, history, reverting changes, saving etc. Most of the actions have keyboard shortcut. You can see them un Edit menu.

When you want to add a text object, select Menu > Insert Text (or just press Ctrl+T) and create a text by dragging LMB (left mouse button) – this way you instantly setup area of the new text. If you don’t drag (and just click), the text area will have default size of 1.0×1.0 meters.

When you want to add an image object, you must open the Content browser, select "Sign image" type and drag and drop the desired image onto the sign. To add an image, select an atlas and click on the picture you want to add. It will be added into the currently edited sign area. A similar technique can be used for adding frames.

You can select any item by just clicking it. The type of the selected item will influence the Properties tab. You may select multiple items and edit them in batch. The CTRL and ALT keys will respectively add and remove items from the selection. You may select items by dragging the mouse. Clicking on no items will result in deselecting all items.

The sign editor has several different screens and context menus. They are described in the section below:

Projects
A project links associated assets of a certain signage style. For example, there may be a project that is sufficient for creating all of the navigation signs of Switzerland. Such project defines available fonts, colours, frames, atlases and also sign templates. In the sign editor you can choose a project and it will offer you its fonts when you are editing text. It will offer you its atlases, when you are adding image. Assets from projects are also stored in separate categories in the content browser.

There is a project editor so that you don’t have to bother with sii files. You can edit projects or add new ones if you select Add sign in game editor.
Image

There you click Add new project or select an existing project and click Edit project. The project editor will open.
Image

There you can add colours, frames, atlases fonts and templates into the project. You can add existing templates – they can be shared by several projects.

Definitions of projects are stored by default in /base/def/sign/project folder in SII files*. If you want to edit project's sii file manually, you must specify:
  • name of the project
  • available fonts (their paths)
  • available colours (their RGB hex values, eg. 0xFF0000 means red)
  • available atlases (their paths)
  • associated templates (their names)
The name of a template must match the name in the template definition file. For example if the template unit has name sign_tpl.highw_nav_b, in the project there would be sign_tpl.highw_nav_b. If you create templates in the editor, this will be handled by the editor and they will be added into the selected project automatically.

Just like map files, you need to repack the project definition files manually. The default location where these project definition are stored is <your_ets2_installation_folder> /base/def/sign/project*. Copy the contents of this into its rightful location in your DEF package in order to load the changed data again.

* This may differ if you use your own base for your sign templates, which is something we STRONGLY recommend.

Sign template
A sign template defines which sign boards are used for which editable area. Since patch 1.30, all functionality that was previously assigned to the sign templat items, have now been re-assigned to the sign boards, a new item type in that patch. If you want to create a new sign board, you must first save the template if you just created one. Right-click on the editable area and select "create new board". This will open up the sign board editor.

Definitions of templates are stored in /base/def/sign/template folder in sii files, and all signs are enlisted in /base/def/sign/templates.sii. In a definition there must be:
  • template name
  • category name
  • model name (token name suffix)
  • all of the items definitions
This definition is generated by the sign editor when you save the template. It should be edited manually only under specific circumstances.
Just like map files, you need to repack the template files definition files manually. The default location is <your_ets2_installation_folder>/base/def/sign/template. Copy the contents of this into its rightful location in your DEF package in order to load the changed data again. The main template definition file must also be copied. The default location for this is /base/def/sign/templates.sii.

NOTE: for compatibility reasons, the templates can be stored in different templates.sii files. This also changes the location where projects and templates are stored. More details will be explained in Workflow Recommendations.

Sign board
A sign board defines all of the sign components, their position and other properties in a single editable area. It defines full complete look of a single sign board for single purpose. It may contain texts, frames and images. Sign templates should be created so that there would be easy to create overrides from them. For example it is recommended not to fill text items for things that will be specified in an override (so that when creating override you don’t have to delete useless text). For example you may add frames and text items for road names even if you don’t know if all of them will be used. In override redundant items may be hidden.

You may edit boards and templates that are already used by sign overrides. This way you may change the look of whole class of signs without changing them one by one. Changing a board will change all signs using that board. However, you must be cautious when doing such thing. For example it is not recommended to delete items in boards that have overridden information; this will get lost. It is safe to resize items, change their colours, fonts, adding new ones etc.

TIP: You can unhide and hide objects by leaving text boxes empty and by setting the transparency of objects to 0. Since these properties can be edited in the sign editor, you can take advantage of this property to reduce the number of required templates.

An example of a sign board:
Image

Definitions of boards are stored in /base/def/sign/board folder in sii files, and all signs are enlisted in /base/def/sign/boards.sii. In a definition there must be:
  • board name
  • category name
  • model name (token name suffix)
  • all of the items definitions
This definition is generated by the sign editor when you save the board. It should be edited manually only under specific circumstances.
Just like the sign template files, you need to repack the board files definition files manually. The default location is <your_ets2_installation_folder>/base/def/sign/board. Copy the contents of this into its rightful location in your DEF package in order to load the changed data again. The main template definition file must also be copied. The default location for this is /base/def/sign/board.sii.

NOTE: for compatibility reasons, the templates can be stored in different boards.sii files. This also changes the location where projects and boards are stored. More details will be explained in Workflow Recommendations.

Templates and boards are edited in the sign editor in the template mode. In this mode you can add/remove/resize/move items. You may change all of their properties.

Image

TIP: For model and frames, please fill in the sizes manually in the dimension field. Stick to sizes that are rounded to 5 cm. Manual input gives a better result.
TIP: There are alignment tools in the sign editor. If you select multiple objects, the alignment tools will align them to the object that was selected first.
TIP: All items are stacked on top of each other. You might want to re-arrange them by moving them forward or backward.
TIP: If you have symbol images on the sign, it's recommended to set "overridable" to "true". This allows you to replace the image in the override mode of the sign editor.


Creating a new sign template

Creating a new template can be done in the new sign menu. To access a the new sign menu, press 5 on your keyboard (signs) and then press E (new item). Select the project you want to add the sign to and click on “Add new template”.

You have two options for creating a new template:
  • Create a template from scratch. You have to select the editable sign model you want to put your template on.
  • Open the base template you want to base your sign on and use "File > Save As" to make a new template with a new name. You will have to use the same editable sign model as the base template. This trick also works for creating new boards out of existing ones.
TIP: You can use a different sign model in the second option, but this requires some manual SII editing. Be cautious with this type of editing.
You need to give your template a template name. For the template name, use something that’s descriptive (and preferably systematic), so you can easily find it again. An unit name will be automatically generated. When done, click on OK and edit your sign in the sign editor. The same applies to sign boards
TIP: You can copy elements from one sign template to another, which saves a lot of work.
TIP: To avoid conflicts, please use custom sign template paths. See Workflow Recommendations.

Sign override
A sign override is an actual instance of a sign in the map. Sign overrides use sign template for their look and they add concrete information, eg. name of the city. They can be imagined as a link to the template with the list of the changes.

An example of a sign override:
Image

Sign overrides are stored in the map. There are no sii files definitions.

In the override mode of the sign editor you have limited options. You may not add or remove items and you may resize or move them neither. You can change limited set of their properties.

Image

In this mode there a list of nearby cities is loaded on the left hand side of the screen, so that you don’t have to write the names manually. If you select text item, you may double click the name of the city and it will be appended into the text. You can also RMB click (right mouse button) on the city and select "Copy", which copies city name into the clipboard and paste it manually. This way you don’t have to even touch your keyboard and you may configure the sign just by using the mouse.

Note: As sign overrides are stored into the map, for the changes made in sign editor to be permanent you have to save them in the sign editor and also you have to save the map. (Sign templates do not require the map to be saved.)
Last edited by MandelSoft on 17 Dec 2017 00:53, edited 2 times in total.
Reason: Information updated for ETS2 v1.30

User avatar
MandelSoft
Lead Developer
Posts: 3835
Joined: 08 Aug 2013 10:48
Location: Delft [NL]

10 Apr 2016 17:34

Workflow Recommendations
As stated before, the game automatically generates item names for the template SII. This is just a number, and if you do not change this, there is a high risk of compatibility issues when SCS decides to make more signs. Therefore, you need to make a custom project for yourself to avoid these issues.
The custom sign template SII causes the whole path system to change where everything is stored. By default, projects and templates are stored in:

/base/def/sign

Now, you can make a different base to store your templates in, which is useful to avoid conflicts with both mods and SCS's developments. Any template defined in template.<modname>.sii will be stored in:

<your_ets2_installation_folder>/<modname>/base/def/sign.

<modname> is the name of your mod, starting with “mod_” and followed by six basic latin characters (e.g. mod_mandel). If the folder <modname> is not created, the game cannot store the templates defined in the template.<modname>.sii. For example: MandelSoft from ProMods uses template.mod_mandel.sii and the template files are stored in:

<your_ets2_installation_folder>/mod_mandel/base/def/sign.

NOTE THAT THIS ONLY AFFECTS THE LOCATION WHERE ALL FILES ARE DUMPED FROM THE SIGN EDITOR; You still have to pack the sign defs at their normal location in the file structure, namely /def/sign/.

Protip: Make a symbolic link to this custom base folder to allow overwriting existing sign templates you made and to allow proper caching of your sign templates. SCS-Mod packs are locked while the game is running, but extracted mods in directories and symbolic links are not locked, and thus, can be updated when the game is running. To make a symbolic link, open the command prompt as an Administrator (it won't work otherwise; you won't have the privileges to do that), and make a hard link, defining the destination location and the source location of the link, like this:

Code: Select all

mklink /D  "C:\Users\RandomUserName\Documents\Euro Truck Simulator 2\mod\mod_mandel" "C:\Program Files (x86)\Steam\steamapps\common\Euro Truck Simulator 2\mod_mandel"

By default, every new template will be stored in the base template SII. To store the sign template in your own base, select your mod as a base in the save dialog.

TIP: If you work in a team with multiple people working on signs, it’s best that each team member has his own “modname”, e.g. ProMods uses for instance “mod_scul”, “mod_mandel”, “mod_rtoft”, etc.

All of the above applies for sign projects and boards too.

This is all you need to know to work with the sign editor properly. Have fun!
Last edited by MandelSoft on 24 May 2019 21:31, edited 2 times in total.
Reason: Added the symbolic link tip for better workflow

User avatar
Vøytek
Developer
Posts: 10276
Joined: 05 Jan 2014 19:38
Location: Prague, Czech Republic
Contact:

10 Apr 2016 18:54

I was using it, learning it myself but thanks for explaining it all better! :)
I need a template for 7 cities as far as I remember... But Polish templates are 1-5 (I can try to fit 7 but font is too small then). So i just have to add this file with sign height and width description and then edit it using Sign Editor? The same about City enter/exit that I haven't found for Poland. Only ready models for some cities.
Image
Currently working on: various stuff
#1 forum spammer
Enjoying PM since 1.52
YouTube channel [PL]: http://youtube.pl/vooytek

User avatar
realdeal350
Developer
Posts: 1746
Joined: 09 Feb 2014 02:14

16 Apr 2016 23:53

Awesome work and very helpful MandelSoft :)
Spain developer
Canada developer
Regional Co-ordinator for the Roman region

Languages: English, italiano

grega
Posts: 747
Joined: 03 Jul 2014 17:48
Location: Koper, Primorska region

26 Apr 2016 09:08

I have one problem: I made some new templates in editor and saved them in that special folder as its writen above. In my case i named it mod_balkan. Then i packed it, and I also packed the /base/def/sign. Now the following happens --> If I put only packed mod_balkan into the mod folder it loads into the editor but it says that the def files for those new signs are missing, and all new templates were reseted to the basic empty sign. But if I put the packed DEF, the game crash even before loading into the editor. Ii also tried to merge those 2, but it still doesnt helps.
Any idea what could be wrong?
Follow our Project Balkans news on FB page https://www.facebook.com/ets2balkans
Check my brand new serie on Youtube: https://www.youtube.com/watch?v=Ji5FdxHhEIA&t=584s

User avatar
MandelSoft
Lead Developer
Posts: 3835
Joined: 08 Aug 2013 10:48
Location: Delft [NL]

26 Apr 2016 11:11

Are the files from /mod_balkan packed in the standard def location (/def/sign/)? If not, it will not work.
Your daily dose of wisdom!
╔═══╗────╔═╗╔═╗────╔╗
║╔═╗║────║║╚╝║║────║║
║╚═╝╠═╦══╣╔╗╔╗╠══╦═╝╠══╗
║╔══╣╔╣╔╗║║║║║║╔╗║╔╗║══╣
║║──║║║╚╝║║║║║║╚╝║╚╝╠══║
╚╝──╚╝╚══╩╝╚╝╚╩══╩══╩══╝
Don't ask us for a release date; we don't know either.

grega
Posts: 747
Joined: 03 Jul 2014 17:48
Location: Koper, Primorska region

26 Apr 2016 11:33

So if I understood right, I have to pack mod_balkan. Then put this pack into def/sign and pack again the def/sign? And mod_balkan pack must be in tree structure at the same level as folders template, project and .sii file templates?
Follow our Project Balkans news on FB page https://www.facebook.com/ets2balkans
Check my brand new serie on Youtube: https://www.youtube.com/watch?v=Ji5FdxHhEIA&t=584s



Post Reply

Return to “ProMods Academy”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest