图标按钮插件的坐标和点击触发范围的问题

xuhao1996 · 发表于 2021-9-9 03:12:16

本帖最后由 xuhao1996 于 2021-9-11 01:49 编辑

论坛今天图片附件都上传不了什么情况
今天汉化一个插件碰见

一个插件图标按钮插件
生成图标按钮的时候
坐标改了没有用
貌似是x坐标和y坐标代码读取位置不对吧

更新图标的
x坐标y坐标可以改变位置了
但是它
点击图标触发范围又变大了

原版插件的问题，用原版插件，新工程都用数字没有用汉字，还是出现同样的问题

应该这段代码的问题，
x.y.坐标返回的问题

         if (!freeCoordinates) {
            let x = 0;
            let y = 0;
            switch(location) {
            case 'rightBottom':
                  x = Graphics.width  - (iconWidth  + iconMarginLeft + iconMarginRight);
                  y = Graphics.height - (iconHeight + iconMarginTop  + iconMarginBottom);
                  break;
            case 'leftBottom':
                  x = iconMarginLeft + iconMarginRight;
                  y = Graphics.height - (iconHeight + iconMarginTop  + iconMarginBottom);
                  break;
            case 'rightTop':
                  x = iconMarginLeft + iconMarginRight;
                  y = iconMarginTop  + iconMarginBottom;
                  break;
            case 'leftTop':
                  x = Graphics.width - (iconWidth  + iconMarginLeft + iconMarginRight);
                  y = iconMarginTop  + iconMarginBottom;
                  break;
            default:
                  break;
            }

            return { x: x, y: y };
         } else {
            return { x: _x, y: _y };
         }
      }

lqi991 · 发表于 2021-9-9 03:12:17

本帖最后由 lqi991 于 2021-10-2 13:56 编辑

'use strict';
/* global PIXI */
/* global Bitmap */
/* global PluginManager */
/* global ImageManager */
/* global SceneManager */
/* global Graphics */
/* global Scene_Map */
/* global Sprite */
/* global TouchInput */
/* global $gameTemp */
/* global Window_Message */
//=============================================================================
// IconButton.js
//=============================================================================
/*:
ja
* @target MZ
* @plugindesc 自定义图标按钮插件。
* @author BananaPepperTK
*
* @help 使用使用自定义或者系统图标做成按钮。
*
* 詳細
* https://github.com/sevenspice/IconButton
*
* @param FreeCoordinates
* @text 自由坐标
* @desc 如何指定图标的位置。如果为 true，则直接使用命令指定显示位置。 false
* @default true
*
* @param IconSet
* @text 图标集
* @desc 要使用的图标集的表名称。如果未指定任何内容，则使用默认图标集。
*
* @param IconSize
* @text 图标大小
* @desc 精灵表中图标每边的像素数。
* @default 32
*
* @param IconCount
* @text 图标计数
* @desc 精灵表中图标的行数。
* @default 16
*
* @param IconMarginLeft
* @text 图标左边距
* @desc 图标的左边距。
* @default 10
*
* @param IconMarginRight
* @text 图标右边距
* @desc 图标的右边距
* @default 10
*
* @param IconMarginTop
* @text 图标上边距
* @desc 图标的上边距
* @default 10
*
* @param IconMarginBottom
* @text 图标下边距
* @desc 图标的下边距
* @default 10
*
* @command create
* @text 生成图标按钮
* @desc 生成一个图标按钮。
*
* @arg id
* @type number
* @text 按钮ID
* @desc 标识按钮的 ID 值。
*
* @arg eventId
* @type 公共事件
* @text 公共事件 ID
* @desc 要执行公共事件的 ID。
*
* @arg iconId
* @type number
* @text 图标 ID
* @desc 要显示的图标的 ID。
*
* @arg location
* @type string
* @default
* @text 安置地点
* @desc 将其放置在屏幕四个角的某个位置。左上角=leftTop |左下角=leftBottom |右上角=rightTop |右下角=rightBottom
*
* @arg x
* @type number
* @default 0
* @text x坐标
* @desc 直接指定x坐标。
*
* @arg y
* @type number
* @default 0
* @text y坐标
* @desc 直接指定y坐标。
*
* @arg scale
* @type number
* @default 1.0
* @text 放大/缩小率
* @desc 要显示的图标的放大/缩小比例。
*
* @arg text
* @type string
* @text 文本
* @desc 显示在图标底部的文本。
*
* @arg fontSize
* @type number
* @default 14
* @text 字体大小
* @desc 显示在图标底部的文本字体大小。
*
* @command show
* @text 展示
* @desc 显示图标。
*
* @arg id
* @type number
* @text 按钮ID
* @desc 标识按钮的 ID 值。
*
* @command update
* @text 更新
* @desc 更新图标。
*
* @arg id
* @type number
* @text 按钮ID
* @desc 标识按钮的 ID 值。
*
* @arg x
* @type number
* @default 0
* @text x坐标
* @desc 直接指定x坐标。
*
* @arg y
* @type number
* @default 0
* @text y坐标
* @desc 直接指定y坐标。
*
* @arg scale
* @type number
* @default 1.0
* @text 放大/缩小率
* @desc 要显示的图标的放大/缩小比例。
*
* @arg text
* @type string
* @text 文本
* @desc 显示在图标底部的文本。
*
* @arg fontSize
* @type number
* @default 14
* @text 字体大小
* @desc 显示在图标底部的文本字体大小。
*
* @command hide
* @text 隐藏
* @desc 隐藏图标。
*
* @arg id
* @type number
* @text 按钮ID
* @desc 标识按钮的 ID 值。
*
*/
// グローバル変数を追加する
// このプラグインを有効化すると追加されるため競合に注意すること
window.$gameItemSlot = null;
(function () {
const pluginName = 'IconButton';
let iconSet = null;
// プラグイン初期化
// コマンドパラメーターの取得
const parameters = PluginManager.parameters(pluginName);
let freeCoordinates = parameters['FreeCoordinates'];
if (freeCoordinates == 'true') freeCoordinates = true;
else freeCoordinates = false;
const _iconSet = parameters['IconSet'];
if (_iconSet) iconSet = ImageManager.loadSystem(_iconSet);
else iconSet = ImageManager.loadSystem('IconSet');
const iconSize = parseInt(parameters['IconSize']);
const baseIconWidth = iconSize;
const baseIconHeight = iconSize;
const iconCount = parseInt(parameters['IconCount']);
const iconMarginLeft = parseInt(parameters['IconMarginLeft']);
const iconMarginRight = parseInt(parameters['IconMarginRight']);
const iconMarginTop = parseInt(parameters['IconMarginTop']);
const iconMarginBottom = parseInt(parameters['IconMarginBottom']);
let iconButtons = {};
let iconButtonEnables = {};
// プラグインで使用する関数群
/**
* アイテムのアイコン画像を取得する巻数
* @param {Bitmap} iconset アイコン一覧のスプライト
* @param {integer} iconIdex アイコン番号
* @param {integer} iconWidth アイコン幅
* @param {integer} iconHeight アイコン高さ
* @param {integer} iconCount スプライトシート横一列の最大アイコン数
* @return {Bitmap} アイコンのビットマップを返却
*/
const getIcon = (iconset, iconIdex, iconWidth, iconHeight, iconCount) => {
const iconX = (iconIdex % iconCount) * iconWidth;
const iconY = Math.floor(iconIdex / iconCount) * iconHeight;
const bitmap = new Bitmap(iconWidth, iconHeight);
bitmap.blt(iconset, iconX, iconY, iconWidth, iconHeight, 0, 0, iconWidth, iconHeight);
return bitmap;
};
/**
* アイコンボタンクラス。
*/
class IconButton {
constructor(
_eventId
, _iconSet
, _iconIndex
, _x
, _y
, _baseIconWidth
, _baseIconHeight
, _iconCount
, _scale
, _text
, _fontSize
, _location
, _iconMarginLeft
, _iconMarginRight
, _iconMarginTop
, _iconMarginBottom
, _freeCoordinates
) {
this.eventId = _eventId;
this.iconSet = _iconSet;
this.iconIndex = _iconIndex;
this.x = _x;
this.y = _y;
this.baseIconWidth = _baseIconWidth;
this.baseIconHeight = _baseIconHeight;
this.iconCount = _iconCount;
this.scale = _scale;
this.originScale = _scale;
this.width = Math.floor(this.baseIconWidth * this.scale);
this.height = Math.floor(this.baseIconHeight * this.scale);
this.iconMarginLeft = _iconMarginLeft;
this.iconMarginRight = _iconMarginRight;
this.iconMarginTop = _iconMarginTop;
this.iconMarginBottom = _iconMarginBottom;
this.location = _location;
this.freeCoordinates = _freeCoordinates;
this.text = _text;
this.fontSize = _fontSize;
this.fontStyle = null;
this.icon = null;
this.underText = null;
}
/**
* アイコンの表示位置を返却する。
* @param {integer} _x 直接指定されたx座標
* @param {integer} _y 直接指定されたy座標
* @param {string} location 文字列での位置指定
* @param {integer} iconWidth アイコン幅
* @param {integer} iconHeight アイコン高さ
* @param {integer} iconMarginLeft アイコンの左マージン
* @param {integer} iconMarginRight アイコンの右マージン
* @param {integer} iconMarginTop アイコンの上マージン
* @param {integer} iconMarginBottom アイコンの下マージン
* @param {boolean} freeCoordinates 座標直接指定か否か
* @return {object} アイコンの表示位置を返却。
*/
static coordinates(
_x
, _y
, location
, iconWidth
, iconHeight
, iconMarginLeft
, iconMarginRight
, iconMarginTop
, iconMarginBottom
, freeCoordinates
) {
if (!freeCoordinates && location) {
let x = 0;
let y = 0;
switch (location) {
case 'rightBottom':
x = Graphics.width - (iconWidth + iconMarginLeft + iconMarginRight);
y = Graphics.height - (iconHeight + iconMarginTop + iconMarginBottom);
break;
case 'leftBottom':
x = iconMarginLeft + iconMarginRight;
y = Graphics.height - (iconHeight + iconMarginTop + iconMarginBottom);
break;
case 'rightTop':
x = iconMarginLeft + iconMarginRight;
y = iconMarginTop + iconMarginBottom;
break;
case 'leftTop':
x = Graphics.width - (iconWidth + iconMarginLeft + iconMarginRight);
y = iconMarginTop + iconMarginBottom;
break;
default:
break;
}
return { x: x, y: y };
} else {
return { x: _x, y: _y };
}
}
/**
* アイコンを描画する。
* @return {undefined}
*/
show() {
if (this.icon != null) SceneManager._scene.removeChild(this.icon);
if (this.underText != null) SceneManager._scene.removeChild(this.underText);
// マップ画面でのみ描画
if (SceneManager._scene instanceof Scene_Map) {
let icon = null;
let text = null;
// 表示するアイコン生成
icon = new Sprite();
icon.bitmap = getIcon(this.iconSet, this.iconIndex, this.baseIconWidth, this.baseIconHeight, this.iconCount);
const iconX = this.x;
const iconY = this.y;
icon.x = iconX;
icon.y = iconY;
icon.scale = new PIXI.Point(this.scale, this.scale);
// 下部に表示するテキストを生成
if (this.text) {
this.fontStyle = new PIXI.TextStyle({
fill: 'white'
, fontWeight: 'bold'
, strokeThickness: 4
, miterLimit: 15
, align: 'center'
, fontSize: parseInt(this.fontSize)
});
text = new PIXI.Text(this.text, this.fontStyle);
// テキストの表示位置
text.x = iconX + Math.floor(Math.abs(this.width - text.width) / 2);
text.y = (iconY + this.height) - (this.iconMarginBottom + this.iconMarginTop);
}
if (icon != null) this.icon = SceneManager._scene.addChild(icon);
if (text != null) this.underText = SceneManager._scene.addChild(text);
}
}
/**
* アイコンの描画を更新する。
* @param {double} scale 拡大・縮小率
* @param {integer} _x 直接指定するx座標
* @param {integer} _y 直接指定するy座標
* @param {string} text ボタンに表示する文言
* @param {integer} fontSize 文言のフォントサイズ
* @return {undefined}
*/
update(scale, _x, _y, text, fontSize) {
this.scale = scale;
this.text = text;
this.fontSize = fontSize;
this.width = Math.floor(this.baseIconWidth * this.scale);
this.height = Math.floor(this.baseIconHeight * this.scale);
// 表示位置の計算
const { x, y } = IconButton.coordinates(
_x
, _y
, this.location
, this.width
, this.height
, this.iconMarginLeft
, this.iconMarginRight
, this.iconMarginTop
, this.iconMarginBottom
, this.freeCoordinates
);
// 表示位置の更新
this.x = x;
this.y = y;
// 描画
this.show();
}
/**
* アイコンを消す。
* @return {undefined}
*/
hide() {
if (this.icon != null) SceneManager._scene.removeChild(this.icon);
if (this.underText != null) SceneManager._scene.removeChild(this.underText);
}
}
// ------------------------------------
// 以下はプラグインコマンド実行処理群
// ------------------------------------
/**
* アイコンボタンの生成
*/
PluginManager.registerCommand(pluginName, 'create', function (args) {
for (let n in args) { if (args[n] != '' && !isNaN(args[n])) { args[n] = Number(args[n]) } };
const id = args.id;
if (!iconButtons[id]) {
const eventId = args.eventId;
const iconId = args.iconId;
const location = args.location;
const text = args.text;
const fontSize = args.fontSize;
const scale = args.scale;
const iconWidth = Math.floor(baseIconWidth * scale);
const iconHeight = Math.floor(baseIconHeight * scale);
const { x, y } = IconButton.coordinates(
args.x
, args.y
, location
, iconWidth
, iconHeight
, iconMarginLeft
, iconMarginRight
, iconMarginTop
, iconMarginBottom
);
iconButtons[id] = {
button: new IconButton(
eventId
, iconSet
, iconId
, x
, y
, baseIconWidth
, baseIconHeight
, iconCount
, scale
, text
, fontSize
, location
, iconMarginLeft
, iconMarginRight
, iconMarginTop
, iconMarginBottom
, freeCoordinates
)
};
iconButtons[id].button.show();
iconButtonEnables[id] = true;
}
});
/**
* アイコンボタン表示
*/
PluginManager.registerCommand(pluginName, 'show', function (args) {
const id = args.id;
const button = iconButtons[id].button;
if (button) {
button.show();
iconButtonEnables[id] = true;
}
});
/**
* アイコンボタン更新
*/
PluginManager.registerCommand(pluginName, 'update', function (args) {
for (let n in args) { if (args[n] != '' && !isNaN(args[n])) { args[n] = Number(args[n]) } };
const id = args.id;
const x = args.x;
const y = args.y;
const scale = args.scale;
const text = args.text;
const fontSize = args.fontSize;
const button = iconButtons[id].button;
if (button) {
button.update(scale, x,y, text, fontSize);
iconButtonEnables[id] = true;
}
});
/**
* アイコンボタン非表示
*/
PluginManager.registerCommand(pluginName, 'hide', function (args) {
const id = args.id;
const button = iconButtons[id].button;
if (button) {
button.hide();
iconButtonEnables[id] = false;
}
});
// -------------------------------------------
// 以下はツクールMZにある機能を改造する処理群
// -------------------------------------------
/**
* シーン更新時の挙動を改造する
* 入力判定系の処理を追加する
*/
const _SceneManager_updateMain = SceneManager.updateMain;
SceneManager.updateMain = function () {
_SceneManager_updateMain.apply(this, arguments);
const keys = Object.keys(iconButtons);
const clickX = TouchInput.x;
const clickY = TouchInput.y;
if (SceneManager._scene instanceof Scene_Map && TouchInput.isTriggered()) {
for (let i = 0; i < keys.length; i++) {
const id = keys[i];
const button = iconButtons[id].button;
if (
button
&& iconButtonEnables[id]
&& (clickX >= button.x && clickX <= (button.x + button.width))
&& (clickY >= button.y && clickY <= (button.y + button.height))
) {
// ボタンを押された表現
button.originScale = button.scale;
const scale = button.scale * 0.90;
button.update(scale, button.x, button.y, button.text, button.fontSize);
// コモンイベント呼び出し
$gameTemp.reserveCommonEvent(button.eventId);
}
}
} else if (SceneManager._scene instanceof Scene_Map && TouchInput.isReleased()) {
for (let i = 0; i < keys.length; i++) {
const id = keys[i];
const button = iconButtons[id].button;
if (
button
&& iconButtonEnables[id]
&& (clickX >= button.x && clickX <= (button.x + button.width))
&& (clickY >= button.y && clickY <= (button.y + button.height))
) {
// ボタンを押された表現
const scale = button.originScale;
button.update(scale, button.x, button.y, button.text, button.fontSize);
}
}
}
};
/**
* マップをタッチされた際の挙動を改造する
* アイコンをクリックされた場合は移動させない
*/
const _Scene_Map_prototype_onMapTouch = Scene_Map.prototype.onMapTouch;
Scene_Map.prototype.onMapTouch = function () {
const keys = Object.keys(iconButtons);
let canMove = true;
if (SceneManager._scene instanceof Scene_Map) {
const clickX = TouchInput.x;
const clickY = TouchInput.y;
for (let i = 0; i < keys.length; i++) {
const id = keys[i];
const button = iconButtons[id].button;
if (
button
&& iconButtonEnables[id]
&& (clickX >= button.x && clickX <= (button.x + button.width))
&& (clickY >= button.y && clickY <= (button.y + button.height))
) {
canMove = false;
}
}
}
if (canMove) return _Scene_Map_prototype_onMapTouch.apply(this, arguments);
};
/**
* マップシーン開始時の挙動を改造する。
* マップシーン開始時にアイテムスロットも更新する。
*/
const _Scene_Map_prototype_start = Scene_Map.prototype.start;
Scene_Map.prototype.start = function () {
_Scene_Map_prototype_start.apply(this, arguments);
const keys = Object.keys(iconButtons);
if (SceneManager._scene instanceof Scene_Map) {
for (let i = 0; i < keys.length; i++) {
const id = keys[i];
const button = iconButtons[id].button;
if (
button
&& iconButtonEnables[id]
) {
button.update(button.scale, button.x, button.y, button.text, button.fontSize);
}
}
}
};
/**
* メッセージウィンドウ表示時の挙動を改造する。
* メッセージウィンドウ表示時はアイテムスロットは表示しない。
*/
const _Window_Message_prototype_startMessage = Window_Message.prototype.startMessage;
Window_Message.prototype.startMessage = function () {
_Window_Message_prototype_startMessage.apply(this, arguments);
const keys = Object.keys(iconButtons);
if (SceneManager._scene instanceof Scene_Map) {
for (let i = 0; i < keys.length; i++) {
const id = keys[i];
const button = iconButtons[id].button;
if (
button
&& iconButtonEnables[id]
) {
button.hide();
}
}
}
};
/**
* メッセージウィンドウ終了時の挙動を改造する。
* メッセージウィンドウ終了時はアイテムスロットは表示する。
*/
const _Window_Message_prototype_terminateMessage = Window_Message.prototype.terminateMessage;
Window_Message.prototype.terminateMessage = function () {
_Window_Message_prototype_terminateMessage.apply(this, arguments);
const keys = Object.keys(iconButtons);
if (SceneManager._scene instanceof Scene_Map) {
for (let i = 0; i < keys.length; i++) {
const id = keys[i];
const button = iconButtons[id].button;
if (
button
&& iconButtonEnables[id]
) {
button.update(button.scale, button.x, button.y, button.text, button.fontSize);
}
}
}
};
})();

复制代码

xuhao1996 · 发表于 2021-9-9 03:13:50

原版代码IconButton.js

xuhao1996 · 发表于 2021-9-9 03:15:07

汉化IconButton.js

MH-Pride · 发表于 2021-9-9 06:31:44

好奇为什么会有个句号不会出错吗

moranzyb · 发表于 2021-9-9 13:27:53

既然原版没问题，问题出在汉化版上，那就用排除法，一句一句的汉化保存测试，看看问题出现在哪一句上面。
例如：
@text 这个类型的语句先不汉化
@desc 只汉化这个类型语句
看看是否出问题
我碰到过有些插件汉化@text部分就会出问题

sgs844575 · 发表于 2021-9-9 15:05:56

不是代码的变量名都不允许用汉字的啊

xuhao1996 · 发表于 2021-9-9 15:39:25

moranzyb 发表于 2021-9-9 13:27
既然原版没问题，问题出在汉化版上，那就用排除法，一句一句的汉化保存测试，看看问题出现在哪一句上面。
...

是原版插件的问题，我新开的工程用原版插件测试的还是同样的时候

xuhao1996 · 发表于 2021-9-9 15:42:26

sgs844575 发表于 2021-9-9 15:05
不是代码的变量名都不允许用汉字的啊

原版插件的问题，用原版插件，新工程都用数字没有用汉字，还是出现同样的问题

xuhao1996 · 发表于 2021-9-10 19:49:32

没有人了吗

帐号		自动登录	找回密码
密码			注册会员

[有事请教] 图标按钮插件的坐标和点击触发范围的问题

最佳答案

点评