@needle-tools/engine 3.5.5-alpha.1 → 3.5.7-alpha

package/src/engine-components/SyncedRoom.ts

@@ -1,6 +1,7 @@
 import { Behaviour } from "./Component";
 import * as utils from "../engine/engine_utils"
 import { serializable } from "../engine/engine_serialization_decorator";
+import { getParam } from "../engine/engine_utils";
 
 const viewParamName = "view";
 const debug = utils.getParam("debugsyncedroom");
@@ -40,7 +41,9 @@ export class SyncedRoom extends Behaviour {
             this.context.connection.joinRoom(viewId, true);
             return;
         }
-        this.tryJoinRoom();
+        // If setup to join a random room
+        if (this.joinRandomRoom || getParam(this.urlParameterName))
+            this.tryJoinRoom();
     }
 
     onDisable(): void {
@@ -48,6 +51,13 @@ export class SyncedRoom extends Behaviour {
             this.context.connection.leaveRoom(this.roomName);
     }
 
+    /** Will generate a random room name, set it as an URL parameter and attempt to join the room */
+    tryJoinRandomRoom() {
+        this.setRandomRoomUrlParameter();
+        this.tryJoinRoom();
+    }
+
+    /** Try to join the currently set roomName */
     tryJoinRoom(call: number = 0): boolean {
         if (call === undefined) call = 0;
         let hasRoomParameter = false;
@@ -78,12 +88,6 @@ export class SyncedRoom extends Behaviour {
             return false;
         }
 
-        if (!this.roomName || this.roomName.length <= 0) {
-            if (debug)
-                console.error("Missing room name on \"" + this.name + "\". Make sure this is correctly configured in Unity", this.context.connection.isDebugEnabled ? this : "");
-            return false;
-        }
-
         if (!this.context.connection.isConnected) {
             this.context.connection.connect();
         }
@@ -157,8 +161,6 @@ export class SyncedRoom extends Behaviour {
             urlParams.set(viewParamName, this.context.connection.currentRoomViewId);
             return window.location.origin + window.location.pathname + "?" + urlParams.toString();
         }
-
-
         return null;
     }
 }

package/src/engine-components/export/usdz/ThreeUSDZExporter.ts

@@ -661,12 +661,6 @@ function addResources( object, context: USDZExporterContext ) {
 
 			}
 
-			if ( ! ( material.uuid in context.materials ) ) {
-
-				context.materials[ material.uuid ] = material;
-
-			}
-
 		} else {
 
 			console.warn( 'THREE.USDZExporter: Unsupported material type (USDZ only supports MeshStandardMaterial)', name );
@@ -675,6 +669,15 @@ function addResources( object, context: USDZExporterContext ) {
 
 	}
 
+	if( material ) {
+		
+		if ( ! ( material.uuid in context.materials ) ) {
+
+			context.materials[ material.uuid ] = material;
+
+		}
+	}
+
 	for ( const ch of object.children ) {
 
 		addResources( ch, context );

package/src/engine-components/export/usdz/USDZExporter.ts

@@ -15,6 +15,7 @@ import { WebARSessionRoot } from "../../webxr/WebARSessionRoot";
 import { hasProLicense } from "../../../engine/engine_license";
 import { BehaviorExtension } from "./extensions/behavior/Behaviour";
 import { AudioExtension } from "./extensions/behavior/AudioExtension";
+import { TextExtension } from "./extensions/USDZText";
 
 const debug = getParam("debugusdz");
 
@@ -66,7 +67,6 @@ export class USDZExporter extends Behaviour {
     private webARSessionRoot: WebARSessionRoot | undefined;
 
     start() {
-        console.log(this.customUsdzFile);
         if (debug) {
             console.log(this);
             console.log("Debug USDZ, press 't' to export")
@@ -97,6 +97,7 @@ export class USDZExporter extends Behaviour {
         if (this.interactive) {
             this.extensions.push(new BehaviorExtension());
             this.extensions.push(new AudioExtension());
+            this.extensions.push(new TextExtension());
         }
     }
 

package/src/engine-components/export/usdz/extensions/USDZText.ts

@@ -1,5 +1,11 @@
+import { IUSDExporterExtension } from "../Extension";
 import { IBehaviorElement } from "../extensions/behavior/BehavioursBuilder";
-import { USDDocument, USDWriter } from "../ThreeUSDZExporter";
+import { USDDocument, USDObject, USDWriter, USDZExporterContext } from "../ThreeUSDZExporter";
+import { GameObject } from "../../../Component";
+import { Text } from "../../../ui/Text"
+import { RectTransform } from "../../../ui/RectTransform";
+import { Color, Material, Matrix4, MeshStandardMaterial, Object3D, Vector3 } from "three";
+import { TextAnchor } from "../../../ui/Text";
 
 
 export enum TextWrapMode {
@@ -41,6 +47,8 @@ export class USDZText implements IBehaviorElement {
     horizontalAlignment?: HorizontalAlignment;
     verticalAlignment?: VerticalAlignment;
 
+    material?: Material;
+
     setDepth(depth: number): USDZText {
         this.depth = depth;
         return this;
@@ -94,6 +102,10 @@ export class USDZText implements IBehaviorElement {
         if (this.verticalAlignment)
             writer.appendLine(`token verticalAlignment = "${this.verticalAlignment}"`);
 
+        if (this.material !== undefined) {
+            writer.appendLine(`rel material:binding = </Materials/Material_${this.material.id}>`)
+        }
+
         writer.closeBlock();
 
     }
@@ -120,22 +132,98 @@ export class TextBuilder {
         text.height = height;
         text.horizontalAlignment = horizontal;
         text.verticalAlignment = vertical;
-        if (wrapMode)
+        if (wrapMode !== undefined)
             text.wrapMode = wrapMode;
         return text;
     }
 }
 
+const rotateYAxisMatrix = new Matrix4().makeRotationY(Math.PI);
+
+export class TextExtension implements IUSDExporterExtension {
+    get extensionName(): string {
+        return "text";
+    }
+
+    onExportObject(object: Object3D, model: USDObject, _context: USDZExporterContext) {
+
+        const text = GameObject.getComponent(object, Text);
+        if (text) {
+            const rt = GameObject.getComponent(object, RectTransform);
+            let width = 100;
+            let height = 100;
+            if (rt) {
+                width = rt.width;
+                height = rt.height;
+            }
+            const newModel = model.clone();
+            newModel.matrix = rotateYAxisMatrix.clone();
+            const color = new Color().copySRGBToLinear(text.color);
+            newModel.material = new MeshStandardMaterial({ color: color, emissive: color });
+            model.add(newModel);
+
+            // model.matrix.scale(new Vector3(100, 100, 100));
+            newModel.addEventListener("serialize", (writer: USDWriter, _context: USDZExporterContext) => {
+                const textObj = TextBuilder.multiLine(text.text, width, height, HorizontalAlignment.center, VerticalAlignment.bottom, TextWrapMode.flowing);
+                this.setTextAlignment(textObj, text.alignment);
+                this.setOverflow(textObj, text);
+                if (newModel.material)
+                    textObj.material = newModel.material;
+                textObj.pointSize = this.convertToTextSize(text.fontSize);
+                textObj.depth = .001;
+                textObj.writeTo(undefined, writer);
+            });
+        }
+    }
+
+    private convertToTextSize(pixel: number) {
+        return 1 / 0.0502 * 144 * pixel;
+    }
+
+    private setOverflow(textObj: USDZText, text: Text) {
+        if (text.horizontalOverflow) {
+            textObj.wrapMode = TextWrapMode.singleLine;
+        }
+        else {
+            textObj.wrapMode = TextWrapMode.flowing;
+        }
+    }
 
-export class TextExtension {
-    onExportObject(_object, model, _context) {
-        model.addEventListener("serialize", (writer, _context) => {
-            const text = TextBuilder.multiLine("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-                1, 1, HorizontalAlignment.justified, VerticalAlignment.top);
-            text.pointSize = 300;
-            text.depth = .01;
-            text.writeTo(undefined, writer);
-        });
+    private setTextAlignment(text: USDZText, alignment: TextAnchor) {
+        switch (alignment) {
+            case TextAnchor.LowerLeft:
+            case TextAnchor.MiddleLeft:
+            case TextAnchor.UpperLeft:
+                text.horizontalAlignment = HorizontalAlignment.left;
+                break;
+            case TextAnchor.LowerCenter:
+            case TextAnchor.MiddleCenter:
+            case TextAnchor.UpperCenter:
+                text.horizontalAlignment = HorizontalAlignment.center;
+                break;
+            case TextAnchor.LowerRight:
+            case TextAnchor.MiddleRight:
+            case TextAnchor.UpperRight:
+                text.horizontalAlignment = HorizontalAlignment.right;
+                break;
+        }
+        switch (alignment) {
+            case TextAnchor.LowerLeft:
+            case TextAnchor.LowerCenter:
+            case TextAnchor.LowerRight:
+                text.verticalAlignment = VerticalAlignment.bottom;
+                break;
+            case TextAnchor.MiddleLeft:
+            case TextAnchor.MiddleCenter:
+            case TextAnchor.MiddleRight:
+                text.verticalAlignment = VerticalAlignment.middle;
+                break;
+            case TextAnchor.UpperLeft:
+            case TextAnchor.UpperCenter:
+            case TextAnchor.UpperRight:
+                text.verticalAlignment = VerticalAlignment.top;
+                break;
+        }
     }
 }
 

package/src/engine-components/js-extensions/Object3D.ts

@@ -2,7 +2,7 @@ import { applyPrototypeExtensions, registerPrototypeExtensions } from "./Extensi
 import { Object3D } from "three";
 import { Constructor, ConstructorConcrete, IComponent } from "../../engine/engine_types"
 import { IComponent as Component } from "../../engine/engine_types";
-import { addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components";
+import { moveComponentInstance, addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components";
 import { isActiveSelf, setActive, destroy } from "../../engine/engine_gameobject";
 
 // used to decorate cloned object3D objects with the same added components defined above
@@ -24,6 +24,10 @@ Object3D.prototype["destroy"] = function () {
     destroy(this);
 }
 
+Object3D.prototype["addComponent"] = function <T extends IComponent>(instance: T) {
+    return moveComponentInstance(this, instance);
+}
+
 Object3D.prototype["addNewComponent"] = function <T extends Component>(type: ConstructorConcrete<T>) {
     return addNewComponent(this, new type());
 }

package/src/engine-components/ui/Button.ts

@@ -68,6 +68,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
         if (debug)
             console.log("Button Enter", this.animationTriggers?.highlightedTrigger, this.animator);
         this._isHovered = true;
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this.animationTriggers.highlightedTrigger);
         }
@@ -81,6 +82,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
         if (debug)
             console.log("Button Exit", this.animationTriggers?.highlightedTrigger, this.animator);
         this._isHovered = false;
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this.animationTriggers.normalTrigger);
         }
@@ -93,6 +95,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     onPointerDown(_) {
         if (debug)
             console.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this.animationTriggers.pressedTrigger);
         }
@@ -104,6 +107,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     onPointerUp(_) {
         if (debug)
             console.warn("Button Up", this.animationTriggers?.highlightedTrigger, this.animator, this._isHovered);
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this._isHovered ? this.animationTriggers.highlightedTrigger : this.animationTriggers.normalTrigger);
         }
@@ -113,6 +117,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     }
 
     onPointerClick(_args: PointerEventData) {
+        if (!this.interactable) return;
         if (debug) {
             console.warn("Button Click", this.onClick);
             showBalloonMessage("CLICKED button " + this.name + " at " + this.context.time.frameCount);

package/src/engine-components/ui/Canvas.ts

@@ -208,7 +208,7 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onAfterRenderRoutine = () => {
-        if ((this.screenspace || this.renderMode) && this.previousParent && this.context.mainCamera) {
+        if ((this.screenspace || this.renderOnTop) && this.previousParent && this.context.mainCamera) {
             if (this.screenspace) {
                 const camObj = this.context.mainCamera;
                 camObj?.add(this.gameObject);
@@ -293,7 +293,8 @@ export class Canvas extends UIRootComponent implements ICanvas {
         let camera = this.context.mainCameraComponent;
         let planeDistance: number = 10;
         if (camera && camera.nearClipPlane > 0 && camera.farClipPlane > 0) {
-            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .5);
+            // TODO: this is a hack/workaround for event system currently only passing events to the nearest object
+            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .15);
         }
         if (this._renderMode === RenderMode.ScreenSpaceCamera) {
             if (this.worldCamera)

package/src/engine-components/ui/CanvasGroup.ts

@@ -1,8 +1,9 @@
 import { Graphic } from "./Graphic";
 import { FrameEvent } from "../../engine/engine_setup";
 import { Behaviour, GameObject } from "../Component";
-import { ICanvasGroup } from "./Interfaces";
+import { ICanvasGroup, IHasAlphaFactor } from "./Interfaces";
 import { serializable } from "../../engine/engine_serialization_decorator";
+import { BaseUIComponent } from "./BaseUIComponent";
 
 
 export class CanvasGroup extends Behaviour implements ICanvasGroup {
@@ -38,12 +39,12 @@ export class CanvasGroup extends Behaviour implements ICanvasGroup {
         this.applyChangesNow();
     }
 
-    private _buffer : Graphic[] = [];
+    private _buffer: Graphic[] = [];
     private applyChangesNow() {
-        for (const ch of GameObject.getComponentsInChildren(this.gameObject, Graphic, this._buffer)) {
-            const col = ch.color;
-            col.alpha = this._alpha;
-            ch.color = col;
+        for (const ch of GameObject.getComponentsInChildren(this.gameObject, BaseUIComponent, this._buffer)) {
+            const hasAlphaFactor = ch as any as IHasAlphaFactor;
+            if (hasAlphaFactor.setAlphaFactor)
+                hasAlphaFactor.setAlphaFactor(this._alpha);
         }
     }
 }

package/src/engine-components/ui/Graphic.ts

@@ -9,12 +9,12 @@ import { onChange, scheduleAction } from "./Utils"
 import { GameObject } from '../Component';
 import SimpleStateBehavior from "three-mesh-ui/examples/behaviors/states/SimpleStateBehavior"
 import { Outline } from './Outline';
-import { BehaviorExtension, UsdzBehaviour } from '../../engine-components/export/usdz/extensions/behavior/Behaviour';
-import { USDObject } from '../../engine-components/export/usdz/ThreeUSDZExporter';
 
-const _colorStateObject: { backgroundColor: Color, backgroundOpacity: number } = {
+const _colorStateObject: { backgroundColor: Color, backgroundOpacity: number, borderColor: Color, borderOpacity: number } = {
     backgroundColor: new Color(1, 1, 1),
     backgroundOpacity: 1,
+    borderColor: new Color(1, 1, 1),
+    borderOpacity: 1,
 };
 
 export class Graphic extends BaseUIComponent implements IGraphic, IRectTransformChangedReceiver {
@@ -35,10 +35,23 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         this._color.copy(col);
     }
 
+    private _alphaFactor: number = 1;
+    setAlphaFactor(factor: number) {
+        this._alphaFactor = factor;
+        this.onColorChanged();
+    }
+    get alphaFactor() {
+        return this._alphaFactor;
+    }
+
     protected onColorChanged() {
-        _colorStateObject.backgroundColor = this._color;
-        _colorStateObject.backgroundOpacity = this._color.alpha;
-        this.uiObject?.set(_colorStateObject);
+        if (this.uiObject) {
+            _colorStateObject.backgroundColor = this._color;
+            _colorStateObject.backgroundOpacity = this._color.alpha * this._alphaFactor;
+            this.applyEffects(_colorStateObject, this._alphaFactor);
+            this.uiObject.set(_colorStateObject);
+            this.markDirty();
+        }
     }
 
     // used via animations
@@ -52,10 +65,9 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     protected uiObject: ThreeMeshUI.Block | null = null;
     private _color: RGBAColor = null!;
 
-
     private _rect: RectTransform | null = null;
 
-    private _stateManager : SimpleStateBehavior | null = null;
+    private _stateManager: SimpleStateBehavior | null = null;
 
     protected get rectTransform(): RectTransform {
         if (!this._rect) {
@@ -65,7 +77,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     }
 
     onParentRectTransformChanged() {
-        this.uiObject?.set({ width: this.rectTransform.width, height:this.rectTransform.height })
+        this.uiObject?.set({ width: this.rectTransform.width, height: this.rectTransform.height })
         this.markDirty();
     }
 
@@ -73,7 +85,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         super.__internalNewInstanceCreated();
         this._rect = null;
         this.uiObject = null;
-        if(this._color) this._color = this._color.clone();
+        if (this._color) this._color = this._color.clone();
     }
 
     setState(state: string) {
@@ -93,7 +105,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
             // ie : (::firstChild::hover::disabled) where firstchild, hover and disabled are all on different channels
             // In order to keep needle Raycaster and EventSystem intact, I added in v7 a SimpleStateBehavior, which acts as previously
 
-            if( !this._stateManager ) this._stateManager = new SimpleStateBehavior(this.uiObject);
+            if (!this._stateManager) this._stateManager = new SimpleStateBehavior(this.uiObject);
             //@ts-ignore
             this.uiObject.setupState(state.state, state.attributes);
         }
@@ -159,13 +171,13 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     }
     protected onAfterCreated() { }
 
-    private applyEffects(opts){
+    private applyEffects(opts, alpha: number = 1) {
         const outline = this.gameObject?.getComponent(Outline);
         if (outline) {
             if (outline.effectDistance) opts.borderWidth = Math.max(Math.abs(outline.effectDistance.x), Math.abs(outline.effectDistance.y));
             if (outline.effectColor) {
                 opts.borderColor = outline.effectColor;
-                opts.borderOpacity = outline.effectColor.alpha;
+                opts.borderOpacity = outline.effectColor.alpha * alpha;
             }
         }
     }
@@ -177,8 +189,8 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         this.setOptions({ backgroundOpacity: 0 });
         if (tex) {
             // workaround for https://github.com/needle-tools/needle-engine-support/issues/109
-            if(tex.encoding === sRGBEncoding) {
-                if(Graphic.textureCache.has(tex)) {
+            if (tex.encoding === sRGBEncoding) {
+                if (Graphic.textureCache.has(tex)) {
                     tex = Graphic.textureCache.get(tex)!;
                 } else {
                     const clone = tex.clone();

package/src/engine-components/ui/Interfaces.ts

@@ -14,7 +14,11 @@ export interface ICanvasGroup {
     interactable: boolean;
 }
 
-export interface IGraphic extends IComponent {
+export interface IHasAlphaFactor {
+    setAlphaFactor(val: number);
+}
+
+export interface IGraphic extends IComponent, IHasAlphaFactor {
     get isGraphic(): boolean;
     raycastTarget: boolean;
 }

package/src/engine-components/ui/RectTransform.ts

@@ -2,12 +2,11 @@ import * as ThreeMeshUI from 'three-mesh-ui'
 import { BaseUIComponent } from "./BaseUIComponent";
 import { DocumentedOptions as ThreeMeshUIEveryOptions } from "three-mesh-ui/build/types/core/elements/MeshUIBaseElement";
 import { serializable } from "../../engine/engine_serialization_decorator";
-import { Color, Matrix4, Object3D, Quaternion, Vector2, Vector3 } from "three";
-import { EventSystem } from "./EventSystem";
+import { Matrix4, Object3D, Quaternion, Vector2, Vector3 } from "three";
 import { getParam } from "../../engine/engine_utils";
 import { onChange } from "./Utils";
 import { foreachComponentEnumerator } from "../../engine/engine_gameobject";
-import { ICanvas, IRectTransform, IRectTransformChangedReceiver, ILayoutGroup } from "./Interfaces";
+import { ICanvas, IRectTransform, IRectTransformChangedReceiver } from "./Interfaces";
 import { GameObject } from '../Component';
 
 const debug = getParam("debugui");
@@ -43,14 +42,14 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
     get rotation() { return this.gameObject.quaternion; }
     get scale(): Vector3 { return this.gameObject.scale; }
 
-    private _anchoredPosition!: Vector3;
+    private _anchoredPosition!: Vector2;
 
-    @serializable(Vector3)
+    @serializable(Vector2)
     get anchoredPosition() {
-        if (!this._anchoredPosition) this._anchoredPosition = new Vector3();
+        if (!this._anchoredPosition) this._anchoredPosition = new Vector2();
         return this._anchoredPosition;
     }
-    private set anchoredPosition(value: Vector3) {
+    private set anchoredPosition(value: Vector2) {
         this._anchoredPosition = value;
     }
 
@@ -99,17 +98,24 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
     private lastMatrix!: Matrix4;
     private rectBlock!: Object3D;
     private _transformNeedsUpdate: boolean = false;
+    private _initialPosition!: Vector3;
 
     awake() {
         super.awake();
+        // this is required if an animator animated the transform anchoring
+        if (!this._anchoredPosition)
+            this._anchoredPosition = new Vector2();
+
         this.lastMatrix = new Matrix4();
         this.rectBlock = new Object3D();
         // Is this legacy? Not sure if this is still needed
         this.rectBlock.position.z = .1;
         this.rectBlock.name = this.name;
 
-        // this is required if an animator animated the transform anchoring
-        if (!this._anchoredPosition) this._anchoredPosition = new Vector3();
+        // TODO: get rid of the initial position
+        this._initialPosition = this.gameObject.position.clone();
+        this._initialPosition.z = 0;
+        this.onApplyTransform("RectTransform awake");
 
         // TODO: we need to replace this with the watch that e.g. Rigibody is using (or the one in utils?)
         // perhaps we can also just manually check the few properties in the update loops?
@@ -119,20 +125,6 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         onChange(this, "pivot", () => { this.markDirty(); });
         onChange(this, "anchorMin", () => { this.markDirty(); });
         onChange(this, "anchorMax", () => { this.markDirty(); });
-
-        // When exported with an anchored position offset we remove it here 
-        // because it would otherwise be applied twice when the anchoring is animated
-        // Maybe we can get rid of this workaround if we just set the mesh ui position from the
-        // anchored position value but then we would have to make sure if a user/the engine updates
-        // "position" the change would also land in anchoredPosition
-        // Another solution would perhaps be to get rid of the extra "anchoredPosition" vector3 
-        // and instead use the same vector3 instance on both "position" and "anchoredPosition"
-        // But I'm also not sure if this will not cause issues elsewhere later / be confusing?
-        // (that being said we can make anchoredPosition hidden)
-        if (!this.isRoot()) {
-            this.gameObject.position.x += this.anchoredPosition.x;
-            this.gameObject.position.y -= this.anchoredPosition.y;
-        }
     }
 
     onEnable() {
@@ -155,7 +147,7 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
     }
 
     get isDirty() {
-        if(!this._transformNeedsUpdate) this._transformNeedsUpdate = !this.lastMatrix.equals(this.gameObject.matrix);
+        if (!this._transformNeedsUpdate) this._transformNeedsUpdate = !this.lastMatrix.equals(this.gameObject.matrix);
         return this._transformNeedsUpdate;
     }
 
@@ -199,7 +191,6 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         else
             this._parentRectTransform = undefined;
         this._transformNeedsUpdate = false;
-        this.lastMatrix.copy(this.gameObject.matrix);
 
         if (debugLayout) console.warn("RectTransform → ApplyTransform", this.name + " because " + reason);
 
@@ -223,7 +214,8 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
             tempVec.set(0, 0, 0);
             this.applyAnchoring(tempVec);
             tempVec.z += this.offset;
-            tempVec.z -= this.gameObject.position.z;
+            // tempVec.z -= this.gameObject.position.z;
+
             tempMatrix.identity();
             tempMatrix.setPosition(tempVec.x, tempVec.y, tempVec.z);
             uiobject.matrix.premultiply(tempMatrix);
@@ -236,6 +228,8 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
             if (!canvas.screenspace) uiobject.rotation.y = Math.PI;
         }
 
+        this.lastMatrix.copy(this.gameObject.matrix);
+
         // iterate other components on this object that might need to know about the transform change
         // e.g. Graphic components should update their width and height
         const includeChildren = true;
@@ -259,10 +253,20 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
     //     }
     // }
 
+    private _lastAnchoring!: Vector2;
+
     /** applies the position offset to the passed in vector */
     private applyAnchoring(pos: Vector3) {
-        pos.x += this.anchoredPosition.x;
-        pos.y += this.anchoredPosition.y;
+
+        if (!this._lastAnchoring) this._lastAnchoring = new Vector2();
+        const diff = this._lastAnchoring.sub(this._anchoredPosition)
+        this.gameObject.position.x += diff.x;
+        this.gameObject.position.y += diff.y;
+        this._lastAnchoring.copy(this._anchoredPosition);
+
+        pos.x += (this._initialPosition.x - this.gameObject.position.x);
+        pos.y += (this._initialPosition.y - this.gameObject.position.y);
+        pos.z += (this._initialPosition.z - this.gameObject.position.z);
 
         const parent = this._parentRectTransform;
         if (parent) {

package/src/engine-components/ui/Text.ts

@@ -6,7 +6,7 @@ import { updateRenderSettings } from './Utils';
 import { Canvas } from './Canvas';
 import { serializable } from '../../engine/engine_serialization_decorator';
 import { getParam, resolveUrl } from '../../engine/engine_utils';
-import { ICanvas } from './Interfaces';
+import { ICanvas, IHasAlphaFactor } from './Interfaces';
 
 const debug = getParam("debugtext");
 
@@ -38,7 +38,7 @@ export enum FontStyle {
     BoldAndItalic = 3,
 }
 
-export class Text extends Graphic {
+export class Text extends Graphic implements IHasAlphaFactor {
 
     @serializable()
     alignment: TextAnchor = TextAnchor.UpperLeft;
@@ -55,6 +55,13 @@ export class Text extends Graphic {
     @serializable()
     fontStyle: FontStyle = FontStyle.Normal;
 
+    // private _alphaFactor : number = 1;
+    setAlphaFactor(factor: number): void {
+        super.setAlphaFactor(factor);
+        this.uiObject?.set({ fontOpacity: this.color.alpha * this.alphaFactor });
+        this.markDirty();
+    }
+
     @serializable()
     get text(): string {
         return this._text;
@@ -78,11 +85,9 @@ export class Text extends Graphic {
     }
 
     set fontSize(val: number) {
-
         // Setting that kind of property in a parent, would cascade to each 'non-overrided' children.
         this._fontSize = val;
         this.uiObject?.set({ fontSize: val });
-
     }