重いスプライトのフラッシュ処理などをPIXI.jsのフィルタに置き換えてみる

FixSpriteFlashMethod.js

(function(){
    var canUseFilter = function() {
        return Graphics.isWebGL();
    };

    // //////////////////////////////////////////////////////////
    // ColorBlendFilter
    // //////////////////////////////////////////////////////////

    ColorBlendFilter = function () {
        var fragmentSrc = [
    "precision mediump float;",
    "varying vec2 vTextureCoord;",
    "uniform sampler2D uSampler;",
    "uniform float blendColor[4];",
    "void main(void) {",
    "    vec4 color = texture2D(uSampler, vTextureCoord);",
    "    if (color.a > 0.0) {",
    "        float deltaR = (blendColor[0] - color.r ) * blendColor[3];",
    "        float deltaG = (blendColor[1] - color.g ) * blendColor[3];",
    "        float deltaB = (blendColor[2] - color.b ) * blendColor[3];",
    "        color.r += deltaR;",
    "        color.g += deltaG;",
    "        color.b += deltaB;",
    "        color.rgb *= color.a;",
    "    }",
    "    gl_FragColor = color;",
    "}"
    ].join("\n");

        PIXI.Filter.call(this,
            // vertex shader
            null,
            // fragment shader
            fragmentSrc,
            // custom uniforms
        　　 {blendColor : { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }}
        );
    };

    ColorBlendFilter.prototype = Object.create(PIXI.Filter.prototype);
    ColorBlendFilter.prototype.constructor = PIXI.filters.MyFilter;

    ColorBlendFilter.prototype.setBlendColor = function (values) {
        var r = Math.min(Math.max((values[0] || 0), -255), 255) / 255;
        var g = Math.min(Math.max((values[1] || 0), -255), 255) / 255;
        var b = Math.min(Math.max((values[2] || 0), -255), 255) / 255;
        var a = Math.min(Math.max((values[3] || 0), 0), 255) / 255;
        this.uniforms.blendColor[0] = r;
        this.uniforms.blendColor[1] = g;
        this.uniforms.blendColor[2] = b;
        this.uniforms.blendColor[3] = a;
    };

    /**
     * @method _refresh
     * @private
     */
    var Sprite_refresh = Sprite.prototype._refresh;
    Sprite.prototype._refresh = function() {
        if (!canUseFilter()) {
            return _Sprite_refresh.apply(this, arguments);
        }
        var frameX = Math.floor(this._frame.x);
        var frameY = Math.floor(this._frame.y);
        var frameW = Math.floor(this._frame.width);
        var frameH = Math.floor(this._frame.height);
        var bitmapW = this._bitmap ? this._bitmap.width : 0;
        var bitmapH = this._bitmap ? this._bitmap.height : 0;
        var realX = frameX.clamp(0, bitmapW);
        var realY = frameY.clamp(0, bitmapH);
        var realW = (frameW - realX + frameX).clamp(0, bitmapW - realX);
        var realH = (frameH - realY + frameY).clamp(0, bitmapH - realY);

        this._realFrame.x = realX;
        this._realFrame.y = realY;
        this._realFrame.width = realW;
        this._realFrame.height = realH;
        this.pivot.x = frameX - realX;
        this.pivot.y = frameY - realY;

        if (realW > 0 && realH > 0) {
            if (this._needsTint()) {
                this._createTinter(realW, realH);
                this._executeTint(realX, realY, realW, realH);
            }
            if (this._bitmap) {
                this.texture.baseTexture = this._bitmap.baseTexture;
            }
            this.texture.frame = this._realFrame;
        } else if (this._bitmap) {
            this.texture.frame = Rectangle.emptyRectangle;
        } else {
            this.texture.baseTexture.width = Math.max(this.texture.baseTexture.width, this._frame.x + this._frame.width);
            this.texture.baseTexture.height = Math.max(this.texture.baseTexture.height, this._frame.y + this._frame.height);
            this.texture.frame = this._frame;
        }
        this.texture._updateID++;
    };

    var _Sprite_createTinter = Sprite.prototype._createTinter;
    Sprite.prototype._createTinter = function(w, h) {
        if (!canUseFilter()) {
            return _Sprite_createTinter.apply(this, arguments);
        }
        if (!this._toneFilter || !this._blendFilter) {
            this._toneFilter = new ToneFilter();
            this._blendFilter = new ColorBlendFilter();
            this.filters = [this._toneFilter, this._blendFilter];
        }
    };

    var Sprite_executeTint = Sprite.prototype._executeTint;
    Sprite.prototype._executeTint = function(x, y, w, h) {
        if (!canUseFilter()) {
            return _Sprite_executeTint.apply(this, arguments);
        }
        var tone = this._colorTone;
        var color = this._blendColor;
        this._toneFilter.reset();
        this._toneFilter.adjustTone(tone[0], tone[1], tone[2]);
        this._toneFilter.adjustSaturation(tone[3] * -1);
        this._blendFilter.setBlendColor(color);
    };
})();