Project1

标题: 更新：连续变化的图像帧合成大图的插件，可用于MV帧动画 [打印本页]

作者: rexuegg123 时间: 2021-5-19 10:35
标题: 更新：连续变化的图像帧合成大图的插件，可用于MV帧动画
本帖最后由 rexuegg123 于 2021-6-9 19:24 编辑

不得不说有时候人进步的动力就是懒…………因为MV的帧动画需要多张连续变化图像按顺序拼合在大图上，又觉得用PS拼大量图片台繁琐耗时

，且网上没搜到快速拼合大量图片的软件

，于是萌生了自己写一个的想法……

用Html+CSS+JS试了试，于是诞生了：WAY_CanvasImgDownload.js （2021-6-9更新）

WAY_CanvasImgDownload.zip (2.8 KB, 下载次数: 36, 售价: 10 星屑)
该插件需要jQuery库支持，我用的3.5.1版：

jquery-3.5.1.zip (109.56 KB, 下载次数: 54)
2021-6-19更新后，可选jQuery的UI库(只是放在这里，还很有用的)：

jquery-ui.min.zip (64.17 KB, 下载次数: 35)

使用方法，与一般插件一样，在插件管理器载入就行：
调用接口：WAY_CanvasDemo.Initialize ();

2021-6-9更新内容：
界面拖动功能不再需要UI库jquery.ui.min.js的支持！
2021-6-8更新内容：
1、修复图片横竖排列只能一样的（如5-5,4-4,6-6等）bug,现在横纵排列数可以任意填，如5-6,6-5等，但最大不能超过9排或9列。例子：1-36-300-300-rs-6-7(对)，1-36-300-300-rs-6-10(错)，1-36-300-300-rs-10-8(错)；
2、增加界面可拖动功能：只需要图标点住界面（黄色区域）拖动后释放鼠标即可。方便查看北界面挡住的预览区域（此功能需要ui库支持）。

1、在MV启动后，后台或用事件调用接口，会弹出操作界面

2、摊入参数及路径，界面上有说明……canvas预览区会根据你填的参数调整大小，路径填好后，点击预览会展示拼接效果……

3、拼接效果见图

注意：第二个参数也表示你要拼接图片的最大张数，不能超过81张……其他详见插件里的说明

第一次发布插件，欢迎提意见！

作者: rexuegg123 时间: 2021-5-19 10:37
本帖最后由 rexuegg123 于 2021-5-19 10:48 编辑

忘了说，这个插件在1.6.1版MV做的，1.5.1版及以下用不起。

作者: 347780682 时间: 2021-5-19 12:04
哇这个很实用啊谢谢楼主

作者: 347780682 时间: 2021-5-19 12:06
悄悄的问下能不能提供一个范例包

作者: rexuegg123 时间: 2021-5-19 12:50

347780682 发表于 2021-5-19 12:06
悄悄的问下能不能提供一个范例包

完整工程么？

作者: 白嫩白嫩的 时间: 2021-5-19 13:01
期待楼主的飞天历险复刻版

作者: rexuegg123 时间: 2021-5-19 13:02

347780682 发表于 2021-5-19 12:06
悄悄的问下能不能提供一个范例包

完整工程太大了。大概说一下步骤:
1、将jQuery包减压放js文件夹里面，再在index.html（MV根目录）文件里面引入jQuery，就是添加 <script type="text/javascript" src="js/jquery-3.5.1/jquery-3.5.1.min.js"></script> 这一句；

2、将你要拼接的图片文件夹放入img文件夹
3、在插件管理器载入插件
4、在mv地图设置一个事件，添加接口函数：WAY_CanvasDemo.Initialize ();……然后直接测试或在游戏里触碰事件触发就行了
5、其他有什么不清楚的可以看看插件说明

作者: rexuegg123 时间: 2021-5-19 13:04
本帖最后由 rexuegg123 于 2021-5-19 13:06 编辑

白嫩白嫩的发表于 2021-5-19 13:01
期待楼主的飞天历险复刻版

哈哈，不好意思的很，上一次你说期待好像是很久以前了……这个坑不知道什么时候能填好

作者: 清澈淌漾 时间: 2021-5-19 13:28
LZ知道怎么在MV里直接拿CSS画UI么

作者: rexuegg123 时间: 2021-5-19 14:38

清澈淌漾发表于 2021-5-19 13:28
LZ知道怎么在MV里直接拿CSS画UI么

可以在js文件夹目录下建CSS文件，然后JS代码通过id 活class 调用里面的css样式

作者: 清澈淌漾 时间: 2021-5-19 15:37

rexuegg123 发表于 2021-5-19 14:38
可以在js文件夹目录下建CSS文件，然后JS代码通过id 活class 调用里面的css样式
...

MV是PIXI的绘的画布吧我想知道怎么拿DIV当按钮

作者: rexuegg123 时间: 2021-5-19 15:52
本帖最后由 rexuegg123 于 2021-5-19 15:54 编辑

清澈淌漾发表于 2021-5-19 15:37
MV是PIXI的绘的画布吧我想知道怎么拿DIV当按钮

PIXI没研究过……若单论以div元素作按钮的话，就是为它添加点击事件，有三种方法：
1、初始化div写入在标签里面的： onclick = function name ()，然后JS写 function name () {点击执行的方法}
2、js代码动态写入，即通过div的id:document.getElementById(id).onclick = function () {…………}
3、通过id给div元素添加监听，如：
document.getElementById(id).addEventListener('click',function (){……}, false);

作者: 清澈淌漾 时间: 2021-5-19 17:57

rexuegg123 发表于 2021-5-19 15:52
PIXI没研究过……若单论以div元素作按钮的话，就是为它添加点击事件，有三种方法：
1、初始化div写入在标 ...

好的谢谢大佬

作者: ww984957002 时间: 2021-5-19 20:10
牛逼啊！！！

作者: rexuegg123 时间: 2021-5-20 20:59

ww984957002 发表于 2021-5-19 20:10
牛逼啊！！！

第一次有人说我牛逼……好有感觉！

作者: 微笑的迪妮莎 时间: 2021-5-20 22:04
哇~大佬啊~虽然看不懂,先拜一个!

作者: 13599299942 时间: 2021-5-27 20:41
为啥预览和下载黑屏

64}G7@B_ZQBQ391WNHA@I(Q.png (170.78 KB, 下载次数: 3)

)@ZG1J[6)P$3XP50JW`J[KM.png (48.49 KB, 下载次数: 7)

作者: 13599299942 时间: 2021-5-28 01:01
为什么超过一行他就不按顺序拼接，当我给他限制5横向时候，12图片只能显示10个

作者: rexuegg123 时间: 2021-5-29 17:45

13599299942 发表于 2021-5-28 01:01
为什么超过一行他就不按顺序拼接，当我给他限制5横向时候，12图片只能显示10个 ...

”……限制5横向……“是什么意思？

作者: rexuegg123 时间: 2021-5-30 06:44

13599299942 发表于 2021-5-28 01:01
为什么超过一行他就不按顺序拼接，当我给他限制5横向时候，12图片只能显示10个 ...

你是改了代码吗？
源代码默认拼接的图片按每行9张，每列最多9张，如：81张图片的话它就按9*9排列；45张图的话就是9*5……
如果你改了代码，尝试恢复源代码，界面的参数按1-25-284-311-rs-5-5填

作者: 13599299942 时间: 2021-6-1 19:36

rexuegg123 发表于 2021-5-30 06:44
你是改了代码吗？
源代码默认拼接的图片按每行9张，每列最多9张，如：81张图片的话它就按9*9排列；45张图 ...

mv源工程的技能动画也是5个吧

作者: rexuegg123 时间: 2021-6-1 20:39

13599299942 发表于 2021-6-1 19:36
mv源工程的技能动画也是5个吧

参数后面填-5-5，就是按5行5列来排列

作者: 13599299942 时间: 2021-6-5 11:38

rexuegg123 发表于 2021-6-1 20:39
参数后面填-5-5，就是按5行5列来排列

填5个的后他的顺序就错乱了

作者: 13599299942 时间: 2021-6-5 11:45

rexuegg123 发表于 2021-6-1 20:39
参数后面填-5-5，就是按5行5列来排列

就是不支持比如 5*9 或者大于5*5的5*7么必须是9*9 6*6才会正常么

作者: rexuegg123 时间: 2021-6-8 11:40

13599299942 发表于 2021-6-5 11:45
就是不支持比如 5*9 或者大于5*5的5*7么必须是9*9 6*6才会正常么

明白了，等我回去了修改以下

作者: rexuegg123 时间: 2021-6-8 18:33

13599299942 发表于 2021-6-5 11:45
就是不支持比如 5*9 或者大于5*5的5*7么必须是9*9 6*6才会正常么

已修改更新，重新下载扔进去就行覆盖就行。

作者: 13599299942 时间: 2021-6-8 18:37

rexuegg123 发表于 2021-6-8 18:33
已修改更新，重新下载扔进去就行覆盖就行。

谢谢大佬辛苦了

作者: rexuegg123 时间: 2021-6-8 18:43

13599299942 发表于 2021-6-8 18:37
谢谢大佬辛苦了

欢迎提出意见

，还有什么好的建议都可以提，一起讨论

作者: 13599299942 时间: 2021-6-8 18:44

rexuegg123 发表于 2021-6-8 18:33
已修改更新，重新下载扔进去就行覆盖就行。

这个报错是

B%Q4Y3E(LV87(ZOVG_G])IE.png (26.63 KB, 下载次数: 15)

作者: rexuegg123 时间: 2021-6-8 18:55

13599299942 发表于 2021-6-8 18:44
这个报错是

不好意思，拖拽功能我忘了是在网页上测试的……MV上会报错不能运行。
两个办法：
1、打开插件WAY_CanvasImgDownload.js,在第52行代码 "$(() => {$( "#"+ this.Elem_Div).draggable({});});"的前面加 "//" 并保存就OK了；
2、将UI支持库下载下来，安装上就行了

作者: 13599299942 时间: 2021-6-8 19:10

rexuegg123 发表于 2021-6-8 18:55
不好意思，拖拽功能我忘了是在网页上测试的……MV上会报错不能运行。
两个办法：
1、打开插件WAY_CanvasI ...

谢谢解决了还有个小问题默认目录用的是// 而实测要改成\\才能用

作者: rexuegg123 时间: 2021-6-9 10:47

13599299942 发表于 2021-6-8 19:10
谢谢解决了还有个小问题默认目录用的是// 而实测要改成\\才能用

没搞懂你的意思……默认用的相对路径，你MV工程的目录撒，当然你要填绝对目录也可以

作者: 13599299942 时间: 2021-6-9 12:30

rexuegg123 发表于 2021-6-9 10:47
没搞懂你的意思……默认用的相对路径，你MV工程的目录撒，当然你要填绝对目录也可以 ...

嗯工程量测试用//加载不了

作者: 13599299942 时间: 2021-6-9 23:27
可否在预览的时候整体对图片进行放大（缩放）同规格，因为批量处理出来的图可能变模糊了

作者: rexuegg123 时间: 2021-6-10 08:58

13599299942 发表于 2021-6-9 23:27
可否在预览的时候整体对图片进行放大（缩放）同规格，因为批量处理出来的图可能变模糊了 ...

这个插件没有主动调整图片的质量……处理出来的应该不会有清晰度的变化才对。你说的这个功能问题不大，单是放大缩小还不够，必须配合拖动功能……不过我写的拖动还有缺陷，就是拖动后的坐标定位不准确……最近在尊卑考试，时间不充裕，坐标定位不准的问题你有解决办法没得？

作者: Aerodynamics 时间: 2021-6-10 10:54
擦，为了解决拼精灵这个问题，我也是写了个matlab脚本(还能把无alpha通道的图片亮度转不透明度)！

作者: rexuegg123 时间: 2021-6-10 13:20

Aerodynamics 发表于 2021-6-10 10:54
擦，为了解决拼精灵这个问题，我也是写了个matlab脚本(还能把无alpha通道的图片亮度转不透明度)！ ...

外行问下：matlab脚本，是什么东西？

作者: Aerodynamics 时间: 2021-6-10 23:14

rexuegg123 发表于 2021-6-10 13:20
外行问下：matlab脚本，是什么东西？

matlab是一个科研用的编程软件。它也有自己的语言。我用它写了个脚本来着。

作者: rexuegg123 时间: 2021-12-26 09:18

白嫩白嫩的发表于 2021-5-19 13:01
期待楼主的飞天历险复刻版

功能测试的复刻版已经发布，欢迎来尝试

https://rpg.blue/thread-488162-1-1.html

作者: KB.Driver 时间: 2021-12-26 16:50
嗯……不是打击楼主。
这样的拼图需求可以用imageMagick解决的……

https://legacy.imagemagick.org/Usage/montage/

欢迎光临 Project1 (https://rpg.blue/)