@next2d/display 1.14.20

package/dist/DisplayObjectContainer.js

@@ -0,0 +1,1775 @@
+import { InteractiveObject } from "./InteractiveObject";
+import { Event as Next2DEvent } from "@next2d/events";
+import { $createInstance, $currentPlayer, $hitContext, $isTouch, $MATRIX_HIT_ARRAY_IDENTITY, $rendererWorker } from "@next2d/util";
+import { $doUpdated, $boundsMatrix, $clamp, $getArray, $getBoundsObject, $getFloat32Array6, $getFloat32Array8, $getMap, $getPreObject, $Math, $COLOR_ARRAY_IDENTITY, $MATRIX_ARRAY_IDENTITY, $multiplicationColor, $multiplicationMatrix, $Number, $poolArray, $poolBoundsObject, $poolFloat32Array6, $poolFloat32Array8, $poolMap, $poolPreObject } from "@next2d/share";
+/**
+ * DisplayObjectContainer クラスは、表示リストで表示オブジェクトコンテナとして機能するすべてのオブジェクトの基本クラスです。
+ * このクラス自体は、画面上でのコンテンツの描画のための API を含みません。
+ * そのため、DisplayObject クラスのカスタムサブクラスを作成する場合は、
+ * Sprite、または MovieClip など、画面上にコンテンツを描画する API を持つサブクラスの 1 つを拡張する必要があります。
+ *
+ * The DisplayObjectContainer class is the base class for all objects that can serve
+ * as display object containers on the display list.
+ * This class itself does not contain any API for drawing content on the screen.
+ * Therefore, if you want to create a custom subclass of the DisplayObject class,
+ * you need to extend one of its subclasses that has an API for drawing content on the screen,
+ * such as Sprite or MovieClip.
+ *
+ * @class
+ * @memberOf next2d.display
+ * @extends  InteractiveObject
+ */
+export class DisplayObjectContainer extends InteractiveObject {
+    /**
+     * @constructor
+     * @public
+     */
+    constructor() {
+        super();
+        /**
+         * @type {array}
+         * @default null
+         * @private
+         */
+        this._$placeMap = null;
+        /**
+         * @type {array}
+         * @default null
+         * @private
+         */
+        this._$placeObjects = null;
+        /**
+         * @type {array}
+         * @default null
+         * @private
+         */
+        this._$controller = null;
+        /**
+         * @type {array}
+         * @default null
+         * @private
+         */
+        this._$dictionary = null;
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$children = $getArray();
+        /**
+         * @type {boolean}
+         * @default true
+         * @private
+         */
+        this._$needsChildren = true;
+        /**
+         * @type {boolean}
+         * @default true
+         * @private
+         */
+        this._$mouseChildren = true;
+        /**
+         * @type {boolean}
+         * @default true
+         * @private
+         */
+        this._$wait = true;
+        /**
+         * @type {Map}
+         * @private
+         */
+        this._$names = $getMap();
+        return new Proxy(this, {
+            "get": (object, name) => {
+                if (object._$names.size && object._$names.has(name)) {
+                    return object._$names.get(name);
+                }
+                // @ts-ignore
+                return object[name];
+            }
+        });
+    }
+    /**
+     * @description オブジェクトの子がマウスまたはユーザー入力デバイスに対応しているかどうかを判断します。
+     *              Determine if the object's children are compatible with mouse or user input devices.
+     *
+     * @member {boolean}
+     * @public
+     */
+    get mouseChildren() {
+        return this._$mouseChildren;
+    }
+    set mouseChildren(mouse_children) {
+        this._$mouseChildren = !!mouse_children;
+    }
+    /**
+     * @description このオブジェクトの子の数を返します。
+     *              Returns the number of children of this object.
+     *
+     * @member   {number}
+     * @readonly
+     * @public
+     */
+    get numChildren() {
+        return this._$needsChildren
+            ? this._$getChildren().length
+            : this._$children.length;
+    }
+    /**
+     * @description この DisplayObjectContainer インスタンスに子 DisplayObject インスタンスを追加します。
+     *              Adds a child DisplayObject instance to this DisplayObjectContainer instance.
+     *
+     * @param  {DisplayObject} child
+     * @return {DisplayObject}
+     * @method
+     * @public
+     */
+    addChild(child) {
+        if (child._$parent) {
+            child._$parent._$remove(child, !(child._$parent._$instanceId === this._$instanceId));
+        }
+        this._$getChildren().push(child);
+        if (child._$name) {
+            this._$names.set(child._$name, child);
+        }
+        return this._$addChild(child);
+    }
+    /**
+     * @description この DisplayObjectContainer インスタンスに子 DisplayObject インスタンスを追加します。
+     *              Adds a child DisplayObject instance to this DisplayObjectContainer instance.
+     *
+     * @param  {DisplayObject} child
+     * @param  {number}        index
+     * @return {DisplayObject}
+     * @method
+     * @public
+     */
+    addChildAt(child, index) {
+        if (child._$parent) {
+            child._$parent._$remove(child, !(child._$parent._$instanceId === this._$instanceId));
+        }
+        const children = this._$getChildren();
+        const length = children.length;
+        if (0 > index || index > length) {
+            throw new RangeError(`RangeError: addChildAt: index error: ${index}`);
+        }
+        if (length && length > index) {
+            children.splice(index, 0, child);
+            for (let idx = 0; idx < index; ++idx) {
+                const instance = children[idx];
+                if (instance._$name) {
+                    this._$names.set(instance._$name, instance);
+                }
+            }
+        }
+        else {
+            children.push(child);
+            if (child._$name) {
+                this._$names.set(child._$name, child);
+            }
+        }
+        return this._$addChild(child);
+    }
+    /**
+     * @description 指定された表示オブジェクトが、DisplayObjectContainer インスタンスの子であるか
+     *              インスタンス自体であるかを指定します。
+     *              Determines whether the specified display object is a child
+     *              of the DisplayObjectContainer instance or the instance itself.
+     *
+     * @param  {DisplayObject} child
+     * @return {boolean}
+     * @method
+     * @public
+     */
+    contains(child) {
+        if (this._$instanceId === child._$instanceId) {
+            return true;
+        }
+        const children = this._$getChildren();
+        for (let idx = 0; idx < children.length; ++idx) {
+            const instance = children[idx];
+            if (instance._$instanceId === child._$instanceId) {
+                return true;
+            }
+            if (instance instanceof DisplayObjectContainer) {
+                if (instance.contains(child)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * @description 指定のインデックス位置にある子表示オブジェクトインスタンスを返します。
+     *              Returns the child display object instance that exists at the specified index.
+     *
+     * @param  {number} index
+     * @return {DisplayObject}
+     * @method
+     * @public
+     */
+    getChildAt(index) {
+        const children = this._$getChildren();
+        if (0 > index || index > children.length) {
+            throw new RangeError(`RangeError: getChildAt: index error: ${index}`);
+        }
+        return index in children ? children[index] : null;
+    }
+    /**
+     * @description 指定された名前に一致する子表示オブジェクトを返します。
+     *              Returns the child display object that exists with the specified name.
+     *
+     * @param  {string} name
+     * @return {{DisplayObject}|null}
+     * @method
+     * @public
+     */
+    getChildByName(name) {
+        if (!name) {
+            return null;
+        }
+        // fixed logic
+        const children = this._$getChildren();
+        for (let idx = 0; idx < children.length; ++idx) {
+            const child = children[idx];
+            if (child.name !== name) {
+                continue;
+            }
+            return child;
+        }
+        return null;
+    }
+    /**
+     * @description 子 DisplayObject インスタンスのインデックス位置を返します。
+     *              Returns the index position of a child DisplayObject instance.
+     *
+     * @param  {DisplayObject} child
+     * @return {number}
+     * @method
+     * @public
+     */
+    getChildIndex(child) {
+        if (child._$parent !== this) {
+            throw new Error("ArgumentError: getChildIndex: not child");
+        }
+        const index = this._$getChildren().indexOf(child);
+        if (index === -1) {
+            throw new Error("ArgumentError: getChildIndex: not found.");
+        }
+        return index;
+    }
+    /**
+     * @description DisplayObjectContainer インスタンスの子リストから指定の
+     *              child DisplayObject インスタンスを削除します。
+     *              Removes the specified child DisplayObject instance from the
+     *              child list of the DisplayObjectContainer instance.
+     *
+     * @param  {DisplayObject} child
+     * @return {DisplayObject}
+     * @method
+     * @public
+     */
+    removeChild(child) {
+        if (child._$parent !== this) {
+            throw new Error("ArgumentError: removeChild: not child");
+        }
+        return this._$remove(child);
+    }
+    /**
+     * @description DisplayObjectContainer の子リストの指定された index 位置から子 DisplayObject を削除します。
+     *              Removes a child DisplayObject from the specified index position
+     *              in the child list of the DisplayObjectContainer.
+     *
+     * @param  {number} index
+     * @return {DisplayObject}
+     * @method
+     * @public
+     */
+    removeChildAt(index) {
+        return this._$remove(this.getChildAt(index));
+    }
+    /**
+     * @description DisplayObjectContainer インスタンスの子リストから
+     *              すべての child DisplayObject インスタンスを削除します。
+     *              Removes all child DisplayObject instances from
+     *              the child list of the DisplayObjectContainer instance.
+     *
+     * @param  {number} [begin_index=0]
+     * @param  {number} [end_index=0x7fffffff]
+     * @return {void}
+     * @method
+     * @public
+     */
+    removeChildren(begin_index = 0, end_index = 0x7fffffff) {
+        const children = this._$getChildren();
+        if (!children.length) {
+            return;
+        }
+        begin_index = $clamp(begin_index, 0, 0x7ffffffe, 0) - 1;
+        end_index = $clamp(end_index, 1, 0x7ffffff, 0x7ffffff);
+        for (let idx = $Math.min(end_index, children.length - 1); idx > begin_index; --idx) {
+            this._$remove(children[idx]);
+        }
+    }
+    /**
+     * @description 表示オブジェクトコンテナの既存の子の位置を変更します。
+     *              Changes the position of an existing child in the display object container.
+     *
+     * @param  {DisplayObject} child
+     * @param  {number} index
+     * @return {void}
+     * @method
+     * @public
+     */
+    setChildIndex(child, index) {
+        const currentIndex = this.getChildIndex(child);
+        if (currentIndex === index) {
+            return;
+        }
+        const children = this._$getChildren();
+        children.splice(currentIndex, 1);
+        children.splice(index, 0, child);
+        if ($rendererWorker) {
+            this._$postChildrenIds();
+        }
+        this._$doChanged();
+    }
+    /**
+     * @description 指定された 2 つの子オブジェクトの z 順序（重ね順）を入れ替えます。
+     *              Swaps the z-order (front-to-back order) of the two specified child objects.
+     *
+     * @param  {DisplayObject} child1
+     * @param  {DisplayObject} child2
+     * @return {void}
+     * @method
+     * @public
+     */
+    swapChildren(child1, child2) {
+        const children = this._$getChildren();
+        const index1 = this.getChildIndex(child1);
+        const index2 = this.getChildIndex(child2);
+        children[index1] = child2;
+        children[index2] = child1;
+        if ($rendererWorker) {
+            this._$postChildrenIds();
+        }
+        this._$doChanged();
+    }
+    /**
+     * @description 子リスト内の指定されたインデックス位置に該当する 2 つの子オブジェクトの z 順序（重ね順）を入れ替えます。
+     *              Swaps the z-order (front-to-back order) of the child objects at
+     *              the two specified index positions in the child list.
+     *
+     * @param  {number} index1
+     * @param  {number} index2
+     * @return {void}
+     * @method
+     * @public
+     */
+    swapChildrenAt(index1, index2) {
+        this.swapChildren(this.getChildAt(index1), this.getChildAt(index2));
+    }
+    /**
+     * @param  {array} [matrix=null]
+     * @return {object}
+     * @private
+     */
+    _$getBounds(matrix = null) {
+        let multiMatrix = $MATRIX_ARRAY_IDENTITY;
+        if (matrix) {
+            multiMatrix = matrix;
+            const rawMatrix = this._$transform._$rawMatrix();
+            if (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+                || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+                || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
+                multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+            }
+        }
+        const graphics = "_$graphics" in this
+            ? this._$graphics
+            : null;
+        const children = this._$needsChildren
+            ? this._$getChildren()
+            : this._$children;
+        // size zero
+        if (!children.length && !graphics) {
+            const bounds = $getBoundsObject(multiMatrix[4], -multiMatrix[4], multiMatrix[5], -multiMatrix[5]);
+            if (matrix && multiMatrix !== matrix) {
+                $poolFloat32Array6(multiMatrix);
+            }
+            return bounds;
+        }
+        // data init
+        const no = $Number.MAX_VALUE;
+        let xMin = no;
+        let xMax = -no;
+        let yMin = no;
+        let yMax = -no;
+        if (graphics) {
+            const baseBounds = graphics._$getBounds();
+            const bounds = $boundsMatrix(baseBounds, multiMatrix);
+            $poolBoundsObject(baseBounds);
+            xMin = bounds.xMin;
+            xMax = bounds.xMax;
+            yMin = bounds.yMin;
+            yMax = bounds.yMax;
+            $poolBoundsObject(bounds);
+        }
+        for (let idx = 0; idx < children.length; ++idx) {
+            const bounds = children[idx]._$getBounds(multiMatrix);
+            xMin = $Math.min(xMin, bounds.xMin);
+            xMax = $Math.max(xMax, bounds.xMax);
+            yMin = $Math.min(yMin, bounds.yMin);
+            yMax = $Math.max(yMax, bounds.yMax);
+            $poolBoundsObject(bounds);
+        }
+        if (matrix && multiMatrix !== matrix) {
+            $poolFloat32Array6(multiMatrix);
+        }
+        // end
+        return $getBoundsObject(xMin, xMax, yMin, yMax);
+    }
+    /**
+     * @param  {array} [matrix=null]
+     * @return {object}
+     * @private
+     */
+    _$getLayerBounds(matrix = null) {
+        let multiMatrix = $MATRIX_ARRAY_IDENTITY;
+        if (matrix) {
+            multiMatrix = matrix;
+            const rawMatrix = this._$transform._$rawMatrix();
+            if (rawMatrix !== $MATRIX_ARRAY_IDENTITY) {
+                multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+            }
+        }
+        const graphics = "_$graphics" in this
+            ? this._$graphics
+            : null;
+        const children = this._$needsChildren
+            ? this._$getChildren()
+            : this._$children;
+        // size zero
+        if (!children.length && !graphics) {
+            const bounds = $getBoundsObject(multiMatrix[4], -multiMatrix[4], multiMatrix[5], -multiMatrix[5]);
+            if (matrix && multiMatrix !== matrix) {
+                $poolFloat32Array6(multiMatrix);
+            }
+            return bounds;
+        }
+        // data init
+        const no = $Number.MAX_VALUE;
+        let xMin = no;
+        let xMax = -no;
+        let yMin = no;
+        let yMax = -no;
+        if (graphics) {
+            const baseBounds = graphics._$getBounds();
+            const bounds = $boundsMatrix(baseBounds, multiMatrix);
+            $poolBoundsObject(baseBounds);
+            xMin = +bounds.xMin;
+            xMax = +bounds.xMax;
+            yMin = +bounds.yMin;
+            yMax = +bounds.yMax;
+            $poolBoundsObject(bounds);
+        }
+        for (let idx = 0; idx < children.length; ++idx) {
+            const bounds = children[idx]
+                ._$getLayerBounds(multiMatrix);
+            xMin = $Math.min(xMin, bounds.xMin);
+            xMax = $Math.max(xMax, bounds.xMax);
+            yMin = $Math.min(yMin, bounds.yMin);
+            yMax = $Math.max(yMax, bounds.yMax);
+            $poolBoundsObject(bounds);
+        }
+        if (matrix && multiMatrix !== matrix) {
+            $poolFloat32Array6(multiMatrix);
+        }
+        // end
+        if (!matrix) {
+            return $getBoundsObject(xMin, xMax, yMin, yMax);
+        }
+        const filters = this._$filters || this.filters;
+        if (!filters.length) {
+            return $getBoundsObject(xMin, xMax, yMin, yMax);
+        }
+        let filterBounds = $getBoundsObject(xMin, xMax - xMin, yMin, yMax - yMin);
+        for (let idx = 0; idx < filters.length; ++idx) {
+            filterBounds = filters[idx]
+                ._$generateFilterRect(filterBounds, 0, 0);
+        }
+        xMin = filterBounds.xMin;
+        xMax = filterBounds.xMin + filterBounds.xMax;
+        yMin = filterBounds.yMin;
+        yMax = filterBounds.yMin + filterBounds.yMax;
+        $poolBoundsObject(filterBounds);
+        return $getBoundsObject(xMin, xMax, yMin, yMax);
+    }
+    /**
+     * @return {array}
+     * @private
+     */
+    _$getChildren() {
+        if (this._$needsChildren) {
+            // set flag
+            this._$needsChildren = false;
+            const currentChildren = this._$children;
+            if (!this._$controller) {
+                return currentChildren;
+            }
+            const frame = "_$currentFrame" in this ? this._$currentFrame : 1;
+            const controller = this._$controller[frame];
+            // first build
+            if (!currentChildren.length) {
+                if (controller) {
+                    for (let idx = 0; idx < controller.length; ++idx) {
+                        const instance = this._$createInstance(controller[idx]);
+                        instance._$placeId = idx;
+                        const loopConfig = instance.loopConfig;
+                        if (loopConfig) {
+                            instance._$currentFrame = instance
+                                ._$getLoopFrame(loopConfig);
+                        }
+                        currentChildren.push(instance);
+                        if (instance._$name) {
+                            this._$names.set(instance._$name, instance);
+                        }
+                    }
+                }
+                return currentChildren;
+            }
+            const player = $currentPlayer();
+            const cacheStore = player.cacheStore;
+            const useWorker = !!$rendererWorker && !!this._$stage;
+            const skipIds = $getMap();
+            const poolInstances = $getMap();
+            let depth = 0;
+            const children = $getArray();
+            for (let idx = 0; idx < currentChildren.length; ++idx) {
+                const instance = currentChildren[idx];
+                const parent = instance._$parent;
+                if (!parent || parent._$instanceId !== this._$instanceId) {
+                    continue;
+                }
+                const instanceId = instance._$instanceId;
+                const startFrame = instance._$startFrame;
+                const endFrame = instance._$endFrame;
+                if (startFrame === 1 && endFrame === 0
+                    || startFrame <= frame && endFrame > frame) {
+                    // reset
+                    instance._$isNext = true;
+                    instance._$placeObject = null;
+                    instance._$filters = null;
+                    instance._$blendMode = null;
+                    if (instance._$id === -1) {
+                        children.push(instance);
+                        if (instance._$name) {
+                            this._$names.set(instance._$name, instance);
+                        }
+                        continue;
+                    }
+                    const id = controller[depth];
+                    if (instance._$id === id) {
+                        instance._$placeId = depth;
+                        children.push(instance);
+                        if (instance._$name) {
+                            this._$names.set(instance._$name, instance);
+                        }
+                        if (poolInstances.has(id)) {
+                            poolInstances.delete(id);
+                        }
+                        skipIds.set(id, true);
+                        depth++;
+                        if (useWorker) {
+                            instance._$postProperty();
+                        }
+                        continue;
+                    }
+                    poolInstances.set(instance._$id, instance);
+                    continue;
+                }
+                if (useWorker) {
+                    instance._$removeWorkerInstance();
+                }
+                cacheStore.setRemoveTimer(instanceId);
+                if (instance._$loaderInfo && instance._$characterId) {
+                    cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
+                }
+                // remove event
+                if (instance.willTrigger(Next2DEvent.REMOVED)) {
+                    instance.dispatchEvent(new Next2DEvent(Next2DEvent.REMOVED, true));
+                }
+                if (instance.willTrigger(Next2DEvent.REMOVED_FROM_STAGE)) {
+                    instance.dispatchEvent(new Next2DEvent(Next2DEvent.REMOVED_FROM_STAGE, true));
+                }
+                // reset
+                instance._$added = false;
+                instance._$addedStage = false;
+                instance._$active = false;
+                instance._$updated = true;
+                instance._$filters = null;
+                instance._$blendMode = null;
+                instance._$isNext = true;
+                instance._$placeObject = null;
+                instance._$created = false;
+                instance._$posted = false;
+                if (instance instanceof DisplayObjectContainer) {
+                    instance._$executeRemovedFromStage();
+                    instance._$removeParentAndStage();
+                }
+            }
+            if (controller) {
+                for (let idx = 0; idx < controller.length; ++idx) {
+                    const id = controller[idx];
+                    if (skipIds.has(id)) {
+                        continue;
+                    }
+                    const instance = poolInstances.has(id)
+                        ? poolInstances.get(id)
+                        : this._$createInstance(id);
+                    instance._$placeId = idx;
+                    const loopConfig = instance.loopConfig;
+                    if (loopConfig) {
+                        instance._$currentFrame = instance
+                            ._$getLoopFrame(loopConfig);
+                    }
+                    children.push(instance);
+                    if (instance._$name) {
+                        this._$names.set(instance._$name, instance);
+                    }
+                }
+            }
+            // object pool
+            $poolMap(skipIds);
+            $poolMap(poolInstances);
+            // update
+            currentChildren.length = 0;
+            currentChildren.push(...children);
+            $poolArray(children);
+        }
+        return this._$children;
+    }
+    /**
+     * @return void
+     * @private
+     */
+    _$clearChildren() {
+        this._$doChanged();
+        $doUpdated();
+        // reset
+        this._$names.clear();
+        // clear
+        this._$needsChildren = true;
+    }
+    /**
+     * @param   {DisplayObject} child
+     * @returns {DisplayObject}
+     * @private
+     */
+    _$addChild(child) {
+        // init
+        child._$parent = this;
+        if (!child._$stage || !child._$root) {
+            child._$stage = this._$stage;
+            child._$root = this._$root;
+        }
+        // setup
+        if (child instanceof DisplayObjectContainer) {
+            child._$setParentAndStage();
+            child._$wait = true;
+        }
+        // added event
+        if (!child._$added) {
+            if (child.willTrigger(Next2DEvent.ADDED)) {
+                child.dispatchEvent(new Next2DEvent(Next2DEvent.ADDED, true));
+            }
+            child._$added = true;
+        }
+        if (this._$stage !== null && !child._$addedStage) {
+            if (child.willTrigger(Next2DEvent.ADDED_TO_STAGE)) {
+                child.dispatchEvent(new Next2DEvent(Next2DEvent.ADDED_TO_STAGE));
+            }
+            child._$addedStage = true;
+            // set params
+            if (child instanceof DisplayObjectContainer) {
+                child._$executeAddedToStage();
+            }
+            if ($rendererWorker) {
+                child._$createWorkerInstance();
+                child._$postProperty();
+                this._$postChildrenIds();
+            }
+        }
+        this._$doChanged();
+        child._$active = true;
+        child._$updated = true;
+        child._$isNext = true;
+        return child;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$setParentAndStage() {
+        const children = this._$needsChildren
+            ? this._$getChildren()
+            : this._$children;
+        for (let idx = 0; idx < children.length; ++idx) {
+            const instance = children[idx];
+            instance._$root = this._$root;
+            instance._$stage = this._$stage;
+            if (instance instanceof DisplayObjectContainer) {
+                instance._$setParentAndStage();
+                instance._$wait = true;
+            }
+        }
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$executeAddedToStage() {
+        const children = this._$needsChildren
+            ? this._$getChildren()
+            : this._$children;
+        const childrenIds = $getArray();
+        for (let idx = 0; idx < children.length; ++idx) {
+            const instance = children[idx];
+            if (!instance) {
+                continue;
+            }
+            childrenIds.push(instance._$instanceId);
+            if (!instance._$addedStage) {
+                if ($rendererWorker) {
+                    instance._$createWorkerInstance();
+                    instance._$postProperty();
+                }
+                if (instance.willTrigger(Next2DEvent.ADDED_TO_STAGE)) {
+                    instance.dispatchEvent(new Next2DEvent(Next2DEvent.ADDED_TO_STAGE));
+                }
+                instance._$addedStage = true;
+            }
+            if (instance instanceof DisplayObjectContainer) {
+                instance._$executeAddedToStage();
+            }
+        }
+        if ($rendererWorker) {
+            this._$postChildrenIds(childrenIds);
+        }
+        $poolArray(childrenIds);
+    }
+    /**
+     * @param  {DisplayObject} child
+     * @param  {boolean} do_event
+     * @return {DisplayObject}
+     * @private
+     */
+    _$remove(child, do_event = true) {
+        child._$transform._$transform();
+        // remove all broadcast events
+        if (child.hasEventListener(Next2DEvent.ENTER_FRAME)) {
+            child.removeAllEventListener(Next2DEvent.ENTER_FRAME);
+        }
+        if (child.hasEventListener(Next2DEvent.EXIT_FRAME)) {
+            child.removeAllEventListener(Next2DEvent.EXIT_FRAME);
+        }
+        if (child.hasEventListener(Next2DEvent.FRAME_CONSTRUCTED)) {
+            child.removeAllEventListener(Next2DEvent.FRAME_CONSTRUCTED);
+        }
+        if (child.hasEventListener(Next2DEvent.RENDER)) {
+            child.removeAllEventListener(Next2DEvent.RENDER);
+        }
+        if (child.hasEventListener(Next2DEvent.ACTIVATE)) {
+            child.removeAllEventListener(Next2DEvent.ACTIVATE);
+        }
+        if (child.hasEventListener(Next2DEvent.DEACTIVATE)) {
+            child.removeAllEventListener(Next2DEvent.DEACTIVATE);
+        }
+        if (child.hasEventListener("keyDown")) {
+            child.removeAllEventListener("keyDown");
+        }
+        if (child.hasEventListener("keyUp")) {
+            child.removeAllEventListener("keyUp");
+        }
+        // remove
+        const children = this._$needsChildren
+            ? this._$getChildren()
+            : this._$children;
+        const depth = this.getChildIndex(child);
+        children.splice(depth, 1);
+        this._$names.delete(child.name);
+        if (do_event) {
+            // event
+            if (child.willTrigger(Next2DEvent.REMOVED)) {
+                child.dispatchEvent(new Next2DEvent(Next2DEvent.REMOVED, true));
+            }
+            // remove stage event
+            if (this._$stage !== null) {
+                // worker側のDisplayObjectも削除
+                if ($rendererWorker) {
+                    child._$removeWorkerInstance();
+                    this._$postChildrenIds();
+                }
+                if (child.willTrigger(Next2DEvent.REMOVED_FROM_STAGE)) {
+                    child.dispatchEvent(new Next2DEvent(Next2DEvent.REMOVED_FROM_STAGE));
+                }
+                if (child instanceof DisplayObjectContainer) {
+                    child._$executeRemovedFromStage();
+                }
+            }
+            const player = $currentPlayer();
+            const cacheStore = player.cacheStore;
+            cacheStore.setRemoveTimer(child._$instanceId);
+            if (child._$loaderInfo && child._$characterId) {
+                cacheStore.setRemoveTimer(`${child._$loaderInfo._$id}@${child._$characterId}`);
+            }
+            // reset params
+            if (child instanceof DisplayObjectContainer) {
+                child._$removeParentAndStage();
+            }
+            // reset
+            child._$stage = null;
+            child._$parent = null;
+            child._$root = null;
+            child._$active = false;
+            child._$wait = true;
+            child._$updated = true;
+            child._$added = false;
+            child._$addedStage = false;
+            child._$created = false;
+            child._$posted = false;
+            this._$doChanged();
+        }
+        return child;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$executeRemovedFromStage() {
+        const children = this._$getChildren().slice(0);
+        for (let idx = 0; idx < children.length; ++idx) {
+            const instance = children[idx];
+            if (!instance) {
+                continue;
+            }
+            if (instance._$addedStage) {
+                // workerのDisplayObjectを削除
+                if ($rendererWorker) {
+                    instance._$removeWorkerInstance();
+                }
+                if (instance.willTrigger(Next2DEvent.REMOVED_FROM_STAGE)) {
+                    instance.dispatchEvent(new Next2DEvent(Next2DEvent.REMOVED_FROM_STAGE));
+                }
+                instance._$created = false;
+                instance._$posted = false;
+                instance._$addedStage = false;
+            }
+            if (instance instanceof DisplayObjectContainer) {
+                instance._$executeRemovedFromStage();
+            }
+        }
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$removeParentAndStage() {
+        const children = this._$needsChildren
+            ? this._$getChildren()
+            : this._$children;
+        const player = $currentPlayer();
+        const cacheStore = player.cacheStore;
+        for (let idx = 0; idx < children.length; ++idx) {
+            const instance = children[idx];
+            cacheStore.setRemoveTimer(instance._$instanceId);
+            if (instance._$loaderInfo && instance._$characterId) {
+                cacheStore.setRemoveTimer(`${instance._$loaderInfo._$id}@${instance._$characterId}`);
+            }
+            if (instance instanceof DisplayObjectContainer) {
+                instance._$removeParentAndStage();
+            }
+            instance._$stage = null;
+            instance._$root = null;
+            instance._$addedStage = false;
+        }
+        if ("_$sounds" in this) {
+            const soundsMap = this._$sounds;
+            if (soundsMap.size) {
+                for (const sounds of soundsMap.values()) {
+                    for (let idx = 0; idx < sounds.length; ++idx) {
+                        const sound = sounds[idx];
+                        sound.stop();
+                    }
+                }
+            }
+        }
+        this._$needsChildren = true;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$prepareActions() {
+        const children = this._$needsChildren
+            ? this._$getChildren()
+            : this._$children;
+        for (let idx = children.length - 1; idx > -1; --idx) {
+            children[idx]._$prepareActions();
+        }
+        // added event
+        this._$executeAddedEvent();
+    }
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$nextFrame() {
+        let isNext = false;
+        const children = this._$getChildren();
+        for (let idx = children.length - 1; idx > -1; --idx) {
+            const child = children[idx];
+            if (!child._$isNext) {
+                continue;
+            }
+            if (isNext) {
+                child._$nextFrame();
+            }
+            else {
+                isNext = child._$nextFrame();
+            }
+        }
+        // added event
+        this._$executeAddedEvent();
+        this._$isNext = isNext;
+        if (!this._$posted && $rendererWorker) {
+            this._$postProperty();
+        }
+        return this._$isNext;
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$clip(context, matrix) {
+        let multiMatrix = matrix;
+        const rawMatrix = this._$transform._$rawMatrix();
+        if (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+            || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+            || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
+            multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+        }
+        const graphics = "_$graphics" in this
+            ? this._$graphics
+            : null;
+        if (graphics && graphics._$canDraw) {
+            graphics._$clip(context, multiMatrix);
+        }
+        const children = this._$getChildren();
+        for (let idx = 0; idx < children.length; ++idx) {
+            const instance = children[idx];
+            // mask instance
+            if (instance._$isMask) {
+                continue;
+            }
+            instance._$clip(context, multiMatrix);
+            instance._$updated = false;
+        }
+        if (multiMatrix !== matrix) {
+            $poolFloat32Array6(multiMatrix);
+        }
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @return {object}
+     * @private
+     */
+    _$preDraw(context, matrix) {
+        let multiMatrix = matrix;
+        const rawMatrix = this._$transform._$rawMatrix();
+        if (rawMatrix !== $MATRIX_HIT_ARRAY_IDENTITY
+            && rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+            || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+            || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
+            multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+        }
+        // size zero
+        if (!multiMatrix[0] && !multiMatrix[1]
+            || !multiMatrix[2] && !multiMatrix[3]) {
+            return null;
+        }
+        // return object
+        const object = $getPreObject();
+        // setup
+        object.matrix = multiMatrix;
+        // check
+        const filters = this._$filters || this.filters;
+        const blendMode = this._$blendMode || this.blendMode;
+        if (filters.length > 0 || blendMode !== "normal") {
+            // check size
+            const baseBounds = this._$getBounds(null);
+            const bounds = $boundsMatrix(baseBounds, multiMatrix);
+            $poolBoundsObject(baseBounds);
+            const xMax = +bounds.xMax;
+            const xMin = +bounds.xMin;
+            const yMax = +bounds.yMax;
+            const yMin = +bounds.yMin;
+            $poolBoundsObject(bounds);
+            const width = $Math.abs(xMax - xMin);
+            const height = $Math.abs(yMax - yMin);
+            if (0 >= width || 0 >= height) {
+                $poolPreObject(object);
+                return null;
+            }
+            if (0 > xMin + width || 0 > yMin + height) {
+                $poolPreObject(object);
+                return null;
+            }
+            const currentAttachment = context
+                .frameBuffer
+                .currentAttachment;
+            if (!currentAttachment
+                || !currentAttachment.texture
+                || xMin > currentAttachment.width
+                || yMin > currentAttachment.height) {
+                $poolPreObject(object);
+                return null;
+            }
+            // set origin position
+            object.basePosition.x = rawMatrix[4];
+            object.basePosition.y = rawMatrix[5];
+            // check after size
+            const baseLayerBounds = this._$getLayerBounds(null);
+            const layerBounds = $boundsMatrix(baseLayerBounds, multiMatrix);
+            // filter size
+            let layerWidth = $Math.abs(layerBounds.xMax - layerBounds.xMin);
+            let layerHeight = $Math.abs(layerBounds.yMax - layerBounds.yMin);
+            $poolBoundsObject(layerBounds);
+            // move size
+            let tx = multiMatrix[4] - $Math.floor(xMin);
+            let ty = multiMatrix[5] - $Math.floor(yMin);
+            let dx = $Math.floor(xMin);
+            let dy = $Math.floor(yMin);
+            let originX = xMin;
+            let originY = yMin;
+            if (layerWidth !== width || layerHeight !== height) {
+                const layerMatrix = $getFloat32Array6(multiMatrix[0], multiMatrix[1], multiMatrix[2], multiMatrix[3], 0, 0);
+                const moveBounds = $boundsMatrix(baseLayerBounds, layerMatrix);
+                // pool
+                $poolFloat32Array6(layerMatrix);
+                tx += -$Math.floor(moveBounds.xMin) - tx;
+                ty += -$Math.floor(moveBounds.yMin) - ty;
+                dx -= -$Math.floor(moveBounds.xMin) - (multiMatrix[4] - dx);
+                dy -= -$Math.floor(moveBounds.yMin) - (multiMatrix[5] - dy);
+                originX -= -moveBounds.xMin - (multiMatrix[4] - originX);
+                originY -= -moveBounds.yMin - (multiMatrix[5] - originY);
+                $poolBoundsObject(moveBounds);
+            }
+            $poolBoundsObject(baseLayerBounds);
+            // set position
+            object.position.dx = dx > 0 ? dx : 0;
+            object.position.dy = dy > 0 ? dy : 0;
+            // resize
+            if (layerWidth + originX > currentAttachment.texture.width) {
+                layerWidth -= layerWidth - currentAttachment.texture.width + originX;
+            }
+            if (layerHeight + originY > currentAttachment.texture.height) {
+                layerHeight -= layerHeight - currentAttachment.texture.height + originY;
+            }
+            if (0 > dx) {
+                tx += dx;
+                layerWidth += originX;
+            }
+            if (0 > dy) {
+                ty += dy;
+                layerHeight += originY;
+            }
+            if (0 >= layerWidth || 0 >= layerHeight // size (-)
+                || !layerWidth || !layerHeight // NaN or Infinity
+            ) {
+                $poolPreObject(object);
+                return null;
+            }
+            // start layer
+            context._$startLayer($getBoundsObject(originX, 0, originY, 0));
+            // check cache
+            object.canApply = this._$canApply(filters);
+            const updated = this._$isFilterUpdated(layerWidth, layerHeight, multiMatrix, filters, object.canApply, object.basePosition.x, object.basePosition.y);
+            // current mask cache
+            context._$saveCurrentMask();
+            if (updated) {
+                context._$saveAttachment($Math.ceil(layerWidth), $Math.ceil(layerHeight), false);
+            }
+            // setup
+            object.isFilter = true;
+            object.isUpdated = updated;
+            object.color = $getFloat32Array8();
+            object.baseMatrix = multiMatrix;
+            object.filters = filters;
+            object.blendMode = blendMode;
+            object.layerWidth = layerWidth;
+            object.layerHeight = layerHeight;
+            object.matrix = $getFloat32Array6(multiMatrix[0], multiMatrix[1], multiMatrix[2], multiMatrix[3], tx, ty);
+        }
+        return object;
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$postDraw(context, matrix, color_transform, object) {
+        // cache
+        const cacheKeys = $getArray(this._$instanceId, "f");
+        const player = $currentPlayer();
+        const cacheStore = player.cacheStore;
+        const manager = context.frameBuffer;
+        // cache or new texture
+        let texture = null;
+        if (object.isUpdated) {
+            texture = manager
+                .getTextureFromCurrentAttachment();
+            const cacheTexture = cacheStore.get(cacheKeys);
+            if (cacheTexture) {
+                cacheStore.set(cacheKeys, null);
+                manager.releaseTexture(cacheTexture);
+            }
+        }
+        else {
+            texture = cacheStore.get(cacheKeys);
+            if (!texture) {
+                throw new Error("the texture is null.");
+            }
+        }
+        // blend only
+        if (!object.canApply) {
+            texture._$offsetX = 0;
+            texture._$offsetY = 0;
+        }
+        // set cache offset
+        let offsetX = texture._$offsetX;
+        let offsetY = texture._$offsetY;
+        // execute filter
+        if (object.isUpdated && object.canApply) {
+            // cache clear
+            const cache = cacheStore.get(cacheKeys);
+            if (cache) {
+                // reset cache params
+                cacheStore.set(cacheKeys, null);
+                cache.layerWidth = 0;
+                cache.layerHeight = 0;
+                cache._$offsetX = 0;
+                cache._$offsetY = 0;
+                cache.matrix = null;
+                cache.colorTransform = null;
+                manager.releaseTexture(cache);
+            }
+            // apply filter
+            const filters = object.filters;
+            if (filters && filters.length) {
+                // init
+                context._$offsetX = 0;
+                context._$offsetY = 0;
+                for (let idx = 0; idx < filters.length; ++idx) {
+                    texture = filters[idx]
+                        ._$applyFilter(context, matrix);
+                }
+                offsetX = context._$offsetX;
+                offsetY = context._$offsetY;
+                // reset
+                context._$offsetX = 0;
+                context._$offsetY = 0;
+                // set offset
+                texture._$offsetX = offsetX;
+                texture._$offsetY = offsetY;
+            }
+        }
+        // update cache params
+        if (object.isUpdated) {
+            texture.filterState = object.canApply;
+            // cache texture
+            const matrix = object.baseMatrix;
+            if (matrix) {
+                texture.matrix = `${matrix[0]}_${matrix[1]}_${matrix[2]}_${matrix[3]}`;
+            }
+            texture.layerWidth = object.layerWidth;
+            texture.layerHeight = object.layerHeight;
+        }
+        // cache texture
+        cacheStore.set(cacheKeys, texture);
+        $poolArray(cacheKeys);
+        // set current buffer
+        if (object.isUpdated) {
+            context._$restoreAttachment();
+        }
+        // set
+        context.reset();
+        context.globalAlpha = $clamp(color_transform[3] + color_transform[7] / 255, 0, 1);
+        context.globalCompositeOperation = object.blendMode;
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.drawImage(texture, -offsetX + object.position.dx, -offsetY + object.position.dy, texture.width, texture.height, color_transform);
+        // end blend
+        context._$endLayer();
+        // reset
+        context._$restoreCurrentMask();
+        // object pool
+        if (object.baseMatrix !== matrix) {
+            $poolFloat32Array6(object.baseMatrix);
+        }
+        $poolFloat32Array6(object.matrix);
+        $poolPreObject(object);
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$draw(context, matrix, color_transform) {
+        // not draw
+        if (!this._$visible) {
+            return;
+        }
+        const transform = this._$transform;
+        let multiColor = color_transform;
+        const rawColor = transform._$rawColorTransform();
+        if (rawColor !== $COLOR_ARRAY_IDENTITY
+            && rawColor[0] !== 1 || rawColor[1] !== 1
+            || rawColor[2] !== 1 || rawColor[3] !== 1
+            || rawColor[4] !== 0 || rawColor[5] !== 0
+            || rawColor[6] !== 0 || rawColor[7] !== 0) {
+            multiColor = $multiplicationColor(color_transform, rawColor);
+        }
+        // not draw
+        const alpha = $clamp(multiColor[3] + multiColor[7] / 255, 0, 1, 0);
+        if (!alpha) {
+            return;
+        }
+        // not draw
+        const children = this._$getChildren();
+        const length = children.length;
+        const graphics = "_$graphics" in this
+            ? this._$graphics
+            : null;
+        if (!length && (!graphics || !graphics._$canDraw)) {
+            return;
+        }
+        // pre data
+        const preObject = this._$preDraw(context, matrix);
+        if (!preObject) {
+            return;
+        }
+        // use cache
+        if (preObject.isFilter && !preObject.isUpdated) {
+            this._$postDraw(context, matrix, multiColor, preObject);
+            return;
+        }
+        let preMatrix = preObject.matrix;
+        const preColorTransform = preObject.isFilter && preObject.color
+            ? preObject.color
+            : multiColor;
+        // if graphics draw
+        if (graphics && graphics._$canDraw) {
+            graphics._$draw(context, preMatrix, preColorTransform);
+        }
+        // init clip params
+        let shouldClip = true;
+        let clipDepth = 0;
+        const clipMatrix = $getArray();
+        const instanceMatrix = $getArray();
+        const clipStack = $getArray();
+        const shouldClips = $getArray();
+        const player = $currentPlayer();
+        // draw children
+        const isLayer = context.isLayer;
+        const isUpdate = this._$isUpdated();
+        for (let idx = 0; idx < length; ++idx) {
+            const instance = children[idx];
+            if (isUpdate) {
+                instance._$placeObject = null;
+            }
+            // mask instance
+            if (instance._$isMask) {
+                continue;
+            }
+            // not layer mode
+            const blendMode = instance._$blendMode || instance.blendMode;
+            if ((blendMode === "alpha" || blendMode === "erase")
+                && !isLayer) {
+                continue;
+            }
+            // mask end
+            if (clipDepth
+                && (instance._$placeId > clipDepth || instance._$clipDepth > 0)) {
+                context.restore();
+                if (shouldClip) {
+                    context._$leaveClip();
+                    if (clipMatrix.length) {
+                        const matrix = clipMatrix.pop();
+                        if (matrix) {
+                            $poolFloat32Array6(preMatrix);
+                            preMatrix = matrix;
+                        }
+                    }
+                }
+                // clear
+                clipDepth = clipStack.length ? clipStack.pop() || 0 : 0;
+                shouldClip = !!shouldClips.pop();
+            }
+            // mask size 0
+            if (!shouldClip) {
+                continue;
+            }
+            // mask start
+            if (instance._$clipDepth > 0) {
+                context.save();
+                if (clipDepth) {
+                    clipStack.push(clipDepth);
+                }
+                shouldClips.push(shouldClip);
+                clipDepth = instance._$clipDepth;
+                shouldClip = instance._$shouldClip(preMatrix);
+                if (shouldClip) {
+                    const adjMatrix = instance._$startClip(context, preMatrix);
+                    if (adjMatrix === false) { // fixed
+                        shouldClip = false;
+                        continue;
+                    }
+                    if (adjMatrix instanceof Float32Array) {
+                        clipMatrix.push(preMatrix);
+                        preMatrix = adjMatrix;
+                    }
+                }
+                continue;
+            }
+            // mask start
+            const maskInstance = instance._$mask;
+            if (maskInstance) {
+                maskInstance._$updated = false;
+                let maskMatrix;
+                if (this === maskInstance._$parent) {
+                    maskMatrix = preMatrix;
+                }
+                else {
+                    maskMatrix = $MATRIX_ARRAY_IDENTITY;
+                    let parent = maskInstance._$parent;
+                    while (parent) {
+                        maskMatrix = $multiplicationMatrix(parent._$transform._$rawMatrix(), maskMatrix);
+                        parent = parent._$parent;
+                    }
+                    const mScale = player.scaleX;
+                    const playerMatrix = $getFloat32Array6(mScale, 0, 0, mScale, 0, 0);
+                    maskMatrix = $multiplicationMatrix(playerMatrix, maskMatrix);
+                    $poolFloat32Array6(playerMatrix);
+                    if (context.isLayer) {
+                        const currentPosition = context.getCurrentPosition();
+                        maskMatrix[4] -= currentPosition.xMin;
+                        maskMatrix[5] -= currentPosition.yMin;
+                    }
+                    if (context.cacheBounds) {
+                        maskMatrix[4] -= context.cacheBounds.xMin;
+                        maskMatrix[5] -= context.cacheBounds.yMin;
+                    }
+                }
+                if (!maskInstance._$shouldClip(maskMatrix)) {
+                    continue;
+                }
+                const adjMatrix = maskInstance._$startClip(context, maskMatrix);
+                context.save();
+                if (adjMatrix === false) { // fixed
+                    context.restore();
+                    continue;
+                }
+                if (adjMatrix instanceof Float32Array) {
+                    instanceMatrix.push(preMatrix);
+                    if (this !== maskInstance._$parent) {
+                        const rawMatrix = transform._$rawMatrix();
+                        adjMatrix[0] = $Math.abs(preMatrix[0]) * $Math.sign(rawMatrix[0]);
+                        adjMatrix[1] = $Math.abs(preMatrix[1]) * $Math.sign(rawMatrix[1]);
+                        adjMatrix[2] = $Math.abs(preMatrix[2]) * $Math.sign(rawMatrix[2]);
+                        adjMatrix[3] = $Math.abs(preMatrix[3]) * $Math.sign(rawMatrix[3]);
+                        adjMatrix[4] = preMatrix[4] - context.cacheBounds.xMin;
+                        adjMatrix[5] = preMatrix[5] - context.cacheBounds.yMin;
+                    }
+                    preMatrix = adjMatrix;
+                }
+            }
+            instance._$draw(context, preMatrix, preColorTransform);
+            instance._$updated = false;
+            // mask end
+            if (maskInstance) {
+                context.restore();
+                context._$leaveClip();
+                if (instanceMatrix.length) {
+                    const matrix = instanceMatrix.pop();
+                    if (matrix) {
+                        $poolFloat32Array6(preMatrix);
+                        preMatrix = matrix;
+                    }
+                }
+            }
+        }
+        // end mask
+        if (clipDepth) {
+            context.restore();
+            if (shouldClips.pop()) {
+                context._$leaveClip();
+            }
+        }
+        // object pool
+        $poolArray(clipMatrix);
+        $poolArray(instanceMatrix);
+        $poolArray(clipStack);
+        $poolArray(shouldClips);
+        // filter and blend
+        if (preObject.isFilter) {
+            return this._$postDraw(context, matrix, multiColor, preObject);
+        }
+        if (preObject.matrix !== matrix) {
+            $poolFloat32Array6(preObject.matrix);
+        }
+        if (multiColor !== color_transform) {
+            $poolFloat32Array8(multiColor);
+        }
+        $poolPreObject(preObject);
+    }
+    /**
+     * @param  {CanvasRenderingContext2D} context
+     * @param  {Float32Array} matrix
+     * @param  {object} options
+     * @param  {boolean} [mouse_children=true]
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$mouseHit(context, matrix, options, mouse_children = true) {
+        let multiMatrix = matrix;
+        const rawMatrix = this._$transform._$rawMatrix();
+        if (rawMatrix !== $MATRIX_ARRAY_IDENTITY) {
+            multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+        }
+        const children = this._$getChildren();
+        // mask set
+        const clips = $getArray();
+        const targets = $getArray();
+        const clipIndexes = $getMap();
+        let clipDepth = 0;
+        let clipIdx = 0;
+        for (let idx = 0; idx < children.length; ++idx) {
+            const instance = children[idx];
+            if (!instance._$visible && !instance._$hitObject) {
+                continue;
+            }
+            if (instance._$clipDepth) {
+                clipIdx = clips.length;
+                clipDepth = instance._$clipDepth;
+                clips.push(instance);
+                continue;
+            }
+            // clip end
+            if (clipDepth && instance._$placeId > clipDepth) {
+                clipIdx = 0;
+                clipDepth = 0;
+            }
+            // clip check on
+            if (clipIdx) {
+                clipIndexes.set(instance._$instanceId, clipIdx);
+            }
+            targets.push(instance);
+        }
+        // setup
+        const mouseChildren = this._$mouseChildren && mouse_children;
+        let hit = false;
+        const isRoot = this._$root === this;
+        while (targets.length) {
+            const instance = targets.pop();
+            if (instance._$isMask) {
+                continue;
+            }
+            if (isRoot && !(instance instanceof InteractiveObject)) {
+                continue;
+            }
+            // mask target
+            if (clipIndexes.has(instance._$instanceId)) {
+                const index = clipIndexes.get(instance._$instanceId);
+                if (!index) {
+                    continue;
+                }
+                const clip = clips[index];
+                if (!clip._$hit(context, multiMatrix, options, true)) {
+                    continue;
+                }
+            }
+            // mask hit test
+            const maskInstance = instance._$mask;
+            if (maskInstance) {
+                if (this === maskInstance._$parent) {
+                    if (!maskInstance._$hit(context, multiMatrix, options, true)) {
+                        continue;
+                    }
+                }
+                else {
+                    let maskMatrix = $MATRIX_ARRAY_IDENTITY;
+                    let parent = maskInstance._$parent;
+                    while (parent) {
+                        maskMatrix = $multiplicationMatrix(parent._$transform._$rawMatrix(), maskMatrix);
+                        parent = parent._$parent;
+                    }
+                    if (!maskInstance._$hit(context, maskMatrix, options, true)) {
+                        continue;
+                    }
+                }
+            }
+            if (instance._$mouseHit(context, multiMatrix, options, mouseChildren)
+                || instance._$hitArea
+                    && instance
+                        ._$hitArea
+                        ._$mouseHit(context, multiMatrix, options, mouseChildren)) {
+                if (instance._$root === instance) {
+                    return true;
+                }
+                if (!mouseChildren) {
+                    return true;
+                }
+                hit = true;
+                if (instance instanceof InteractiveObject) {
+                    if (!instance.mouseEnabled && !instance._$hitObject) {
+                        continue;
+                    }
+                    if (!$isTouch && !options.pointer) {
+                        if ("_$text" in instance
+                            && "type" in instance
+                            && instance.type === "input") {
+                            options.pointer = "text";
+                        }
+                        if ("buttonMode" in instance
+                            && "useHandCursor" in instance
+                            && instance.buttonMode
+                            && instance.useHandCursor) {
+                            options.pointer = "pointer";
+                        }
+                    }
+                    if (!options.hit) {
+                        options.hit = !instance.mouseEnabled && instance._$hitObject
+                            ? instance._$hitObject
+                            : instance;
+                    }
+                    return true;
+                }
+            }
+        }
+        // pool
+        $poolArray(clips);
+        $poolArray(targets);
+        $poolMap(clipIndexes);
+        // graphics
+        if (!hit) {
+            const graphics = "_$graphics" in this
+                ? this._$graphics
+                : null;
+            if (graphics) {
+                hit = graphics._$hit(context, multiMatrix, options);
+            }
+        }
+        if (multiMatrix !== matrix) {
+            $poolFloat32Array6(multiMatrix);
+        }
+        // not found
+        return hit;
+    }
+    /**
+     * @param  {CanvasRenderingContext2D} context
+     * @param  {Float32Array} matrix
+     * @param  {object}  options
+     * @param  {boolean} [is_clip=false]
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$hit(context, matrix, options, is_clip = false) {
+        let multiMatrix = matrix;
+        const rawMatrix = this._$transform._$rawMatrix();
+        if (rawMatrix !== $MATRIX_ARRAY_IDENTITY) {
+            multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+        }
+        const children = this._$getChildren();
+        for (let idx = children.length; idx > -1; --idx) {
+            const instance = children[idx];
+            if (instance._$isMask) {
+                continue;
+            }
+            if (instance._$hit(context, multiMatrix, options, is_clip)) {
+                return true;
+            }
+        }
+        let hit = false;
+        const graphics = "_$graphics" in this
+            ? this._$graphics
+            : null;
+        if (graphics) {
+            hit = graphics._$hit(context, multiMatrix, options);
+        }
+        if (multiMatrix !== matrix) {
+            $poolFloat32Array6(multiMatrix);
+        }
+        return hit;
+    }
+    /**
+     * @param  {number} index
+     * @return {DisplayObject}
+     * @method
+     * @private
+     */
+    _$createInstance(index) {
+        if (!this._$dictionary) {
+            throw new Error("the dictionary is null.");
+        }
+        // build
+        const tag = this._$dictionary[index];
+        const loaderInfo = this._$loaderInfo;
+        if (!loaderInfo || !loaderInfo._$data) {
+            throw new Error("the loaderInfo or data is null.");
+        }
+        const character = loaderInfo._$data.characters[tag.characterId];
+        // symbol class
+        const instance = $createInstance(character.extends);
+        instance._$build(tag, this);
+        instance._$id = index;
+        return instance;
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$outCheck(x, y) {
+        let matrix = $MATRIX_ARRAY_IDENTITY;
+        let parent = this._$parent;
+        while (parent) {
+            matrix = $multiplicationMatrix(parent._$transform._$rawMatrix(), matrix);
+            parent = parent._$parent;
+        }
+        $hitContext.setTransform(1, 0, 0, 1, 0, 0);
+        $hitContext.beginPath();
+        const options = {
+            "x": x,
+            "y": y,
+            "pointer": "",
+            "hit": null
+        };
+        return this._$mouseHit($hitContext, matrix, options);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createWorkerInstance() {
+        if (this._$created || !$rendererWorker) {
+            return;
+        }
+        this._$created = true;
+        const options = $getArray();
+        const message = {
+            "command": "createDisplayObjectContainer",
+            "instanceId": this._$instanceId,
+            "parentId": this._$parent ? this._$parent._$instanceId : -1
+        };
+        const graphics = "_$graphics" in this
+            ? this._$graphics
+            : null;
+        if (graphics) {
+            const recodes = graphics._$getRecodes();
+            options.push(recodes.buffer);
+            message.recodes = recodes;
+            message.maxAlpha = graphics._$maxAlpha;
+            message.canDraw = graphics._$canDraw;
+            message.xMin = graphics._$xMin;
+            message.yMin = graphics._$yMin;
+            message.xMax = graphics._$xMax;
+            message.yMax = graphics._$yMax;
+        }
+        $rendererWorker.postMessage(message, options);
+    }
+    /**
+     * @return {object}
+     * @method
+     * @private
+     */
+    _$postProperty() {
+        if (!$rendererWorker) {
+            return;
+        }
+        this._$postChildrenIds();
+        const options = $getArray();
+        const message = this._$createMessage();
+        const graphics = "_$graphics" in this
+            ? this._$graphics
+            : null;
+        if (graphics && !graphics._$buffer) {
+            message.maxAlpha = graphics._$maxAlpha;
+            message.canDraw = graphics._$canDraw;
+            const recodes = graphics._$getRecodes();
+            message.recodes = recodes;
+            options.push(recodes.buffer);
+            const bounds = this._$getBounds();
+            message.xMin = bounds.xMin;
+            message.yMin = bounds.yMin;
+            message.xMax = bounds.xMax;
+            message.yMax = bounds.yMax;
+        }
+        $rendererWorker
+            .postMessage(message, options);
+        $poolArray(options);
+        this._$posted = true;
+        this._$updated = false;
+    }
+    /**
+     * @param  {array} [childrenIds=null]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$postChildrenIds(childrenIds = null) {
+        if (!$rendererWorker) {
+            return;
+        }
+        if (!childrenIds) {
+            const children = this._$getChildren();
+            childrenIds = $getArray();
+            for (let idx = 0; idx < children.length; ++idx) {
+                childrenIds.push(children[idx]._$instanceId);
+            }
+            $rendererWorker.postMessage({
+                "command": "setChildren",
+                "instanceId": this._$instanceId,
+                "children": childrenIds
+            });
+            $poolArray(childrenIds);
+        }
+        else {
+            $rendererWorker.postMessage({
+                "command": "setChildren",
+                "instanceId": this._$instanceId,
+                "children": childrenIds
+            });
+        }
+    }
+}