//=============================================================================
// L_CircleGaugeUI.js
//=============================================================================
/*:
* @target MV
* @plugindesc 自制UI：圆圈形的倒计时进度条
* @author レナ
* @help L_CircleGaugeUI.js
*
* 插件命令（[]括号为可选项）：
* · L_CircleGaugeUI start 倒计时 圆圈半径 [中心X] [中心Y]
* 开启倒计时。
* · L_CircleGaugeUI stop
* 停止倒计时。
*
* ◆注意：为保证插件正常使用，请先指定一张空png图片！
*
* 使用条款：完全免费使用，可随意更改，允许二次发布，无任何版权限制。
*
* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
*
* @param duration
* @text 持续时间
* @type number
* @min 1
* @max 300
* @default 10
* @desc 默认倒计时，单位为秒。
*
* @param radius
* @text 圆圈半径
* @type number
* @min 50
* @max 300
* @default 200
* @desc 默认圆圈半径，单位为像素。
*
* @param centerX
* @text 圆圈中心X
* @type number
* @min 0
* @max 816
* @desc 默认圆圈中心（X坐标），单位为像素。
*
* @param centerXVariableId
* @parent centerX
* @text 变量id
* @type number
* @desc 绑定到的变量id。
*
* @param centerY
* @text 圆圈中心Y
* @type number
* @min 0
* @max 624
* @desc 默认圆圈中心（Y坐标），单位为像素。
*
* @param centerYVariableId
* @parent centerY
* @text 变量id
* @type number
* @desc 绑定到的变量id。
*
* @param picName
* @text 图片
* @type file
* @dir img/pictures/
* @default 0
*/
(function() {
Bitmap.prototype.drawArc = function(x, y, radius, startAngle, endAngle, lineWidth, color) {
var context = this._context;
context.clearRect(0, 0, Graphics.boxWidth, Graphics.boxHeight);
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, true);
context.strokeStyle = color;
context.lineWidth = lineWidth;
context.stroke();
context.save();
this._setDirty();
};
var pluginName = 'L_CircleGaugeUI';
var params = PluginManager.parameters(pluginName);
var duration = Number(params['duration']) || 10;
var radius = Number(params['radius']) || 50;
var centerXVariableId = Number(params['centerXVariableId']) || 0;
var centerYVariableId = Number(params['centerYVariableId']) || 0;
var centerX = Number(params['centerX']) || Graphics.boxWidth / 2;
var centerY = Number(params['centerY']) || Graphics.boxHeight / 2;
var picName = params['picName'] || '0';
var strokeWidth = 15; // 圆环宽度（粗细）
var isCounting = false;
var bgColor = '#999999';
var gaugeColor = '#ffffff';
var bgCircle = null;
var gaugeCircle = null;
var gaugeContainer = null;
function draw(percent) {
if (percent >= 0) {
// 计算对应角度（100%=360°, 0%=0°）
var startAngle = -Math.PI / 2;
var endAngle = percent * 2 * Math.PI - Math.PI / 2;
gaugeCircle.drawArc(centerX, centerY, radius, startAngle, endAngle, strokeWidth, gaugeColor);
}
}
// 倒计时启动方法
Game_Temp.prototype.startCountdown = function(time, radius, startCallback, endCallback, okCallback) {
if (startCallback) startCallback();
// 若已有倒计时，先停止
if (isCounting) this.stopCountdown();
isCounting = true;
var totalMillis = time * 1000;
var elapsedMillis = 0;
var startTime = Date.now();
if (!gaugeContainer) {
gaugeContainer = new PIXI.Container();
SceneManager._scene.addChild(gaugeContainer);
}
bgCircle = ImageManager.loadPicture(picName);
gaugeCircle = ImageManager.loadPicture(picName);
// 绘制底层灰色时间条
bgCircle.drawArc(centerX, centerY, radius, 0, 2 * Math.PI, strokeWidth, bgColor);
var bgCircleSprite = new Sprite(bgCircle);
gaugeContainer.addChild(bgCircleSprite);
// 绘制白色时间条
var gaugeCircleSprite = new Sprite(gaugeCircle);
gaugeContainer.addChild(gaugeCircleSprite);
// 动画更新逻辑
function update() {
if (!isCounting) return;
elapsedMillis = Date.now() - startTime;
var progress = Math.max(0, 1 - (elapsedMillis / totalMillis));
draw(progress);
gaugeContainer.addChild(gaugeCircleSprite);
// 倒计时结束
if (progress <= 0) {
$gameTemp.stopCountdown();
if (endCallback) endCallback();
return;
}
animationId = requestAnimationFrame(update);
}
// 启动动画
update();
// 监听确定键
function okHandler() {
if (isCounting) {
//alert('按下了确定键');
$gameTemp.stopCountdown();
if (okCallback) okCallback();
}
}
this._countdownOkHandler = okHandler;
};
// 停止倒计时方法
Game_Temp.prototype.stopCountdown = function() {
if (!isCounting) return;
// 停止动画、清空容器
cancelAnimationFrame(animationId);
if (gaugeContainer) {
gaugeContainer.removeChildren();
//SceneManager._scene.removeChild(gaugeContainer);
}
// 清除确定键监听、重置状态
this._countdownOkHandler = null;
isCounting = false;
elapsedMillis = 0;
};
/* 这个暂时没啥用
// 监听确定键
var _Scene_Base_updateInput = Scene_Base.prototype.updateInput;
Scene_Base.prototype.updateInput = function() {
_Scene_Base_updateInput.call(this);
// 按下确定键且有倒计时时触发回调
if (Input.isTriggered('ok') && $gameTemp._countdownOkHandler) {
$gameTemp._countdownOkHandler();
}
};
*/
var _Game_Interpreter_pluginCommand = Game_Interpreter.prototype.pluginCommand;
Game_Interpreter.prototype.pluginCommand = function(command, args) {
_Game_Interpreter_pluginCommand.call(this, command, args);
if (command === pluginName) {
switch(args[0]) {
case 'start':
duration = Number(args[1]) || duration;
radius = Number(args[2]) || radius;
centerX = Number(args[3]) || Number($gameVariables.value(centerXVariableId)) || centerX || Graphics.boxWidth / 2;
centerY = Number(args[4]) || Number($gameVariables.value(centerYVariableId)) || centerY || Graphics.boxHeight / 2;
// ◆开启倒计时
$gameTemp.startCountdown(duration, radius);
break;
case 'stop':
// ◆停止倒计时
$gameTemp.stopCountdown();
break;
}
}
};
})();
L_CircleGaugeUI.zip
(2.4 KB, 下载次数: 4, 售价: 1 星屑)
