Issues with Editor Sync and UI

🌵 Needle Engine
1

I got a few small issues with UI and EditorSync:

  • The Y Axis is flipped. Moving an UI Image down moves it up in the build!
  • Exporting an Image with a position other than it’s anchor origin will reset the image to it’s anchor position in the build as soon as it’s moved in the editor. All movement is now relative from this position.
  • Activating and Deactivating Object under a Canvas results in Unknown object xxxxxxxxxxx in browser console and nothings happening. Activating and Deactivating Image Component seems the work though. I’m also seeing no change in the build when setting gameobject.visible via script on these objects.

Tested with Needle Engine 3.5.9-pre.2 and Unity 2021.3.17 as well as Unity 2022.2.18

Original Post on Discord

by user 334342083445784576

2

Hi Podden, thanks for the info. UI is currently in the progress and it hasnt been tested with EditorSync yet. I will add those to our internal issues for testing

3

thanks, but got another one for you that is not Editor Sync related: Object3D variable as issues when a RectTransform is assigned:

@serializable(Object3D)
public testRectTransform?: Object3D = null || undefined;
public testfunc(): void {
  if (this.testRectTransform) {
    //This does not work when this.testRectTransform is a RectTransform
    let test = GameObject.getComponent(this.testRectTransform, GameObject);
    //This does not work either when this.testRectTransform is a RectTransform
    this.testRectTransform.visible = false;
    }
}

by user 334342083445784576

4

Don’t know maybe this is intended? I can’t assign a normal Transform on and Object3D, the Unity Editor is casting this to RectTransform right away.

by user 334342083445784576

5

RectTransforms are a bit special because they ARE a component at runtime and are exported, so you have to write:

@serializable(RectTransform)
public testRectTransform? RectTransform;

// and then
if(this.testRectTransform)
  this.testRectTransform.gameObject.visible = false;
6

if you want the gameObject reference directly then your type in Unity has to be a GameObject (e.g. in C# would be public GameObject testRectTransform;)

7

Is there a difference using RectTransform as a Parameter in a function? This:

public setWelcomeTextRectTransform(newPanel : RectTransform){
       console.log(newPanel);
}

gives me only a weird looking GUID instead of an Object3D or RectTransform. This way, this.newPanel.gameObject is undefined

by user 334342083445784576

8

Okay, just saw using newPanel : Object3Dgives me the same empty GUID object. This only happens on RectTransforms, Normal Transforms getting serialized normally

by user 334342083445784576

9

Can you show your full class?

Did you add @serializable(RectTransform) - if you get the guid it probably means that that is missing

10

I just wrote a test class which I hooked to a UnityEvent on a UI Button. I’ve attached screenshots of the UnityEvent and the console result when clicked on. As you can see, the RectTransform is serialized wrong, the normal transform works as expected. Can I put @serializable on functions as well?

import { Behaviour, RectTransform } from "@needle-tools/engine";
import { Object3D } from "three";

export class NeedleUIManager extends Behaviour {
    public setWelcomeTextRectTransform(newPanel? : RectTransform){
        console.log(newPanel);
    }
    public setWelcomeText(newPanel?: Object3D) {
        console.log(newPanel);
    }
}

image.png
image.png760×229 19.2 KB

image.png
image.png850×127 11.5 KB

by user 334342083445784576

11

So what you can do for serialization is prefixing like this to not generate a method automatically:

 // @nonSerialized
    public setWelcomeTextRectTransform(newPanel?: RectTransform) {
        console.log(newPanel);
    }

and in csharp add this then after the codegen fence:

...
// NEEDLE_CODEGEN_END

namespace Needle.Typescript.GeneratedComponents
{
    public partial class NeedleUIManager : UnityEngine.MonoBehaviour
    {
        public void setWelcomeTextRectTransform(UnityEngine.Transform @newPanel){}
    }
}
12

You find it in the docs here: Needle Engine Scripting | Needle Engine Documentation

13

but ill look into the serialization of RectTransform now

14

I think I found the bug in the runtime deserializer (the resolved value just wasnt used)
image.png

15

updating now :slightly_smiling_face:

by user 334342083445784576

16

Läuft! Thank you

by user 334342083445784576