Create Your Own UI Design

This guide explains how to build your own Character Creator UI design without editing core runtime code.

Goal

Keep runtime logic stable (EquipmentManager, BlendshapeSynchronizer, CharacterPresetManager, BodyPartLengthAdjuster) and swap only the UI layer.

Recommended Architecture

Use the presenter contracts as your integration boundary:

• ICharacterEquipmentPresenter

• ICharacterBodyScalePresenter

• ICharacterBlendshapePresenter

• ICharacterPresetPanelPresenter

• ICharacterPresetGalleryPresenter

Your custom UI should call presenter methods and render presenter data.

Reference:

• Assets/Arawn/CrystalCharacterCreator/Demo/Scripts/CharacterCreatorDemoUI.cs

• Assets/Arawn/CrystalCharacterCreator/Demo/Scripts/CharacterPresetGalleryUI.cs

Option A: Start From Scene Demo Wizard (UGUI)

1. Open Tools/Character Creator/Scene Demo Setup Wizard

2. Assign your Character Root

3. Build the demo UI

4. Duplicate/modify the generated canvas visuals (colors, fonts, layout, panels, prefabs) while keeping component references intact

Use this path when your team wants classic UGUI workflow and prefab-style editing.

Option B: Start From UI Toolkit Template

1. Open Tools/Character Creator/Create UI Toolkit Presenter Template Scene

2. Edit:

   • Assets/Arawn/CrystalCharacterCreator/Demo/UIToolkit/CharacterCreatorUIToolkitPresenterTemplate.uxml

   • Assets/Arawn/CrystalCharacterCreator/Demo/UIToolkit/CharacterCreatorUIToolkitPresenterTemplate.uss

3. Keep the presenter wiring in CharacterCreatorUIToolkitPresenterUIDemo

Use this path when designers want stylesheet-driven iteration and reusable visual trees.

Shared UX Features (No Re-Implementation Needed)

Use CharacterCreatorUiFeatureProfile to keep behavior consistent across UIs:

• body proportions slider order

• thumbnail hover preview on/off

• pinned large preview on/off

• preview popup size and offset

Files:

• Assets/Arawn/CrystalCharacterCreator/Demo/Scripts/CharacterCreatorUiFeatureProfile.cs

• Assets/Arawn/CrystalCharacterCreator/Demo/Scripts/CharacterCreatorUiFeatureModules.cs

By default, scene/template generators auto-create and assign:

• Assets/Arawn/CrystalCharacterCreator/Demo/profile/CharacterCreatorUiFeatureProfile.asset

Building A New Custom UI From Scratch

1. Create your view MonoBehaviour (UGUI or UI Toolkit).

2. Add presenter references (or use CharacterCreatorDemoAPI setters).

3. Pull data from presenters to build rows/cards/sliders.

4. Route user actions back into presenter methods.

5. Rebuild UI when data changes.

6. Reuse shared feature profile for common UX behavior instead of duplicating feature logic.

Team Workflow (Recommended)

• Coder:

  • implements/extends presenter logic

  • keeps runtime integration stable

• Designer/UI engineer:

  • edits UXML/USS or UGUI prefabs/layout

  • does not touch runtime systems

This lets you ship multiple UI themes/templates on one Character Creator backend.

Checklist Before Shipping

• Equip/unequip works across all intended slots

• Body sliders + blendshapes update correctly

• Preset save/load/delete works

• Thumbnail previews behave as expected

• UI remains usable on target resolutions/aspect ratios

• Save/load integration still restores appearance correctly

Related Docs

• Custom UI Integration (Presenters)

• EquipmentManager

• Crystal Save Integration: RememberCharacterPreset