@lightningjs/renderer 2.1.2 → 2.3.0

package/README.md

@@ -1,7 +1,4 @@
-# Lightning 3 Renderer (Beta)
-
-**Warning: This is beta software and all of the exposed APIs are subject to
-breaking changes**
+# Lightning 3 Renderer
 
 A powerful 2D scene renderer designed for rendering highly performant user
 interfaces on web browsers running on embedded devices using WebGL.

package/dist/exports/core-api.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Lightning 3 Renderer Core API
+ *
+ * @remarks
+ * ```
+ * import * from '@lightning/renderer/core';
+ * ```
+ *
+ * The Core API is used by developers to extend the capabilities of the Renderer
+ * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
+ * etc.
+ *
+ * Custom capabilities as well as fonts can be loaded via Core Extensions.
+ *
+ * A core extension module is structured like so:
+ * ```ts
+ * import {
+ *   CoreExtension,
+ *   WebTrFontFace,
+ *   SdfTrFontFace,
+ *   type Stage
+ * } from '@lightning/renderer/core';
+ *
+ * export default class MyCoreExtension extends CoreExtension {
+ *   async run(stage: Stage) {
+ *     stage.fontManager.addFontFace(
+ *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
+ *     );
+ *
+ *     stage.fontManager.addFontFace(
+ *       new SdfTrFontFace(
+ *         'Ubuntu',
+ *         {},
+ *         'msdf',
+ *         stage,
+ *         '/fonts/Ubuntu-Regular.msdf.png',
+ *         '/fonts/Ubuntu-Regular.msdf.json',
+ *       ),
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * And then imported and registered in the application's entry point
+ * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
+ * ```ts
+ * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
+ *
+ * // Set up driver, etc.
+ *
+ * // Initialize the Renderer
+ * const renderer = new RendererMain(
+ *   {
+ *     // Other Renderer Config...
+ *     coreExtensionModule: coreExtensionModuleUrl,
+ *   },
+ *   'app',
+ *   driver,
+ * );
+ * ```
+ *
+ * @module
+ */
+export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
+export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
+export * from '../src/core/textures/Texture.js';
+export * from '../src/core/text-rendering/renderers/TextRenderer.js';
+export * from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
+export * from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
+export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
+export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
+export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';
+export * from '../src/core/CoreExtension.js';
+export type * from '../src/core/Stage.js';

package/dist/exports/core-api.js

@@ -0,0 +1,96 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Lightning 3 Renderer Core API
+ *
+ * @remarks
+ * ```
+ * import * from '@lightning/renderer/core';
+ * ```
+ *
+ * The Core API is used by developers to extend the capabilities of the Renderer
+ * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
+ * etc.
+ *
+ * Custom capabilities as well as fonts can be loaded via Core Extensions.
+ *
+ * A core extension module is structured like so:
+ * ```ts
+ * import {
+ *   CoreExtension,
+ *   WebTrFontFace,
+ *   SdfTrFontFace,
+ *   type Stage
+ * } from '@lightning/renderer/core';
+ *
+ * export default class MyCoreExtension extends CoreExtension {
+ *   async run(stage: Stage) {
+ *     stage.fontManager.addFontFace(
+ *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
+ *     );
+ *
+ *     stage.fontManager.addFontFace(
+ *       new SdfTrFontFace(
+ *         'Ubuntu',
+ *         {},
+ *         'msdf',
+ *         stage,
+ *         '/fonts/Ubuntu-Regular.msdf.png',
+ *         '/fonts/Ubuntu-Regular.msdf.json',
+ *       ),
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * And then imported and registered in the application's entry point
+ * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
+ * ```ts
+ * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
+ *
+ * // Set up driver, etc.
+ *
+ * // Initialize the Renderer
+ * const renderer = new RendererMain(
+ *   {
+ *     // Other Renderer Config...
+ *     coreExtensionModule: coreExtensionModuleUrl,
+ *   },
+ *   'app',
+ *   driver,
+ * );
+ * ```
+ *
+ * @module
+ */
+// Shaders
+export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
+export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
+// Textures
+export * from '../src/core/textures/Texture.js';
+// Text Rendering & Fonts
+export * from '../src/core/text-rendering/renderers/TextRenderer.js';
+export * from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
+export * from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
+export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
+export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
+export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';
+// Core Extensions
+export * from '../src/core/CoreExtension.js';
+//# sourceMappingURL=core-api.js.map

package/dist/exports/core-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-api.js","sourceRoot":"","sources":["../../exports/core-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,UAAU;AACV,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6DAA6D,CAAC;AAE5E,WAAW;AACX,cAAc,iCAAiC,CAAC;AAEhD,yBAAyB;AACzB,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,yEAAyE,CAAC;AACxF,cAAc,0DAA0D,CAAC;AACzE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,2EAA2E,CAAC;AAE1F,kBAAkB;AAClB,cAAc,8BAA8B,CAAC"}

package/dist/exports/index.d.ts

@@ -37,6 +37,7 @@ export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
 export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
 export type { ShaderProgramSources } from '../src/core/renderers/webgl/internal/ShaderUtils.js';
 export * from '../src/core/textures/Texture.js';
+export { ImageTexture } from '../src/core/textures/ImageTexture.js';
 export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
 export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
 export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';

package/dist/exports/index.js

@@ -49,6 +49,7 @@ export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
 export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
 // Textures
 export * from '../src/core/textures/Texture.js';
+export { ImageTexture } from '../src/core/textures/ImageTexture.js';
 // Text Rendering & Fonts
 // export * from '../src/core/text-rendering/renderers/TextRenderer.js';
 export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';

package/dist/exports/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../exports/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AAEH,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAE7C,yEAAyE;AACzE,2BAA2B;AAC3B,OAAO,EACL,kBAAkB,GAEnB,MAAM,mCAAmC,CAAC;AAoB3C,UAAU;AACV,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6DAA6D,CAAC;AAG5E,WAAW;AACX,cAAc,iCAAiC,CAAC;AAEhD,yBAAyB;AACzB,wEAAwE;AACxE,cAAc,0DAA0D,CAAC;AACzE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,2EAA2E,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../exports/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AAEH,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAE7C,yEAAyE;AACzE,2BAA2B;AAC3B,OAAO,EACL,kBAAkB,GAEnB,MAAM,mCAAmC,CAAC;AAoB3C,UAAU;AACV,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6DAA6D,CAAC;AAG5E,WAAW;AACX,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,yBAAyB;AACzB,wEAAwE;AACxE,cAAc,0DAA0D,CAAC;AACzE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,2EAA2E,CAAC"}

package/dist/exports/main-api.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Lightning 3 Renderer Main API
+ *
+ * @remarks
+ * This module exports the Main API for the Lightning 3 Renderer. You
+ * can import the exports from this module like so:
+ * ```ts
+ * import { RendererMain } from '@lightning/renderer';
+ * ```
+ *
+ * Generally developers/frameworks using the Renderer will use the Main API to
+ * render applications.
+ *
+ * Do not confuse the Main API with the Core API which is used to extend
+ * capabilities of the Renderer. The Main API code always runs from the main
+ * thread.
+ *
+ * @module
+ */
+export * from '../src/main-api/INode.js';
+export * from '../src/main-api/ICoreDriver.js';
+export * from '../src/main-api/RendererMain.js';
+export * from '../src/render-drivers/main/MainCoreDriver.js';
+export * from '../src/render-drivers/threadx/ThreadXCoreDriver.js';
+export * from '../src/common/IAnimationController.js';
+export * from '../src/common/CommonTypes.js';
+export type { TextRendererMap } from '../src/core/text-rendering/renderers/TextRenderer.js';
+export type { TrFontFaceMap } from '../src/core/text-rendering/font-face-types/TrFontFace.js';
+export type { AnimationSettings } from '../src/core/animations/CoreAnimation.js';
+export type { EffectProps, FadeOutEffectProps, LinearGradientEffectProps, RadialGradientEffectProps, GrayscaleEffectProps, GlitchEffectProps, RadialProgressEffectProps, } from '../src/core/CoreShaderManager.js';

package/dist/exports/main-api.js

@@ -0,0 +1,45 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Lightning 3 Renderer Main API
+ *
+ * @remarks
+ * This module exports the Main API for the Lightning 3 Renderer. You
+ * can import the exports from this module like so:
+ * ```ts
+ * import { RendererMain } from '@lightning/renderer';
+ * ```
+ *
+ * Generally developers/frameworks using the Renderer will use the Main API to
+ * render applications.
+ *
+ * Do not confuse the Main API with the Core API which is used to extend
+ * capabilities of the Renderer. The Main API code always runs from the main
+ * thread.
+ *
+ * @module
+ */
+export * from '../src/main-api/INode.js';
+export * from '../src/main-api/ICoreDriver.js';
+export * from '../src/main-api/RendererMain.js';
+export * from '../src/render-drivers/main/MainCoreDriver.js';
+export * from '../src/render-drivers/threadx/ThreadXCoreDriver.js';
+export * from '../src/common/IAnimationController.js';
+export * from '../src/common/CommonTypes.js';
+//# sourceMappingURL=main-api.js.map

package/dist/exports/main-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-api.js","sourceRoot":"","sources":["../../exports/main-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oDAAoD,CAAC;AACnE,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC"}

package/dist/src/common/IAnimationController.d.ts

@@ -1,5 +1,5 @@
 import type { IEventEmitter } from './IEventEmitter.js';
-export type AnimationControllerState = 'running' | 'paused' | 'stopped';
+export type AnimationControllerState = 'scheduled' | 'running' | 'paused' | 'stopped';
 /**
  * Animation Controller interface
  *

package/dist/src/core/CoreExtension.d.ts

@@ -0,0 +1,12 @@
+import type { Stage } from './Stage.js';
+/**
+ * Base class for Core extensions.
+ *
+ * @remarks
+ * Core extensions are used to extend the Core Renderer with custom code such as
+ * custom fonts, custom shaders, custom textures, custom animation functions,
+ * and more.
+ */
+export declare abstract class CoreExtension {
+    abstract run(stage: Stage): Promise<void>;
+}

package/dist/src/core/CoreExtension.js

@@ -0,0 +1,29 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Base class for Core extensions.
+ *
+ * @remarks
+ * Core extensions are used to extend the Core Renderer with custom code such as
+ * custom fonts, custom shaders, custom textures, custom animation functions,
+ * and more.
+ */
+export class CoreExtension {
+}
+//# sourceMappingURL=CoreExtension.js.map

package/dist/src/core/CoreExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreExtension.js","sourceRoot":"","sources":["../../../src/core/CoreExtension.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH;;;;;;;GAOG;AACH,MAAM,OAAgB,aAAa;CAElC"}

package/dist/src/core/CoreNode.d.ts

@@ -125,7 +125,7 @@ export declare enum UpdateType {
     /**
      * All
      */
-    All = 8191
+    All = 14335
 }
 /**
  * A custom data map which can be stored on an CoreNode

package/dist/src/core/CoreNode.js

@@ -145,7 +145,7 @@ export var UpdateType;
     /**
      * All
      */
-    UpdateType[UpdateType["All"] = 8191] = "All";
+    UpdateType[UpdateType["All"] = 14335] = "All";
 })(UpdateType || (UpdateType = {}));
 /**
  * A visual Node in the Renderer scene graph.
@@ -299,6 +299,9 @@ export class CoreNode extends EventEmitter {
         // Flag that we need to update
         if (this.parentHasRenderTexture) {
             this.setRTTUpdates(type);
+            if (parent !== null) {
+                parent.setUpdateType(UpdateType.RenderTexture);
+            }
         }
     }
     sortChildren() {
@@ -391,9 +394,9 @@ export class CoreNode extends EventEmitter {
         // If we have render texture updates and not already running a full update
         if (this.updateType ^ UpdateType.All &&
             this.updateType & UpdateType.RenderTexture) {
-            this.children.forEach((child) => {
-                child.setUpdateType(UpdateType.All);
-            });
+            for (let i = 0, length = this.children.length; i < length; i++) {
+                this.children[i]?.setUpdateType(UpdateType.All);
+            }
         }
         if (this.updateType & UpdateType.Global) {
             assertTruthy(this.localTransform);
@@ -407,10 +410,11 @@ export class CoreNode extends EventEmitter {
             this.calculateRenderCoords();
             this.updateBoundingRect();
             this.setUpdateType(UpdateType.RenderState | UpdateType.Children);
+            this.childUpdateType |= UpdateType.Global;
             if (this.clipping === true) {
-                this.setUpdateType(UpdateType.Clipping);
+                this.setUpdateType(UpdateType.Clipping | UpdateType.RenderBounds);
+                this.childUpdateType |= UpdateType.RenderBounds;
             }
-            this.childUpdateType |= UpdateType.Global;
         }
         if (this.updateType & UpdateType.RenderBounds) {
             this.createRenderBounds();
@@ -427,18 +431,6 @@ export class CoreNode extends EventEmitter {
                 this.updateRenderState(renderState);
             }
         }
-        if (this.updateType & UpdateType.IsRenderable) {
-            this.updateIsRenderable();
-        }
-        if (this.renderState === CoreNodeRenderState.OutOfBounds) {
-            return;
-        }
-        if (this.updateType & UpdateType.Clipping) {
-            this.calculateClippingRect(parentClippingRect);
-            this.setUpdateType(UpdateType.Children);
-            this.childUpdateType |= UpdateType.Clipping;
-            this.childUpdateType |= UpdateType.RenderBounds;
-        }
         if (this.updateType & UpdateType.WorldAlpha) {
             if (parent) {
                 this.worldAlpha = parent.worldAlpha * this.props.alpha;
@@ -451,6 +443,15 @@ export class CoreNode extends EventEmitter {
                 UpdateType.IsRenderable);
             this.childUpdateType |= UpdateType.WorldAlpha;
         }
+        if (this.updateType & UpdateType.IsRenderable) {
+            this.updateIsRenderable();
+        }
+        if (this.updateType & UpdateType.Clipping) {
+            this.calculateClippingRect(parentClippingRect);
+            this.setUpdateType(UpdateType.Children);
+            this.childUpdateType |= UpdateType.Clipping;
+            this.childUpdateType |= UpdateType.RenderBounds;
+        }
         if (this.updateType & UpdateType.PremultipliedColors) {
             this.premultipliedColorTl = mergeColorAlphaPremultiplied(this.props.colorTl, this.worldAlpha, true);
             // If all the colors are the same just sent them all to the same value
@@ -474,14 +475,14 @@ export class CoreNode extends EventEmitter {
             // Tell parent to re-sort children
             parent.setUpdateType(UpdateType.ZIndexSortedChildren);
         }
+        if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+            return;
+        }
         if (this.updateType & UpdateType.Children &&
             this.children.length > 0 &&
             this.rtt === false) {
-            for (let i = 0; i < this.children.length; i++) {
+            for (let i = 0, length = this.children.length; i < length; i++) {
                 const child = this.children[i];
-                if (child === undefined) {
-                    continue;
-                }
                 child.setUpdateType(this.childUpdateType);
                 if (child.updateType === 0) {
                     continue;
@@ -573,7 +574,7 @@ export class CoreNode extends EventEmitter {
     }
     createPreloadBounds(strictBound) {
         const renderM = this.stage.boundsMargin;
-        return createBound(strictBound.x1 - renderM[3], strictBound.y1 - renderM[0], strictBound.x2 + renderM[1], strictBound.y2 + renderM[2], this.preloadBound);
+        return createBound(strictBound.x1 - renderM[3], strictBound.y1 - renderM[0], strictBound.x2 + renderM[1], strictBound.y2 + renderM[2]);
     }
     updateBoundingRect() {
         const { renderCoords, globalTransform: transform } = this;
@@ -593,16 +594,14 @@ export class CoreNode extends EventEmitter {
         assertTruthy(this.stage);
         // no clipping, use parent's bounds
         if (this.clipping === false) {
-            if (this.parent !== null) {
-                this.strictBound =
-                    this.parent.strictBound ??
-                        createBound(0, 0, this.stage.root.width, this.stage.root.height);
-                this.preloadBound =
-                    this.parent.preloadBound ??
-                        this.createPreloadBounds(this.strictBound);
+            if (this.parent !== null && this.parent.strictBound !== undefined) {
+                // we have a parent with a valid bound, copy it
+                this.strictBound = createBound(this.parent.strictBound.x1, this.parent.strictBound.y1, this.parent.strictBound.x2, this.parent.strictBound.y2);
+                this.preloadBound = this.createPreloadBounds(this.strictBound);
                 return;
             }
             else {
+                // no parent or parent does not have a bound, take the stage dimensions
                 this.strictBound = createBound(0, 0, this.stage.root.width, this.stage.root.height);
                 this.preloadBound = this.createPreloadBounds(this.strictBound);
                 return;
@@ -741,8 +740,7 @@ export class CoreNode extends EventEmitter {
         this.props.texture = null;
         this.props.shader = this.stage.defShaderCtr;
         const children = [...this.children];
-        for (let i = 0; i < children.length; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        for (let i = 0, length = children.length; i < length; i++) {
             children[i].destroy();
         }
         // This very action will also remove the node from the parent's children array
@@ -971,8 +969,9 @@ export class CoreNode extends EventEmitter {
         this.props.alpha = value;
         this.setUpdateType(UpdateType.PremultipliedColors |
             UpdateType.WorldAlpha |
-            UpdateType.Children);
-        this.childUpdateType |= UpdateType.Global;
+            UpdateType.Children |
+            UpdateType.IsRenderable);
+        this.childUpdateType |= UpdateType.WorldAlpha;
     }
     get autosize() {
         return this.props.autosize;
@@ -1079,9 +1078,9 @@ export class CoreNode extends EventEmitter {
     set zIndexLocked(value) {
         this.props.zIndexLocked = value;
         this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
-        this.children.forEach((child) => {
-            child.setUpdateType(UpdateType.CalculatedZIndex);
-        });
+        for (let i = 0, length = this.children.length; i < length; i++) {
+            this.children[i].setUpdateType(UpdateType.CalculatedZIndex);
+        }
     }
     get zIndex() {
         return this.props.zIndex;
@@ -1089,9 +1088,9 @@ export class CoreNode extends EventEmitter {
     set zIndex(value) {
         this.props.zIndex = value;
         this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
-        this.children.forEach((child) => {
-            child.setUpdateType(UpdateType.CalculatedZIndex);
-        });
+        for (let i = 0, length = this.children.length; i < length; i++) {
+            this.children[i].setUpdateType(UpdateType.CalculatedZIndex);
+        }
     }
     get parent() {
         return this.props.parent;
@@ -1138,9 +1137,9 @@ export class CoreNode extends EventEmitter {
             if (value === false && this.texture !== null) {
                 this.unloadTexture();
                 this.setUpdateType(UpdateType.All);
-                this.children.forEach((child) => {
-                    child.parentHasRenderTexture = false;
-                });
+                for (let i = 0, length = this.children.length; i < length; i++) {
+                    this.children[i].parentHasRenderTexture = false;
+                }
                 this.stage.renderer?.removeRTTNode(this);
                 return;
             }
@@ -1158,9 +1157,9 @@ export class CoreNode extends EventEmitter {
         this.props.rtt = true;
         this.hasRTTupdates = true;
         this.setUpdateType(UpdateType.All);
-        this.children.forEach((child) => {
-            child.setUpdateType(UpdateType.All);
-        });
+        for (let i = 0, length = this.children.length; i < length; i++) {
+            this.children[i].setUpdateType(UpdateType.All);
+        }
         // Store RTT nodes in a separate list
         this.stage.renderer?.renderToTexture(this);
     }