@next2d/player 1.14.6 → 1.14.8

package/dist/player/next2d/filters/BevelFilter.js

@@ -0,0 +1,501 @@
+import { BitmapFilter } from "./BitmapFilter";
+import { BlurFilter } from "./BlurFilter";
+import { $Math, $clamp, $toColorInt, $getArray, $Deg2Rad, $intToR, $intToG, $intToB } from "../../util/RenderUtil";
+/**
+ * BevelFilter クラスを使用すると、表示オブジェクトにベベル効果を追加できます。
+ * ボタンなどのオブジェクトにベベル効果を適用すると 3 次元的に表現されます。
+ * 異なるハイライトカラー、シャドウカラー、ベベルのぼかし量、ベベルの角度、ベベルの配置、
+ * ノックアウト効果を使用して、ベベルの外観をカスタマイズできます。
+ *
+ * The BevelFilter class lets you add a bevel effect to display objects.
+ * A bevel effect gives objects such as buttons a three-dimensional look.
+ * You can customize the look of the bevel with different highlight and shadow colors,
+ * the amount of blur on the bevel, the angle of the bevel, the placement of the bevel,
+ * and a knockout effect.
+ *
+ * @class
+ * @memberOf next2d.filters
+ * @extends  BitmapFilter
+ */
+export class BevelFilter extends BitmapFilter {
+    _$blurFilter;
+    _$distance;
+    _$angle;
+    _$highlightColor;
+    _$highlightAlpha;
+    _$shadowColor;
+    _$shadowAlpha;
+    _$strength;
+    _$type;
+    _$knockout;
+    /**
+     * @param {number}  [distance=4]
+     * @param {number}  [angle=45]
+     * @param {uint}    [highlight_color=0xffffff]
+     * @param {number}  [highlight_alpha=1]
+     * @param {uint}    [shadow_color=0x000000]
+     * @param {number}  [shadow_alpha=1]
+     * @param {number}  [blur_x=4]
+     * @param {number}  [blur_y=4]
+     * @param {number}  [strength=1]
+     * @param {int}     [quality=1]
+     * @param {string}  [type=BitmapFilterType.INNER]
+     * @param {boolean} [knockout=false]
+     *
+     * @constructor
+     * @public
+     */
+    constructor(distance = 4, angle = 45, highlight_color = 0xffffff, highlight_alpha = 1, shadow_color = 0, shadow_alpha = 1, blur_x = 4, blur_y = 4, strength = 1, quality = 1, type = "inner", knockout = false) {
+        super();
+        /**
+         * @type {BlurFilter}
+         * @default BlurFilter
+         * @private
+         */
+        this._$blurFilter = new BlurFilter(blur_x, blur_y, quality);
+        /**
+         * @type {number}
+         * @default 4
+         * @private
+         */
+        this._$distance = 4;
+        /**
+         * @type {number}
+         * @default 45
+         * @private
+         */
+        this._$angle = 45;
+        /**
+         * @type {number}
+         * @default 0xffffff
+         * @private
+         */
+        this._$highlightColor = 0xffffff;
+        /**
+         * @type {number}
+         * @default 1
+         * @private
+         */
+        this._$highlightAlpha = 1;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$shadowColor = 0;
+        /**
+         * @type {number}
+         * @default 1
+         * @private
+         */
+        this._$shadowAlpha = 1;
+        /**
+         * @type {number}
+         * @default 1
+         * @private
+         */
+        this._$strength = 1;
+        /**
+         * @type {string}
+         * @default "inner"
+         * @private
+         */
+        this._$type = "inner";
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$knockout = false;
+        // setup
+        this.distance = distance;
+        this.angle = angle;
+        this.highlightColor = highlight_color;
+        this.highlightAlpha = highlight_alpha;
+        this.shadowColor = shadow_color;
+        this.shadowAlpha = shadow_alpha;
+        this.strength = strength;
+        this.type = type;
+        this.knockout = knockout;
+    }
+    /**
+     * @description 指定されたクラスのストリングを返します。
+     *              Returns the string representation of the specified class.
+     *
+     * @return  {string}
+     * @default [class BevelFilter]
+     * @method
+     * @static
+     */
+    static toString() {
+        return "[class BevelFilter]";
+    }
+    /**
+     * @description 指定されたクラスの空間名を返します。
+     *              Returns the space name of the specified class.
+     *
+     * @return  {string}
+     * @default next2d.filters.BevelFilter
+     * @const
+     * @static
+     */
+    static get namespace() {
+        return "next2d.filters.BevelFilter";
+    }
+    /**
+     * @description 指定されたオブジェクトのストリングを返します。
+     *              Returns the string representation of the specified object.
+     *
+     * @return  {string}
+     * @default [object BevelFilter]
+     * @method
+     * @public
+     */
+    toString() {
+        return "[object BevelFilter]";
+    }
+    /**
+     * @description 指定されたオブジェクトの空間名を返します。
+     *              Returns the space name of the specified object.
+     *
+     * @return  {string}
+     * @default next2d.filters.BevelFilter
+     * @const
+     * @public
+     */
+    get namespace() {
+        return "next2d.filters.BevelFilter";
+    }
+    /**
+     * @description シャドウの角度
+     *              The angle of the shadow.
+     *
+     * @member  {number}
+     * @default 45
+     * @public
+     */
+    get angle() {
+        return this._$angle;
+    }
+    set angle(angle) {
+        angle %= 360;
+        if (angle !== this._$angle) {
+            this._$angle = $clamp(angle, -360, 360, 45);
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description 水平方向のぼかし量。
+     *              The amount of horizontal blur.
+     *
+     * @member  {number}
+     * @default 4
+     * @public
+     */
+    get blurX() {
+        return this._$blurFilter.blurX;
+    }
+    set blurX(blur_x) {
+        this._$blurFilter.blurX = blur_x;
+    }
+    /**
+     * @description 垂直方向のぼかし量。
+     *              The amount of vertical blur.
+     *
+     * @member  {number}
+     * @default 4
+     * @public
+     */
+    get blurY() {
+        return this._$blurFilter.blurY;
+    }
+    set blurY(blur_y) {
+        this._$blurFilter.blurY = blur_y;
+    }
+    /**
+     * @description シャドウのオフセット距離です。
+     *              The offset distance for the shadow, in pixels.
+     *
+     * @member  {number}
+     * @default 4
+     * @public
+     */
+    get distance() {
+        return this._$distance;
+    }
+    set distance(distance) {
+        distance = $clamp(+distance, -255, 255, 4);
+        if (distance !== this._$distance) {
+            this._$distance = distance;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description アルファ透明度の値です。
+     *              The alpha transparency value for the color.
+     *
+     * @member  {number}
+     * @default 1
+     * @public
+     */
+    get highlightAlpha() {
+        return this._$highlightAlpha;
+    }
+    set highlightAlpha(highlight_alpha) {
+        highlight_alpha = $clamp(+highlight_alpha, 0, 1, 0);
+        if (highlight_alpha !== this._$highlightAlpha) {
+            this._$highlightAlpha = highlight_alpha;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description グローのカラー
+     *              The color of the glow.
+     *
+     * @member  {number}
+     * @default 0xffffff
+     * @public
+     */
+    get highlightColor() {
+        return this._$highlightColor;
+    }
+    set highlightColor(highlight_color) {
+        highlight_color = $clamp($toColorInt(highlight_color), 0, 0xffffff, 0xffffff);
+        if (highlight_color !== this._$highlightColor) {
+            this._$highlightColor = highlight_color;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description オブジェクトにノックアウト効果を適用するかどうか
+     *              Specifies whether the object has a knockout effect.
+     *
+     * @member  {boolean}
+     * @default false
+     * @public
+     */
+    get knockout() {
+        return this._$knockout;
+    }
+    set knockout(knockout) {
+        if (knockout !== this._$knockout) {
+            this._$knockout = !!knockout;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description ぼかしの実行回数です。
+     *              The number of times to perform the blur.
+     *
+     * @member  {number}
+     * @default 1
+     * @public
+     */
+    get quality() {
+        return this._$blurFilter.quality;
+    }
+    set quality(quality) {
+        this._$blurFilter.quality = quality;
+    }
+    /**
+     * @description アルファ透明度の値です。
+     *              The alpha transparency value for the color.
+     *
+     * @member  {number}
+     * @default 1
+     * @public
+     */
+    get shadowAlpha() {
+        return this._$shadowAlpha;
+    }
+    set shadowAlpha(shadow_alpha) {
+        shadow_alpha = $clamp(+shadow_alpha, 0, 1, 0);
+        if (shadow_alpha !== this._$shadowAlpha) {
+            this._$shadowAlpha = shadow_alpha;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description グローのカラー
+     *              The color of the glow.
+     *
+     * @member  {number}
+     * @default 0
+     * @public
+     */
+    get shadowColor() {
+        return this._$shadowColor;
+    }
+    set shadowColor(shadow_color) {
+        shadow_color = $clamp($toColorInt(shadow_color), 0, 0xffffff, 0);
+        if (shadow_color !== this._$shadowColor) {
+            this._$shadowColor = shadow_color;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description インプリントの強さまたは広がりです。
+     *              The strength of the imprint or spread.
+     *
+     * @member  {number}
+     * @default 1
+     * @public
+     */
+    get strength() {
+        return this._$strength;
+    }
+    set strength(strength) {
+        strength = $clamp(strength | 0, 0, 255, 0);
+        if (strength !== this._$strength) {
+            this._$strength = strength;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description オブジェクトでのベベルの配置
+     *              The placement of the bevel on the object.
+     *
+     * @member  {string}
+     * @default BitmapFilterType.INNER
+     * @public
+     */
+    get type() {
+        return this._$type;
+    }
+    set type(type) {
+        type = `${type}`;
+        if (type !== this._$type) {
+            this._$type = type;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description オブジェクトのコピーを返します。
+     *              Returns a copy of this filter object.
+     *
+     * @return {BevelFilter}
+     * @method
+     * @public
+     */
+    clone() {
+        return new BevelFilter(this._$distance, this._$angle, this._$highlightColor, this._$highlightAlpha, this._$shadowColor, this._$shadowAlpha, this._$blurFilter.blurX, this._$blurFilter.blurY, this._$strength, this._$blurFilter.quality, this._$type, this._$knockout);
+    }
+    /**
+     * @return {array}
+     * @method
+     * @public
+     */
+    _$toArray() {
+        return $getArray(0, this._$distance, this._$angle, this._$highlightColor, this._$highlightAlpha, this._$shadowColor, this._$shadowAlpha, this._$blurFilter.blurX, this._$blurFilter.blurY, this._$strength, this._$blurFilter.quality, this._$type, this._$knockout);
+    }
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$isUpdated() {
+        return this._$updated || this._$blurFilter._$isUpdated();
+    }
+    /**
+     * @param  {Rectangle} rect
+     * @param  {number}    [x_scale=null]
+     * @param  {number}    [y_scale=null]
+     * @return {Rectangle}
+     * @method
+     * @private
+     */
+    _$generateFilterRect(rect, x_scale = 0, y_scale = 0) {
+        let clone = rect.clone();
+        if (!this._$canApply()) {
+            return clone;
+        }
+        clone = this
+            ._$blurFilter
+            ._$generateFilterRect(clone, x_scale, y_scale);
+        const radian = this._$angle * $Deg2Rad;
+        const x = $Math.abs($Math.cos(radian) * this._$distance);
+        const y = $Math.abs($Math.sin(radian) * this._$distance);
+        clone.x += -x;
+        clone.width += x;
+        clone.y += -y;
+        clone.height += y * 2;
+        return clone;
+    }
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$canApply() {
+        return this._$strength > 0
+            && this._$distance !== 0
+            && this._$blurFilter._$canApply();
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array}  matrix
+     * @return {WebGLTexture}
+     * @private
+     */
+    _$applyFilter(context, matrix) {
+        this._$updated = false;
+        const manager = context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        if (!currentAttachment) {
+            throw new Error("the current attachment is null.");
+        }
+        // reset
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        const baseTexture = manager
+            .getTextureFromCurrentAttachment();
+        if (!this._$canApply()) {
+            return baseTexture;
+        }
+        const baseWidth = currentAttachment.width;
+        const baseHeight = currentAttachment.height;
+        const baseOffsetX = context._$offsetX;
+        const baseOffsetY = context._$offsetY;
+        // matrix to scale
+        const xScale = $Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+        const yScale = $Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
+        // pointer
+        const radian = this._$angle * $Deg2Rad;
+        const x = $Math.cos(radian) * this._$distance * xScale;
+        const y = $Math.sin(radian) * this._$distance * yScale;
+        // highlight buffer
+        const highlightTextureBaseAttachment = manager
+            .createTextureAttachment(baseWidth, baseHeight);
+        context._$bind(highlightTextureBaseAttachment);
+        context.reset();
+        context.drawImage(baseTexture, 0, 0, baseWidth, baseHeight);
+        context.globalCompositeOperation = "erase";
+        context.drawImage(baseTexture, x * 2, y * 2, baseWidth, baseHeight);
+        const highlightTextureBase = this
+            ._$blurFilter
+            ._$applyFilter(context, matrix, false);
+        const blurWidth = highlightTextureBase.width;
+        const blurHeight = highlightTextureBase.height;
+        const bevelWidth = $Math.ceil(blurWidth + $Math.abs(x) * 2);
+        const bevelHeight = $Math.ceil(blurHeight + $Math.abs(y) * 2);
+        // bevel filter buffer
+        const isInner = this._$type === "inner";
+        const width = isInner ? baseWidth : bevelWidth;
+        const height = isInner ? baseHeight : bevelHeight;
+        const absX = $Math.abs(x);
+        const absY = $Math.abs(y);
+        const blurOffsetX = (blurWidth - baseWidth) / 2;
+        const blurOffsetY = (blurHeight - baseHeight) / 2;
+        const baseTextureX = isInner ? 0 : absX + blurOffsetX;
+        const baseTextureY = isInner ? 0 : absY + blurOffsetY;
+        const blurTextureX = isInner ? -blurOffsetX - x : absX - x;
+        const blurTextureY = isInner ? -blurOffsetY - y : absY - y;
+        context._$bind(currentAttachment);
+        // TODO 後で確認
+        manager.releaseAttachment(highlightTextureBaseAttachment, true);
+        context._$applyBitmapFilter(highlightTextureBase, width, height, baseWidth, baseHeight, baseTextureX, baseTextureY, blurWidth, blurHeight, blurTextureX, blurTextureY, false, this._$type, this._$knockout, this._$strength, null, null, null, $intToR(this._$highlightColor, this._$highlightAlpha, true), $intToG(this._$highlightColor, this._$highlightAlpha, true), $intToB(this._$highlightColor, this._$highlightAlpha, true), this._$highlightAlpha, $intToR(this._$shadowColor, this._$shadowAlpha, true), $intToG(this._$shadowColor, this._$shadowAlpha, true), $intToB(this._$shadowColor, this._$shadowAlpha, true), this._$shadowAlpha);
+        context._$offsetX = baseOffsetX + baseTextureX;
+        context._$offsetY = baseOffsetY + baseTextureY;
+        manager.releaseTexture(highlightTextureBase);
+        return manager.getTextureFromCurrentAttachment();
+    }
+}

package/dist/player/next2d/filters/BitmapFilter.d.ts

@@ -0,0 +1,75 @@
+/**
+ * BitmapFilter クラスは、すべてのイメージフィルター効果の基本クラスです。
+ * BevelFilter、BlurFilter、ColorMatrixFilter、ConvolutionFilter、DisplacementMapFilter、DropShadowFilter、GlowFilter、GradientBevelFilter、
+ * および GradientGlowFilter クラスはすべて、BitmapFilter クラスを継承します。
+ * このフィルター効果は、あらゆる表示オブジェクトに適用できます。
+ *
+ * The BitmapFilter class is the base class for all image filter effects.
+ * The BevelFilter, BlurFilter, ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, DropShadowFilter, GlowFilter, GradientBevelFilter,
+ * and GradientGlowFilter classes all extend the BitmapFilter class.
+ * You can apply these filter effects to any display object.
+ * You can neither directly instantiate nor extend BitmapFilter.
+ *
+ * @class
+ * @memberOf next2d.filters
+ */
+export declare class BitmapFilter {
+    protected _$updated: boolean;
+    /**
+     * @constructor
+     * @public
+     */
+    constructor();
+    /**
+     * @description 指定されたクラスのストリングを返します。
+     *              Returns the string representation of the specified class.
+     *
+     * @return  {string}
+     * @default [class BitmapFilter]
+     * @method
+     * @static
+     */
+    static toString(): string;
+    /**
+     * @description 指定されたクラスの空間名を返します。
+     *              Returns the space name of the specified class.
+     *
+     * @return  {string}
+     * @default next2d.filters.BitmapFilter
+     * @const
+     * @static
+     */
+    static get namespace(): string;
+    /**
+     * @description 指定されたオブジェクトのストリングを返します。
+     *              Returns the string representation of the specified object.
+     *
+     * @return  {string}
+     * @default [object BitmapFilter]
+     * @method
+     * @public
+     */
+    toString(): string;
+    /**
+     * @description 指定されたオブジェクトの空間名を返します。
+     *              Returns the space name of the specified object.
+     *
+     * @return  {string}
+     * @default next2d.filters.BitmapFilter
+     * @const
+     * @public
+     */
+    get namespace(): string;
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$isUpdated(): boolean;
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$doChanged(): void;
+}

package/dist/player/next2d/filters/BitmapFilter.js

@@ -0,0 +1,96 @@
+import { $doUpdated } from "../../util/Global";
+/**
+ * BitmapFilter クラスは、すべてのイメージフィルター効果の基本クラスです。
+ * BevelFilter、BlurFilter、ColorMatrixFilter、ConvolutionFilter、DisplacementMapFilter、DropShadowFilter、GlowFilter、GradientBevelFilter、
+ * および GradientGlowFilter クラスはすべて、BitmapFilter クラスを継承します。
+ * このフィルター効果は、あらゆる表示オブジェクトに適用できます。
+ *
+ * The BitmapFilter class is the base class for all image filter effects.
+ * The BevelFilter, BlurFilter, ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, DropShadowFilter, GlowFilter, GradientBevelFilter,
+ * and GradientGlowFilter classes all extend the BitmapFilter class.
+ * You can apply these filter effects to any display object.
+ * You can neither directly instantiate nor extend BitmapFilter.
+ *
+ * @class
+ * @memberOf next2d.filters
+ */
+export class BitmapFilter {
+    _$updated;
+    /**
+     * @constructor
+     * @public
+     */
+    constructor() {
+        /**
+         * @type {boolean}
+         * @default true
+         * @private
+         */
+        this._$updated = true;
+    }
+    /**
+     * @description 指定されたクラスのストリングを返します。
+     *              Returns the string representation of the specified class.
+     *
+     * @return  {string}
+     * @default [class BitmapFilter]
+     * @method
+     * @static
+     */
+    static toString() {
+        return "[class BitmapFilter]";
+    }
+    /**
+     * @description 指定されたクラスの空間名を返します。
+     *              Returns the space name of the specified class.
+     *
+     * @return  {string}
+     * @default next2d.filters.BitmapFilter
+     * @const
+     * @static
+     */
+    static get namespace() {
+        return "next2d.filters.BitmapFilter";
+    }
+    /**
+     * @description 指定されたオブジェクトのストリングを返します。
+     *              Returns the string representation of the specified object.
+     *
+     * @return  {string}
+     * @default [object BitmapFilter]
+     * @method
+     * @public
+     */
+    toString() {
+        return "[object BitmapFilter]";
+    }
+    /**
+     * @description 指定されたオブジェクトの空間名を返します。
+     *              Returns the space name of the specified object.
+     *
+     * @return  {string}
+     * @default next2d.filters.BitmapFilter
+     * @const
+     * @public
+     */
+    get namespace() {
+        return "next2d.filters.BitmapFilter";
+    }
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$isUpdated() {
+        return this._$updated;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$doChanged() {
+        this._$updated = true;
+        $doUpdated();
+    }
+}