Skinning System - Grim-/Talented GitHub Wiki

Tree UI Customization

The talent tree's visual appearance is highly customizable through the UpgradeTreeSkinDef. Every aspect of the UI can be modified or replaced, from textures to colors and spacing. The system includes fallback mechanisms that will automatically use default assets if custom elements are missing or incorrectly configured.

Background Configuration

The tree background can be customized with both textures and colors:

<backgroundTexturePath>UI/MyCustomBackground</backgroundTexturePath>
<backgroundColor>(0.2, 0.2, 0.2)</backgroundColor>

If the custom background texture fails to load, the system will use the default texture at "UI/Tree/defaultbackground". Node Appearance

Nodes can be customized with different textures and sizing properties:

<nodeTexturePath>UI/MyCustomNode</nodeTexturePath>
<nodeSize>60</nodeSize>
<nodeSpacing>10</nodeSpacing>

The system will fall back to "UI/Tree/defaultnode" if the custom node texture is missing or invalid.

Connections Connection lines between nodes are fully customizable:

<connectionTexturePath>UI/MyCustomConnection</connectionTexturePath>
<connectionThickness>1.5</connectionThickness>
<showConnectionArrows>true</showConnectionArrows>
<arrowSize>10</arrowSize>
<connectionLinkSize>20</connectionLinkSize>

The default connection texture at "UI/Tree/defaultconnection" serves as a fallback.

Color Schemes The system supports comprehensive color customization for nodes and connections: Node States:

<unlockedNodeColor>(0.2, 0.8, 0.2)</unlockedNodeColor>
<availableNodeColor>(0.5, 0.5, 0.5)</availableNodeColor>
<lockedNodeColor>(1.0, 0.0, 0.0)</lockedNodeColor>

Path Colors:

<pathSelectedColor>(1.0, 1.0, 0.0)</pathSelectedColor>
<pathExcludedColor>(1.0, 0.0, 0.0)</pathExcludedColor>
<pathAvailableColor>(1.0, 1.0, 1.0)</pathAvailableColor>

Connection States:

<unlockedConnectionColor>(0.2, 0.8, 0.2, 0.8)</unlockedConnectionColor>
<activeConnectionColor>(0.8, 0.8, 0.2, 0.6)</activeConnectionColor>
<inactiveConnectionColor>(0.5, 0.5, 0.5, 0.3)</inactiveConnectionColor>

Text Configuration Label appearance and positioning can be adjusted:

<labelOffset>5</labelOffset>
<pathLabelOffset>25</pathLabelOffset>
<labelFont>Small</labelFont>
<labelColor>(1.0, 1.0, 1.0)</labelColor>

Toolbar Configuration The toolbar height can be customized:

<toolbarHeight>80</toolbarHeight>

Window Configuration General window properties:

<windowMargin>0</windowMargin>

Example Configuration Here's a complete example of a custom skin definition:

<Talented.UpgradeTreeSkinDef>
<defName>MyCustomSkin</defName>
<backgroundTexturePath>UI/MyCustomBackground</backgroundTexturePath>
<backgroundColor>(0.1, 0.1, 0.1)</backgroundColor>
<nodeTexturePath>UI/MyCustomNode</nodeTexturePath>
<nodeSize>65</nodeSize>
<nodeSpacing>12</nodeSpacing>
<connectionTexturePath>UI/MyCustomConnection</connectionTexturePath>
<connectionThickness>2.0</connectionThickness>
<showConnectionArrows>true</showConnectionArrows>
<unlockedNodeColor>(0.3, 0.9, 0.3)</unlockedNodeColor>
<labelFont>Medium</labelFont>
<toolbarHeight>90</toolbarHeight>
</Talented.UpgradeTreeSkinDef>
⚠️ **GitHub.com Fallback** ⚠️