RS_TransparentFilter.js

//================================================================
// RS_TransparentFilter.js
// ---------------------------------------------------------------
// The MIT License
// Copyright (c) 2019 biud436
// ---------------------------------------------------------------
// Free for commercial and non commercial use.
//================================================================
/*:
 * @plugindesc This plugin allows you to set up the desired transparent color. <RS_TransparentFilter>
 * @author biud436
 * 
 * @help
 * ================================================================
 * How to Use
 * ================================================================
 * You execute the extension after extract the extension file 
 * and next then select the game project folder. 
 * it's done that you press the Add Extension button. 
 * if you have restarted RPG Maker MV, 
 * it would be created a new icon that indicates a stuff like as an eyedropper in the toolbar. 
 * 
 * - Note that it does not appear the project file select window if you have done settings. 
 * - To delete an extension, you must click the Remove Extension before you delete the extension.
 * ================================================================
 * Download
 * ================================================================
 * 
 * - Plugin Link : https://raw.githubusercontent.com/biud436/MV/master/RS_TransparentFilter.js
 * - Extension (Windows Only) : https://github.com/biud436/MV/releases/download/1.0.0/NewResourceManager.zip
 * 
 * ## Required : 
 * - RPG Make MV 1.5.2 or above.
 * - .NET Framework 4.5.2 or above.
 * 
 * ## Supported Languages
 * - English
 * - Korean
 * ================================================================
 * Change Log
 * ================================================================
 * 2019.02.21 (v1.0.0) - First Release.
 * 2019.02.27 (v1.0.2) 
 * - Added the Sprite_Actor and Sprite_Enemy
 * - Fixed the issue that shows up the transparent color when it is applied the tone in the picture.
 */

var Imported = Imported || {};
Imported.RS_TransparentFilter = true;

var RS = RS || {};
RS.TransparentFilter = RS.TransparentFilter || {};

(function($) {

    "use strict";    

    var parameters = $plugins.filter(function(i) {
        return i.description.contains("<RS_TransparentFilter>");
    });

    parameters = (parameters.length > 0) && parameters[0].parameters;

    $.Params = $.Params || {};
    $.Params.TransparentKey = null;

    $.loadTransparentKey = function() {
        var path = "data/transparentKey.json";
        var xhr = new XMLHttpRequest();

        xhr.overrideMimeType("application/json");
        xhr.open("GET", path);
        xhr.onload = function() {
            if(xhr.status < 400) {
                RS.TransparentFilter.Params.TransparentKey = $.jsonParse(xhr.responseText);
            }
        };
        xhr.send(null);
    };

    $.jsonParse = function (str) {
        var retData = JSON.parse(str, function (k, v) {
          try { return $.jsonParse(v); } catch (e) { return v; }
        });
        return retData;
    };

    //============================================================================
    // PIXI.filters.TransparentFilter
    //============================================================================    

    PIXI.filters.TransparentFilter = function() {
        var vertexSrc = `
        attribute vec2 aVertexPosition;
        attribute vec2 aTextureCoord;
        
        uniform mat3 projectionMatrix;
        
        varying vec2 vTextureCoord;
        
        void main(void)
        {
            gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
            vTextureCoord = aTextureCoord;
        }        
        `;

        var fragmentSrc = `
        precision lowp float;

        varying vec2 vTextureCoord;

        uniform sampler2D uSampler;
        uniform vec4 alphaColor;

        
        void main(void)
        {
            vec4 baseColor = texture2D(uSampler, vTextureCoord).rgba;
            vec3 backgroundColor = baseColor.rgb;
            float d = abs(distance(backgroundColor, alphaColor.rgb));
            float alpha = baseColor.a;

            // Compare to epsilon value.
            if(d < 0.00001) {
                alpha = 0.0;
                backgroundColor.rgb *= alpha;
            }
            
           gl_FragColor = vec4(backgroundColor.rgb, alpha);
        }`;

        PIXI.Filter.call( this, vertexSrc, fragmentSrc );

        this.uniforms.alphaColor = new Float32Array([1.0, 1.0, 1.0, 1.0]);

    };

    PIXI.filters.TransparentFilter.prototype = Object.create( PIXI.Filter.prototype );
    PIXI.filters.TransparentFilter.prototype.constructor = PIXI.filters.TransparentFilter; 
   
    $.addFilter = function(color) {

        var isValid = this._alphaFilter;

        if(!isValid) {
            this._alphaFilter = new PIXI.filters.TransparentFilter();
            if(!this.filters) {
                this.filters = [];
            }

            this._alphaFilter.uniforms.alphaColor = new Float32Array(color);
            this.filters = [this._alphaFilter].concat(this.filters);

        } else {

            if(!this.filters) {
            this.filters = [];
            }      

            this.filters = this.filters.filter(function(filter) {
                return filter !== isValid;
            }, this);

        }

    };

    $.parseColorData = function(data) {
        var ret;

        var color = data;
        var maxValue = 255.0;
        var r = parseInt(data["@red"]) / maxValue;
        var g = parseInt(data["@green"]) / maxValue;
        var b = parseInt(data["@blue"]) / maxValue;
        var a = parseInt(data["@alpha"]) / maxValue;
        ret = [r, g, b, a].map(function(i) { return i * 1.0});    
        
        return ret;
    }

    $.getTransparentColor = function(path, filename) {
        var imageGruop = $.Params.TransparentKey["imagegroup"];
        var items = imageGruop["object"];
        var name = `${filename}.png`;
        var data = [];
        var ret = [1.0, 1.0, 1.0, 1.0];

        if(Array.isArray(items)) {
            data = items.filter(function(i) {
                return i["@path"] == path && i["@name"] == name;
            }, this);

            if(data.length > 0) {
                ret = $.parseColorData(data[0]);
            }            
        } else {
            data = items;
            ret = $.parseColorData(data);
        }

        return ret;

    };

    /**
     * @param {Number} gamma The default value is to 2.2
     */
    $.gamma = function(color, gamma) {

        var gammaCorrection = 1.0 / gamma;
        var red = color[0];
        var green = color[1];
        var blue = color[2];
        var newRed = 255 * (red / 255.0) ^ gammaCorrection;
        var newGreen = 255 * (green / 255.0) ^ gammaCorrection;
        var newBlue = 255 * (blue / 255.0) ^ gammaCorrection;
        
        return [newRed / 255.0, newGreen / 255.0, newBlue / 255.0, color[3]];

    };

    /**
     * @param {Number} offset The hue offset in 360 degrees
     */
    $.rotateHue = function(offset) {

        var isValid = this._colorMatrixFilter;

        if(!isValid) {
            this._colorMatrixFilter = new ToneFilter();

            if(!this.filters) {
                this.filters = [];
            }

            this._colorMatrixFilter.adjustHue(offset);

            this.filters = this.filters.concat([this._colorMatrixFilter]);

        } else {

            if(!this.filters) {
            this.filters = [];
            }      

            this.filters = this.filters.filter(function(filter) {
                return filter !== isValid;
            }, this);

        }        
        
    };

    /**
     * @method adjustTone
     * @param {Number} r The red strength in the range (-255, 255)
     * @param {Number} g The green strength in the range (-255, 255)
     * @param {Number} b The blue strength in the range (-255, 255)
     */
    $.adjustTone = function(tone) {

        var isValid = this._colorMatrixFilter;

        if(!isValid) {
            this._colorMatrixFilter = new ToneFilter();

            if(!this.filters) {
                this.filters = [];
            }

            if(!tone) {
                tone = [0.0, 0.0, 0.0, 0.0];
            }

            this._colorMatrixFilter.adjustTone2(tone[0], tone[1], tone[2], tone[3]);     
            this.filters = this.filters.concat([this._colorMatrixFilter]);

        } else {

            if(!this.filters) {
            this.filters = [];
            }      

            this.filters = this.filters.filter(function(filter) {
                return filter !== isValid;
            }, this);

        }        
        
    };    

    //============================================================================
    // ToneFilter
    //============================================================================      

    /**
     * Changes the tone.
     *
     * @method adjustTone
     * @param {Number} r The red strength in the range (-255, 255)
     * @param {Number} g The green strength in the range (-255, 255)
     * @param {Number} b The blue strength in the range (-255, 255)
     * @param {Number} saturation The saturation value in the range (-255, 255)
     */
    ToneFilter.prototype.adjustTone2 = function(r, g, b, saturation) {
        this.reset();
        this.adjustTone(r, g, b);
        this.adjustSaturation(saturation);
    };

    //============================================================================
    // Sprite_Actor
    //============================================================================  

    Sprite_Actor.prototype.applyTransparentFilter = function() {
        if(!this._battler) return;
        if(!this._battler.isSpriteVisible()) return;

        var name = this._actor.battlerName();
        if (this._battlerName !== name) {
            if(name != "" && !this._alphaFilter) {
                var color = $.getTransparentColor("img/sv_actors", name);
                RS.TransparentFilter.addFilter.call(this, color);
            }
        }
    };

    var alias_Sprite_Actor_updateBitmap = Sprite_Actor.prototype.updateBitmap;
    Sprite_Actor.prototype.updateBitmap = function() {
        this.applyTransparentFilter();
        alias_Sprite_Actor_updateBitmap.call(this);
    };
    
    //============================================================================
    // Sprite_Enemy
    //============================================================================      

    Sprite_Enemy.prototype.applyTransparentFilter = function() {
        var name = this._enemy.battlerName();
        var hue = this._enemy.battlerHue();
        if (this._battlerName !== name || this._battlerHue !== hue) {
            if(name != "" && !this._alphaFilter) {
                var color;
                if ($gameSystem.isSideView()) {
                    color = $.getTransparentColor("img/sv_enemies", name);
                } else {
                    color = $.getTransparentColor("img/enemies", name);
                }
                
                // Hue value is number 0 and 360. 
                // its default value is to 0.
                if(hue > 0) {
                    $.rotateHue.call(this, hue);
                }

                RS.TransparentFilter.addFilter.call(this, color);
            }
        };
    };

    var alias_Sprite_Enemy_loadBitmap = Sprite_Enemy.prototype.loadBitmap
    Sprite_Enemy.prototype.loadBitmap = function(name, hue) {

        // if the hud is 0.0 or above, it must set the 0.0 point.
        // because is that the filter must do a hue rotation in my filter.
        hue = 0.0;
        
        alias_Sprite_Enemy_loadBitmap.call(this, name, hue);
    };
    
    var alias_Sprite_Enemy_updateBitmap = Sprite_Enemy.prototype.updateBitmap;
    Sprite_Enemy.prototype.updateBitmap = function() {
        this.applyTransparentFilter();
        alias_Sprite_Enemy_updateBitmap.call(this);
    };    

    //============================================================================
    // Sprite_Character
    //============================================================================  

    Sprite_Character.prototype.applyTransparentFilter = function() {
        if (this.isImageChanged() && !this._alphaFilter) {
            var characterName = this._character.characterName();
            var characterIndex = this._character.characterIndex();    
            if(characterName !== "") {
                var color = $.getTransparentColor("img/characters", characterName);
                RS.TransparentFilter.addFilter.call(this, color);
            }
        }
    };    

    var alias_Sprite_Character_updateBitmap = Sprite_Character.prototype.updateBitmap;
    Sprite_Character.prototype.updateBitmap = function() {
        this.applyTransparentFilter();
        alias_Sprite_Character_updateBitmap.call(this);
    };

    //============================================================================
    // Sprite_Picture
    //============================================================================  

    var alias_Sprite_Base_initialize = Sprite_Base.prototype.initialize;
    Sprite_Base.prototype.initialize = function() {
        alias_Sprite_Base_initialize.call(this);
    };

    Sprite_Picture.prototype.applyTransparentFilter = function() {
        var picture = this.picture();
        if (picture) {
            if (this._pictureName !== "" && !this._alphaFilter) {
                this._isPicture = false;
                var color = $.getTransparentColor("img/pictures", this._pictureName);

                if(color.equals([1.0, 1.0, 1.0, 1.0])) {
                    return;
                }

                var tone = this._colorTone.clone();
                RS.TransparentFilter.addFilter.call(this, color);
                if(this._needsTint() && !this._colorMatrixFilter) {
                    $.adjustTone.call(this, tone);
                }                
                
            }            
        }        
    };

    var alias_Sprite_Picture_updateBitmap = Sprite_Picture.prototype.updateBitmap;
    Sprite_Picture.prototype.updateBitmap = function() {
        this.applyTransparentFilter();
        alias_Sprite_Picture_updateBitmap.call(this);

        if(this._alphaFilter) {
            this._alphaFilter.enabled = this.visible;
        }

        if(this._colorMatrixFilter) {
            this._colorMatrixFilter.enabled = this.visible;
        }        

    };    

    Sprite_Picture.prototype.setColorTone = function(tone) {

        if (!(tone instanceof Array)) {
            throw new Error('Argument must be an array');
        }

        if (!this._colorTone.equals(tone)) {
            this._colorTone = tone.clone();
        }
        
        if(this._needsTint() && !this._colorMatrixFilter) {
            $.adjustTone.call(this, tone);
        }            

        if(this._colorMatrixFilter) {

            if(this._needsTint()) {
                this._colorMatrixFilter.adjustTone2(tone[0], tone[1], tone[2], tone[3]);
            }
        }

    };
    
    $.loadTransparentKey();

})(RS.TransparentFilter);