グラデーションの描画を、開始色と終端色の指定に変更

SAN_CircleGauge.js

//=============================================================================
// SAN_CircleGauge.js
//=============================================================================
// Copyright (c) 2019 Sanshiro
// Released under the MIT license
// http://opensource.org/licenses/mit-license.php
//=============================================================================

/*:
 * @plugindesc サークルゲージ 0.0.1
 * 円形ゲージ描画
 * @author Sanshiro https://github.com/rev2nym
 * @help
 * ■概要
 * 円形ゲージを描画します。
 * 
 * ■スクリプトコマンド
 * 円形ゲージを描画させたいスプライトに対して次のスクリプトを実行してください。
 * 
 * ・単色円形ゲージ
 * sprite.bitmap.drawCircleLine(
 *   100, // 中心X座標
 *   100, // 中心Y座標 
 *   80, // 半径
 *   0.0, // 描画開始率(0.0で0度、1.0で360度)
 *   1.0, // 描画終了率(0.0で0度、1.0で360度)
 *   12, // 線幅
 *   '#ff0000', // 描画色
 *   false // 反時計回りフラグ
 * );
 * 
 * ・グラデーション円形ゲージ
 * sprite.bitmap.gradientDrawCircleLine(
 *   100, // 中心X座標
 *   100, // 中心Y座標 
 *   80, // 半径
 *   0.0, // 描画開始率(0.0で0度、1.0で360度)
 *   1.0, // 描画終了率(0.0で0度、1.0で360度)
 *   12, // 線幅
 *   '#000000', // 描画色1
 *   '#ff0000', // 描画色2
 * );
 * 
 * ■利用規約
 * MITライセンスのもと、商用利用、改変、再配布が可能です。
 * ただし冒頭のコメントは削除や改変をしないでください。
 * これを利用したことによるいかなる損害にも作者は責任を負いません。
 * サポートは期待しないでください＞＜。
 */

(function() {
'use strict';

String.prototype.toColorArray = function () {
    // #000000 形式
    var colorCode = this.match(/^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);
    if (colorCode) {
        return [Number('0x'+colorCode[1]), Number('0x'+colorCode[2]), Number('0x'+colorCode[3]), 255];
    }
    // rgb(0,0,0) 形式
    var rgb = this.match(/^rgba?\((.*)\)$/);
    if (rgb) {
        return rgb[1].split(',').map(function(s){return Number(s);});
    }
    return this;
};

Array.prototype.toColorString = function () {
    if (this.every(function(n) {return typeof n === 'number' && n >= 0 && n < 256;})) {
        if (this.length === 3 || this[3] === 255) {
            return '#'+('0'+this[0].toString(16)).slice(-2)+('0'+this[1].toString(16)).slice(-2)+('0'+this[2].toString(16)).slice(-2);
        } else if (this.length === 4) {
            return 'rgba('+this[0]+','+this[1]+','+this[2]+')';
        }
    }
    return this;
};

Bitmap.prototype.drawCircleLine = function(
    x, y, radius, startRate, endRate, lineWidth,
    color, anticlockwise
) {
    anticlockwise = anticlockwise || false;
    color = color || '#ffffff';
    var arcStartRadian = 2.0 * Math.PI * startRate - 0.5 * Math.PI;
    var arcEndRadian = 2.0 * Math.PI * endRate - 0.5 * Math.PI;
    var context = this._context;
    context.save();
    context.lineWidth = lineWidth;
    context.strokeStyle = color;
    context.beginPath();
    context.arc(x, y, radius, arcStartRadian, arcEndRadian, anticlockwise);
    context.stroke();
    context.restore();
    this._setDirty();
};

Bitmap.prototype.gradientDrawCircleLine = function(
    x, y, radius, startRate, endRate, lineWidth,
    color1, color2
) {
    var anticlockwise = false;
    color1 = color1 || '#000000';
    color2 = color2 || '#ff0000';
    var color1a = color1.toColorArray();
    var color2a = color2.toColorArray();
    var color3 = color1a.map(function(c,i){return Math.round(c + (color2a[i]-c)/4*1);}).toColorString();
    var color4 = color1a.map(function(c,i){return Math.round(c + (color2a[i]-c)/4*2);}).toColorString();
    var color5 = color1a.map(function(c,i){return Math.round(c + (color2a[i]-c)/4*3);}).toColorString();
    var startRadian = 2.0 * Math.PI * startRate;
    var endRadian = 2.0 * Math.PI * endRate;
    var offsetRadian =  -0.5 * Math.PI;
    var context = this._context;
    var colors = [color1, color3, color4, color5, color2];
    for (var quad = 0; quad < 4; quad++) {
        var quadStartRadian = startRadian + (endRadian - startRadian) / 4 * quad;
        var quadEndRadian = startRadian + (endRadian - startRadian) / 4 * (quad+1);
        if (startRadian > quadEndRadian || endRadian < quadStartRadian) {
            break;
        }
        var gradRadius = radius + lineWidth / 2.0;
        var gradX0 = x + Math.cos(quadStartRadian + offsetRadian) * gradRadius;
        var gradY0 = y + Math.sin(quadStartRadian + offsetRadian) * gradRadius;
        var gradX1 = x + Math.cos(quadEndRadian + offsetRadian) * gradRadius;
        var gradY1 = y + Math.sin(quadEndRadian + offsetRadian) * gradRadius;
        var gradColor0 = colors[quad];
        var gradColor1 = colors[quad + 1];
        var grad = context.createLinearGradient(gradX0, gradY0, gradX1, gradY1);
        var arcStartRadian = Math.max(quadStartRadian, startRadian) + offsetRadian;
        var arcEndRadian = Math.min(endRadian, quadEndRadian) + offsetRadian;        
        grad.addColorStop(0.0, gradColor0);
        grad.addColorStop(1.0, gradColor1);
        context.save();
        context.lineWidth = lineWidth;
        context.strokeStyle = grad;
        context.beginPath();
        context.arc(x, y, radius, arcStartRadian, arcEndRadian, anticlockwise);
        context.stroke();
        context.restore();
    }
    this._setDirty();
};

})();