Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽


3楼猫 发布时间:2022-05-01 16:52:33 作者:偶尔活过来的Czk Language

好久不见(❁´◡`❁)

这次主要是想讲一讲如何利用脚本代码以及骨骼实现拖拽效果,效果大概是这样:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第0张

拖拽效果

(这张图主要是为了表现一下骨骼效果)

可以参考一下我的另一张壁纸在手机上的表现效果:

连体黑丝#4K#视差#可互动臀部#动态

(发不出来,各位好自为之(




接着说一说怎么去学习大佬的做图方法:那就是在壁纸编辑器中去研究他们的项目。

关于这一点官方说明文档(https://help.wallpaperengine.io/zh/functionality/editingwallpapers.html#如何编辑不同类型的壁纸中也有记载:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第1张

官方说明

而解包工具我在第三篇文章中分享过:

https://wwa.lanzoui.com/iLUAqquyfch

就是说,你先在壁纸编辑器中创建一个新的空白项目,然后在资源管理器中打开这个空白项目的文件夹。

接着在资源管理器中显示大佬的壁纸文件,解包里面的scene.pkg文件,并把解包出来的所有文件覆盖到你的空白项目文件夹中。

此时再用壁纸编辑器打开这个空白项目就会变成大佬的壁纸了,从而可以对其进行学习。




而今天要聊的拖拽互动脚本,官方技术文档(https://docs.wallpaperengine.io/en/scene/puppet-warp/interactive.html其实也有教程:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第2张

官方教程

官方也提供了代码:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第3张

官方拖拽代码

不过更推荐的是TIM改进的代码:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第4张

tim的代码

TIM的steam主页:

https://steamcommunity.com/profiles/76561199133168097

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第5张

TIM

文件分享

https://wwn.lanzouw.com/iJevt0436p8h




下面我们拿一张具体的图来演示一下:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第6张

22娘

(这图我也忘了从哪扒来的了。。

分辨率800*1033,不够大,我们用ai图像处理放大一下:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第7张

waifu2x

由于主要是演示,所有也不用在ps中抠图补图了,我们直接拿到小红车编辑器里打开:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第8张

壁纸编辑器

别忘了把小锁打开:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第9张

背景图层

注意到绑定脚本按钮:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第10张

绑定脚本

我们点进去,脚本代码界面长这样:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第11张

脚本代码

把tim编写的拖拽脚本复制进去:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第12张

导入脚本代码

准备工作到此就算完成了。

下一步我们要给这张图加上骨骼,因为拖拽脚本是依托于骨骼的物理效果而实现的:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第13张

操控变形动画

右侧属性栏往下滑,可以找到“编辑操控变形”按钮,点击它。

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第14张

操控变形对象

注意,我们只需用到前三步,第四步“动画”用不到。我在Wallpaper Engine 壁纸制作记录(四)中曾经讲过这个木偶动画的制作方法,感兴趣可以去看看。

首先是创建几何图形:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第15张

几何图形

细分的数量越多,最后做出来的效果越丝滑,同时对设备的要求也越高,资源占用会变多。可以试试细分3,填充11。这张图由于整个身体都有,所以我把细分拉到了5。

第一步创建几何图形很简单,到此即结束。

点击确定之后,我们来到第二步,也算是比较关键的一步:创建骨架

注意,此时直接在画布上左键就会添加骨骼。而且仔细看这张图,我们会发现这张图的胸部并不适合添加两个骨骼,因为太小了(?22娘震怒):

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第16张

添加骨骼

注意,我们只需要独立的骨骼,不需要相连的骨骼,因此要先ctrl+z取消掉连接的骨骼,然后再去添加胸部的骨骼。

至于为什么要在画面外加一个主骨骼呢?往后看下一步你就会明白。

那么什么样的图适合在胸部添加两个独立骨骼呢?

比如这样的:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第17张

Tifa

为了过审打了两层厚码。。可以参考我的这张壁纸:

【手机特供】Tifa#X-ray#晃动#4K#动态呼吸

而这种需要两个骨骼,甚至三个骨骼的图片,我们的操作方法没什么不同,脚本代码也无需修改,都可以使用。

回到正题,添加完骨骼之后,我们需要编辑骨骼的物理属性:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第18张

编辑骨骼物理效果

首先选中胸部的骨骼,然后点击”编辑约束“。

我们选择高级约束,模拟弹簧物理效果:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第19张

弹簧物理模拟

注意,我们需要启用的是物理平移,而不是物理旋转。默认是物理旋转,请把它勾掉:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第20张

骨骼约束

最大距离影响的是鼠标能把骨骼拽多远,由于这张图胸部不是主体,在画幅中占比比较小,因此我们姑且把平移刚度和最大距离都改为70试试。

至于平移摩擦和平移惯性则共同影响了拖拽的手感,也就是是否Q弹。因为每张图都不一样,因此这个数值只能因地制宜自己试(

这里凭经验我选择摩擦5,惯性10,并且启用重力,重力数值调为3(太高了会导致胸部下垂 哈人)。

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第21张

修改后的参数

点击确定,我们进行下一步:绘制权重

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第22张

绘制权重

看到这应该就明白了吧,我们之所以要在画面外设置一个骨骼,就是为了让画面的其他部分摆脱胸口骨骼的控制。


如何理解骨骼的权重?权重指的就是一块骨骼所能影响的画面反围。你绘制的越多,鼠标到时候能够拖拽的画面也就越多。

关于绘制权重,我的建议是先把整个画面涂红,再把画笔的透明度拉到5%以下,绘制胸口的绿色区,否则拖拽效果可能会夸张,不够自然顺滑。

确定之后等待编译器同步,然后我们就可以运行预览了:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第23张

运行预览

可以看出效果还不错,稍微有那么一点夸张,我们可以把最大距离拉低点就行了,作为演示来讲我认为还是很成功的。

如果想要做出更好的拖拽效果,可以试试预先在ps里把人物单独扣出透明图层,再进行编辑。

此外由于我们加了重力参数,放到手机上就会有奇效,具体表现就是可以用手机的陀螺仪进行晃动(哈人

最后再说说脚本代码里的参数都是什么含义,有些可能需要你自己改:

首先是这个,可以不用管,据我实验影响不是非常大:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第24张

drag max distance

然后是这个:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第25张

best distance

以及这个:

Wallpaper Engine 制作指南(八):脚本实现鼠标拖拽-第26张

max distance

这俩建议保持一致,且最好200往上,250最好,部分图可能需要更高一些,比如300、350。

经我测试,它们影响的是拖拽的灵敏程度,就是说鼠标从离骨骼多远的距离外拖动会收到响应。如果这俩改小之后,会发现鼠标拖半天可能画面都不动一下。




好了,本期内容到此结束!就说那么多!

快去自己做实验叭!φ(゜▽゜*)♪


© 2022 3楼猫 下载APP 站点地图 广告合作:asmrly666@gmail.com