Difference between revisions of "License plate tutorial"

Revision as of 09:21, 7 September 2016

This tutorial will show you how to create proper license plates for BeamNG.drive. (From version 0.5.6.0 and above)

Requirements

For this tutorial you just require an image editing tool and a text editor. We'll use GIMP and notepad++ for this tutorial.

You can either use this file ( File:License plate template mod.zip ) or make everything from scratch to create your mod. The tempate contains a working license plate mod which you can modify as much as you like.

If you're using it you can skip the part Prepare the folder structure of this tutorial. Just drop it into the mods folder and unpack it via the mod manager within the game.

Introduction

For a proper license plate mod it's necessary to have at least three files - a jbeam file, a json file and one texture file.

The jbeam file contains all relevant information about your license plate mod and indicates the file path of the corresponding json file.

Whereas the json file is implicates the pathes for all textures files you're going to use in your personal license plate mod.

Furthermore you need to have at least a background texture for your license plate.

Creating a license plate mod

Prepare the folder structure

Go to the following folder C:/Users/%USERNAME%/Documents/BeamNG.drive/mods/unpacked and create several folders to match up the corrsponding file path for license plates.

In the end you should have a file path like this: C:/Users/%USERNAME%/Documents/BeamNG.drive/mods/unpacked/username_mod/vehicles/common/licenseplates/username_license_plate/

Change the bold part of the path to whatever you would like to have. But please make sure that you're using unique names to prevent problems with other user's or original content. (e.g. 'California plate' is not a proper name)

username_mod equals the zip file name of your mod, hence it will be the name which is displayed in the mod manager within the game.

Creating the texture

Open up GIMP or any other image editing application.

We are going to create the background for the license plate now. The texture for the background has a resolution of 512px x 256px - please keep this resolution.

Use this template file ( File:License plate texture template.zip ) to create your own personal background for the license plate. Keep in mind to create one without the text on it. Text will be generated in another place and will be blended in the background texture.

Once it's done, export your file as a png in the folder you created before and give it a unique name as well.

Create the json file

After finishing the texture, we'll create the json file to create the connection between the license plate and the texture.

{
      "name" : "username_license_plate",
        "version" : 1,
        "data" : {
            "size" : {"x" : 512, "y": 256},
            "text" : { "x" : 0.5, "y" : 0.65, "scale" : 1, "color" : "rgb(187, 61, 0)", "limit" : 8},
            "generator" : "vehicles/common/licenseplates/default/licenseplate-default.html",
            "characterLayout" : "vehicles/common/licenseplates/default/platefont.json",
            "diffuse" : {
                "spriteImg" : "vehicles/common/licenseplates/default/platefont_d.png",
                "backgroundImg" : "vehicles/common/licenseplates/user_license_plate/user_license_plate_background_d.png",
                "fillStyle" : "black"
            },

            "bump" : {
                "spriteImg" : "vehicles/common/licenseplates/default/platefont_n.png",
                "backgroundImg" : "vehicles/common/licenseplates/default/licenseplate-default_n.png",
                "fillStyle" : "rgb(0,0,255)"
            },

            "specular" : {
                "spriteImg" : "vehicles/common/licenseplates/default/platefont_s.png",
                "fillStyle" : "rgb(233,233,233)"
            }
        }
}

Hereafter the things you need to modify in your file.

• name: Can be whatever you want.
• data section:
  • text: Defines the appearance of the text. Change the values for x and y to position the text. Modify the scale factor to scale it and alter the rbg value of color to change the color of the text. limit defines the maximum characters that will appear on your license plate.
  • generator: You can define the appearance of your license plate by creating your own html for it and link it here. If you leave this free, the default html will be used.
  • characterLayout: Here you can link the json file, which is handling your license plate font. Leave it blank to use the default one.
  • diffuse / bump / specular: Hereafter you have to define where the different texture files are stored. You can use up to three different map types - diffuse-, bump- and/or specular-maps.
    • spriteImg / backgroundImg: Determines which texture will be used for the text (spriteImg) and the background (backgroundImg).
    • fillStyle: This defines which color will be used as long as no spriteImg / backgroundImg file is defined. This can be either a predefines HTML color (e.g.: black, white, ..) or a rbg value.

Hint: If you've created your own map mod you can create your own default license plate for this mod. All you have to do is to set the name of your license plate folder to the same as the map and rename one of your json files to licensePlate-default.json. Make sure that the path within your files match up the new one.

Create the jbeam file

{
    "USERNAME_license_plate_2_1": {
    "information":{
        "authors":"BeamNG",
        "name":"License Plate Mod",
        "value":50
    },
    "slotType" : "licenseplate_design_2_1",
    "licenseplate_path" : "vehicles/common/licenseplates/user_license_plate/user_license_plate.json"
    }
}

• Change the part name: First of all change the part name in line 2 to something unique.
• Modify the information section
  • authors: Type in the author's name
  • name: Type in the name of your license plate. This name will appear within the part selector menu within the game.
• slotType: The slot type must be 'licenseplate_design_2_1'. This is the slot name in the root jbeam file of the vehicle. The extension '_2_1' indicates the ratio of the license plate. We'll add more license plates in a prospective update to match up various types of shapes.
• licenseplate_path: Shows the path of the corresponding json file. Enter the path of your json file here.

After finishing all the steps, test your mod within the game.

Open up the part selector menu and check if your mod appears.

DONE! If everything is working properly you can zip your mod using the mod manager of the game and upload your mod to the repo -> Uploading Mods

Additional opportunities (version 0.6.0 and above)

Modified font style

Since version 0.6.0 you can create your own platefont.json file which is managing the characters for your own font. Just copy/paste the default one, rename it and modify it.

The most important part of the file is the chars list. Here you can define the different characters of your font and where they're located on your texture.

  "chars": {
    "count": "64",
    "char":
      {
        "id": "45",
        "x": "0",
        "y": "0",
        "width": "56",
        "height": "115",
        "xoffset": "0",
        "yoffset": "0",
        "xadvance": "56",
        "page": "0",
        "chnl": "15"
      },
   }

• count: States how many characters your custom font is containing.

• id: Stands for the decimal value of the character in the ASCII table. To find out which character has which value check this link.
• x / y: Defines the entry point for the character.
• width / height: Defines how many pixels the character embraces.