Skia Template Reference

This page lists the fields supported by license plate Skia templates. You do not need to memorize it to make a simple plate. Use it when you want to check a field name or build a more detailed layout.

File Shape

A license plate template is a JSON file, usually named like this:

licensePlate-default.sktemplate.json
my_license_plate.sktemplate.json

The common top-level shape is:

{
  "name": "my_license_plate",
  "version": 3,
  "type": "licenseplate",
  "vars": {},
  "format": {
    "30-15": {
      "size": [512, 256],
      "background": "vehicles/common/licenseplates/my_license_plate/my_license_plate_background_d.png",
      "root": { "children": [] }
    }
  }
}

Top-Level Fields

Variables

vars.plate controls generated plate text:

Other variables can use preset:

"vars": {
  "stickerColor": {
    "preset": ["#2b6cff", "#24a148", "#f1c21b"]
  }
}

The selected preset stays stable for the same plate text.

Format Fields

Each format entry describes one physical plate size and its layout.

finish supports:

Node Types

A node can be a group, text, box, image, svg, or path.

{
  "type": "text",
  "name": "plate",
  "text": "{plate}",
  "font": "plate",
  "fontSize": 92,
  "color": "#000000",
  "style": { "width": "90%", "height": 100 }
}

type can be omitted in simple cases. The renderer can infer a text node from text, an image node from src, a path node from path, and a box node from color or gradient.

Common Node Fields

Text Nodes

Box Nodes

Image, Svg, And Path Nodes

Prefer PNG or WebP images for plate artwork.

Layout Style

style uses flexbox-style layout properties. Numbers are pixels unless the value is a percent string such as "50%".

Direction and alignment:

• flexDirection: row, row-reverse, column, column-reverse.
• justifyContent: flex-start, center, flex-end, space-between, space-around, space-evenly.
• alignItems, alignSelf, alignContent: auto, flex-start, center, flex-end, stretch, baseline, space-between, space-around.
• flexWrap: nowrap, wrap, wrap-reverse.

Sizing:

• width, height.
• minWidth, minHeight.
• maxWidth, maxHeight.
• flex, flexGrow, flexShrink, flexBasis, aspectRatio.

Position and spacing:

• position: relative, absolute, or static.
• left, right, top, bottom, start, end.
• margin, marginLeft, marginRight, marginTop, marginBottom, marginStart, marginEnd, marginHorizontal, marginVertical.
• padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingStart, paddingEnd, paddingHorizontal, paddingVertical.
• border, borderLeft, borderRight, borderTop, borderBottom, borderStart, borderEnd, borderHorizontal, borderVertical.
• gap, rowGap, columnGap.

Other layout fields:

• display: flex or none.
• overflow: visible, hidden, or scroll.

Transforms

Transforms are visual only. They do not change layout.

"transform": {
  "rotate": 5,
  "scaleX": 0.95,
  "scaleY": 1.0,
  "translateX": 0,
  "translateY": 2
}

Supported fields are rotate, scaleX, scaleY, translateX, and translateY.

Gradients

A gradient needs at least two color stops:

"gradient": {
  "angle": 90,
  "stops": [
    { "offset": 0.0, "color": "#ffffff" },
    { "offset": 1.0, "color": "#cccccc" }
  ]
}

Use "radial": true for a radial gradient.

Shadows

"shadow": {
  "color": "#00000080",
  "blur": 6,
  "dx": 0,
  "dy": 2
}

A shadow is drawn under the node content.

Blend Modes

Supported blend modes are:

• multiply
• screen
• overlay
• darken
• lighten
• add or plus
• src-in
• src-atop
• destination-in or dst-in
• destination-out or dst-out
• xor

If blendMode is missing or unknown, the node uses normal source-over painting.

Colors

Supported color formats include:

• #rgb
• #rrggbb
• #rrggbbaa
• rgb(r,g,b)
• rgb(r,g,b,a)
• white, black, red, green, blue, yellow, gray, grey, transparent

Fonts

You can draw text in three ways:

• Use a built-in atlas font name, such as plate.
• Point font to a vector font file.
• Point font to a BMFont JSON layout and set fontAtlas to the matching atlas image.

For a custom plate font, create or copy a platefont.json file and make sure it matches your atlas image. You can start from this plate font template .

The important part of a BMFont file is the chars list. Each character points to a rectangle in the atlas.

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

• id is the character code.
• x and y are the top-left pixel position in the atlas.
• width and height are the size of the glyph in the atlas.
• xoffset, yoffset, and xadvance control placement and spacing.

Adding A New Plate Format

A new physical plate format needs more than a template. You need a new mesh, material, and fallback license plate files.

Put the shared files in a folder like:

/vehicles/common/licenseplates/%NEW_FORMAT%/

or, for a map-specific default:

/vehicles/common/licenseplates/%NEW_MAP%/

The material name should follow this convention:

licenseplate-WIDTH-HEIGHT

Use the width and height in centimetres. Add a one or two letter country code only when a similar format already exists and needs a separate material.

You also need a default styling so maps or designs that do not define your new format still show a plate instead of a missing texture. The fallback template path should be:

/vehicles/common/licenseplates/default/licensePlate-default-%NEW_FORMAT%.sktemplate.json