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