Guide to creating custom UI's

Intro

This guide will go over the basics to creating a UI within Pathfinder: Wrath of the Righteous. This method can be used in Kingmaker as well though there are minor differences. It will detail on how to use Unity to layout the UI and how to reuse parts of the UI in game. A custom UI is usually a mixture of both.

Basics of UI in Unity

In Unity's UI everything revolves around RectTransforms and Components. Transforms generally have parent and children transforms. Transforms can be thought of as a canvas where you will draw your elements such as buttons, text, etc. Components are scripts that tell the transform how to act such as filling the transform with content, dictating layouts, etc. This tutorial will go over the basics on how to create a simple UI in WotR. More advanced tutorials on how Unity UIs function can be found elsewhere. Unity 2020.3.33.f1 is required for this tutorial (2019.4.26f1 assets will still work it seems but is best to use what the engine is based on), along with a CSharp IDE like Visual Studio.

Unity Editor

1. Create a new unity project, ensure that it is set to 2020.3.33.f1.
2. In the bottom right there is the Project window that shows the different folders.
3. There should be a folder labeled Assets, right click :: Create :: Folder :: Name it Scripts
4. Right click Scripts :: Create :: Folder :: Name it Editor
5. Right click Editor :: Create :: C# Script :: Name it CreateAssetBundles (this name is arbitrary, it can be named anything.)
6. Copy the following code into the C# script that was just created. This will add to the editor a way to create AssetBundles that can be imported into the game. AssetBundles will hold your prefabs, sprites, etc. The menu item Build AssetBundles has been added to the Assets menu.

using System.IO;
using UnityEditor;
using UnityEngine;

public class CreateAssetBundles : MonoBehaviour
{
    [MenuItem("Assets/Build AssetBundles")]
    static void BuildAllAssetBundles()
    {
        string assetBundleDirectory = "Assets/AssetBundles";
        if (!Directory.Exists(assetBundleDirectory))
        {
            Directory.CreateDirectory(assetBundleDirectory);
        }
        BuildPipeline.BuildAssetBundles(assetBundleDirectory,
                                        BuildAssetBundleOptions.None,
                                        BuildTarget.StandaloneWindows);
    }
}

7. That concludes setting up the editor.

Creating the UI

1. In the Hierarchy window right click on SampleScene :: Game Object :: UI :: Canvas :: Name it, for this tutorial it will be TutorialCanvas

This will create a new canvas that we will be working on. This canvas is sacrificial as it wont be needed in the game but is needed in the editor to view the layout of the UI.

2. Click 2D button in the scene tab, this will make it easier to view your UI. Double clicking anything in the Hierarchy view will zoom in on that object. This will be handy when designing the UI. Double click TutorialCanvas now.
3. Right click TutorialCanvas :: Create Empty :: Name It, for this tutorial WeaponWindow

On the right side in the inspector you should see an object with only a RectTransform in it. Set the size to 500 x 500, this will be the size of the window. This object will the root of our new UI, we will have to attach this object to a parent object in the game during runtime. This will be explained in detail later. From here on out how the UI is designed is subjective to the desired result along with how the designer prefers to organize things.

4. On WeaponWindow in the Hierarchy, create empty, name it Background.
5. This will be the background for our window.

It is desired in this project to have a background for our window. Having a background is not required. You can either use assets from the game during runtime or add your own.

6. I will be using a place holder image for the back ground to demonstrate how to reuse assets in game.
7. In unity under Assets create a folder named Sprites.
8. Drag and Drop your background image to the folder.
9. In order to use the image it needs to be converted to a sprite.
10. Click the image and on the right it should show the properties in the inspector window.
11. Under texture type dropdown, select sprite (2d and UI), click Apply
12. Ensure that Background is selected in the Hierarchy view. Click Add Component :: Image, creating a new image component
13. Drag the sprite to the Image component in the inspector. There will be a field that says source image. Leave the color as White.

You will notice that the layout is not correct, it may be scaled incorrectly, hanging off the edge of the canvas, etc. This is normal.

14. We want the top of the image to meet with the top of our window so pivot points need adjusting. Ensure background is selected, in the top left of the RectTransform inspector you will see a box with lines in it, and words that may say top center, center center, etc. Click on that box, hold alt and shift to move the anchor, pivot, and position to the top center.
15. To fix the scaling of the image, you can manually set it, or use the component content size fitter and select preferred height/width for a 100% scale.
16. On WeaponWindow add component :: Rect Mask 2D, this will only allow you to see what is in this parent object. Any overflow of the sprites should be hidden now.
17. Next we are going to add an image we created ourselves, along with some text. Add any png to the sprites folder and convert to sprite as above.
18. To set up for the next steps, we are going to use a layout group to organize our image and text. Add the vertical layout group to foreground.
19. Next we will add a button and text transform, right click foreground :: UI :: Button and foreground :: UI :: Text
20. Add a Vertical Layout Group to Foreground to arrange things neatly, for this project unclick all the option in they inspector for the layout group.
21. From here on out I am not going to go into layout design in Unity anymore, refer to the huge amount of tutorials out there. You should have a workable UI by this point.
22. Make a folder for prefabs in the Assets folder as you did with scripts, and sprites.
23. In the Hierarchy, click on the name TutorialCanvas and drag it to the prefab folder. You have just made your first prefab. Do note if you want to make changes to the prefab right click on TutorialCanvas and unpack prefab completely.
24. Now we will pack the prefab in to an AssetBundle. Click on the prefab file, and in the bottom right hand side of the screen you should see a little box "Asset Labels". Click on the drop down next to AssetBundle, select new, and type in your label. This tutorial is using TutorialCanvas.
25. Click Assets :: Build AssetBundles. You should now see a folder label as such in your Assets folder.
26. We are done with Unity.
27. Ensure that you copy AssetBundles, AssetBundles.manifest, tutorialcanvas, tutorialcanvase.manifest to your mod folder.

Reusing In Game Assets (using Data Viewer)

1. We are going to reuse the combat log background as our own background.
2. In Data Viewer click on the static canvas button.
3. At the very top of the list you will see a blue entry that says component_0, expand that.
4. This lists the different static canvases(RectTransforms) in the game, expand where it says HUDLayout.
5. You should notice that CombatLog_New is right on top, keep expanding each level till you get to background_image.
6. On Background_Image, scroll down till you get to where it says gameObject : GameObject and expand that.
7. These are the components for the background_image transform. There should be three RectTransform, CanvasRenderer, and Image. Image is what we are after.
8. Take note of each child that you have expanded to get to the Image. So in this instance it would be HUDLayout/CombatLog_New/Background/Background_Image. This is where that image component is located, you will need this path later during the coding portion.

You would use this same method for reusing any assets. This could save you time and effort later on, such as reusing Owlcats scrollbars, their fonts from TextMeshPro, etc.

Coding

Here is the link to my GitHub that will contain the code for this tutorial. It is commented to try and explain what is going on and you should reference it from here.