@next2d/player 1.14.6 → 1.14.8

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

@@ -0,0 +1,362 @@
+import { BitmapFilter } from "./BitmapFilter";
+import { BlurFilter } from "./BlurFilter";
+import { $intToB, $intToG, $intToR, $clamp, $toColorInt, $getArray } from "../../util/RenderUtil";
+/**
+ * GlowFilter クラスを使用すると、表示オブジェクトにグロー効果を適用できます。
+ * グローのスタイルには複数のオプションがあり、内側グロー、外側グロー、ノックアウトモードなどがあります。
+ * グローフィルターは、distance プロパティと angle プロパティを 0 に設定したドロップシャドウフィルターによく似ています。
+ *
+ * The GlowFilter class lets you apply a glow effect to display objects.
+ * You have several options for the style of the glow, including inner or outer glow and knockout mode.
+ * The glow filter is similar to the drop shadow filter with the distance
+ * and angle properties of the drop shadow filter set to 0.
+ *
+ * @class
+ * @memberOf next2d.filters
+ * @extends  BitmapFilter
+ */
+export class GlowFilter extends BitmapFilter {
+    _$blurFilter;
+    _$color;
+    _$alpha;
+    _$strength;
+    _$inner;
+    _$knockout;
+    /**
+     * @param   {number}  [color=0xFF0000]
+     * @param   {number}  [alpha=1]
+     * @param   {number}  [blur_x=6]
+     * @param   {number}  [blur_y=6]
+     * @param   {number}  [strength=2]
+     * @param   {int}     [quality=1]
+     * @param   {boolean} [inner=false]
+     * @param   {boolean} [knockout=false]
+     *
+     * @constructor
+     * @public
+     */
+    constructor(color = 0, alpha = 1, blur_x = 4, blur_y = 4, strength = 1, quality = 1, inner = false, knockout = false) {
+        super();
+        /**
+         * @type {BlurFilter}
+         * @default BlurFilter
+         * @private
+         */
+        this._$blurFilter = new BlurFilter(blur_x, blur_y, quality);
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$color = 0;
+        /**
+         * @type {number}
+         * @default 1
+         * @private
+         */
+        this._$alpha = 1;
+        /**
+         * @type {number}
+         * @default 1
+         * @private
+         */
+        this._$strength = 1;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$inner = false;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$knockout = false;
+        // setup
+        this.color = color;
+        this.alpha = alpha;
+        this.strength = strength;
+        this.inner = inner;
+        this.knockout = knockout;
+    }
+    /**
+     * @description 指定されたクラスのストリングを返します。
+     *              Returns the string representation of the specified class.
+     *
+     * @return  {string}
+     * @default [class GlowFilter]
+     * @method
+     * @static
+     */
+    static toString() {
+        return "[class GlowFilter]";
+    }
+    /**
+     * @description 指定されたクラスの空間名を返します。
+     *              Returns the space name of the specified class.
+     *
+     * @return  {string}
+     * @default next2d.filters.GlowFilter
+     * @const
+     * @static
+     */
+    static get namespace() {
+        return "next2d.filters.GlowFilter";
+    }
+    /**
+     * @description 指定されたオブジェクトのストリングを返します。
+     *              Returns the string representation of the specified object.
+     *
+     * @return  {string}
+     * @default [object GlowFilter]
+     * @method
+     * @public
+     */
+    toString() {
+        return "[object GlowFilter]";
+    }
+    /**
+     * @description 指定されたオブジェクトの空間名を返します。
+     *              Returns the space name of the specified object.
+     *
+     * @return  {string}
+     * @default next2d.filters.GlowFilter
+     * @const
+     * @public
+     */
+    get namespace() {
+        return "next2d.filters.GlowFilter";
+    }
+    /**
+     * @description アルファ透明度の値です。
+     *              The alpha transparency value for the color.
+     *
+     * @member  {number}
+     * @default 1
+     * @public
+     */
+    get alpha() {
+        return this._$alpha;
+    }
+    set alpha(alpha) {
+        alpha = $clamp(+alpha, 0, 1, 0);
+        if (alpha !== this._$alpha) {
+            this._$alpha = alpha;
+            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 color of the glow.
+     *
+     * @member  {number}
+     * @default 4
+     * @public
+     */
+    get color() {
+        return this._$color;
+    }
+    set color(color) {
+        color = $clamp($toColorInt(color), 0, 0xffffff, 4);
+        if (color !== this._$color) {
+            this._$color = color;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description グローが内側グローであるかどうか
+     *              Specifies whether the glow is an inner glow.
+     *
+     * @member  {boolean}
+     * @default true
+     * @public
+     */
+    get inner() {
+        return this._$inner;
+    }
+    set inner(inner) {
+        if (inner !== this._$inner) {
+            this._$inner = !!inner;
+            this._$doChanged();
+        }
+    }
+    /**
+     * @description オブジェクトにノックアウト効果を適用するかどうか
+     *              Specifies whether the object has a knockout effect.
+     *
+     * @member  {boolean}
+     * @default true
+     * @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 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 オブジェクトのコピーを返します。
+     *              Returns a copy of this filter object.
+     *
+     * @return {GlowFilter}
+     * @method
+     * @public
+     */
+    clone() {
+        return new GlowFilter(this._$color, this._$alpha, this._$blurFilter.blurX, this._$blurFilter.blurY, this._$strength, this._$blurFilter.quality, this._$inner, this._$knockout);
+    }
+    /**
+     * @return {array}
+     * @method
+     * @public
+     */
+    _$toArray() {
+        return $getArray(6, this._$color, this._$alpha, this._$blurFilter.blurX, this._$blurFilter.blurY, this._$strength, this._$blurFilter.quality, this._$inner, this._$knockout);
+    }
+    /**
+     * @return {boolean}
+     * @method
+     * @public
+     */
+    _$isUpdated() {
+        return this._$updated || this._$blurFilter._$isUpdated();
+    }
+    /**
+     * @param  {Rectangle} rect
+     * @param  {number}    [x_scale=0]
+     * @param  {number}    [y_scale=0]
+     * @return {Rectangle}
+     * @method
+     * @private
+     */
+    _$generateFilterRect(rect, x_scale = 0, y_scale = 0) {
+        const clone = rect.clone();
+        if (!this._$canApply()) {
+            return clone;
+        }
+        return this
+            ._$blurFilter
+            ._$generateFilterRect(clone, x_scale, y_scale);
+    }
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$canApply() {
+        return this._$alpha > 0
+            && this._$strength > 0
+            && this._$blurFilter._$canApply();
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {array}  matrix
+     * @return {WebGLTexture}
+     * @method
+     * @private
+     */
+    _$applyFilter(context, matrix) {
+        const manager = context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        if (!currentAttachment) {
+            throw new Error("the current attachment is null.");
+        }
+        this._$updated = false;
+        // reset
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        if (!this._$canApply()) {
+            return manager
+                .getTextureFromCurrentAttachment();
+        }
+        const baseWidth = currentAttachment.width;
+        const baseHeight = currentAttachment.height;
+        const baseOffsetX = context._$offsetX;
+        const baseOffsetY = context._$offsetY;
+        const blurTexture = this
+            ._$blurFilter
+            ._$applyFilter(context, matrix, false);
+        const blurWidth = blurTexture.width;
+        const blurHeight = blurTexture.height;
+        const blurOffsetX = context._$offsetX;
+        const blurOffsetY = context._$offsetY;
+        const width = this._$inner ? baseWidth : blurWidth;
+        const height = this._$inner ? baseHeight : blurHeight;
+        const baseTextureX = this._$inner ? 0 : blurOffsetX - baseOffsetX;
+        const baseTextureY = this._$inner ? 0 : blurOffsetY - baseOffsetY;
+        const blurTextureX = this._$inner ? -blurOffsetX : 0;
+        const blurTextureY = this._$inner ? -blurOffsetY : 0;
+        const type = this._$inner
+            ? "inner"
+            : "outer";
+        context._$bind(currentAttachment);
+        context._$applyBitmapFilter(blurTexture, width, height, baseWidth, baseHeight, baseTextureX, baseTextureY, blurWidth, blurHeight, blurTextureX, blurTextureY, true, type, this._$knockout, this._$strength, null, null, null, $intToR(this._$color, this._$alpha, true), $intToG(this._$color, this._$alpha, true), $intToB(this._$color, this._$alpha, true), this._$alpha, 0, 0, 0, 0);
+        context._$offsetX = baseOffsetX + baseTextureX;
+        context._$offsetY = baseOffsetY + baseTextureY;
+        manager.releaseTexture(blurTexture);
+        return manager.getTextureFromCurrentAttachment();
+    }
+}

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

@@ -0,0 +1,243 @@
+import { BitmapFilter } from "./BitmapFilter";
+import type { FilterQualityImpl } from "../../../interface/FilterQualityImpl";
+import type { BitmapFilterTypeImpl } from "../../../interface/BitmapFilterTypeImpl";
+import type { Rectangle } from "../geom/Rectangle";
+import type { CanvasToWebGLContext } from "../../../webgl/CanvasToWebGLContext";
+/**
+ * GradientBevelFilter クラスを使用すると、オブジェクトにグラデーションベベル効果を適用し、表示できます。
+ * グラデーションベベルは、オブジェクトの外側、内側、または上側が斜めになったエッジであり、グラデーションカラーで強調されます。
+ * 斜めのエッジによってオブジェクトが 3 次元に見えます。
+ *
+ * The GradientBevelFilter class lets you apply a gradient bevel effect to display objects.
+ * A gradient bevel is a beveled edge, enhanced with gradient color,
+ * on the outside, inside, or top of an object.
+ * Beveled edges make objects look three-dimensional.
+ *
+ * @class
+ * @memberOf next2d.filters
+ * @extends  BitmapFilter
+ */
+export declare class GradientBevelFilter extends BitmapFilter {
+    private _$blurFilter;
+    private _$distance;
+    private _$angle;
+    private _$colors;
+    private _$alphas;
+    private _$ratios;
+    private _$strength;
+    private _$type;
+    private _$knockout;
+    /**
+     * @param {number}  [distance=4.0]
+     * @param {number}  [angle=45]
+     * @param {array}   [colors=null]
+     * @param {array}   [alphas=null]
+     * @param {array}   [ratios=null]
+     * @param {number}  [blur_x=4.0]
+     * @param {number}  [blur_y=4.0]
+     * @param {number}  [strength=1]
+     * @param {number}  [quality=1]
+     * @param {string}  [type=BitmapFilterType.INNER]
+     * @param {boolean} [knockout=false]
+     *
+     * @constructor
+     * @public
+     */
+    constructor(distance?: number, angle?: number, colors?: number[] | null, alphas?: number[] | null, ratios?: number[] | null, blur_x?: number, blur_y?: number, strength?: number, quality?: FilterQualityImpl, type?: BitmapFilterTypeImpl, knockout?: boolean);
+    /**
+     * @description 指定されたクラスのストリングを返します。
+     *              Returns the string representation of the specified class.
+     *
+     * @return  {string}
+     * @default [class GradientBevelFilter]
+     * @method
+     * @static
+     */
+    static toString(): string;
+    /**
+     * @description 指定されたクラスの空間名を返します。
+     *              Returns the space name of the specified class.
+     *
+     * @return  {string}
+     * @default next2d.filters.GradientBevelFilter
+     * @const
+     * @static
+     */
+    static get namespace(): string;
+    /**
+     * @description 指定されたオブジェクトのストリングを返します。
+     *              Returns the string representation of the specified object.
+     *
+     * @return  {string}
+     * @default [object GradientBevelFilter]
+     * @method
+     * @public
+     */
+    toString(): string;
+    /**
+     * @description 指定されたオブジェクトの空間名を返します。
+     *              Returns the space name of the specified object.
+     *
+     * @return  {string}
+     * @default next2d.filters.GradientBevelFilter
+     * @const
+     * @public
+     */
+    get namespace(): string;
+    /**
+     * @description カラー配列内の各色に対応するアルファ透明度の値の配列です。
+     *              An array of alpha transparency values
+     *              for the corresponding colors in the colors array.
+     *
+     * @member  {array}
+     * @default null
+     * @public
+     */
+    get alphas(): number[] | null;
+    set alphas(alphas: number[] | null);
+    /**
+     * @description シャドウの角度
+     *              The angle of the shadow.
+     *
+     * @member  {number}
+     * @default 45
+     * @public
+     */
+    get angle(): number;
+    set angle(angle: number);
+    /**
+     * @description 水平方向のぼかし量。
+     *              The amount of horizontal blur.
+     *
+     * @member  {number}
+     * @default 4
+     * @public
+     */
+    get blurX(): number;
+    set blurX(blur_x: number);
+    /**
+     * @description 垂直方向のぼかし量。
+     *              The amount of vertical blur.
+     *
+     * @member  {number}
+     * @default 4
+     * @public
+     */
+    get blurY(): number;
+    set blurY(blur_y: number);
+    /**
+     * @description グラデーションで使用する RGB 16 進数カラー値の配列です。
+     *              An array of RGB hexadecimal color values to use in the gradient.
+     *
+     * @member  {array}
+     * @default null
+     * @public
+     */
+    get colors(): number[] | null;
+    set colors(colors: number[] | null);
+    /**
+     * @description シャドウのオフセット距離です。
+     *              The offset distance for the shadow, in pixels.
+     *
+     * @member  {number}
+     * @default 4
+     * @public
+     */
+    get distance(): number;
+    set distance(distance: number);
+    /**
+     * @description オブジェクトにノックアウト効果を適用するかどうか
+     *              Specifies whether the object has a knockout effect.
+     *
+     * @member  {boolean}
+     * @default false
+     * @public
+     */
+    get knockout(): boolean;
+    set knockout(knockout: boolean);
+    /**
+     * @description ぼかしの実行回数です。
+     *              The number of times to perform the blur.
+     *
+     * @member  {number}
+     * @default 1
+     * @public
+     */
+    get quality(): FilterQualityImpl;
+    set quality(quality: FilterQualityImpl);
+    /**
+     * @description カラー配列内の対応するカラーの色分布比率の配列です。
+     *              An array of color distribution ratios
+     *              for the corresponding colors in the colors array.
+     *
+     * @member  {array}
+     * @default null
+     * @public
+     */
+    get ratios(): number[] | null;
+    set ratios(ratios: number[] | null);
+    /**
+     * @description インプリントの強さまたは広がりです。
+     *              The strength of the imprint or spread.
+     *
+     * @member  {number}
+     * @default 1
+     * @public
+     */
+    get strength(): number;
+    set strength(strength: number);
+    /**
+     * @description オブジェクトでのベベルの配置
+     *              The placement of the bevel on the object.
+     *
+     * @member  {string}
+     * @default BitmapFilterType.INNER
+     * @public
+     */
+    get type(): BitmapFilterTypeImpl;
+    set type(type: BitmapFilterTypeImpl);
+    /**
+     * @description オブジェクトのコピーを返します。
+     *              Returns a copy of this filter object.
+     *
+     * @return {GradientBevelFilter}
+     * @method
+     * @public
+     */
+    clone(): GradientBevelFilter;
+    /**
+     * @return {array}
+     * @method
+     * @public
+     */
+    _$toArray(): any[];
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$isUpdated(): boolean;
+    /**
+     * @param  {Rectangle} rect
+     * @param  {number}    [x_scale=0]
+     * @param  {number}    [y_scale=0]
+     * @return {Rectangle}
+     * @method
+     * @private
+     */
+    _$generateFilterRect(rect: Rectangle, x_scale?: number, y_scale?: number): Rectangle;
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$canApply(): boolean;
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array}  matrix
+     * @return {WebGLTexture}
+     * @method
+     * @private
+     */
+    _$applyFilter(context: CanvasToWebGLContext, matrix: Float32Array): WebGLTexture;
+}