UI Toolkit at Package Level?

Unity Engine
1

This might be a dumb question, but I’m about to start with UI Toolkit, and I’m adding it to a package, not a project. So I create a new Editor Window, which creates the three files (.cs, .uss and .uxml), and following the tutorial I want to link the USS to my window, which results in “Asset at path {cut-off path} is not a StyleSheet”.

Creating a new USS results in “Could not find a part of the path {cut-off path}” in the console. It seems to me that your tooling is not set up for supporting package-level UI. Is there a workaround or something I’m missing?

2

What is your editor version? I will try it on my side to see if I end up with a similar error

3

I’m on 2021.2.14f.

I played around some more, and when you create a new UXML through the editor, the generated .cs actually loads the style sheet via code. Here, the package file path works. So I’m not sure what the UI Builder is supposed to do actually when you add style sheets there.

4

I am assuming you are doing an editor window but I could be wrong, please let me know if this is the case.

I started testing in 2022.2, and I think someone changed the default example when you do a right click->create->UI toolkit ->editor window.

I think you need an asmdef for editor assemblies in the package (instead of just a folder called editor). Don’t quote me on this, but I have the reflex of creating one anyway before creating the window.

The resulting CreateGUI() does not refer to the style anymore,
7966497--1021479--upload_2022-3-15_16-38-40.png

The resulting UXML does refer to the style :

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd"
>
    <Style src="project://database/Packages/com.test.mypackage/editor/usstest.uss?fileID=7433441132597879392&guid=6f4f2b74561dd414ebd820524047ee96&type=3#usstest" />
    <engine:Label text="Hello World! From UXML" />
    <engine:Label class="custom-label" text="Hello World! With Style" />

</engine:UXML>

And the style from the uss is applied to the third label:
7966497--1021482--upload_2022-3-15_16-41-46.png

So, if I understood your problem correctly, it is not reproducible in 2022.2a8 so far. I didn’t have 2021.2.14 installed so I figured I should start with something I already had on hands.

I will do another pass with the builder later on today if everything goes well.

Can you post the resulting style tag from the uxml you are having issues with? Like this one:
<Style src="project://database/Packages/com.test.mypackage/editor/usstest.uss?fileID=7433441132597879392&guid=6f4f2b74561dd414ebd820524047ee96&type=3#usstest" />

FYI the first part is the asset path that is used by default, and we fall back to the GUI if the asset was moved.

7966497--1021482--upload_2022-3-15_16-41-46.png

5

Yes, it’s an editor window. And the result is functional. It’s just that in the tutorial, it says, quote

In StyleSheet, click Add Existing USS and select DragAndDropWindow.uss

Which doesn’t work for an USS located in a package, but isn’t necessary, because the stylesheet is already assigned through the generated .cs.

I’ll try to add the stylesheet through the markup as you suggested later.

In any case, thanks for your quick help, really appreciated!

6

Just confirmed with the UI builder team that it is not currently working with package path and that they have a task for this, but no ETA for now.

7

Alright, thanks for checking!

8

A workaround is to add it from C#, but that won’t show it in the editor.

Hope they backport the fix if it ever comes -.-

9

Update for this? I would like to refer to a package path when adding a uss file

10

Had this issue too, though with visual tree assets, though found a simple work around that should work with style sheets assets too:

  • Serialize a VisualTreeAsset/StyleSheet field in your editor window
  • Select your script asset, and assign a reference through the default value fields
  • The values will be assigned when the window is open, so you can apply them via C# easily
2 Likes
11

I had a similar problem where I was developing an asset library and then using it as a package within another project. I just check to see if the package’s virtual path is valid using AssetDatabase API and if it is I simply switch the base path. See example below.

Add this script into an Editor folder:

public static class AssetPaths
{
    public static string packageRootDir
    {
        get
        {
            // regular assets path
            string rootDir = "Assets/whatever/";

            // IMPORTANT: this is linked to the "name" property of the package manifest json file
            string packagesDir = "Packages/com.whatever/";

            if (AssetDatabase.IsValidFolder(packagesDir))
                rootDir = packagesDir;

            return rootDir;
        }
    }
}

Then you can use the correct path like so:

protected void CreateGUI()
{
    // build GUI from UXML
    VisualTreeAsset visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>(
        AssetPaths.packageRootDir + "Editor/MyCustomEditorWindow.uxml"
    );
    visualTree.CloneTree(rootVisualElement);

    // add stylesheet
    StyleSheet styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>(
        AssetPaths.packageRootDir + "Editor/MyCustomEditorWindow.uss"
    );
   
    if (styleSheet != null)
        rootVisualElement.styleSheets.Add(styleSheet);
}

This does not affect UIBuilder, you can still use it like normal.

1 Like
12

This Bug is over a year old and still not fixed…
It is really annoying that you cannot use stylesheet files with the ui builder when working in a package…

1 Like
13

It works with the UI builder if you add the style file in the uxml via text editor and with relative path to the uxml.

<ui:UXML ...>
    <Style src="styles.uss" />
    <ui:VisualElement name="root" />
</ui:UXML>

like this when they are in the same folder

2 Likes
14

Is there any ETA on this now? Been 1 1/2 years and with the recommended workflow of using packages this feature is pretty much necessary.

2 Likes
15

I would like to +1 this issue, in our project we are building a framework of packages where each package features its own UI assets; but currently we cannot bring it together in the project due to this issue

16

@mvriel Have you tried my suggestion above? I am able to use the UI Builder to design Editor UI in a package and I can import it just fine in other projects.

17

For some reason, I never got a notification about this… we have since abandoned UI Toolkit because of these issues but I do not recall whether I tried your solution or if there was another issue… I might do a POC with this and see if it could work; but that won’t be soon :smiley:

18

I wonder what people were doing where they couldn’t get it to work.

I’ve been using UI Toolkit for numerous editor tools that I integrated into other projects via the Unity Package Manager and have zero issues doing so. No real workarounds required either.

1 Like
19

Well, for one: trying to use it in an application and not in an editor. And the problem for us was referencing a USS or template from a package in another. We were trying to create a UI Kit as a package that could be used by consuming packages; but -when we tried- you couldn’t link a template in one package to a template or USS in another.

The path format simply doesn’t -or didn’t?- support anything else but relative paths (and since the package folder is outside the asset folder, you couldn’t refer to one in a package)

20

Both the template binding path (src attribute) and the url function for things like style includes support project-wide paths using the standard convention for paths to packages (Packages/<package-identifier>). Both function correctly from my experience.