582 lines
17 KiB
JavaScript
582 lines
17 KiB
JavaScript
//=============================================================================
|
|
// 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();
|
|
};
|
|
})();
|