イメージ エディター

このドキュメントでは、Visual Studio イメージ エディターを使用してテクスチャ リソースとイメージ リソースを表示および変更する方法について説明します。

イメージ エディターを使用すると、DirectX アプリの開発で使用される多様なテクスチャおよびイメージ形式を処理できます。DirectX がサポートする、人気のイメージ ファイル形式、色のエンコーディング、機能 (アルファ チャネル形式、MIP マッピング形式、高圧縮ハードウェア アクセラレータ テクスチャ形式など) もサポート対象になります。

サポートされる形式

イメージ エディターは次のイメージ形式をサポートします。

形式名 ファイル名の拡張子
ポータブル ネットワーク グラフィックス (PNG) .png
JPEG .jpg、.jpeg、.jpe、.jfif
DirectDraw Surface .dds
グラフィックス インターチェンジ (GIF) 形式 .gif
ビットマップ .bmp、.dib
TIFF 形式 .tif、.tiff
TGA (Targa) .tga

作業の開始

ここではイメージを Visual Studio プロジェクトに追加し、要件に応じて構成する方法について説明します。

プロジェクトにイメージを追加するには

  1. ソリューション エクスプローラーで、イメージを追加するプロジェクトのショートカット メニューを開き、[追加][新しい項目] の順にクリックします。

  2. [新しい項目の追加] ダイアログ ボックスで、[インストール済み][グラフィックス] を選択し、イメージの適切なファイル形式を選択します。 要件に基づいてファイル形式を選択する方法については、次のセクションを参照してください。

  3. イメージ ファイルの [名前] を指定し、作成する [場所] を指定します。

  4. [追加] ボタンをクリックします。

イメージ ファイル形式の選択

イメージの用途によっては、特定のファイル形式が、他の形式より適切である場合があります。 たとえば、形式によっては、透明度や特定の色形式など必要な機能がサポートされていない場合や、予定していたイメージ コンテンツの種類に適した圧縮がされていない場合があります。

次の情報は、ニーズに応じたイメージ ファイル形式を選択するために役立ちます。

ビットマップ イメージ (.bmp)
ビットマップ イメージ形式。 24 ビット カラーをサポートしている非圧縮イメージ形式。 ビットマップ形式は透明度をサポートしていません。

GIF イメージ (.gif)
GIF (グラフィックス インターチェンジ) イメージ形式。 最大 256 色をサポートしている、LZW による可逆圧縮イメージ形式。 色のディテールを大量に含んだ写真やイメージには適していませんが、カラー コヒーレンスの度合いが高いロー カラー イメージに対しては優れた圧縮比をもたらします。

JPG イメージ (.jpg)
JPEG (Joint Photographic Experts Group) イメージ形式。 圧縮比の高い非可逆圧縮イメージ形式。24 ビット カラーをサポートし、カラー コヒーレンスの度合いが高いイメージの汎用圧縮に適しています。

PNG イメージ (.png)
PNG (ポータブル ネットワーク グラフィックス) イメージ形式。 圧縮比が中程度の可逆圧縮イメージ形式。24 ビット カラーとアルファ透明度をサポートしています。 自然なイメージと人工的なイメージの両方に適していますが、圧縮比の点では JPG や GIF などの非可逆圧縮形式に劣ります。

TIFF イメージ (.tif)
TIFF または TIF イメージ形式。 複数の圧縮スキームをサポートしている柔軟なイメージ形式。

DDS テクスチャ (.dds)
DirectDraw Surface (DDS) テクスチャ形式。 圧縮比の高い非可逆圧縮テクスチャ形式。24 ビット カラーとアルファ透明度をサポートしています。 圧縮比は最大で 8:1 になる場合があります。 グラフィックス ハードウェアで圧縮解除できる、S3 テクスチャ圧縮に基づいています。

TGA イメージ (.tga)
TGA (Truevision Graphics Adapter) イメージ形式 (TARGA とも呼ばれます)。 RLE による可逆圧縮イメージ形式。最大 24 ビット カラーとアルファ透明度を持つカラーマップ (カラー パレット) イメージとダイレクトカラー イメージの両方をサポートしています。 色のディテールを大量に含んだ写真やイメージには適していませんが、スパンの長い同一カラーを持つイメージに対しては優れた圧縮比をもたらします。

イメージの構成

作成したイメージに対する操作を始める前に、そのイメージの既定の設定を変更できます。 たとえば、使用する大きさや色形式を変更できます。 イメージに関するこれらのプロパティおよびその他のプロパティを構成する方法については、「イメージのプロパティ」を参照してください。

注意

特定の色形式を使用する場合は、作業を保存する前に、[色形式] プロパティを設定してください。 圧縮をサポートするファイル形式の場合は、ファイルを初めて保存するときか、[名前を付けて保存] を選択したときに圧縮の設定を調整できます。

イメージ エディターを使用する

このセクションでは、イメージ エディターを使用してテクスチャやイメージを変更する方法について説明します。

イメージ エディターのツール バー

イメージ エディターのツール バーには、イメージの処理に役立つコマンドがあります。

イメージ エディターの状態に影響を与えるコマンドは、高度なコマンドと共に、[イメージ エディターのモード] ツール バーにあります。 このツール バーは、イメージ エディターのデザイン サーフェイスの上端にあります。 描画ツールは、イメージ エディターのデザイン サーフェイス左端の [イメージ エディター] ツール バーにあります。

[イメージ エディターのモード] ツール バーを次に示します。

イメージ エディターのモーダル ツール バー。

次の表は、[イメージ エディターのモード] ツール バーに、左から右へ順に表示される項目を示します。

ツール バーの項目 説明
選択 イメージの四角形の領域を選択できます。 領域の選択後、その領域を切り取り、コピー、移動、拡大縮小、回転、反転、または削除できます。 アクティブな選択範囲がある場合、その選択された領域で機能するのは図形描画ツールのみです。
不規則選択 イメージの不規則な領域を選択できます。 領域の選択後、その領域を切り取り、コピー、移動、拡大縮小、回転、反転、または削除できます。 アクティブな選択範囲がある場合、その選択された領域で機能するのは図形描画ツールのみです。
杖選択 イメージの同系色の領域を選択できます。 許容値 (同系色と見なされる範囲内での隣接する色の最大差の値) は、狭いまたは広い同系色範囲を含めるように構成できます。 領域の選択後、その領域を切り取り、コピー、移動、拡大縮小、回転、反転、または削除できます。 アクティブな選択範囲がある場合、その選択された領域で機能するのは図形描画ツールのみです。
パン ウィンドウ フレームに応じてイメージを移動できます。 [パン] モードでは、イメージのポイントを選択してポイントを動かします。

Ctrl キー長押しすると、[パン] モードを一時的にアクティブにできます。
ズーム ウィンドウ フレームに応じてイメージを拡大または縮小表示できます。 [ズーム] モードで、イメージのポイントを選択し、右または下へ移動して拡大表示するか、左または上へ移動して縮小表示します。

マウス ホイールを使用するか、正符号 (+) または負符号 (-) 押しながら Ctrl キーを長押しすると、拡大または縮小できます。
実際のサイズに大きさを変更 イメージ ピクセルと画面ピクセルの 1:1 の関係を使用してイメージを表示します。
ウィンドウのサイズに合わせて大きさを変更 ウィンドウ フレームにイメージ全体を表示します。
幅に合わせて大きさを変更 ウィンドウ フレームにイメージの全幅を表示します。
グリッド ピクセルの境界を示すグリッドを有効または無効にします。 イメージを拡大しないとグリッドが表示されないことがあります。
次の MIPMAP レベルを表示 MIP マップ チェーン内の次に大きい MIPMAP レベルをアクティブにします。 デザイン サーフェイスにアクティブな MIPMAP レベルが表示されます。 この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。
前の MIPMAP レベルを表示 MIP マップ チェーン内の次に小さい MIPMAP レベルをアクティブにします。 デザイン サーフェイスにアクティブな MIPMAP レベルが表示されます。 この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。
赤チャネル

緑チャネル

青チャネル

アルファ チャネル
特定のカラー チャネルを有効または無効にします。 注記: カラー チャネルを体系的に有効または無効にすると、1 つまたは複数のカラー チャネルに関連する問題を特定できます。 たとえば、誤ったアルファ透明度を特定できる場合があります。
背景 画像の透明な部分での背景表示を有効または無効にします。 背景の表示方法は、次のオプションを選択して構成できます。

[チェッカーボード]
緑色と指定された背景色で、背景をチェッカーボード パターンとして表示します。 このオプションを使用すると、イメージの透明な部分が明確になります。

[背景を白にする]
背景を白色で表示します。

[背景を黒にする]
背景を黒色で表示します。

[背景のアニメーション]
チェッカーボード パターンを低速でパンします。 このオプションを使用すると、イメージの透明な部分が明確になります。
プロパティ [プロパティ] ウィンドウを表示または非表示にします。
詳細設定 追加のコマンドとオプションがあります。

フィルター

一般的なイメージ フィルターがいくつかあります。[白黒][ぼかし][輝度][暗][境界の検出][エンボス][色の反転][水面][セピア調]、および [シャープネス] の 10 種類です。

グラフィックス エンジン

D3D11 で描画
Direct3D 11 を使用してイメージ エディターのデザイン サーフェイスを描画します。

[D3D11WARP で描画]
Direct3D 11 Windows Advanced Rasterization Platform (WARP) を使用してイメージ エディターのデザイン サーフェイスを描画します。

ツール

[左右反転]
イメージを水平方向または x 軸上で入れ替えます。

[上下反転]
イメージを垂直方向または y 軸上で入れ替えます。

MIPS の生成
イメージの MIPMAP レベルを生成します。 MIPMAP レベルが既に存在する場合は、最大の MIPMAP レベルで再作成されます。 小さい MIPMAP レベルに対して行われた変更内容はすべて失われます。 生成した MIPMAP レベルを保存するには、.dds 形式でイメージを保存する必要があります。

表示

フレーム レート
有効にすると、デザイン サーフェイスの右上の隅にフレーム レートが表示されます。 フレーム レートは、1 秒あたりの描画フレーム数です。 ヒント: [詳細設定] ボタンを選択すると、最後のコマンドを再実行できます。

[イメージ エディター] ツール バーを次に示します。

イメージ エディターのツール バー

次の表では、[イメージ エディター] ツール バーに、上から下へ順に表示される項目について説明します。

ツール バーの項目 説明
鉛筆 アクティブな色選択を使用してエイリアス ストロークを描画します。 ストロークの色と太さは、[プロパティ] ウィンドウで設定できます。
ブラシ アクティブな色選択を使用してアンチエイリアス ストロークを描画します。 ストロークの色と太さは、[プロパティ] ウィンドウで設定できます。
エアブラシ アクティブな色選択を使用してイメージと調和させるアンチエイリアス ストロークを描画し、時間に応じてより浸透します。 ストロークの色と太さは、[プロパティ] ウィンドウで設定できます。
スポイト アクティブな色選択を選択したピクセルの色に設定します。
塗りつぶし アクティブな色選択を使用してイメージの特定の領域を塗りつぶします。 影響を受ける領域は、同色のピクセルによって関連付けられているピクセルと、色が同一のピクセルそのものと一緒に、塗りつぶしが適用されるピクセルとして定義されます。 アクティブな選択範囲で塗りつぶしが適用されると、影響を受ける領域は、その選択範囲によって制限されます。

既定では、アクティブな色選択範囲は、アルファ要素に応じてイメージの影響を受ける領域と共に調和されます。 アクティブな色選択範囲を使用して影響を受ける領域を上書きするには、塗りつぶしツールを使用しながら Shift キーを長押しします。
消しゴム イメージがアルファ チャネルをサポートする場合は、ピクセルに完全に透明な色を設定します。 それ以外の場合は、アクティブな背景色に設定します。
[ライン][四角形][角丸四角形][楕円] イメージに図形を描画します。 アウトラインの色と太さは、[プロパティ] ウィンドウで設定できます。

幅と高さが等しいプリミティブを描画するには、描画しながら Shift キーを長押しします。
テキスト 前景色の選択範囲を使用してテキストを描画します。 背景色は、背景色の選択によって決定されます。 透明な背景の場合、背景色の選択範囲のアルファ値を 0 にする必要があります。 テキスト領域がアクティブなときには、[プロパティ] ウィンドウで、アンチエイリアス ストロークでテキスト描画できるかどうかを設定したり、テキストの [値][フォント][サイズ]、およびスタイル ([太字][斜体]、または [下線]) を設定したりできます。 テキストの内容と外観は、テキスト領域がアクティブにならなくなったときに最終処理されます。
回転 イメージを時計回りに 90 度回転させます。
トリミング アクティブな選択範囲にイメージをトリミングします。

MIPMAP レベルの操作

DirectDraw Surface (.dds) などの一部のイメージ形式では、テクスチャ空間詳細レベル (LOD) の MIPMAP レベルがサポートされます。 MIPMAP レベルの生成方法と操作方法の詳細については、「方法: MIP レベルを作成および変更する」を参照してください。

透明度の操作

DirectDraw Surface (.dds) などの一部のイメージ形式では透明度がサポートされます。 使用するツールに応じて、透明度を使用できる方法がいくつかあります。 色の選択で透明度のレベルを指定するには、[プロパティ] ウィンドウで、色の選択の A (アルファ) 要素を選択します。 さまざまな種類のツールで透明度の適用を制御する方法を次に示します。

ツール 説明
鉛筆ブラシエアブラシライン四角形角丸四角形楕円テキスト アクティブな色の選択をイメージと調和させるには、[プロパティ] ウィンドウで [チャネル] プロパティ グループを展開し、[アルファ] チャネルの [描画] チェック ボックスをオンにして、通常どおり描画します。

アクティブな色の選択を使用して描画し、イメージのアルファ値をそのまま維持するには、[アルファ] チャネルの [描画] チェック ボックスをオフにします。
塗りつぶし アクティブな色の選択をイメージと調和させるには、塗りつぶす領域を選択します。

アルファ チャネルの値を含め、アクティブな色の選択を使用してイメージを上書きするには、Shift キーを長押しして塗りつぶす領域を選択します。

イメージのプロパティ

イメージのさまざまなプロパティを指定するには、[プロパティ] ウィンドウを使用します。 たとえば、イメージのサイズを変更するには、[幅] プロパティと [高さ] プロパティを設定します。

次の表では、イメージのプロパティについて説明します。

プロパティ 説明
イメージの幅。
高さ イメージの高さ。
ピクセルあたりのビット数 各ピクセルを表すビット数。 このプロパティの値は、イメージの色形式によって異なります。
透明の選択 選択範囲のレイヤーのアルファ値に基づいて、選択範囲のレイヤーをメインのイメージと調和させる場合は True。それ以外の場合は False。 この項目はアルファをサポートするイメージに対してのみ使用できます。
形式 イメージの色形式。 イメージの形式に応じて、さまざまな色形式を指定できます。 色形式はイメージに含まれるカラー チャネルの数と種類、さらに、さまざまなチャネルのサイズとエンコードも定義します。
MIPMAP レベル アクティブな MIPMAP レベル。 この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。
MIPMAP レベル数 イメージ内の MIPMAP レベルの総数。 この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。
フレーム数 イメージ内のフレームの総数。 この項目はテクスチャ配列をサポートするイメージに対してのみ使用できます。
フレーム 現在のフレーム。 最初のフレームのみ表示できます。その他のフレームはイメージを保存するとすべて失われます。
深度スライス数 イメージ内の深度スライスの総数。 この項目はボリューム テクスチャをサポートするイメージに対してのみ使用できます。
深度スライス 現在の深度スライス。 最初のスライスのみ表示できます。その他のスライスはイメージを保存するとすべて失われます。
注意

[回転の角度] プロパティは、すべてのツールと選択した領域に適用されるため、他のツール プロパティと共に [プロパティ] ウィンドウの下部に常に表示されます。 [回転の角度] が常に表示されるのは、他のオプションまたはアクティブなツールがない場合はイメージ全体が暗黙的に選択されるためです。 [回転の角度] プロパティの詳細については、「ツールのプロパティ」を参照してください。

イメージのサイズ変更

イメージのサイズを変更する方法は 2 つあります。 いずれの場合も、イメージ エディターで双一次補間を使用してイメージの縦横比を調整します。

  • [プロパティ] ウィンドウの [幅][高さ] の各プロパティに新しい値を指定します。

  • イメージ全体を選択し、境界線のマーカーを使用してイメージの縦横比を調整します。

ツールの操作

選択された領域

イメージ エディターの選択範囲は、アクティブなイメージの領域を定義します。つまり、この領域はツールと変換の影響を受けます。 アクティブな選択範囲がある場合、その選択された領域の外側にある領域は大部分のツールと変換の影響を受けません。 アクティブな選択範囲がない場合は、イメージ全体がアクティブになります。

大部分のツール ([鉛筆][ブラシ][エアブラシ][塗りつぶし][消しゴム]、2-D プリミティブおよび変換のための [回転][トリミング][色の反転][左右反転][上下反転]) は、アクティブな選択範囲によって制限または定義されます。 ただし、一部のツール ([スポイト][テキスト]) と変換のための [MIPS の生成] はアクティブな選択範囲の影響を受けません。これらのツールは、イメージ全体がアクティブな選択範囲になっているときはいつもどおりに機能します。

領域を選択する場合、Shift キーを長押しして均整の取れた (四角形の) 選択範囲を作成します。そうしないと選択範囲が制限されません。

選択範囲のサイズ変更

領域の選択後、選択範囲のマーカーのサイズを変更すると、領域のサイズを変更したり画像のコンテンツを変更したりすることができます。 選択した領域のサイズを変更する際に、次の修飾子キーを使用して、選択した領域に対する動作を変更できます (キーを押しながらサイズを変更します)。

Ctrl
サイズを変更する前に、選択された領域のコンテンツをコピーします。 これにより、元のイメージは変更せずに、コピーのサイズを変更できます。

シフト
選択した領域のサイズを、元のサイズに比例して変更します。

Alt
選択した領域のサイズを変更します。 この場合、イメージは変更されません。

有効な修飾子キーの組み合わせを次に示します。

Ctrl シフト Alt 説明
選択された領域のコンテンツのサイズを変更します。
シフト 選択された領域のコンテンツのサイズを均等に変更します。
Alt 選択した領域のサイズを変更します。 新しい選択領域が定義されます。
シフト Alt 選択された領域のサイズを均等に変更します。 新しい選択領域が定義されます。
Ctrl 選択された領域のコンテンツをコピーしてサイズを変更します。
Ctrl シフト 選択された領域のコンテンツをコピーしてサイズを均等に変更します。

ツール プロパティ

ツールが選択された状態で、[プロパティ] ウィンドウを使用すると、イメージへの影響についての詳細を指定できます。 たとえば、鉛筆ツールの太さやブラシ ツールの色を設定できます。

前景色と背景色の両方を設定できます。 ユーザー定義の不透明度を指定するアルファ チャネルが両方でサポートされます。 設定内容がすべてのツールに適用されます。 マウスを使用する場合、マウスの左ボタンは前景色に、右ボタンは背景色に対応します。

次の表では、ツールのプロパティについて説明します。

ツール プロパティ
すべてのツールと選択範囲 回転の角度
選択範囲またはツールの効果が時計回り方向で回転する角度を定義します。
鉛筆ブラシエアブラシ消しゴム 太さ
ツールによって影響を受ける領域のサイズを定義します。
テキスト アンチエイリアス
端がアンチエイリアス化されたテキストを描画します。 テキストがより滑らかな外観になります。


描画されるテキスト。

フォント
テキストの描画に使用するフォント。

Size
テキストのサイズ。

太字
フォントを太字にします。

斜体
フォントを斜体にします。

下線
フォントを下線付きにします。
2-D プリミティブ アンチエイリアス
端がアンチエイリアス化されたプリミティブを描画します。 プリミティブがより滑らかな外観になります。

太さ
プリミティブの境界を形成する線の太さを定義します。

半径 X
(角丸四角形のみ) プリミティブの上端と下端に丸め半径を定義します。

半径 Y
(角丸四角形のみ) プリミティブの左端と右端に丸め半径を定義します。
鉛筆ブラシエアブラシ2-D プリミティブ チャネル
表示と描画のための特定のカラー チャネルを有効または無効にします。 特定のカラー チャネルで [表示] が設定されていると、イメージにそのチャネルが表示されます。それ以外の場合は表示されません。 特定のカラー チャネルで [描画] が設定されていると、該当のチャネルは描画操作の影響を受けます。それ以外の場合は影響を受けません。
杖選択塗りつぶし 許容値
類似性が低い色でも、同系色でも影響を受ける領域や選択された領域の一部となるように、隣接する色が同系色と見なされる範囲の最大差を定義します。 既定値は 32 です。つまり、元の色の 32 段階の陰影 (濃淡) 内で隣接しているピクセルは、その領域の一部と見なされることを意味しています。

キーボード ショートカット

コマンド キーボード ショートカット
[選択] モードに切り替え S
[ズーム] モードに切り替え Z
[パン] モードに切り替え K
すべて選択 Ctrl + A
現在の選択範囲を削除します。 削除
現在の選択を取り消します。 エスケープ特殊文字
拡大表示 Ctrl + マウス ホイール前方移動

Ctrl + PageUp キー

プラス記号 (+)
ズーム アウト Ctrl + マウス ホイール後方移動

Ctrl + PageDown キー

マイナス記号 (-)
イメージを上方向へパンする マウス ホイール後方移動

PageDown
イメージを下方向へパンする マウス ホイール前方移動

PageUp
イメージを左方向へパンする Shift + マウス ホイール後方移動

マウス ホイール左

Shift + PageDown
イメージを右方向へパンする Shift + マウス ホイール前方移動

マウス ホイール右

Shift + PageUp
実際のサイズに大きさを変更 Ctrl + 0 (ゼロ)
イメージをウィンドウに合わせる Ctrl + G、Ctrl + F
イメージをウィンドウの幅に合わせる Ctrl + G、Ctrl + I
グリッドを切り替える Ctrl + G、Ctrl + G
イメージを現在の選択範囲にトリミングする Ctrl + G、Ctrl + C
次の (詳細な) MIPMAP レベルを表示する Ctrl + G、Ctrl + 6
前の (詳細ではない) MIPMAP レベルを表示する Ctrl + G、Ctrl + 7
赤色のチャネルを切り替える Ctrl + G、Ctrl + 1
緑色のチャネルを切り替える Ctrl + G、Ctrl + 2
青色のチャネルを切り替える Ctrl + G、Ctrl + 3
アルファ (透明度) チャネルを切り替える Ctrl + G、Ctrl + 4
アルファ チェッカーボード パターンを切り替える Ctrl + G、Ctrl + B
不規則選択ツールに切り替える L
杖選択ツールに切り替える M
鉛筆ツールに切り替える P
ブラシ ツールに切り替える B
塗りつぶしツールに切り替える F
消しゴム ツールに切り替える E
テキスト ツールに切り替える T
色選択 (スポイト) ツールに切り替える I
アクティブな選択範囲とそのコンテンツを移動する 方向キー
アクティブな選択範囲とそのコンテンツのサイズを変更する Ctrl + 方向キー
アクティブな選択範囲を移動するが、そのコンテンツは移動しない Shift + 方向キー
アクティブな選択範囲のサイズを変更するが、そのコンテンツのサイズは変更しない Shift + Ctrl + 方向キー
現在のレイヤーをコミットする リターン
ツールの幅を狭くする [
ツールの幅を広くする ]
タイトル 説明
ゲームとアプリ用の 3-D アセットの操作 テクスチャ、イメージ、3-D モデル、シェーダー効果などのグラフィックス アセットを処理するために Visual Studio で使用できるツールの概要について説明します。
モデル エディター Visual Studio モデル エディターを使用して 3-D モデルを操作する方法について説明します。
シェーダー デザイナー Visual Studio シェーダー デザイナーを使用してシェーダーを操作する方法について説明します。