InkWidgets

Changing and creating the User Interface

Summary

Created: ?? 2024 by Zhincore Last documented update: Mar 1 2025 by Zhincore

Thanks to Codeware we can fully access the game's UI programatically, even create our own. If you're not familiar with InkWidgets, check out the yellow wiki first: Interface definitions: .inkwidget files

Also check out the Codeware wiki for inkwidget scripting examples.

Basics of custom UI

Building custom UI programatically works by instantiating inkWidgets/components, setting their properties and parenting them to something. The following code is an example of flashbanging yourself by adding a rectangle to the in-game HUD. For more examples see the Codeware wiki.

// Create the rectangle
let rectangle = new inkRectangle();
// Make it fill it's parent (screen in our case)
rectangle.SetAnchor(inkEAnchor.Fill);
// Make it fully opaque (default color is white)
rectangle.SetOpacity(1.0);

// Now obtain the HUD layer
let inkSystem = GameInstance.GetInkSystem();
let hudRoot = inkSystem.GetLayer(n"inkHUDLayer").GetVirtualWindow();

// Put the rectangle in the HUD 
rectangle.Reparent(hudRoot, -1);

If you call this code, for example, in the Session/Ready event (Codeware), you'll be welcomed by a bright white screen upon loading a save.

You can also name your ink components using .SetName("name") and the name will appear in RedHotTool's Ink Inspector, which is useful for debugging! RHT also allows you to change ink properties to find what's right for your UI.

For more complex UIs you probably want to build your custom components from the simple ones, refer to the Codeware wiki for more info.

Animating inks

You can have the inkWidgets animate themselves through .PlayAnimation(), there are various predefined animations like scaling, sharing and fading, you can find them in NativeDB. Here is an example on how to make the flashbang more annoying:

let anim = new inkAnimTransparency();
// From 0% transparency
anim.SetStartTransparency(0.0);
// To 100% transparency
anim.SetEndTransparency(1.0);
// Make the animation last 10 seconds
anim.SetDuration(10);

let animDef = new inkAnimDef();
animDef.AddInterpolator(tickAnim);

// Also create options so we can control the animation more
let animOpts: inkAnimOptions;
// Make it loop forever
animOpts.loopInfinite = true;
// And make it reset after each cycle
animOpts.loopType = inkanimLoopType.Cycle;

// Finally, play the animation and hurt my eyes
rectangle.PlayAnimationWithOptions(animDef, animOpts);

You after loading the game with the above code.

Adding character creator options