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.
Code:
Assets -> Import Package -> Custom PackageThis 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.
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
Do not edit this node. 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
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:
Code:
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.
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”.
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.
Last edited:
