Skip to main content

Heritage & Details Windows

ScaleformUI allows you to replicate the Grand Theft Auto Online character creation menus. This is achieved by combining a UIMenuHeritageWindow (which handles the blending of parent faces) and a UIMenuDetailsWindow (which handles the visual display of the active trait blending percentages).

These "Windows" attach directly to the top of your UIMenu and update dynamically as users adjust sliders or select options in the menu below.

Creating the Windows​

First, define the UIMenuHeritageWindow and the UIMenuDetailsWindow and attach them to your UIMenu.

using ScaleformUI.Menu;

// Create the target menu
UIMenu windowSubmenu = new UIMenu("Character Creator", "Customize your heritage");

// Initialize the Heritage Window (Default Dad Index, Default Mom Index)
UIMenuHeritageWindow heritageWindow = new UIMenuHeritageWindow(0, 0);

// Initialize the Details Window
UIMenuDetailsWindow statsWindow = new UIMenuDetailsWindow(
    "Parents resemblance", // Title
    "Dad:",                // Left Stat Name
    "Mom:",                // Right Stat Name
    true,                  // Has Percentage Wheel?
    new List<UIDetailStat>() // Initial Stats
);

// Add both windows to the Menu
windowSubmenu.AddWindow(heritageWindow);
windowSubmenu.AddWindow(statsWindow);

Linking Menu Items to the Windows​

To make the Heritage window change faces, we need two UIMenuListItems (one for Mom, one for Dad). To make the Details window show the blending percentage, we need a UIMenuSliderItem.

// Define faces (In a real scenario, map these to Ped Face IDs)
List<dynamic> momFaces = new List<dynamic>() { "Hannah", "Audrey", "Jasmine", "Giselle" /* ... */ };
List<dynamic> dadFaces = new List<dynamic>() { "Benjamin", "Daniel", "Joshua", "Noah" /* ... */ };

// Create Items
UIMenuListItem mom = new UIMenuListItem("Mom", momFaces, 0);
UIMenuListItem dad = new UIMenuListItem("Dad", dadFaces, 0);
UIMenuSliderItem blendSlider = new UIMenuSliderItem("Heritage Slider", "Adjust resemblance", 100, 5, 50, true);

windowSubmenu.AddItem(mom);
windowSubmenu.AddItem(dad);
windowSubmenu.AddItem(blendSlider);

// Initialize Default Stats
statsWindow.DetailMid = "Dad: " + blendSlider.Value + "%";
statsWindow.DetailBottom = "Mom: " + (100 - blendSlider.Value) + "%";
statsWindow.DetailStats = new List<UIDetailStat>()
{
    new UIDetailStat(100 - blendSlider.Value, SColor.HUD_Pink),
    new UIDetailStat(blendSlider.Value, SColor.HUD_Freemode),
};

Handling Events & Updating​

Finally, wire up the menu events so the windows update dynamically when the user interacts with the sliders and lists.

int momIndex = 0;
int dadIndex = 0;

// Update Heritage Faces when List changes
windowSubmenu.OnListChange += async (_sender, _listItem, _newIndex) =>
{
    if (_listItem == mom)
    {
        momIndex = _newIndex;
    }
    else if (_listItem == dad)
    {
        dadIndex = _newIndex;
    }
    // Update the Heritage Window visual
    heritageWindow.Index(momIndex, dadIndex);
};

// Update Blend Wheel when Slider changes
windowSubmenu.OnSliderChange += (sender, item, value) =>
{
    statsWindow.DetailStats[0].Percentage = 100 - value;
    statsWindow.DetailStats[0].HudColor = SColor.HUD_Pink;
    
    statsWindow.DetailStats[1].Percentage = value;
    statsWindow.DetailStats[1].HudColor = SColor.HUD_Freemode;

    // Push the new percentages to the scaleform
    statsWindow.UpdateStatsToWheel();
    
    // Update the text labels
    statsWindow.UpdateLabels(
        "Parents resemblance", 
        "Dad: " + value + "%", 
        "Mom: " + (100 - value) + "%"
    );
};