Art Studio:可平鋪紋理與 9 切片圖形 | hyperPad Documentation
Logo

Art Studio 學習指南

圖塊會重複排列;九宮格面板則會拉伸選定區域,同時保護四個角。請依照所製作的遊戲素材選擇合適的工作流程:地板和牆面通常需要圖塊;介面面板和按鈕通常適合使用九宮格美術素材。

一邊繪製圖塊,一邊查看周圍圖塊

建立一個小型 Graphic 專案來製作紋理,例如 32 × 32 的石頭或草地圖塊。先塗上純色底色,再新增幾個延伸到邊緣的形狀。選取畫布縮放控制旁的 Tile 開關,或按下 ⌥L,即可啟用 Live Tiles。

Live Tiles 會在可編輯的中央圖塊周圍顯示重複的美術素材

中央畫布仍可編輯。周圍八個圖塊會重複顯示目前的合成圖像,包括對角的角落,並在你繪圖時同步更新。這些是重複的副本,不是翻轉的鏡像。請在中央圖塊上繪製,並利用周圍的副本查看接縫位置。

  1. 查看左/右接縫。顏色和形狀有銜接起來嗎?
  2. 檢查上/下接縫。
  3. 檢查四個角相交的位置。
  4. 縮小檢視整體重複圖樣。即使邊緣完全吻合,明顯的大型特徵仍可能形成醒目的網格。

製作牆面紋理時,可錯開石塊的排列,避免垂直接縫全部對齊。製作草地時,可變化草叢的分布,並讓邊緣顏色彼此協調。保留足夠的素淨區域,避免重複紋理搶走遊戲角色的視覺焦點。

關閉 Live Tiles 後,畫面會恢復一般的繪圖檢視範圍。周圍的副本不會加入素材,也不會放大儲存的畫布。

從你的繪圖產生相符的邊緣

啟用 Live Tiles 後,會出現情境式的 Generate Tileable Texture… 按鈕。按下後會開啟預覽視窗,使用現有美術素材重建選取的邊緣帶。若紋理已接近可無縫拼接,但仍有明顯接縫,這項功能就很實用。

圖塊產生器,包含 Before/After、邊緣選項、寬度和變化控制項

  1. 選取要修改的像素圖層。產生器會在該圖層上運作,請確認圖層包含你想修補的紋理。
  2. 開啟 Generate Tileable Texture…(⇧⌥L)。
  3. 在 Edges to regenerate 下選取 Left、Right、Top 和/或 Bottom。
  4. 調整邊緣寬度。較寬的範圍會讓產生器修改所選邊緣附近更多美術內容;中央區域則會保持不變。
  5. 在 Before 和 After 之間切換。檢查多處接縫,包括角落。
  6. 如果其他變化更適合此圖樣,請選擇 Try Another。
  7. 選擇 Apply to Layer 套用變更,或選擇 Cancel 保留原始內容。套用會成為一項可復原的編輯。

石頭範例選取了 Left 和 Right,並將重建深度設為 12%,因此水平石塊列的邊界不會改動。請依照自己的美術素材選取需要處理的邊,而不是一律自動修改每一條邊。

產生器會使用你提供的繪圖,但結果可能仍需要手動修整,尤其是可辨識的物件或方向性強烈的線條周圍。不要期待按一下就能產生完美紋理:請在 Live Tiles 中檢查結果,並手動繪製修補任何殘留的不連續處。

文字仍可編輯,且不能直接作為產生器所選取的圖層。連結的 cel 會同步更新。如果啟用了 Alpha Lock,透明度就會保持不變,因此即使顏色已銜接,透明度接縫仍可能存在。圖層遮色片也會影響結果。進行大幅度的紋理重新設計前,請先保留一份專案副本。

產生器有獨立的預覽平移/縮放控制項。按 ⌘R 可嘗試另一種變化,按 ⌘Return 可套用準備好的結果。

匯出前檢查圖塊

  • 檢查每一處接縫是否有色彩跳變或透明度不一致。
  • 請在遊戲中預定使用的實際尺寸下測試紋理,不要只在較大的編輯縮放比例下檢查。
  • 選擇符合美術素材需求的平滑/像素紋理篩選方式。
  • 從 File 將中央圖塊匯出為靜態遊戲圖像。遊戲需要重複紋理時,請使用該圖像,例如 Smart Shape。

建立九宮格面板

建立單影格專案,繪製邊框清楚、中央較簡單的面板。此範例使用 32 × 32 的紫色面板。約六像素厚的邊框能為圓角留出足夠空間。

選擇 Modes → 9-Slice Layout,或按下 ⌥⌘9。你也可以在新增專案精靈中選擇九宮格起始選項。

四條九宮格參考線與多種預覽尺寸

四條參考線會將圖像分成九個區域:

區域面板調整尺寸時的行為
四個角維持原有形狀和尺寸。
上緣和下緣水平延伸。
左緣和右緣垂直延伸。
中央向兩個方向延伸。

拖曳參考線控制點,讓四個角完全落在固定區域內。標籤會以像素顯示固定邊距。此範例的四邊皆使用 6 pixels。Preview 檢視器會以多種尺寸顯示面板;除了原始尺寸,也請檢查較寬和較高的版本。

如果圓角變形,請將對應的參考線往圖像中央移動,讓整條曲線都留在固定角落區域內。如果裝飾細節被拉伸,請將它納入固定區域,或簡化需要拉伸的區域。避免將文字放在必須拉伸的面板區域;通常將文字設為獨立素材或遊戲物件會更容易重複使用。

九宮格編輯需要單影格。如果專案已有多個動畫影格,請另建單影格面板專案,或在啟用此模式前移除多餘影格。影格動畫和九宮格執行階段圖像解決的是不同問題。

儲存 Studio 專案,以保留可編輯的繪圖和參考線位置。準備就緒後,透過 File 匯出九宮格遊戲素材,再於遊戲場景中調整尺寸,確認角落和邊框仍保持完整。