Introduction to skin system

Introduction to skin system

From BeamNG

Related guide: http://wiki.beamng.com/Simple_skin_tutorial

Introduction

What is the Skin System?

The Skin System allows for easy and seamless changes of vehicle textures within the game.

Skintutorial.jpg

How does it work?

We will take a look at how the Ibishu Covet uses this system. This new system is mainly based on this elements:

  • Slot in the main .jbeam file
  • Skin slot in any .jbeam file
  • New material
  • Skin Texture
  • Second UV Map

We will look at each one of these individually now, by creating an example skin for the Covet.


Setting up the workspace

Before starting, we first need to setup our workspace correctly, so that we avoid overwriting any original file.

  • Go to 'Documents/BeamNG.Drive/vehicles' and create a new folder named "hatch". This folder will tell the game that any skin inside this folder should be for the Covet.
  • In the "hatch" folder, create a new folder called "yourskinfolder" (where 'yourskinfolder' is the name of your folder. Name it 'hatchtest' for now). All the textures and files for our custom Covet skin will go inside this folder.


Basics

Main Slot (Official vehicles are already equipped with this)

Official BeamNG.drive vehicles (such as the Covet) are already equipped with this slot, but for modded vehicles you simply need to add this to the "slots" section in the main .jbeam file (usually located at the top of the file):

Code:

   ["paint_design", "", "Paint Design"],

You can check the 'hatch.jbeam' at line 15 for reference. Since the Covet already has the required slot, we can move on to the Skin slot.


Skin Slot

You need a Skin slot for each skin you want to use. A skin slot section looks like this:

Code:

   "hatch_skin_YOURSKIN": {
   "information":{
       "authors":"BeamNG",
       "name":"YOUR SKIN NAME",
       "value":200,
   }
   "slotType" : "paint_design",
   "globalSkin" : "YOURSKIN",
   }

It can be inserted in any .jbeam file, however it is recommended to create a new jbeam file in the skin folder so that the skin isn't broken with updates.

Using notepad++ or a similar text editor, copy the contents of the hatch.jbeam file into a new file called 'hatch_YOURSKIN.jbeam'. This file will be saved into the 'hatchtest' folder we made earlier.

At the end of the file, insert the code segment above (after the other skins), changing YOURSKIN to whatever name that you prefer. "YOUR SKIN NAME" will be what is displayed in the BeamNG skin selection menu, while YOURSKIN will be what the program looks for when using the skin.

You can check the 'hatch.jbeam' line 53 for an example of a skin.


New Material

You will need a new material for each skin, since it will tell the game which textures to use. A new material will look like this:

Code:

   singleton Material("hatch.skin.YOURSKIN")
  {
   mapTo = "hatch.skin.YOURSKIN";
   overlayMap[2] = "vehicles/hatch/hatch_skin_YOURSKIN.dds";
   diffuseMap[2] = "vehicles/hatch/hatch_c.dds";
   specularMap[2] = "vehicles/hatch/hatch_s.dds";
   normalMap[2] = "vehicles/hatch/hatch_n.dds";
   diffuseMap[1] = "vehicles/hatch/hatch_d.dds";
   specularMap[1] = "vehicles/hatch/hatch_s.dds";
   normalMap[1] = "vehicles/hatch/hatch_n.dds";
   diffuseMap[0] = "vehicles/common/null.dds";
   specularMap[0] = "vehicles/common/null.dds";
   normalMap[0] = "vehicles/hatch/hatch_n.dds";
   specularPower[0] = "128";
   pixelSpecular[0] = "1";
   specularPower[1] = "32";
   pixelSpecular[1] = "1";
   specularPower[2] = "128";
   pixelSpecular[2] = "1";
   diffuseColor[0] = "1 1 1 1";
   diffuseColor[1] = "1 1 1 1";
   diffuseColor[2] = "1 1 1 1";
   useAnisotropic[0] = "1";
   useAnisotropic[1] = "1";
   useAnisotropic[2] = "1";
   castShadows = "1";
   translucent = "1";
   translucentBlendOp = "None";
   alphaTest = "0";
   alphaRef = "0";
   dynamicCubemap = true; //cubemap = "BNG_Sky_02_cubemap";
   instanceDiffuse[2] = true;
   materialTag0 = "beamng"; materialTag1 = "vehicle";
   };

Using a text editor again, create a new 'material.cs' file in the 'hatchtest' folder. In this new file, copy and paste the code segment above. When you are finished, 'material.cs' should contain ONLY the code above, so that it doesn't conflict with official updates. Do not include all the materials for the car in your 'material.cs' file.

Change YOURSKIN to the name that you picked earlier, and replace "vehicles/hatch/hatch_skin_YOURSKIN.dds" with "vehicles/hatch/yourskinfolder/hatch_skin_YOURSKIN.dds", where 'yourskinfolder' is the name of the folder for your skin ('hatchtest' in our case).

You can check the 'material.cs' file in the hatch folder at line 38 for reference.

In the 'material.cs' file, the 'material name' should always be like 'vehiclematerial.skin.yourskin'.


Skin Texture

This is simply your modified texture. These textures will be in the DirectDraw Surface (.dds) format, so you can edit them in paint.net. You can also edit them in Photoshop with a plugin. Once you finish modifying the texture, save it in the 'hatchtest' folder.

You can check the 'hatch_skin_xx.dds' files in the hatch folder for reference. For ease of editing, you can overlay the UV map for the vehicle into your image editor to see which textures go to which parts of the car (see point 5).


Second UV Map (Official vehicles are already equipped with this)

Official vehicles are getting a second UV Map. It will:

Make skinning easier Prevent skin mirroring

You can find the UV Textures in the vehicle folder (for example 'hatch_skin_UVs.png') to have a reference when making your skin. The BeamNG devs will soon post all those reference UV here to easy access as well.


Colorable Skins (Advanced)

This part of the guide will cover color-able skins, introduced in version 0.8.0.0.

Colors are controlled using the 'Color-Selectors' in the Vehicle Customization > Color menu.


How does it work?

Similarly to how a basic skin works, but with a few changes and additional files. Here's what changes:

  • Different Material
  • Different Skin Texture
  • Additional ColorMap

We will look at each individually now, by taking as example the 'Custom' skin available for the Sunburst


Material

Code:

   singleton Material("sunburst.skin.custom")
   {
   mapTo = "sunburst.skin.custom";
   colorPaletteMap[2] = "vehicles/sunburst/sunburst_skin_custom_palette_uv1.dds";
   overlayMap[2] = "vehicles/sunburst/sunburst_skin_custom.dds";
   diffuseMap[2] = "vehicles/sunburst/sunburst_c.dds";
   specularMap[2] = "vehicles/sunburst/sunburst_s.dds";
   normalMap[2] = "vehicles/sunburst/sunburst_n.dds";
   diffuseMap[1] = "vehicles/sunburst/sunburst_d.dds";
   specularMap[1] = "vehicles/sunburst/sunburst_s.dds";
   normalMap[1] = "vehicles/sunburst/sunburst_n.dds";
   diffuseMap[0] = "vehicles/common/null.dds";
   specularMap[0] = "vehicles/common/null.dds";
   normalMap[0] = "vehicles/sunburst/sunburst_n.dds";
   specularPower[0] = "128";
   pixelSpecular[0] = "1";
   specularPower[1] = "32";
   pixelSpecular[1] = "1";
   specularPower[2] = "128";
   pixelSpecular[2] = "1";
   diffuseColor[0] = "1 1 1 1";
   diffuseColor[1] = "1 1 1 1";
   diffuseColor[2] = "1 1 1 1";
   useAnisotropic[0] = "1";
   useAnisotropic[1] = "1";
   useAnisotropic[2] = "1";
   castShadows = "1";
   translucent = "1";
   translucentBlendOp = "None";
   alphaTest = "0";
   alphaRef = "0";
   dynamicCubemap = true;
   instanceDiffuse[2] = true;
   materialTag0 = "beamng"; materialTag1 = "vehicle";
   };


In addition here we have colorPaletteMap[2] which defines the ColorMap to be used.

We can also control which UvMap the ColorMap can use, by simply adding _uv0 or _uv1 at the end of the file name.

The rest is pretty much the same as the basic skin.


Skin Texture

This will work slightly different than the basic skin. Here's how the 'sunburst_skin_custom.dds' file looks like:

Skintutorialadv1.jpg

Generally, you want to keep all the parts that you want to be color-able in greyscale, so that the ColorMap can multiply the choosen color without issue.

(If for example, you color your skin Blue, and then choose Yellow in-game, you will get Green).

You can color the part that you do not want to be colored by the ColorMap.


ColorMap

This is a new texture. This is how the 'sunburst_skin_custom_palette_uv1.dds' file looks like:

Skintutorialadv2.jpg

In the Vehicle Customization > Color menu we have 3 color selector. Each one is for a specific color we use.

  • Red - All the parts that should be colored by the first color selector (which is also used for the generic vehicle body color).
  • Green - All the parts that should be colored by the second color selector.
  • Blue - All the parts that should be colored by the third color selector.
  • 100% Trasparent/Alpha - All the parts that should not be colored (therefore use the color you have in your Skin Texture)


( The color intensity can vary. For example, 50% red means that half of the first color-selector color will be multiplied for example )


NOTE : Version 0.8.0.1 has a tiny bug that could cause minor issues if ColorMap uses 100% Alpha and 100% Black is selected in-game. Use an alpha value of 1/255 (1%) for now. Next update should solve this.


Saving the colors for a configuration

In your configuration .json file, simply add these lines:

  {
  "default_color":"Pearl White",
  "default_color_2":"Pearl White",
  "default_color_3":"Pearl White",
  }

This is pretty much self-explanatory. Insert the default color you want to use for each 'color' (between the one available in the main .json file of the vehicle).

If you omit a line, white will be used as default.

If you save a configuration in-game, the colors would be saved directly in the .pc file instead.


Tips and Guidelines for Releasing Skins

To ensure that skin making & distribution works flawlessy for everybody and without any risk of breaking anything, follow these simple guidelines.

Subfolders

As mentioned at the beginning of this guide, this will reduce the risk of overwriting other files. Name your subfolder somewhat unique, so that the risk of another user using the same name is near zero.

If you plan on releasing a skin, you can simply ZIP your skin content and make a folder hierarchy to look like this:

MXHldlP.jpg

This way, you can just drop your skin ZIP in 'Documents/BeamNG.Drive/mods' and it will work flawlessly.

Materials.cs

In the material.cs file, the 'material name' should always be like 'vehilclematerial.skin.yourskin'.


BzlWV2q.jpg

Don't do the common mistake of renaming 'skin' to something else. This is a flag so the game knows this is a skin.