前言

大家好！我的名字是Hira Karmachela。這次我將分享我使用Clip Studio Paint（CSP）製作遊戲啟動畫面用的復古像素動畫藝術的經驗。

 

我希望這篇文章能為正在尋找使用CSP創作像素藝術和復古設計的各位提供有趣的訣竅。

關於復古設計

復古是一種在70年代到90年代流行的設計風格。復古不同於長期以來為人所知的復古懷舊風格。復古風格在其時代給人一種現代甚至未來主義的印象。復古的獨特特徵可以從選擇更閃亮的顏色中看出，也稱為霓虹色。復古設計風格是隨著迪斯科、派對和運動生活方式的興起而在那個時代發展起來的。

 

在同一時代，電玩遊戲是以低解析度圖形開發的，現在被稱為像素藝術。這讓我對製作復古風格的像素藝術訣竅感到很有興趣。

像素藝術畫布設定

我們開始吧！打開Clip Studio Paint，然後建立一個新畫布。我們最終要創作的作品尺寸為1280px x 720px，但要創作像素藝術，我們只需要該尺寸的10%。因此，我們需要的畫布尺寸是128px x 72px。

接下來，我們必須設定格線，以便更容易繪製像素。前往「顯示」>「格線」。

 

現在我們可以在畫布上看到格線了。但我們仍需調整格線大小。前往「顯示」>「格線／尺規設定」。將原點設定在中心，並將「間隔(D)」和「分割數」都設定為1。

復古配色方案

在我們開始組合像素之前。首先，我們需要建立一個符合復古風格的調色板。建立一個新圖層作為調色板，將該圖層命名為「retro palette」。

接下來，雙擊工具箱中的「前景顏色」以打開「顏色設定」。我們將建立的第一個顏色是「熱粉色 (Hot Pink)」。在HEX欄位中，輸入代碼「ff69b4」。然後在畫布上塗刷。

以下是我們需要的復古調色板中的顏色。

其餘的我們還需要黑色和白色，這些可以在標準調色板面板中取得。

像素藝術工具設定

好的！有幾種工具我們可以搭配特殊設定來創作像素藝術。首先，我們可以使用「圖形工具」，例如直線、曲線和形狀工具來建立精確的像素物件。

要使用圖形工具創建像素藝術，我們需要關閉抗鋸齒功能。抗鋸齒是一種透過在數位圖像物件周圍添加和操作取樣像素的顏色，使物件邊緣看起來平滑的功能。

當然，開啟抗鋸齒會讓像素藝術看起來不理想。因此，我們必須在左側的工具屬性面板中禁用此功能。在抗鋸齒部分有幾個等級，請選擇「無」。

第二種工具，我們可以使用「鋼筆工具」，其子工具為「麥克筆」和「點陣筆」類型。這種筆會產生1px厚度的線條繪圖，因此我們可以輕鬆地建立有機像素物件。

第三種工具，我們可以使用「填充工具」輕鬆填充像素區域。選擇「參照其他圖層」類型，這樣即使圖層不同，我們也可以填充重疊的區域。然後在工具屬性中，取消勾選「區域縮放」。此功能與抗鋸齒非常相似，會在像素物件上產生雜訊。

第四種工具，當然，我們需要「橡皮擦工具」來擦除作品上不必要的像素。選擇「向量」類型，可以不留痕跡地擦除像素。

 

好的！其餘的工具我們可以根據需要使用。

復古背景

現在讓我們開始像素盛宴吧。我們從為要創作的啟動畫面建立背景開始，當然要採用復古風格。

我用一條1px厚的線將畫布分為天空和地面區域，作為地平線。

接下來使用「吸管工具」從我們之前建立的圖層調色板中取色。我用紫水晶色填充天空，用洋紅色填充地面區域。

現在建立一個新圖層，我們將建立著名的復古設計中典型的日落物件。使用橢圓形狀工具，並在鍵盤上按住「Shift」鍵以建立一個比例勻稱的圓形。

使用橡皮擦工具在日落上製作條紋。你可以模仿我所做的圖案。

現在再次建立一個新圖層，我們將用山脈剪影圖像裝飾背景。使用黑色的直線工具在日落圖像的左右兩側繪製山脈。

將山脈填充為黑色，然後將圖層不透明度更改為50%。

建立一個新圖層，我們將在日落前添加建築物的剪影圖像。這次我使用點陣筆。

用一些彩色像素作為燈光來裝飾建築物的圖像。

現在我們轉到地面區域，建立一個新圖層以在地面上建立網格。再次，我使用青藍色直線工具來製作精確的設計。

以單點透視的方式斜向繪製線條。

複製此圖層，然後前往「編輯」>「變形」>「左右翻轉」。調整網格位置使其在畫布上對稱。然後選取網格圖層和複製圖層，前往「圖層」>「合併選擇的圖層」。

現在，在已繪製的對角線上建立水平線，以建立網格圖像。

復古街道環境

接下來，我們為環境建立物件。我們將營造復古的街道氛圍。很簡單，我將在道路的左右兩側肩部製作路標線和一排棕櫚樹。

 

建立一個圖層資料夾來收集環境物件的圖層。建立一個新圖層來建立路徑。

現在將圖像中形成路徑的形狀交點用霓虹黃填充。將圖層不透明度更改為50%。

建立一個新圖層來建立路標線。使用直線工具繪製白色路標線。

接下來，再建立一個新圖層來製作棕櫚樹。使用點陣筆工具來製作。使其左右對稱。

復古汽車物件

好的！現在是時候建立主要模型了。為復古汽車物件建立一個新圖層。使用點陣筆來繪製。

在汽車圖層上方建立一個新圖層，使用黑色在汽車模型的表面製作陰影。將圖層不透明度更改為50%。然後將該圖層與汽車圖層合併。

作為補充，在新圖層上在汽車下方製作陰影。將圖層不透明度更改為50%。

動畫製作過程

現在是時候讓場景生動起來了。我們將製作兩個部分的動畫，分別是街道環境和建築物中的燈光。

 

為此，請準備時間軸面板。前往「視窗」> 勾選「時間軸」。您會看到時間軸面板出現在螢幕底部。

在時間軸面板中，點擊「新建時間軸」。然後會出現新的時間軸設定，填寫時間軸名稱。將影格速率和播放時間設定為24。場景和鏡頭設定為1，分割線設定為6。然後將影像插值更改為「硬邊緣」。

要建立動畫，我們需要一個動畫資料夾，其中包含將連結到動畫單元格的特殊圖層。

 

為此，請點擊「新建動畫資料夾」。然後動畫資料夾將出現在「圖層」面板的頂部。將資料夾重新命名為「Animation」。目前動畫資料夾是空的。我們必須處理已建立的模型，以編譯並成為動畫單元格。

選取從復古汽車到背景圖層的所有模型圖層。您可以排除圖層調色板並將其保存在底部。然後前往「圖層」>「建立資料夾並插入圖層」。然後所有選定的圖層將被收集到一個資料夾中。將資料夾重新命名為「Compilation」。

複製「Compilation」資料夾並將複製的資料夾重新命名為「cel_01」。然後前往「圖層」>「轉換圖層 (H)」，這樣cel_01資料夾就會變成一個單元圖層。將cel_01圖層拖入「Animation」資料夾中。

在時間軸面板中，確保我們為每個選定的影格選取了以紅色標記的影格1，然後點擊「指定單元格」。我們將被要求選取將連結到單元格的圖層。選取cel_01。

要製作下一個單元格，請執行相同的操作。複製「Compilation」資料夾，然後將複製的資料夾重新命名為「cel_02」。在將其轉換為單元圖層之前。我們必須變形此資料夾中的某些模型以建立運動的錯覺。

現在選取cel_02資料夾中的路標線圖層。我們將編輯圖像，使其看起來像是路標線正在向畫布底部推進。所需要做的就是在某些部分刪除或添加像素。

隨著路標線移動，棕櫚樹也必須向畫布底部移動。從邏輯角度來看，接近視角的物體會看起來更大。因此，隨著它移動，棕櫚樹必須放大。

 

選取棕櫚樹圖層，然後前往「編輯」>「變形」>「自由變形」。在左側的工具屬性中，將「補間方法」設定更改為「硬邊緣」，這樣縮放就不會產生像素雜訊。

現在選取建築物圖層，更改燈光裝飾，使其看起來像是燈光在閃爍。

接下來，選取cel_02資料夾。前往「圖層」>「轉換圖層 (H)」。將cel_02圖層拖入「Animation」資料夾中。在時間軸中選取影格3，然後點擊「指定單元格」。選取cel_02。在這個動畫中，我將以每2個影格設定一個單元格，播放時間為24個影格。

在時間軸中選取影格3，然後點擊「指定單元格」。選取cel_02。

在這個動畫中，我將以每2個影格設定一個單元格，播放時間為24個影格。

 

對於接下來的單元格，請透過改變連續變形來完成相同的操作，以產生運動的錯覺。

渲染與發佈

好的！我已經完成了總共24個影格的動畫單元格的構成和每2個影格的填充。

在我們渲染和發佈這個動畫之前。讓我提醒您，這個動畫的尺寸是128px x 72px。因此，如果我們立即渲染它，我們將看到的結果就是這個尺寸。

為此，我們需要先調整大小。前往「編輯」>「更改影像解析度」。解析度設定視窗將會出現。

將寬度更改為1280px，高度更改為720px。然後將「補間方法」更改為「硬邊緣」。這樣圖像將在不破壞像素排列的情況下被放大。

 

現在我們來渲染這個動畫。如果您需要一個可以循環播放的動畫結果，那麼我們應該以動畫GIF格式匯出它。前往「檔案」>「匯出動畫」>「動畫GIF」。指定儲存目錄。

渲染視窗將會出現，將寬度更改為1280px，高度更改為720px。

然而，在某些遊戲專案中。通常開發人員會要求以圖像序列的形式呈現啟動畫面。這是因為動畫將使用程式腳本創建。為此，我們可以前往「檔案」>「匯出動畫」>「選擇圖像序列」。

渲染設定視窗將會出現。指定儲存目錄。選取PNG格式並勾選「匯出影格」。

 

好的！這就是我所能分享的全部。希望它有用，也請支持我製作更多訣竅。

訂閱我的YouTube頻道：