概述

自MalodyV 5.2.0起，游戲內(nèi)置了可視化皮膚編輯器，5.3.0起支持皮膚腳本。皮膚系統(tǒng)的設(shè)計(jì)宗旨是讓90%常用能力以可視化方式，低門檻的呈現(xiàn)。而剩下10%的自由發(fā)揮空間由腳本承擔(dān)。以便讓不同目的，不同能力的玩家都能輕松制作出自己想要的皮膚。本文將通過支持一套皮膚，由淺入深的介紹皮膚各個(gè)系統(tǒng)。

制作皮膚

1. 首先我們假設(shè)你已經(jīng)準(zhǔn)備好了皮膚素材，我們直接進(jìn)入制作環(huán)節(jié)。打開皮膚面板。

皮膚面板可以為各個(gè)模式分別選擇皮膚，并且對(duì)于Key模式，4K~10K也可以獨(dú)立配置皮膚。

2. 現(xiàn)在我們選擇加號(hào)，創(chuàng)建一個(gè)新皮膚。在彈出面板中選擇Key - 4K。接下來你會(huì)看到一個(gè)和實(shí)際游玩場(chǎng)景一模一樣的圖形，這就是可視化編輯空間，在英文版中稱為“Composer”。

3. 接著打開右側(cè)第二個(gè)按鈕，打開模塊列表。這里列出了所有可以關(guān)閉的默認(rèn)模塊。如果你只想更換部分皮膚，可以把對(duì)應(yīng)的默認(rèn)模塊關(guān)閉，如果你想整個(gè)皮膚全部換掉，那可以先把所有默認(rèn)都關(guān)掉。

有一點(diǎn)要注意，默認(rèn)模塊不包括Note，Note是一種特殊模塊，如果你添加了自定義Note，就會(huì)自動(dòng)覆蓋默認(rèn)Note，否則就會(huì)繼續(xù)使用默認(rèn)Note。后面會(huì)細(xì)講。

4. 總之我們要做一個(gè)完全自定義皮膚，所以先把所有模塊都關(guān)閉，關(guān)閉后長(zhǎng)這樣。啥都沒有了，這時(shí)候如果進(jìn)游玩，你會(huì)看到只有默認(rèn)Note在虛空中運(yùn)行，也不是不能玩，但由于暫停按鈕也無了，如果你是觸屏，可能要?dú)⑦M(jìn)程才能退出游玩。

5. 所以下一步我們把包括暫停在內(nèi)的基本面板做出來。繼續(xù)點(diǎn)擊模塊列表按鈕，加號(hào)。這里列出了游戲支持的所有自定義模塊類型。你可能注意到了為啥數(shù)量這么少，而且跟默認(rèn)模塊對(duì)不上，別擔(dān)心，絕大部分默認(rèn)模塊都藏在自定義里，這里只是一些無法被自定義抽象的特殊模塊，他們都是為了某種特殊用途而存在的。比如暫停。

6. 我們先選擇暫停，你可能再次費(fèi)解，這又是啥？這代表了，要完成“暫停”這個(gè)功能，你可以使用一張靜態(tài)的“圖片”，或者一個(gè)“動(dòng)圖”。我手上的素材是一個(gè)靜態(tài)圖，所以選擇“圖片”。

7. 把暫停素材拖到圖片控件上，如果你是觸屏，你的用內(nèi)置文件選擇器定位到素材再選擇，略麻煩一些。接著設(shè)置合適的寬高，你可能注意到寬度和高度后面有個(gè)橙黃色的百分號(hào)，這代表當(dāng)前寬度是基于游戲窗口的百分比縮放。如果高度寫50%，那無論在什么設(shè)備上，這個(gè)模塊高度都是窗口的一半。

如果你點(diǎn)擊一下百分號(hào)，他會(huì)變成一個(gè)字母U，代表了單位縮放（Unit），在單位縮放下，1U 等于窗口高度的1/1080，比如你在高度上寫1080，模塊就會(huì)撐滿屏幕高。

單位縮放的作用是當(dāng)你希望模塊無論在任何設(shè)備，都以固定比例顯示，比如一個(gè)正方形，可以寫寬度100U，高度100U。如果使用百分比，就無法保證總是顯示正方形。

但這里有一個(gè)技巧，就是寬度和高度，其中一個(gè)可以寫0。如果寬度寫0，模塊會(huì)在保持模塊素材的圖形比例的前提下，把高度縮放到你指定的值，寬度自適應(yīng)。

8. 接下來需要把模塊固定在左上角。這里允許我啰嗦兩句，有幾個(gè)概念需要解釋。

• 中心點(diǎn)：模塊繞什么點(diǎn)來旋轉(zhuǎn)，和下面的旋轉(zhuǎn)角度有關(guān)。通常不需要改。你也可以調(diào)一調(diào)看看效果。

• 定位點(diǎn)：模塊定位到屏幕的什么位置。

• 定位偏移：模塊基于定位點(diǎn)固定之后，還可以繼續(xù)微調(diào)一小段距離。

這里我們選擇把暫停按鈕定位做左上角，大概Y 97%的位置，還記得前面關(guān)于百分比的解釋嗎，97%就意味著離屏幕頂部剩3%的距離。這里用百分比還是單位值沒有區(qū)別。

后面還會(huì)講更多關(guān)于定位的知識(shí)，這里先打住。

9. 我們繼續(xù)把游玩面板搞出來，大概是一個(gè)半透明的黑色層，墊在Note下面。但這里我手上沒有素材，所以選擇了自定義里的純色填充圖。純色填充需要手動(dòng)指定顯示的顏色，這個(gè)色值是常見的RGB 16進(jìn)制表示法。如果你對(duì)這個(gè)不熟悉，可以打開PS，Windows自帶繪圖等一切P圖功能，在調(diào)色板里總有一個(gè)地方會(huì)顯示這樣的值。寬度高度寫100%，這時(shí)你看到的圖和下圖可能不一樣，別慌，往下看。

10. 這里引入一個(gè)新概念：層級(jí)和順序。

• 層級(jí)：皮膚有4層，背景，游玩區(qū)下層，游玩區(qū)上層，頂層。背景位于所有模塊之下。游玩區(qū)位于Note之下，背景之上，并且會(huì)跟隨軌道傾斜一起縮放。游玩區(qū)上層和頂層同理。

• 順序：在同一個(gè)層級(jí)里，數(shù)字大的顯示在上面。但注意編輯器目前不支持改順序的實(shí)時(shí)預(yù)覽，要看效果需要保存后重進(jìn)編輯器，或者直接進(jìn)試玩。

我們的背景黑色層適合放在游玩區(qū)。

11. 用同樣的方法，我們可以繼續(xù)完成背景層的靜態(tài)裝飾。你有別的創(chuàng)意也可以繼續(xù)發(fā)揮。

12. 我們繼續(xù)完成分?jǐn)?shù)顯示，血量這些必要元素，這里以血量和分?jǐn)?shù)舉例。血量是個(gè)特殊模塊，叫做“血量指示”。這里出現(xiàn)了3種新的模塊類型，遮罩圖指的是使用一張圖，但按比例顯示圖片的一部分。動(dòng)態(tài)數(shù)字則需要你為0-9 共10個(gè)數(shù)字分別準(zhǔn)備一張圖，游戲中會(huì)根據(jù)實(shí)際數(shù)字動(dòng)態(tài)拼接你的素材。我的血量素材是個(gè)遮罩圖，需要放到右上角。

13. 但是這個(gè)討厭的編輯面板擋住了右邊區(qū)域，看不到血量條了。不著急，編輯面板左下角有個(gè)向右的箭頭，可以把面板移到左側(cè)，于是我們可以繼續(xù)愉快的完成編輯工作。

14. 你想做分?jǐn)?shù)，可能發(fā)現(xiàn)怎么沒有一個(gè)模塊叫分?jǐn)?shù)。那是因?yàn)樵诰庉嬈骼?，分?jǐn)?shù)不算特殊。分?jǐn)?shù)，連擊，combo等都是一個(gè)文字，只是文字的內(nèi)容不同。所以這次我們選擇自定義-動(dòng)態(tài)數(shù)字。然后在內(nèi)容一欄填入{score}，哦對(duì)了，這里是不支持手動(dòng)填的，需要點(diǎn)旁邊的加號(hào)來選擇。如果你選擇的文本類型模塊，也可以用來顯示分?jǐn)?shù)，并且可以手動(dòng)填內(nèi)容。但記住，像分?jǐn)?shù)這樣不斷變化的純數(shù)字文本，使用動(dòng)態(tài)數(shù)字性能更好。

圖片部分需要選擇至少0-9，共10張圖。如果用來顯示acc，那就需要12張，額外多百分號(hào)和小數(shù)點(diǎn)。因?yàn)閍cc會(huì)顯示為類似98.5%。這些圖有一個(gè)公共前綴，加上一個(gè)橫線，加上連續(xù)數(shù)字，類似number-0.png，只需要將這個(gè)序列的第一張圖拖到圖片控件上即可。編輯器很聰明，他會(huì)根據(jù)你指定的第一張圖的文件名，自動(dòng)推測(cè)剩下11張圖的名字，所以也不一定要從0開始編號(hào)，你喜歡的話，也可以從任意數(shù)字開始，只要連續(xù)就行。

Note制作

到了最重要的Note部分了。Note是如此特殊，以至于需要另起章節(jié)。

1. 還是老規(guī)矩，我們選擇添加新模塊，用途選Note，這里你看到了2個(gè)Note類型，一個(gè)對(duì)應(yīng)普通Note，一個(gè)對(duì)應(yīng)Hold。其他模式也是類型，每種Note都有一個(gè)對(duì)應(yīng)類型，如果你要制作成套皮膚，就需要都配置相應(yīng)模塊，否則會(huì)出現(xiàn)部分Note類型是默認(rèn)素材的景象。

2. 我們先制作普通Note，這個(gè)模塊和普通圖片沒啥區(qū)別，選擇一張圖片即可。但你可能會(huì)說，等等，就這？尺寸呢？位置呢？怎么比其他模塊少那么多屬性。

我們來一點(diǎn)點(diǎn)講解。

首先，Note是如此特殊，以至于他的大部分屬性其實(shí)早就確定了，并且不受你控制，比如寬度一定會(huì)撐滿對(duì)應(yīng)軌道寬，比如位置，一定被限定在軌道范圍。因此，需要你做的，就是簡(jiǎn)單的配置圖片，和調(diào)節(jié)少量屬性。

注意在下面截圖里，我設(shè)置了切片參數(shù)，那是因?yàn)镹ote需要適配不同的軌道寬度，寬度是不固定的，切片可以讓圖片在被拉伸時(shí)，只拉伸切片以內(nèi)的區(qū)域。如果你屬于九宮格這個(gè)說法，那就是相同概念。像這里我設(shè)置了左和右分別54px（相對(duì)于原始素材的像素值），意思是不管Note實(shí)際顯示寬度是多少，左右54px的范圍都是不拉伸的。這個(gè)屬性在普通圖片模塊里也有。

3. 如果這時(shí)候去玩，發(fā)現(xiàn)每個(gè)軌道的Note都是一樣的，有啥辦法讓每個(gè)軌道顯示不同的Note呢。這里就要用到適用條件屬性。條件有很多種，并且可以組合。這里我們只用到水平位置，水平位置可以代表Note的軌道，也可以代表無軌類型（Catch，Slide等）的水平坐標(biāo)。不同模式的水平坐標(biāo)取值有不同范圍，但在Key模式里，這個(gè)值就是1到4，對(duì)應(yīng)1到4軌。當(dāng)然，如果是7K甚至9K，值就是1-7,1-9。

Hold類型就不贅述了，做法是完全一樣的，不同只是Hold可以分別指定頭部，身體，和尾部。并且頭尾都是可選的，相互搭配可以滿足不同皮膚需求。

4. 現(xiàn)在可以正常游玩，也有分?jǐn)?shù)顯示。但沒有打擊光，整個(gè)皮膚毫無手感。所以還得繼續(xù)完成剩下部分，打擊光，判定，按鍵光等。這些模塊有個(gè)共性，即：僅在對(duì)應(yīng)事件發(fā)生時(shí)顯示，或播放動(dòng)畫。編輯器把這類行為統(tǒng)稱為觸發(fā)器。

以打擊光為例，我的素材是一組序列幀，我選擇自定義-幀動(dòng)畫為載體，在配置完基本屬性后，選擇觸發(fā)器旁邊加號(hào)，添加Note操作 等于 被打擊。也就是說，任意Note被打中，就會(huì)播放我預(yù)設(shè)的動(dòng)畫。

觸發(fā)器很靈活，也可以設(shè)置擊打判定 不等于 Miss，只要不Miss，就播動(dòng)畫。甚至可以給不同判定分別設(shè)置動(dòng)畫，配相應(yīng)觸發(fā)器。

觸發(fā)器種類分別多，也可以組合，組合之后，需要所有觸發(fā)條件全部命中才會(huì)實(shí)際生效。你可以通過反轉(zhuǎn)比較方式（等于改不等于）來實(shí)現(xiàn)多個(gè)條件或關(guān)系。

5. 現(xiàn)在有個(gè)新問題，這個(gè)打擊光好像只對(duì)第1軌的Note有效，難道我也要給每個(gè)軌道做一份一模一樣的模塊？那就太麻煩了，對(duì)于這種場(chǎng)景，有個(gè)簡(jiǎn)化的辦法，就是勾選：跟隨Note錨點(diǎn)。

勾上之后你會(huì)發(fā)現(xiàn)定位點(diǎn)的配置消失了，現(xiàn)在去游玩，打擊光會(huì)自動(dòng)出現(xiàn)在每個(gè)Note被擊打的位置。

這個(gè)屬性的實(shí)際原理其實(shí)是當(dāng)觸發(fā)器生效時(shí)，游戲會(huì)自動(dòng)尋找一個(gè)合適的模塊，放到Note被擊打的位置上，如果有多個(gè)Note同時(shí)被擊打，游戲就會(huì)自動(dòng)復(fù)制出對(duì)應(yīng)多個(gè)一樣的元件。

要注意，這個(gè)屬性默認(rèn)是沒有的，只有先配置了和Note有關(guān)的觸發(fā)器才會(huì)出現(xiàn)。如果你就想要每個(gè)軌道使用相同打擊光，那這個(gè)屬性就正適合。但如果你要配置不同效果，那還是使用前面提到的場(chǎng)景條件。

像Catch，Slide這樣的模式，Note的位置出現(xiàn)非常隨機(jī)，水平值范圍也很大，已經(jīng)不能用場(chǎng)景條件來指定了，就必須使用跟隨錨點(diǎn)。

6. 最后加上其他可選元件，恭喜，你完成了一個(gè)完整的自定義皮膚?，F(xiàn)在你可以自己使用，也可以選擇打包導(dǎo)出成msp格式，分享給其他玩家。

One more thing, 這篇教程寫到此已經(jīng)有4000余字，相信不少玩家可能都沒耐心仔細(xì)閱讀。所以也可以等等我把這篇文字稿做成視頻。