GaugeShapeCustomize.js

//=============================================================================
// GaugeShapeCustomize.js
//=============================================================================
/*:
 * @target MZ
 * @plugindesc Customize the shape of the gauge depicted.
 * @author Tamaki Awana
 * @help This Plugin customize the shape of the
 *  gauge depicted without the image.
 * And, you can change the height of the gauge,
 * the color of the outline,
 * and the gradation of the gauge.
 * 
 * The gauge shape you can set looks like this,
 * Left side:  | / ( < . \
 * Right side: | / ) > . \
 * 
 * Plugin Commands:
 * This plugin does not provide plugin commands.
 *
 * Update History:
 * ver.1.0 Release
 *
 * ---
 * This plugin is released under MIT license.
 * https://opensource.org/licenses/mit-license.php
 * 
 * This plugin is based on Rocketmancer's RMMV plugin "Pretty Gauges",
 * and mjshi's RMMV plugin "Pretty Sleek Gauges".
 * Thanks to Rocketmancer and mjshi.
 * 
 *
 * @param Default Gauge Shape
 * @desc Default shape of the gauge.
 * @default //
 *
 * @param HP Gauge Shape
 * @desc Shape of the HP gauge. If you set a blank, the default value is used.
 * @default 
 *
 * @param MP Gauge Shape
 * @desc Shape of the MP gauge. If you set a blank, the default value is used.
 * @default 
 *
 * @param TP Gauge Shape
 * @desc Shape of the TP gauge. If you set a blank, the default value is used.
 * @default 
 *
 * @param CT Gauge Shape
 * @desc Shape of the CT gauge at TPB. If you set a blank, the default value is used.
 * @default ||
 *
 * @param Gauge Height
 * @desc Default height of the gauges.
 * @type number
 * @decimals 0
 * @max 9007
 * @default 12
 * 
 * @param Gauge Outline
 * @desc Whether you want to show gauge outline?
 * @type boolean
 * @on Show
 * @off Don't show
 * @default true
 * 
 * @param Gauge Outline Color
 * @desc Text color number of gauge outline.
 * @default 0
 * 
 * @param Gauge Background Color
 * @desc Text color number of gauge background.
 * @default 19
 * 
 * @param HP Gauge Color 1
 * @desc Text color number of left side of HP gauge gradient.
 * @default 20
 * 
 * @param HP Gauge Color 2
 * @desc Text color number of right side of HP gauge gradient.
 * @default 21
 * 
 * @param MP Gauge Color 1
 * @desc Text color number of left side of MP gauge gradient.
 * @default 22
 * 
 * @param MP Gauge Color 2
 * @desc Text color number of right side of MP gauge gradient.
 * @default 23
 * 
 * @param TP Gauge Color 1
 * @desc Text color number of left side of TP gauge gradient.
 * @default 28
 * 
 * @param TP Gauge Color 2
 * @desc Text color number of right side of TP gauge gradient.
 * @default 29
 * 
 * @param CT Gauge Color 1
 * @desc Text color number of left side of CT gauge gradient at TPB.
 * @default 26
 * 
 * @param CT Gauge Color 2
 * @desc Text color number of right side of CT gauge gradient at TPB.
 * @default 27
 * 
 */
/*:ja
 * @target MZ
 * @plugindesc ゲージの形状をカスタマイズします
 * @author 沫那環
 * @help このプラグインを使うと、描写されるゲージの形状を
 * 画像なしでカスタマイズできます。
 * さらに、ゲージの縦幅や、ゲージの枠線の色合い、
 * ゲージ本体のグラデーションの色合いを変更することができます。
 * 
 * ゲージの形状として設定できる項目は、以下の通りです。
 * 左側： | / ( < . \
 * 右側： | / ) > . \
 * 
 * 【プラグインコマンドについて】
 * このプラグインには、プラグインコマンドはありません。
 *
 * 【更新履歴】
 * ver.1.0 公開
 *
 * ---
 * このプラグインは MIT License にもとづいて提供されます。
 * https://opensource.org/licenses/mit-license.php
 * 
 * このプラグインを制作するにあたり、Rocketmancer様作の
 * RPGツクールMV用プラグイン「Pretty Gauges」と
 * mjshi様作のRPGツクールMV用プラグイン
 * 「Pretty Sleek Gauges」を参考にさせていただきました。
 * この場を借りて、お礼申し上げます。
 * 
 *
 * @param Default Gauge Shape
 * @desc デフォルトのゲージ形状を設定します
 * @default //
 *
 * @param HP Gauge Shape
 * @desc HPゲージの形状を設定します。空欄を設定すると、デフォルトの形状を使用します。
 * @default 
 *
 * @param MP Gauge Shape
 * @desc MPゲージの形状を設定します。空欄を設定すると、デフォルトの形状を使用します。
 * @default 
 *
 * @param TP Gauge Shape
 * @desc TPゲージの形状を設定します。空欄を設定すると、デフォルトの形状を使用します。
 * @default 
 *
 * @param CT Gauge Shape
 * @desc TPBでのCTゲージの形状を設定します。空欄を設定すると、デフォルトの形状を使用します。
 * @default ||
 *
 * @param Gauge Height
 * @desc ゲージの縦幅を設定します。
 * @type number
 * @decimals 0
 * @max 9007
 * @default 12
 * 
 * @param Gauge Outline
 * @desc ゲージの枠線を表示するかどうかを設定します。
 * @type boolean
 * @on 表示する
 * @off 表示しない
 * @default true
 * 
 * @param Gauge Outline Color
 * @desc ゲージの枠線のテキストカラー番号を設定します。
 * @default 0
 * 
 * @param Gauge Background Color
 * @desc ゲージの背景のテキストカラー番号を設定します。
 * @default 19
 * 
 * @param HP Gauge Color 1
 * @desc HPゲージのグラデーションの左側のテキストカラー番号を設定します。
 * @default 20
 * 
 * @param HP Gauge Color 2
 * @desc HPゲージのグラデーションの右側のテキストカラー番号を設定します。
 * @default 21
 * 
 * @param MP Gauge Color 1
 * @desc MPゲージのグラデーションの左側のテキストカラー番号を設定します。
 * @default 22
 * 
 * @param MP Gauge Color 2
 * @desc MPゲージのグラデーションの右側のテキストカラー番号を設定します。
 * @default 23
 * 
 * @param TP Gauge Color 1
 * @desc TPゲージのグラデーションの左側のテキストカラー番号を設定します。
 * @default 28
 * 
 * @param TP Gauge Color 2
 * @desc TPゲージのグラデーションの右側のテキストカラー番号を設定します。
 * @default 29
 * 
 * @param CT Gauge Color 1
 * @desc TPBでのCTゲージのグラデーションの左側のテキストカラー番号を設定します。
 * @default 26
 * 
 * @param CT Gauge Color 2
 * @desc TPBでのCTゲージのグラデーションの右側のテキストカラー番号を設定します。
 * @default 27
 * 
 */

(() => {
    const pluginName = decodeURIComponent(document.currentScript.src).match(/([^\/]+)\.js$/)[1];
    const parameters = PluginManager.parameters(pluginName);

    const defgaugeTypeLeft = String(parameters['Default Gauge Shape']).substring(0, 1);
    const defgaugeTypeRight = String(parameters['Default Gauge Shape']).substring(1, 2);
    const hpgaugeTypeLeft = (parameters['HP Gauge Shape'].length === 2) ? String(parameters['HP Gauge Shape']).substring(0, 1) : false;
    const hpgaugeTypeRight = (parameters['HP Gauge Shape'].length === 2) ? String(parameters['HP Gauge Shape']).substring(1, 2) : false;
    const mpgaugeTypeLeft = (parameters['MP Gauge Shape'].length === 2) ? String(parameters['MP Gauge Shape']).substring(0, 1) : false;
    const mpgaugeTypeRight = (parameters['MP Gauge Shape'].length === 2) ? String(parameters['MP Gauge Shape']).substring(1, 2) : false;
    const tpgaugeTypeLeft = (parameters['TP Gauge Shape'].length === 2) ? String(parameters['TP Gauge Shape']).substring(0, 1) : false;
    const tpgaugeTypeRight = (parameters['TP Gauge Shape'].length === 2) ? String(parameters['TP Gauge Shape']).substring(1, 2) : false;
    const timegaugeTypeLeft = (parameters['CT Gauge Shape'].length === 2) ? String(parameters['CT Gauge Shape']).substring(0, 1) : false;
    const timegaugeTypeRight = (parameters['CT Gauge Shape'].length === 2) ? String(parameters['CT Gauge Shape']).substring(1, 2) : false;

    const defaultHeight = Number(parameters['Gauge Height']);
    const gaugeOutline = (parameters['Gauge Outline'] || 'true');
    const gaugeOutlineColor = Number(parameters['Gauge Outline Color'] || 0);

    const gaugeBackColor = Number(parameters['Gauge Background Color'] || 19);
    const hpGaugeColor1 = Number(parameters['HP Gauge Color 1'] || 20);
    const hpGaugeColor2 = Number(parameters['HP Gauge Color 2'] || 21);
    const mpGaugeColor1 = Number(parameters['MP Gauge Color 1'] || 22);
    const mpGaugeColor2 = Number(parameters['MP Gauge Color 2'] || 23);
    const tpGaugeColor1 = Number(parameters['TP Gauge Color 1'] || 28);
    const tpGaugeColor2 = Number(parameters['TP Gauge Color 2'] || 29);
    const ctGaugeColor1 = Number(parameters['CT Gauge Color 1'] || 26);
    const ctGaugeColor2 = Number(parameters['CT Gauge Color 2'] || 27);

    //ColorManager
    ColorManager.gaugeOutlineColor = function () {
        return this.textColor(gaugeOutlineColor);
    };

    ColorManager.gaugeBackColor = function () {
        return this.textColor(gaugeBackColor);
    };

    ColorManager.hpGaugeColor1 = function () {
        return this.textColor(hpGaugeColor1);
    };

    ColorManager.hpGaugeColor2 = function () {
        return this.textColor(hpGaugeColor2);
    };

    ColorManager.mpGaugeColor1 = function () {
        return this.textColor(mpGaugeColor1);
    };

    ColorManager.mpGaugeColor2 = function () {
        return this.textColor(mpGaugeColor2);
    };

    ColorManager.ctGaugeColor1 = function () {
        return this.textColor(ctGaugeColor1);
    };

    ColorManager.ctGaugeColor2 = function () {
        return this.textColor(ctGaugeColor2);
    };

    ColorManager.tpGaugeColor1 = function () {
        return this.textColor(tpGaugeColor1);
    };

    ColorManager.tpGaugeColor2 = function () {
        return this.textColor(tpGaugeColor2);
    };

    //Sprite_Gauge
    const _Sprite_Gauge_gaugeHeight = Sprite_Gauge.prototype.gaugeHeight;
    Sprite_Gauge.prototype.gaugeHeight = function () {
        if (defaultHeight) {
            return defaultHeight;
        } else {
            return _Sprite_Gauge_gaugeHeight.call(this);
        }
    };

    Sprite_Gauge.prototype.gaugeOutlineColor = function () {
        return ColorManager.gaugeOutlineColor();
    };

    Sprite_Gauge.prototype.drawGaugeRect = function (x, y, width, height) {
        const rate = this.gaugeRate();
        const fillW = Math.floor(width * rate);
        const color0 = this.gaugeBackColor();
        const color1 = this.gaugeColor1();
        const color2 = this.gaugeColor2();
        const color3 = this.gaugeOutlineColor();
        switch (this._statusType) {
            case "hp":
                gaugeTypeLeft = hpgaugeTypeLeft || defgaugeTypeLeft;
                gaugeTypeRight = hpgaugeTypeRight || defgaugeTypeRight;
                break;
            case "mp":
                gaugeTypeLeft = mpgaugeTypeLeft || defgaugeTypeLeft;
                gaugeTypeRight = mpgaugeTypeRight || defgaugeTypeRight;
                break;
            case "tp":
                gaugeTypeLeft = tpgaugeTypeLeft || defgaugeTypeLeft;
                gaugeTypeRight = tpgaugeTypeRight || defgaugeTypeRight;
                break;
            case "time":
                gaugeTypeLeft = timegaugeTypeLeft || defgaugeTypeLeft;
                gaugeTypeRight = timegaugeTypeRight || defgaugeTypeRight;
                break;
        };
        if (gaugeOutline == 'true') {
            this.bitmap.fillTrap(x + 2, y + 2, width - 4, height - 4, color0, color0);
            this.bitmap.fillTrap(x + 2, y + 2, fillW - 4, height - 4, color1, color2, "atop");
            this.bitmap.outlineTrap(x + 2, y + 2, width - 4, height - 4, color3, color3, "desover");
            this.bitmap.fillTrap(x, y, width, height, "#00000000", "#00000000");
        } else {
            this.bitmap.fillTrap(x, y, width, height, color0, color0);
            this.bitmap.fillTrap(x, y, fillW, height, color1, color2, "atop");
            this.bitmap.fillTrap(x, y, width, height, "#00000000", "#00000000");
        }
        gaugeTypeLeft = defgaugeTypeLeft;
        gaugeTypeRight = defgaugeTypeRight;
    };

    //Bitmap
    Bitmap.prototype.fillTrap = function (x, y, width, height, color1, color2, atop) {
        const context = this._context;
        const grad = context.createLinearGradient(x, y, x + width, y);
        if (atop) {
            context.globalCompositeOperation = 'source-atop';
        } else {
            context.globalCompositeOperation = 'source-over';
        }
        let startCoords = [];

        grad.addColorStop(0, color1);
        grad.addColorStop(1, color2);

        context.save();
        context.beginPath();

        switch (gaugeTypeLeft) {
            case "|":
                startCoords = [x, y + height]
                context.moveTo(x, y + height)
                context.lineTo(x, y)
                break;
            case "/":
                startCoords = [x, y + height]
                context.moveTo(x, y + height)
                context.lineTo(x + height, y)
                break;
            case "<":
                startCoords = [x + height / 2, y + height]
                context.moveTo(x + height / 2, y + height)
                context.lineTo(x, y + height / 2)
                context.lineTo(x + height / 2, y)
                break;
            case "(":
                startCoords = [x + height, y + height]
                context.moveTo(x + height, y + height);
                context.bezierCurveTo(x, y + height, x, y, x + height, y);
                break;
            case ".":
                startCoords = [x, y + height]
                context.moveTo(x, y + height)
                break;
            case "\\":
                startCoords = [x + height, y + height]
                context.moveTo(x + height, y + height)
                context.lineTo(x, y)
                break;
        };

        switch (gaugeTypeRight) {
            case "|":
                context.lineTo(x + width, y)
                context.lineTo(x + width, y + height)
                break;
            case "/":
                context.lineTo(x + width, y)
                context.lineTo(x + width - height, y + height)
                break;
            case ">":
                context.lineTo(x + width - height / 2, y)
                context.lineTo(x + width, y + height / 2)
                context.lineTo(x + width - height / 2, y + height)
                break;
            case ")":
                context.lineTo(x + width - height, y);
                context.bezierCurveTo(x + width, y, x + width, y + height, x + width - height, y + height);
                break;
            case ".":
                context.lineTo(x + width, y + height)
                break;
            case "\\":
                context.lineTo(x + width - height, y)
                context.lineTo(x + width, y + height)
                break;
        };

        context.lineTo(startCoords[0], startCoords[1])
        context.fillStyle = grad;
        context.fill();
        context.restore();
        this._baseTexture.update();
    };

    Bitmap.prototype.outlineTrap = function (x, y, width, height, color1, color2, desover) {
        const context = this._context;
        const grad = context.createLinearGradient(x, y, x + width, y);
        if (desover) {
            context.globalCompositeOperation = 'destination-over';
        } else {
            context.globalCompositeOperation = 'source-over';
        }
        let startCoords = [];

        grad.addColorStop(0, color1);
        grad.addColorStop(1, color2);

        context.save();
        context.beginPath();

        switch (gaugeTypeLeft) {
            case "|":
                startCoords = [x, y + height]
                context.moveTo(x, y + height)
                context.lineTo(x, y)
                break;
            case "/":
                startCoords = [x, y + height]
                context.moveTo(x, y + height)
                context.lineTo(x + height, y)
                break;
            case "<":
                startCoords = [x + height / 2, y + height]
                context.moveTo(x + height / 2, y + height)
                context.lineTo(x, y + height / 2)
                context.lineTo(x + height / 2, y)
                break;
            case "(":
                startCoords = [x + height, y + height]
                context.moveTo(x + height, y + height);
                context.bezierCurveTo(x, y + height, x, y, x + height, y);
                break;
            case ".":
                startCoords = [x, y + height]
                context.moveTo(x, y + height)
                break;
            case "\\":
                startCoords = [x + height, y + height]
                context.moveTo(x + height, y + height)
                context.lineTo(x, y)
                break;
        };

        switch (gaugeTypeRight) {
            case "|":
                context.lineTo(x + width, y)
                context.lineTo(x + width, y + height)
                break;
            case "/":
                context.lineTo(x + width, y)
                context.lineTo(x + width - height, y + height)
                break;
            case ">":
                context.lineTo(x + width - height / 2, y)
                context.lineTo(x + width, y + height / 2)
                context.lineTo(x + width - height / 2, y + height)
                break;
            case ")":
                context.lineTo(x + width - height, y);
                context.bezierCurveTo(x + width, y, x + width, y + height, x + width - height, y + height);
                break;
            case ".":
                context.lineTo(x + width, y + height)
                break;
            case "\\":
                context.lineTo(x + width - height, y)
                context.lineTo(x + width, y + height)
                break;
        };

        context.lineTo(startCoords[0], startCoords[1])
        context.strokeStyle = grad;
        context.lineWidth = 2.0;
        context.stroke();
        context.restore();
        this._baseTexture.update();
    };
})();