Official 04. VaM2: Style Sheet Tutorial

VaM2: Style Sheets Guide

This guide assumes that you have basic knowledge of Unity and the VaM2 AddonKit.​

Quick Start​

Download the “VaMHuBStyleSheet” Unity package from here and import it into your VaM2AddonKit project.

Assets -> Import Package -> Custom Package

This will add a “VaMDeV” folder into your “UserArea” containing the “StyleSheetTemplate” subfolder. Inside is a scene file that is configured to export a single style sheet named “VaMHuBStyle” by “VaMDeV”. This can be used as a template for creating your own style sheet. If you want an example of exporting multiple style sheets as a single package, refer to the setup of “StyleSheetsAddonDark” within our “VaM2Shared/Addons/StyleSheets” folder in your VaM2AddonKit project.

Copy the folder “StyleSheetTemplate” into your own UserArea folder and rename the copied folder for your style sheet.

Open the “Scene” file inside the “StyleSheetTemplate” folder.

The pipeline is:

• “StyleSheetVaMHuB” contains the style settings.
• “StyleSheetsAddon” connects the style sheet to the VaM2 UI and contains addon metadata.
• “AddonCreator” packages the addon for export into VaM2.

Select “StyleSheetVaMHuB”. This is where you will make all of your style changes.
In the Enhanced Style Sheet component, change the first entry, Uid, to the name of your style sheet. Below Uid, in the section marked “Styles”, each of the listed style inputs corresponds to an element of our “Universal Edit” UI Mode. Changing colors or sprites there will be reflected in the “StyleTest” node in the scene. When you finish making changes, apply them to the Unity prefab.

Select “StyleSheetsAddon”. Under the “Style Sheets Addon (Script)” change the “Display Name” to be the name of your Style Sheet Addon. Apply your changes to the Unity prefab.

Select “AddonCreator” in your scene. Change the “Creator Name” to your name and change the “Addon Name” to the name of your style sheet. Click “Build Addon” and then click “Deploy Addon”.

Congratulations, your new style sheet will now be available in your local VaM2 installation.

Those are the basic steps. Continue to the following sections for detailed information.

Scene Overview​

Open the “VaMHuBStyleSheet” scene file and view the Hierarchy tab.

AddonCreator​

Creates your addon and exports it into your local VaM2 game.
This is where you add your Creator Name, Addon Name, Addon Version, and select your License Type. You can also create multiple asset groups and add a thumbnail for your addon.​

StyleTest​

[/B]Do not edit this node.[/B] It is strictly for viewing your style sheet. To preview your style sheet, assign StyleTest to the “For Node” slot in the Enhanced Style Sheet (Script) of your StyleSheet.​

StyleSheetVaMHuB​

This is where you will be styling the UI. This is the node you will want to use as your template.​

StyleSheetsAddonVaMHuB​

This node places your addon within the proper category and connects your style sheet to the VaM2 UI. Here is where you can change your style sheet’s Display Name.​

StyleSheetVaMHuB​

Note: UI Icons cannot be changed. Animated sprites are currently not supported.

Enhanced Style Sheet (Script)​

The “Enhanced Style Sheet (Script)” component is used to create style sheets for VaM2 modes. This guide will explain the different functions of this script using the example provided in the “VaMHuBStyleSheet” Unity package.​

Uid​

Uid identifies the style sheet. This value appears in the Style Selection menu.

Is Exclusive​

This toggle is enabled by default. When enabled, the style sheet is used exclusively on the targeted UI mode and cannot be combined with other style sheets.​

Required Style Sheet​

If this style sheet depends on another style sheet, assign the required style sheet here.​

Style Sheet Group​

Multiple Style Sheets can be defined as a group. They can be loaded all at once or exclusively depending on how their individual “Is Exclusive” toggles are set.​

Group Setup​

Creating a Style Sheet Group is outside the scope of this tutorial. To create one in Unity:​

• Create a new empty GameObject.
• Add the StyleSheetGroup component to it.
• Optionally, set the uid field in the Inspector to give it a custom identifier.
• Assign this GameObject to the “Style Sheet Group” field of the style sheet's “Enhanced Style Sheet (Script)” component.

Example Hierarchy:​

StyleGroups (Parent)
├── DarkTheme (GameObject with StyleSheetGroup component, uid="DarkTheme")
├── LightTheme (GameObject with StyleSheetGroup component, uid="LightTheme")
└── HighContrast (GameObject with StyleSheetGroup component, uid="HighContrast")

Sort Order​

When multiple Style Sheets affect the same UI elements, Sort Order determines the order in which overlapping style settings are applied. Higher values override lower values.​

For Node​

Assign the StyleTest node to For Node to preview this style sheet in the scene instead of the default style.

When a StyleTest node is assigned, the Style Node Tree loads and its elements can be selected individually.

The Style Node Tree works with the Styles section, which is explained below.​

Copy From​

Assign a Style Sheet node that you wish to duplicate to “Copy From”. Click the “Copy” button to copy that sheet's settings into this one. This is an easy way to create a new Style Sheet for the default VaM2 UI.​

Styles​

​

Allow Add Without Node Selection

Enable this option to add style entries without first selecting a node from StyleTest.

When you select a node from the Style Node Tree, the corresponding style entry is highlighted.

When you add the highlighted style, it is automatically configured and linked to the selected node.

Style Types​

There are four style types. Each style type has the following common settings:​

• Enabled: Determines whether this style entry is active.
• Target Node Path: Set to UI.
• Style Primitive Type: Specifies one of the following UI primitives: “Image”, “Text”, “Selectable”, or “InputField”.
• Style Type: Specifies the particular VaM2 UI element that the style targets, such as “Interactable Modified”, “Panel Large”, or “Scrollbar Handle”.

ImageStyle: UI​

Sprite​

Enable this option to assign a sprite to the UI element. Currently animated sprites are not supported.​

Color​

Sets the base color. Leave this value white if you do not want to tint the sprite.​

Material​

Assigns the selected material to the UI component. This will override the color of a sprite.​

Fill Center​

Fill Center controls whether the center of a sliced image is rendered. When enabled, the center is rendered. When disabled, only the borders are rendered.​

Pixels Per Unit Multiplier​

Enable this option to adjust the pixel density used when rendering sliced sprites. The default value is 1. Change this value to adjust the appearance of the sprite's sliced regions without changing the dimensions of the UI element.​

Padding​

Enable Padding to add padding around the assigned sprite. Padding applies to all sides. Additional padding can be set independently for the top, bottom, left, and right sides.​

TextStyle: UI​

This is where you can assign specific fonts to your style sheet and change how they are displayed.​

SelectableStyle: UI​

Here you can select how the selectable elements of your UI give visual feedback.
You can use either the Color Tint or Sprite Swap transition. Selectable elements include all buttons (interactables) and slider handles.​

Transition​

Enables visual transitions for selectable UI elements. Currently, only “Color Tint” and “Sprite Swap” are functional.
Select “Color Tint” to use the “Color Tint Settings”. Select “Sprite Swap” to use the “Sprite Swap Settings”.​

Color Tint Settings​

Each color setting can be enabled individually. When enabled, the selected color is multiplied by the base image color.
]From top to bottom, the options are:​

• “Normal Color”
• “Highlighted Color”
• “Pressed Color”
• “Selected Color”
• “Disabled Color”

Color Multiplier​

Enabling this allows you to adjust how much the “Color Tint Settings” affect the base image color.​

Sprite Swap Settings​

Enable a sprite swap setting to use the referenced sprite for that state.
From top to bottom, the options are:​

• “Highlighted Sprite”
• “Pressed Sprite”
• “Selected Sprite”
• “Disabled Sprite”

Replacement sprites should match the dimensions of the original sprite.​

InputFieldStyle: UI​

Selection Color​

Sets the highlight color displayed behind selected text.​

StyleSheetsAddon​

This node places your addon within the proper category and connects your style sheet to the VaM2 UI. Here is where you can change your style sheet’s Display Name.
The following sections explain the functions of the attached scripts.

Addon Game Object Controllables Set Container (Script)​

This script manages controllable parameters for dynamically created addon game objects in the VaM2 addon system. It cannot be edited.​

Attachments Controllables Set (Script)​

This script manages addon objects within VaM2. It handles the creation, attachment, and detachment of addon objects in real-time. This does not need to be edited.​

Style Sheets Addon (Script)​

This script manages style sheets for addon objects. This script allows you to set the name of your style sheet, a description and tags.

Display Name​

Enter the name of your style sheet as you want it to be presented within VaM2. This name can be different from what was entered in the Uid of your style sheet.​

Description​

Enter a description of your style sheet. In Beta 1.2, this information is not displayed in-game. However, it is included in the exported metadata for future support.​

Tags​

Add tags for your style sheet. Click the + or - button to add or remove entries. In Beta 1.2, this information is not displayed in-game. However, it is included in the exported metadata for future support.​

Style Sheets​

Assign your style sheet prefab to the field labeled “Element 0”. This links your style sheet with the StyleSheetsAddon node, enabling the AddonCreator to build and deploy your style sheet into the game.​

AddonCreator​

This node contains the settings used to build and deploy your addon. The following sections explain the functions of the attached scripts.

Addon Creator (Script)​

Auto Configure From Objects​

Assign your prefab to “Element 0” then click “Configure”. This will populate “Addon Asset Groups” with the information you entered into your StyleSheetsAddon node.​

Folder​

This is the name of your style sheet’s Unity folder. It will auto-populate when you click the “Configure” button.​

Creator Name​

Enter your name here. Your addon will be listed under your creator name. This field is not configured automatically and must be entered manually.​

Important: If this field is empty, it appears red and the addon cannot be built.

Addon Name​

This is the final display name of your addon.​

Addon Version​

This is where you can set the version number of your addon. By default, it is set to “1.0”.​

License Type​

This is where you set your license type. At the time of publication, VaM Hub accepts only CC-BY assets for distribution.
For more information about licensing, see our License Help page.​

Thumbnail Texture​

This is the thumbnail for your addon package and not for the addon itself. While not displayed in game, it is exported into your deployed addon folder and can be seen there.​

Customize Assets​

Enables editing of the Addon Asset Groups. Be aware that any changes made here are included in the built and deployed addon. They will not be updated in your StyleSheetsAddon node.

Addon Asset Groups​

This list is created after pressing the “Configure” button in the Auto Configure From Objects field. It is populated from the information within the StyleSheetsAddon node.
By default, only the thumbnail option can be changed. To edit these fields, enable “Customize Assets”.​

Important: Pressing “Configure” again will overwrite manual changes made here.

Asset​

This field is populated with your StyleSheetsAddon prefab.​

Thumbnail​

This is where you add the thumbnail for your addon. The thumbnail is displayed in-game.
If the thumbnail file has the same name as the StyleSheetsAddon, the Thumbnail field is populated automatically when you click Configure.​

Display Name​

This is the final name of your addon as it will be displayed in game.​

Description​

This is the final description stored in the addon's metadata file.​

Tags​

These are the final tags stored in the addon's metadata file.​