影像編輯器

本文描述如何使用 Visual Studio 影像編輯器 來檢視及修改紋理和影像資源。

您可以使用 影像編輯器 來運用可用於 DirectX 應用程式開發的豐富紋理種類與影像格式。 這包括熱門影像檔案格式與色彩編碼的支援、Alpha 色板與 MIP 對應,及多種大幅壓縮、硬體加速並具備 DirectX 支援的紋理格式。

支援的格式

影像編輯器 支援下列影像格式:

格式名稱 檔案名稱副檔名
可攜式網路圖形 .png
JPEG .jpgjpeg. jpe. jfif
DirectDraw 表面 .dds
圖形交換格式 (GIF) .gif
點陣圖 .bmp.dib
標記的影像檔案格式 .tiftiff
TGA (Targa) .tga

開始使用

本節描述如何將影像新增到您的 Visual Studio 專案,並針對您的需求進行設定。

將影像新增到您的專案

  1. 方案總管 中,開啟您想要在其中新增影像之專案的捷徑功能表,然後選擇 [新增] > [新增項目]。

  2. 在 [加入新項目] 對話方塊中的 [已安裝] 下方,選取 [圖形],然後為影像選取適當的檔案格式。

    注意

    如果在 [新增項目] 對話方塊中沒有看到 [圖形] 分類,您可能需要安裝 影像和 3D 模型編輯器 元件。 關閉對話方塊,然後 > 從功能表列選取 [工具 取得工具和功能],以開啟 Visual Studio 安裝程式。 選取 [個別元件] 索引標籤,然後選取 [遊戲與圖形] 分類下的 影像和 3D 模型編輯器 元件。 選取 [修改]。

    影像與 3D 模型編輯器

    如需如何根據需求選擇檔案格式的相關資訊,請參閱選擇影像格式

  3. 指定影像檔案的 [名稱] 以及要在其中建立影像檔案的 [位置]。

  4. 選擇 [新增] 按鈕。

選擇影像格式

視您預計的影像用途而定,有些檔案格式可能會比其他檔案格式適當。 舉例來說,有些格式可能不支援您需要的功能,像是透明度或某種色彩格式。 有些格式可能未對您規劃的影像內容種類提供壓縮。

下列資訊可協助您選擇符合您需求的影像格式:

點陣圖 (.bmp)

點陣圖格式。 一種支援 24 位元色彩的未壓縮影像格式。 點陣圖格式不支援透明度。

GIF 影像 (.gif)

「圖形交換格式」(GIF) 影像格式。 一種 LZW 壓縮的無失真影像格式,可支援最多 256 色。 不適用於具有大量色彩細節的相片和影像,但可為色彩一致性程度高的低色彩影像提供理想的壓縮比率。

JPG 影像 (.jpg)

JPEG 格式 (JPEG) 影像格式。 一種大幅壓縮的失真影像格式,支援 24 位元色彩,並且適用於色彩一致性程度高的一般用途影像壓縮。

PNG 影像 (.png)

可攜式網路圖形 (PNG) 影像格式。 一種適當壓縮的無失真影像格式,支援 24 位元色彩和 Alpha 透明度。 它適用於自然和人工影像,但所提供的壓縮比率比不上 JPG 或 GIF 這類失真格式。

TIFF 影像 (.tif)

「標記的影像檔案格式」(TIFF 或 TIF) 影像格式。 一種彈性影像格式,支援數種壓縮配置。

DDS 材質 (.dds)

「DirectDraw 表面」(DDS) 材質格式。 一種大幅壓縮的失真紋理格式,支援 24 位元色彩和 Alpha 透明度。 其壓縮比率可高達 8:1。 它是根據「S3 材質」壓縮,可在圖形硬體上解壓縮。

TGA 影像 (.tga)

Truevision Graphics Adapter (TGA) 影像格式 (也稱為 Targa)。 一種 RLE 壓縮的無失真影像格式,可同時支援最高 24 位元的色彩對應 (調色盤) 或直接色彩影像以及 Alpha 透明度。 不適用於具有大量色彩細節的相片和影像,但可為有大範圍一致色彩的影像提供理想的壓縮比率。

設定影像

在開始使用您建立的影像之前,您可以變更其預設組態。 例如,您可以變更其維度或其使用的色彩格式。 如需有關如何設定影像的這些及其他屬性的資訊,請參閱影像屬性

注意

如果您想要使用特定的色彩格式,在儲存您的工作之前,請務必設定 [色彩格式] 屬性。 如果檔案格式支援壓縮,則在您第一次儲存檔案或選擇 [另存新檔] 時,可以調整壓縮設定。

使用影像編輯器

本節說明如何使用 影像編輯器 來修改紋理和影像。

影響 影像編輯器 狀態的命令位於 [ 影像編輯器模式] 工具列上,以及 advanced 命令。 工具列位於 影像編輯器 設計介面的最頂端邊緣。 繪圖工具位於 [影像編輯器] 設計介面 最左邊邊緣的 [影像編輯器] 工具列上。

影像編輯器模式工具列

Visual Studio 中的影像編輯器模式工具列

下表描述 [影像編輯器模式] 工具列上的項目,依照項目從左到右的位置順序列出:

工具列項目 描述
選取 可讓您選取矩形的影像區域。 選取一個區域之後,您可以將它剪下、複製、移動、縮放、旋轉、翻轉或刪除。 當有作用中的選取範圍時,繪製工具只會影響選取的區域。
非標準的選取範圍 可讓您選取不規則的影像區域。 選取一個區域之後,您可以將它剪下、複製、移動、縮放、旋轉、翻轉或刪除。 當有作用中的選取範圍時,繪製工具只會影響選取的區域。
魔術棒選取範圍 可讓您選取色彩相似的影像區域。 您可以設定 [容限] (亦即相鄰色彩間可視為相似的最大差異) 來包含較小或較大範圍的相似色彩。 選取一個區域之後,您可以將它剪下、複製、移動、縮放、旋轉、翻轉或刪除。 當有作用中的選取範圍時,繪製工具只會影響選取的區域。
可讓影像相對於視窗框架進行移動。 請在 [移動瀏覽] 模式下,選取影像上的一個點,然後四處移動。

您可以藉由按住 Ctrl 鍵來暫時啟用 平移 模式。
縮放 可讓您相對於視窗框架顯示較多或較少的影像細節。 請在 [縮放] 模式下,選取影像上的一個點,然後向右或向下移動來放大,或是向左或向上移動來縮小。

您可以在使用滑鼠滾輪時按住 Ctrl 鍵,或按加號 (+) 或減號 () 來放大或縮小 -
縮放至實際大小 使用影像像素與螢幕像素的 1:1 關聯性來顯示影像。
縮放至適當比例 在視窗框架中顯示完整的影像。
縮放至寬度 在視窗框架中顯示完整寬度的影像。
方格 啟用或停用顯示像素界線的格線。 可能會等到您放大影像時才會顯示格線。
檢視下一個 MIP 層級 啟用 MIP 對應鏈結中下一個較大的 MIP 層級。 作用中的 MIP 層級會顯示在設計介面上。 此項目僅適用於具有 MIP 層級的材質。
檢視上一個 MIP 層級 啟用 MIP 對應鏈結中下一個較小的 MIP 層級。 作用中的 MIP 層級會顯示在設計介面上。 此項目僅適用於具有 MIP 層級的材質。
紅色色板

綠色色板

藍色色板

Alpha 色板
啟用或停用特定色彩色板。 注意: 透過有系統地啟用或停用色彩色板,您將可隔離與一或多個色板有關的問題。 例如,您可以識別不正確的 Alpha 透明度。
背景 透過影像的透明部分來啟用或停用背景顯示。 您可以從下列選項選擇,來設定背景的顯示方式:

棋盤式
使用綠色搭配指定的背景色彩來以棋盤式圖樣顯示背景。 您可以使用此選項來讓影像的透明部分更為明顯。

白色背景
使用白色來顯示背景。

黑色背景
使用黑色來顯示背景。

以動畫方式顯示背景
緩慢地移動瀏覽棋盤式圖樣。 您可以使用此選項來讓影像的透明部分更為明顯。
屬性 交替地開啟或關閉 [屬性] 視窗。
進階 包含額外的命令和選項。

篩選條件

提供數個常見的影像篩選:黑白模糊亮化加深邊緣偵測浮禿反轉色彩漣漪深褐色調,以及 銳利化

圖形引擎

以 D3D11 呈現
使用 Direct3D 11 來呈現 影像編輯器 設計介面。

以 D3D11WARP 呈現
使用 Direct3D 11 Windows Advanced Rasterization Platform (WARP) 轉譯 影像編輯器 設計介面。

工具

水平翻轉
繞著影像的水平軸 (或 x 軸) 轉置影像。

垂直翻轉
繞著影像的垂直軸 (或 y 軸) 轉置影像。

產生 Mips
產生影像的 MIP 層級。 如果 MIP 層級已經存在,將會從最大的 MIP 層級重新建立它們。 對較小 MIP 層級所做的任何變更將會遺失。 若要儲存您已產生的 MIP 層級,您必須使用 dds 格式來儲存影像。

檢視

畫面播放速率
已啟用時,會在設計介面右上角顯示畫面播放速率。 畫面播放速率是每秒繪製的畫面數目。 秘訣: 您可以選擇 [ Advanced (Advanced )] 按鈕,再次執行最後一個命令。

影像編輯器工具列

影像編輯器工具列

下表描述 [影像編輯器] 工具列上的項目,依照項目從上到下的位置順序列出:

工具列項目 描述
Pencil 使用作用中色彩選取範圍來繪製毛邊筆觸。 您可以在 [屬性] 視窗中設定色彩和粗細。
Brush 使用作用中色彩選取範圍來繪製無毛邊筆觸。 您可以在 [屬性] 視窗中設定色彩和粗細。
噴槍 使用作用中色彩選取範圍,來繪製與影像混合並隨著時間變得更飽和的無毛邊筆觸。 您可以在 [屬性] 視窗中設定色彩和粗細。
色彩選擇工具 將作用中色彩選取範圍設定成所選像素的色彩。
填滿 使用作用中色彩選取範圍來填滿影像的區域。 受影響的區域是定義為套用填滿的像素,連同依據同色像素與其連接及本身與其同色的每個像素。 如果是在作用中選取範圍內套用填滿,則受影響的區域就會受到該選取範圍限制。

作用中色彩選取範圍預設會根據其 Alpha 元件與受影響的影像區域混合。 若要使用作用中色彩選取範圍來覆寫受影響的區域,請在使用填滿工具時按住 Shift 鍵。
橡皮擦 如果影像支援 Alpha 色板,會將像素設定為全透明色彩。 否則,會將像素設定為作用中的背景色彩。
線條矩形圓角矩形橢圓形 在影像上繪製圖形。 您可以在 [屬性] 視窗中設定外框的色彩和粗細。

若要繪製具有相等寬度和高度的基本形狀,請在繪製時按住 Shift 鍵。
Text 使用前景色彩選取範圍來繪製文字。 背景色彩是由背景色彩選取範圍決定。 就透明背景而言,背景色彩選取範圍的 Alpha 值必須為 0。 在文字區域處於作用中狀態時,您可以在 [屬性] 視窗中設定是否要以無毛邊筆觸繪製文字,並可以設定文字 [值]、[字型]、[大小] 及樣式 — [粗體]、[斜體] 或 [底線]。 當文字區域不再處於作用中狀態時,便會完成文字的內容和外觀。
旋轉 將影像順時針方向旋轉 90 度。
修剪 將影像修剪至符合作用中選取範圍。

使用 MIP 層級

有些影像格式 (例如 DirectDraw Surface .dds) 支援紋理空間細節層次 (LOD) 的 MIP 層級。 如需如何產生及使用 MIP 層級的詳細資訊,請參閱 如何:建立和修改 mip 層級

使用透明度

有些影像格式 (例如 DirectDraw Surface .dds) 支援透明度。 視您使用的工具而定,有數種可以使用透明度的方式。 若要指定色彩選取範圍的透明度層級,請在 [屬性] 視窗中,設定色彩選取範圍的 A (alpha) 元件。

下表描述不同種類的工具如何控制套用透明度的方式:

工具 描述
鉛筆筆刷噴槍線條矩形圓角矩形橢圓形文字 若要將作用中色彩選取範圍與影像混合,請在 [屬性] 視窗中,展開 [色板] 屬性群組並選取 [Alpha] 色板上的 [繪圖] 核取方塊,然後正常地繪圖。

若要使用作用中色彩選取範圍來進行繪製並保留現有的影像 Alpha 值,請將 [Alpha] 色板的 [繪圖] 核取方塊取消選取,然後正常地繪圖。
填滿 若要將作用中色彩選取範圍與影像混合,只要選擇要填滿的區域即可。

若要使用現用色彩選取範圍(包括 Alpha 色板的值)來覆寫影像,請按住 Shift 鍵,然後選擇要填滿的區域。

映像屬性

您可以使用 [屬性] 視窗來指定影像的各種屬性。 例如,您可以設定寬度和高度屬性來調整影像大小。

下表說明影像屬性:

屬性 描述
寬度 影像的寬度。
高度 影像的高度。
位元/像素 代表每個像素的位元數。 此屬性的值取決於影像的 [色彩格式]。
透明選擇 若要根據選取範圍圖層的 Alpha 值,將選取範圍圖層與主要影像混合,請設定為 True;否則,請設定為 False。 此項目僅適用於支援 Alpha 的影像。
格式 影像的色彩格式。 視影像格式而定,您可以指定各種色彩格式。 色彩格式會定義影像中包含的色彩色板數目和類型,以及各種色板的大小和編碼。
MIP 層級 作用中的 MIP 層級。 此項目僅適用於具有 MIP 層級的材質。
MIP 層級計數 影像中的 MIP 層級總數。 此項目僅適用於具有 MIP 層級的材質。
框架計數 影像中的框架總數。 此項目僅適用於支援材質陣列的影像。
Frame 目前的框架。 只有第一個框架是可供檢視的;所有其他框架會在儲存影像時即遺失。
深度切割計數 影像中的深度切割總數。 此項目僅適用於支援大量材質的影像。
深度切割 目前的深度切割。 只有第一個切割可供檢視;所有其他切割會在儲存影像時即遺失。

注意

由於 [旋轉角度] 屬性適用於所有工具和選取的區域,因此它一律會與其他工具屬性一起顯示在 [屬性] 視窗的底部。 [旋轉角度] 一律會顯示,因為當沒有任何其他選取範圍或作用中的工具時,會隱含地選取整個影像。 如需 [ 旋轉依據 ] 屬性的詳細資訊,請參閱 [工具屬性](#tool -properties)。

調整影像大小

調整影像大小有兩種方式。 在這兩種情況下, 影像編輯器 都會使用雙線性插補來重新取樣影像。

  • 在 [屬性] 視窗中,為 [寬度] 和 [高度] 屬性指定新的值。

  • 選取整個影像,然後使用邊界標記來調整影像大小。

選取的區域

影像編輯器 中的選取範圍會定義使用中的影像區域。 工具和轉換會影響使用中的區域。 當有作用中的選取範圍時,在所選區域外的區域不會受到大多數工具和轉換影響。 如果沒有作用中的選取範圍,就會是整個影像都處於作用中。

使用中的選取範圍會限制或定義大多數的工具 (PencilBrushAirbrushFillEraser 及 2D primitives) 和轉換 (RotateTrimInvert ColorsFlip HorizontalFlip Vertical)。 不過,有些工具 (EyedropperText) 及轉換 (Generate Mips) 則不受任何使用中選取範圍的影響。 這些工具的表現一律如同整個影像都是使用中的選取範圍。

當您選取一個區域時,可以長按 Shift 來選取等比例 (方形) 的範圍。 否則就不會限制選取範圍。

調整選取範圍大小

在選取區域之後,您可以透過變更選取範圍標記的大小,來調整其大小或其影像內容。 在調整所選區域的大小時,您可以使用下列輔助按鍵,變更調整所選區域時該區域的行為:

Ctrl - 在調整所選區域的大小之前先複製其內容。 這會讓原始影像保持不變,而調整複本的大小。

Shift - 依所選區域原始大小的比例調整所選區域的大小。

Alt - 變更選取範圍區域的大小。 這會讓影像保持不變。

下表描述有效的輔助按鍵組合:

CTRL Shift Alt 描述
調整所選區域的內容大小。
Shift 鍵 依比例調整所選區域的內容大小。
Alt 鍵 調整所選區域的大小。 這會定義一個新的選取範圍區域。
Shift 鍵 Alt 鍵 依比例調整所選區域的大小。 這會定義一個新的選取範圍區域。
Ctrl 複製所選區域的內容,然後調整其大小。
Ctrl Shift 鍵 複製所選區域的內容,然後依比例調整其大小。

工具屬性

當已選取工具時,您可以使用 [屬性] 視窗來指定關於它如何影響影像的詳細資料。 例如,您可以設定 [鉛筆] 工具的粗細或 [筆刷] 工具的色彩。

您可以同時設定前景色彩和背景色彩。 兩者皆支援 Alpha 色板來提供使用者定義的不透明度。 這些設定適用於所有工具。 如果您使用滑鼠,則滑鼠左鍵會對應前景色彩,而滑鼠右鍵則對應背景色彩。

下表說明工具屬性:

工具 屬性
所有工具和選取範圍 旋轉角度
定義選取範圍或工具效果的順時針方向旋轉量 (以度為單位)。
鉛筆筆刷噴槍橡皮擦 Thickness
定義受工具影響的區域大小。
Text 消除鋸齒
繪製無毛邊的文字。 這會讓文字擁有較平滑的外觀。


要繪製的文字。

Font
用來繪製文字的字型。

大小
文字的大小。

粗體字
讓文字變成粗體。

斜體
讓文字變成斜體。

底線
讓文字加上底線。
2D 基本形狀 消除鋸齒
繪製無毛邊的基本形狀。 這會讓它們擁有較平滑的外觀。

Thickness
定義構成基本形狀界限的線條粗細。

半徑 X
(僅限圓角矩形) 定義原始形狀上下邊緣的圓角半徑。

半徑 Y
(僅限圓角矩形) 定義原始形狀左右邊緣的圓角半徑。
鉛筆筆刷噴槍2D 基本形狀 聲道
啟用或停用用於檢視和繪圖的特定色彩色板。 如果為特定色彩色板設定了 [檢視],就可在影像中看見該色板;否則便看不見。 如果為特定色彩色板設定了 [繪圖],該色板就會受到繪圖作業影響;否則便不受影響。
魔術棒選取範圍填滿 寬容
定義相鄰色彩間可視為相似的最大差異,以便將更多或更少的相似色彩包含在受影響或選取的區域中。 此值預設為 32,意謂著在原始色彩 32 階色度 (較淺或較深) 內的相鄰像素都會被視為區域的一部分。

鍵盤快速鍵

命令 鍵盤快速鍵
切換至 [選取] 模式 S
切換到 [縮放] 模式 Z
切換到 [移動瀏覽] 模式 K
全選 Ctrl +A
刪除目前選取範圍 刪除
取消目前的選取範圍 Esc (escape)
放大 Ctrl +滑鼠滾輪向前

Ctrl +PageUp

加正負號 (+)
縮小 Ctrl -滑鼠滾輪向後移動

Ctrl -PageDown

負號 (-)
向上移動瀏覽影像 滑鼠滾輪往後捲動

PageDown
向下移動瀏覽影像 滑鼠滾輪往前捲動

PageUp
向左移動瀏覽影像 Shift +滑鼠滾輪向後移動

滑鼠滾輪向左捲動

Shift +PageDown
向右移動瀏覽影像 Shift +滑鼠滾輪向前

滑鼠滾輪向右捲動

Shift +PageUp
縮放至實際大小 Ctrl +0 (零)
將影像調整成視窗大小 Ctrl +GCtrl + F
將影像調整成符合視窗寬度 Ctrl +GCtrl + I
切換格線 Ctrl +GCtrl + G
將影像裁剪成目前的選取範圍 Ctrl +GCtrl + C
檢視下一個 (詳細程度較高) MIP 層級 Ctrl +GCtrl + 6
檢視上一個 (詳細程度較低) MIP 層級 Ctrl +GCtrl + 7
切換紅色色板 Ctrl +GCtrl + 1
切換綠色色板 Ctrl +GCtrl + 2
切換藍色色板 Ctrl +GCtrl + 3
切換 Alpha (透明) 色板 Ctrl +GCtrl + 4
切換 Alpha 棋盤式圖樣 Ctrl +GCtrl + B
切換至非標準選取範圍工具 L
切換至魔術棒選取範圍工具 M
切換至鉛筆工具 P
切換至筆刷工具 B
切換至填滿工具 F
切換至橡皮擦工具 Pci-e
切換至文字工具 T
切換至色彩選取 (滴管) 工具 I
移動作用中的選取範圍及其內容。 箭頭 鍵。
調整作用中選取範圍及其內容的大小。 Ctrl + 號鍵
移動作用中的選取範圍,但不包括其內容。 Shift + 號鍵
調整作用中選取範圍的大小,但不包括其內容。 Shift +Ctrl + 號鍵
認可目前的圖層 返回
縮減工具粗細 [
增加工具粗細 ]
標題 描述
使用3D 資產來打造遊戲和應用程式 提供可在 Visual Studio 中用來處理圖形資產 (例如紋理及影像、3D 模型和著色器效果) 之工具的概觀。
模型編輯器 描述如何使用 Visual Studio 模型編輯器來處理 3D 模型。
著色器設計工具 描述如何使用 Visual Studio 著色器設計工具,搭配著色器一起運作。