点击图片以及监测图片1跟图片2是否有重合、碰撞的脚本

写给妖精的情诗

请问MV有没有能自定义碰撞体积的插件【rpgmakermv吧】_百度贴吧
https://tieba.baidu.com/p/9610126245
我在上面这个帖子那里回答了Rosedale Collision Altering Plugin这个DLC好像可以给地图的角色行走创造碰撞体。
然后我就想着之前也想过要不要找到检测图片跟图片是否有重合、碰撞的方法。
接着就想着在检测鼠标点击图片的脚本思路，去实现检测图片跟图片是否有重合、碰撞。

//测试鼠标点击图片，因为MZ版的Actor1_1这个半身像是宽330高350，所以通过计算图片的坐标和图片的宽高来得知图片覆盖的范围。
//$游戏屏幕。显示图片（图片ID、名称、原点、x、y、缩放x、缩放y、不透明度、混合模式）
//$gameScreen.showPicture(pictureId, name, origin, x, y,scaleX, scaleY, opacity, blendMode)

$gameScreen.showPicture("1","Actor1_1",0,0,0,100,100,255,0);
x=TouchInput.x; y=TouchInput.y;
if(x>=0 && x<=330){
if(y >= 0 && y <= 350){
if(TouchInput.isPressed()){
$gameMessage.add("你叫我干什么呢？")
}}}

//但是上面这个是手动设置位置，预先设置位置范围的操作，通过这种方式来检查鼠标是不是在那个范围点击了一下，明显是不够智能的。
//$gameScreen.showPicture("1","Actor1_1",0,0,0,100,100,255,0);    现在就不需要在这里手动指定坐标了，直接在事件指令的显示图片那里随便一个坐标显示图片吧。
x1=$gameScreen.picture(1)._x
y1=$gameScreen.picture(1)._y
k1=330
g1=350
//上面第一二行分别是获得1号图片的坐标X和Y，好像是JavaScript获得突破的宽高很麻烦，那就还是手动指定吧，反正MZ版自带的半身像好像默认是330和350。
x=TouchInput.x; y=TouchInput.y;
if(x>=x1 && x<=x1+k1){
if(y >= y1 && y <=y1+g1){
if(TouchInput.isPressed()){
$gameMessage.add("你叫我干什么呢？")
}}}
//现在，让一个事件页的脚本框放入上面这些脚本，另一个事件页负责显示图片和控制图片移动，就跟下面这样。。需要让两个事件页都并行执行，甚至可以点击移动的图片。。本质上不是检查鼠标是不是点击了图片，本质上是检测鼠标是不是在图片覆盖的那个范围点击了一下。
◆显示图片：#1, Actor1_4, 左上 (0,0), (100%,100%), 255, 正常
◆移动图片：#1, Linear, 左上 (1500,0), (100%,100%), 255, 正常, 300帧 (等待)

//测试两张图片碰撞
x1=$gameScreen.picture(1)._x
y1=$gameScreen.picture(1)._y
x2=$gameScreen.picture(2)._x
y2=$gameScreen.picture(2)._y
//上面这四行是获得图1和图2的左上角坐标像素点。

k1=330
g1=350
k2=330
g2=350
//上面这四行是手动设置图1和图2的宽和高，在网页那里获得图片的宽和高，好像是通过HTML来获得的。。。不知道是不是可以让JavaScript本身来获得图片的宽高。。。所以，还是手动设置吧，而宽330高350好像是rpgmakerMZ半身像的默认大小。

//tu2k是图2宽
tu2k = new Array();
for(let i=x2;i<=x2+k2;i++){
tu2k.splice(0/*在1号位置（从0开始算起）*/,0/*移除0个元素*/,i/*在这里拼接i元素*/);
tu2k.sort((a, b) => a - b)
}

//tu2g是图2高
tu2g = new Array();
for(let i=y2;i<=y2+g2;i++){
tu2g.splice(0/*在1号位置（从0开始算起）*/,0/*移除0个元素*/,i/*在这里拼接i元素*/);
tu2g.sort((a, b) => a - b)
}

//在上面，通过for循环让图2的X坐标和图2的宽度获得了一个叫做图2宽的数组。。。通过for循环让图2的Y坐标和图2的高度获得了一个叫做图2高的数组。。。然后在下面使用for循环让图2宽和图2高数组里面的每一个元素检查一下是不是在图1的那个范围那里，只要有一个图2宽和图2高的元素在那个范围，那就是两张图片重合了。。。就跟我在2、3楼说的检测鼠标是不是在图片的那个范围那里是一样的。
for(j=tu2k[0];j<=tu2k[0]+tu2k.length;j++){
if(j>=x1 && j<=x1+k1){
for(l=tu2g[0];l<=tu2g[0]+tu2g.length;l++){
if(l>=y1 && l<=y1+g1){
$gameMessage.add("你碰到我了")
}
}
}
}

//测试了一下，好像是可以的，上面这一段放在一个事件页的脚本框那里，需要并行执行。
//下面这三个事件指令放在另一个事件页那里，需要并行执行。

◆显示图片：#1, Actor1_1, 左上 (400,300), (100%,100%), 255, 正常
◆显示图片：#2, Actor1_2, 左上 (1000,200), (100%,100%), 255, 正常
◆移动图片：#2, Linear, 左上 (600,200), (100%,100%), 255, 正常, 120帧 (等待)

这个脚本好像还可以再优化一下的。
就是自动检测图片的宽高。
还有就是在检测图1和图2是否有部分重叠这里，如果引入图3、图4，然后检测这几张图片互相之间有没有部分重合，这样的代码好像就不行了。
如果是高手写插件的话，好像是可以互相检测的，而这种只能手动设置的单向检测是低效的。

比如下面这个网页这里的 [2, 4, 6, 8].includes这种写法，就是使用for循环来检查图1的数组那里是不是包含有图2的其中一个数组，只要包含了一个，那就是重叠了。
RPGツクールMZ目の前の座標を取得して釣りを開始するスクリプト | 簡単ゲーム制作部
https://games-p.com/rpgmakerscript/direction/

另外，让含有大量元素的图1数组去比对是否包含有大量元素的图2数组，不知道会不会需要消耗大量的性能。
或许可以不管面积，而只管周长所在的像素点位置就好了。
let shang = new Array()
for(i=1;i<=50;i++){
j=i+"上"
   shang.splice(0,0,j);
}
console.log(shang)
比如，上面这个代码在代码编辑器那里是能正常运行的。
就是图片左上角原点开始算，X到X+宽的元素编入上数组，Y到Y+高的元素编入左数组，X+宽这个位置到+高的元素编入右数组，Y+高这个位置到+宽的元素编入下数组。
这样，上下左右的数组组成的周长数组怎么也要比面积数组要少啊。
这样好像是可以检测到两张图片都边缘是不是又碰撞，但是遇到两个大小不一的图片，在大图片把小图片完全吞掉的情况下，那就不管用了。

现在，好像是已经写完了。我会到RPG云书那里也发布一次，至于RPG民族、爱上RPG|哈库纳玛塔塔之类的地方，偶尔去逛一逛就好了，我不喜欢到处注册账号的。
所以，谁有其他地方的账号，可以随便复制粘贴过去。
至于网上的代码，除了做成插件的，做成软件工具的，我觉得都属于是技术交流，需要用到的看上了那就随便复制使用，我看见别人的代码也是一样，都是直接复制使用再加上到处粘贴的。
因为简短的、功能单一的代码早就有人搞出来了，就跟各种对话早就有人说过了是一样的。
真要论技术专利的话，各种编程语言的发起者和维护者都没有说这个那个的。

写给妖精的情诗

如果仅仅是点击图片的话，MZ版的ButtonPicture.js这个好像是官方插件，不仅可以点击横直竖排的图片，就连任意旋转角度的图片都可以检测到被点击。
我去看了一下这个插件的代码，好像不是根据画布覆盖的地方都有哪些像素点来检测的。
实在是看不懂这个插件是怎么检测的，好像是$gameScreen.picture(pictureId);这里按照图片ID来的，就是无缘无故的就说检测图片ID，那么怎么检测那个ID的图片被点击的呢？
可能不是JavaScript自带的功能，应该是MZ版源代码那里的。
那就算了，没空去管它。

所以，我就在想检查像素点的方法能不能用在旋转的图片。
按照旋转的角度来计算覆盖的像素点的话，不管能不能实现，那都太麻烦了，还是拿ButtonPicture.js这种插件来吧。

接着就想着ButtonPicture.js这种插件是检查点击整个图片的，但是绘图软件的画布好像都是正方形和长方形的，
要是想点击画布上特定的东西的话，在其他网页上看到好像是有检测颜色的方法，但是看不下去，稍微看了一下，脑子就懵了。

js如何算出两点距离 | PingCode智库
https://docs.pingcode.com/baike/2526989]https://docs.pingcode.com/baike/2526989
点到线段距离的两种计算方法 - Yofoo - 博客园
https://www.cnblogs.com/zzz3265/p/14686422.html]https://www.cnblogs.com/zzz3265/p/14686422.html
但是呢，点击圆形的方法，我在搜索——JavaScript 检查两个坐标之间的直线距离——找到上面这两个网页之后，
看到好像是可以通过勾股定理的方式来实现。


//点击圆形图片的脚本
x1=$gameScreen.picture(1)._x
y1=$gameScreen.picture(1)._y
x=TouchInput.x; y=TouchInput.y;
//为了避免计算图片左上角到圆形的圆心，不如直接使用rpgmaker自带的把原点设为中心，X1和YI就说图片的中心，画图的时候就是宽200，高两百，并且圆的半径刚好是100。

dx = x - x1;
dy = y - y1;
juli = Math.sqrt(dx * dx + dy * dy);

if(juli<100){
if(TouchInput.isPressed()){
$gameMessage.setPositionType([0])
$gameMessage.add("你叫我干什么呢？")
}}

我就试了一下在脚本框输入上面这段脚本，我一开始还以为点击右下角的时候可能是正常的，因为我觉得左上角的坐标比原点要小，这样一减的结果好像是负数了。
没想到点击左上角、左下角、右上角也是正常的。
这样，点击这张图片四个角的透明那里，就不会触发对话框了。
为了避免_x的报错，需要把下面这两个事件指令放在上面脚本的那个事件页编号小的事件页那里，因为程序是先从编号小的事件页那里开始执行的。

◆显示图片：#1, 2yuanxing, 中心 (200,100), (100%,100%), 255, 正常
◆移动图片：#1, Linear, 中心 (1500,200), (100%,100%), 255, 正常, 300帧 (等待)

现在这样的话，不但可以点击圆形的按钮，好像还可以在rpgmaker设置打靶的游戏了，子弹、箭矢击中了几环好像可以通过if来计算距离大于100，距离大于90小于100这类的计算来判定了。
还有一个就是，通过在变量的代码框输入——"鼠标的X坐标是"+TouchInput.x——，然后使用LL_VariableWindow.js这个插件来做测试真的是太方便了。