イメージ エディター
このドキュメントに 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 のイメージをプロジェクトに追加し、要件の構成する方法について説明します。
イメージをプロジェクトに追加するには
[ソリューション エクスプローラー] では、イメージを追加するには [追加] 開き、[新しいアイテム] を選択します。プロジェクトのショートカット メニューが。
[新しい項目の追加] のダイアログ ボックスで、[インストール済み] の[ [グラフィックス] は、イメージの適切なファイル形式を選択します。要件に基づいてファイル形式を選択する方法の詳細については、次のセクションを参照してください。
イメージ ファイルの [名前] を、を作成する [場所] を指定します。
[追加] ボタンをクリックします。
.gif "Hh315744.collapse_all(ja-jp,VS.110).gif")
イメージ ファイル形式の選択
イメージを使用する予定したり、特定のファイル形式は、他より適切な場合もあります。たとえば、あるファイル形式には、計画した種類のイメージの内容に必要と同様の透過色または特定のファイル形式または適した圧縮を提供する可能性がある機能をサポートしていない場合。
次の情報は、ニーズを満たすイメージ ファイル形式を選択することができます。
ビットマップ イメージ (.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 ビット カラーとアルファ透明度を持つカラーマップ (カラー パレット) イメージとダイレクトカラー イメージの両方をサポートしています。色のディテールを大量に含んだ写真やイメージには適していませんが、スパンの長い同一カラーを持つイメージに対しては優れた圧縮比をもたらします。
イメージの構成
作成したイメージを使い始める前に、既定の設定を変更できます。たとえば、ディメンションや、使用する色のファイル形式を変更できます。イメージとそのプロパティを構成する方法の詳細については、イメージのプロパティ"を参照してください。
[!メモ]
作業を保存する前に、特定の色のファイル形式を使用する場合は、[色形式] のプロパティを設定してください。ファイル形式が圧縮をサポートする場合は、ファイルを初めて保存する、または [名前を付けて保存] を選択したときに圧縮の設定を調整できます。
イメージ エディターを使用する
ここでは、テクスチャ、イメージを変更するには、イメージ エディターを使用する方法について説明します。
イメージ エディターのツール バー
イメージ エディターのツール バーには、イメージの処理に役立つコマンドがあります。
イメージ エディターの状態に影響を与えるコマンドは高度なコマンドに [Image Editor Mode] のツール バーにあります。ツール バーは、イメージ エディターのデザイン サーフェイスの最上位の端に沿ってあります。描画ツールは、イメージ エディターのデザイン領域の左端の端に沿って [イメージ エディター] のツール バーにあります。
[イメージ エディターのモード] ツール バーを次に示します。
.png "イメージ エディターのモーダル ツール バー。")
次の表は、[イメージ エディターのモード] ツール バーに、左から右へ順に表示される項目を示します。
ツール バーの項目 |
説明 |
|---|---|
選択 |
イメージの四角形の領域を選択できます。領域の選択後、その領域を切り取り、コピー、移動、拡大縮小、回転、反転、または削除できます。アクティブな選択範囲がある場合、その選択された領域で機能するのは図形描画ツールのみです。 |
不規則選択 |
イメージの不規則な領域を選択できます。領域の選択後、その領域を切り取り、コピー、移動、拡大縮小、回転、反転、または削除できます。アクティブな選択範囲がある場合、その選択された領域で機能するのは図形描画ツールのみです。 |
杖選択 |
イメージの同系色の領域を選択できます。許容値 (同系色と見なされる範囲内での隣接する色の最大差の値) は、狭いまたは広い同系色範囲を含めるように構成できます。領域の選択後、その領域を切り取り、コピー、移動、拡大縮小、回転、反転、または削除できます。アクティブな選択範囲がある場合、その選択された領域で機能するのは図形描画ツールのみです。 |
パン |
ウィンドウ フレームに応じてイメージを移動できます。[パン] モードでは、イメージのポイントを選択してポイントを動かします。 Ctrl キー長押しすると、[パン] モードを一時的にアクティブにできます。 |
ズーム |
ウィンドウ フレームに応じてイメージを拡大または縮小表示できます。[ズーム] モードで、イメージのポイントを選択し、右または下へ移動して拡大表示するか、左または上へ移動して縮小表示します。 マウス ホイールを使用するか、正符号 (+) または負符号 (-) 押しながら Ctrl キーを長押しすると、拡大または縮小できます。 |
実際のサイズまで拡大 |
イメージ ピクセルと画面ピクセルの 1:1 の関係を使用してイメージを表示します。 |
ウィンドウのサイズに合わせて大きさを変更 |
ウィンドウ フレームにイメージ全体を表示します。 |
幅に合わせて大きさを変更 |
ウィンドウ フレームにイメージの全幅を表示します。 |
Grid |
ピクセルの境界を示すグリッドを有効または無効にします。イメージを拡大しないとグリッドが表示されないことがあります。 |
次の MIPMAP レベルを表示 |
MIP マップ チェーン内の次に大きい MIPMAP レベルをアクティブにします。デザイン サーフェイスにアクティブな MIPMAP レベルが表示されます。この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。 |
前の MIPMAP レベルを表示 |
MIP マップ チェーン内の次に小さい MIPMAP レベルをアクティブにします。デザイン サーフェイスにアクティブな MIPMAP レベルが表示されます。この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。 |
赤チャネル 緑チャネル 青チャネル アルファ チャネル |
特定のカラー チャネルを有効または無効にします。 .gif "メモ") メモ
カラー チャネルを体系的に有効または無効にすると、1 つまたは複数のカラー チャネルに関連する問題を特定できます。たとえば、誤ったアルファ透明度を特定できる場合があります。
|
背景 |
画像の透明な部分での背景表示を有効または無効にします。背景の表示方法は、次のオプションを選択して構成できます。
|
プロパティ |
[プロパティ] ウィンドウを表示または非表示にします。 |
詳細設定 |
追加のコマンドとオプションがあります。 フィルター 一般的なイメージ フィルターがいくつかあります。[白黒]、[ぼかし]、[輝度]、[暗]、[境界の検出]、[エンボス]、[色の反転]、[水面]、[セピア調]、および [シャープネス] の 10 種類です。 グラフィックス エンジン
ツール
ビュー
ヒント
[詳細設定] ボタンをクリックすると、最後のコマンドを再実行できます。
|
[イメージ エディター] ツール バーを次に示します。
.png "イメージ エディター ツール バー")
次の表では、[イメージ エディター] ツール バーに、上から下へ順に表示される項目について説明します。
ツール バーの項目 |
説明 |
|---|---|
鉛筆 |
アクティブな色選択を使用してエイリアス ストロークを描画します。[プロパティ] のウィンドウのストロークの太さと色を設定できます。 |
ブラシ |
アクティブな色選択を使用してアンチエイリアス ストロークを描画します。[プロパティ] のウィンドウのストロークの太さと色を設定できます。 |
エアブラシ |
アクティブな色選択を使用してイメージと調和させるアンチエイリアス ストロークを描画し、時間に応じてより浸透します。[プロパティ] のウィンドウのストロークの太さと色を設定できます。 |
スポイト |
アクティブな色選択を選択したピクセルの色に設定します。 |
塗りつぶし |
アクティブな色選択を使用してイメージの特定の領域を塗りつぶします。影響を受ける領域は、同色のピクセルによって関連付けられているピクセルと、色が同一のピクセルそのものと一緒に、塗りつぶしが適用されるピクセルとして定義されます。アクティブな選択範囲で塗りつぶしが適用されると、影響を受ける領域は、その選択範囲によって制限されます。 既定では、アクティブな色選択範囲は、アルファ要素に応じてイメージの影響を受ける領域と共に調和されます。アクティブな色選択範囲を使用して影響を受ける領域を上書きするには、塗りつぶしツールを使用しながら Shift キーを長押しします。 |
消しゴム |
イメージがアルファ チャネルをサポートする場合は、ピクセルに完全に透明な色を設定します。それ以外の場合は、アクティブな背景色に設定します。 |
[ライン]、[四角形]、[角丸四角形]、[楕円] |
イメージに図形を描画します。[プロパティ] のウィンドウのアウトラインの太さと色を設定できます。 幅と高さが等しいプリミティブを描画するには、描画しながら Shift キーを長押しします。 |
テキスト |
前景色の選択範囲を使用してテキストを描画します。背景色は、背景色の選択によって決定されます。透明な背景の場合、背景色の選択範囲のアルファ値を 0 にする必要があります。テキストの領域がアクティブな間、テキストが反エイリアスがストロークを描画し、— [プロパティ] のウィンドウの[テキスト [値]、[フォント]、[サイズ] となし [太字]、[斜体]、または [下線] を設定できますかどうかを設定します。テキストの内容と外観は、テキスト領域がアクティブにならなくなったときに最終処理されます。 |
回転 |
イメージを時計回りに 90 度回転させます。 |
Trim |
アクティブな選択範囲にイメージをトリミングします。 |
MIPMAP レベルの操作
DirectDraw Surface (.dds) などの一部のイメージ形式では、テクスチャ空間詳細レベル (LOD) の MIPMAP レベルがサポートされます。MIPMAP レベルの生成方法と操作方法の詳細については、「方法: MIP レベルを生成する」を参照してください。
透過性を使用
DirectDraw Surface (.dds) などの一部のイメージ形式では透明度がサポートされます。使用するツールに応じて、透明度を使用できる方法がいくつかあります。色の選択で透明度のレベルを指定するには、[プロパティ] ウィンドウで、色の選択の A (アルファ) 要素を選択します。さまざまな種類のツールで透明度の適用を制御する方法を次に示します。
ツール |
説明 |
|---|---|
鉛筆、ブラシ、エアブラシ、ライン、四角形、角丸四角形、楕円、テキスト |
アクティブな色の選択をイメージと調和させるには、[プロパティ] ウィンドウで [チャネル] プロパティ グループを展開し、[アルファ] チャネルの [描画] チェック ボックスをオンにして、通常どおり描画します。 アクティブな色の選択を使用して描画し、イメージのアルファ値をそのまま維持するには、[アルファ] チャネルの [描画] チェック ボックスをオフにします。 |
塗りつぶし |
アクティブな色の選択をイメージと調和させるには、塗りつぶす領域を選択します。 アルファ チャネルの値を含め、アクティブな色の選択を使用してイメージを上書きするには、Shift キーを長押しして塗りつぶす領域を選択します。 |
イメージのプロパティ
イメージのさまざまなプロパティを指定するには [プロパティ] のウィンドウを使用できます。たとえば、イメージのサイズ変更用に幅と高さのプロパティを設定できます。
次の表は、イメージのプロパティを示します。
プロパティ |
説明 |
|---|---|
幅 |
イメージの幅。 |
高さ |
イメージの高さ。 |
ピクセルあたりのビット数 |
各ピクセルを表すビット数。このプロパティの値は、イメージの色形式によって異なります。 |
レイヤーのブレンド |
選択範囲のレイヤーのアルファ値に基づいて、選択範囲のレイヤーをメインのイメージと調和させる場合は True。それ以外の場合は False。この項目はアルファをサポートするイメージに対してのみ使用できます。 |
色形式 |
イメージの色形式。イメージの形式に応じて、さまざまな色形式を指定できます。色形式はイメージに含まれるカラー チャネルの数と種類、さらに、さまざまなチャネルのサイズとエンコードも定義します。 |
MIPMAP レベル |
アクティブな MIPMAP レベル。この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。 |
MIPMAP レベル数 |
イメージ内の MIPMAP レベルの総数。この項目は MIPMAP レベルがあるテクスチャに対してのみ使用できます。 |
フレーム数 |
イメージ内のフレームの総数。この項目はテクスチャ配列をサポートするイメージに対してのみ使用できます。 |
Frame |
現在のフレーム。最初のフレームのみ表示できます。その他のフレームはイメージを保存するとすべて失われます。 |
深度スライス数 |
イメージ内の深度スライスの総数。この項目はボリューム テクスチャをサポートするイメージに対してのみ使用できます。 |
深度スライス |
現在の深度スライス。最初のスライスのみ表示できます。その他のスライスはイメージを保存するとすべて失われます。 |
イメージのサイズ変更
イメージのサイズを変更する方法は 2 つあります。いずれの場合も、イメージ エディターで双一次補間を使用してイメージの縦横比を調整します。
[プロパティ] ウィンドウの [幅] と [高さ] の各プロパティに新しい値を指定します。
イメージ全体を選択し、境界線のマーカーを使用してイメージの縦横比を調整します。
ツールの操作
選択された領域
イメージ エディターの選択範囲は、アクティブなイメージの領域を定義します。つまり、この領域はツールと変換の影響を受けます。アクティブな選択範囲がある場合、その選択された領域の外側にある領域は大部分のツールと変換の影響を受けません。アクティブな選択範囲がない場合は、イメージ全体がアクティブになります。
ほとんどのツール [鉛筆]、[ブラシ]、[Airbrush]、[塗りつぶし]、[消しゴム]、2 番目のプリミティブと変換 [回転]、[トリム]、[色の反転]、[左右反転] と [上下反転] は、アクティブな選択して、制約または定義されます。ただし、一部のツール ([スポイト] と [テキスト]) と変換のための [MIPS の生成] はアクティブな選択範囲の影響を受けません。これらのツールは、イメージ全体がアクティブな選択範囲になっているときはいつもどおりに機能します。
領域を選択する場合、Shift キーを長押しして均整の取れた (四角形の) 選択範囲を作成します。そうしないと選択範囲が制限されません。
サイズ変更オプション
領域の選択後、選択範囲のマーカーのサイズを変更すると、領域のサイズを変更したり画像のコンテンツを変更したりすることができます。選択した領域のサイズを変更しているときに、サイズを変更するように選択した領域の動作を変更するには、次の修飾子キーを使用できます (Ctrl キーを押しながらようにサイズ変更など)。
Ctrl
サイズを変更する前に選択された領域の内容をコピーします。これは、がサイズ変更されるとき、元のイメージを受けません。Shift
元のサイズに比例して、選択された領域のサイズを変更します。Alt
選択領域のサイズを変更します。これは、イメージのは変更されません。
有効な修飾子キーの組み合わせを次に示します。:
Ctrl |
Shift |
Alt |
説明 |
|---|---|---|---|
選択された領域のコンテンツのサイズを変更します。 |
|||
Shift |
選択された領域のコンテンツのサイズを均等に変更します。 |
||
Alt |
選択した領域のサイズを変更します。新しい選択領域が定義されます。 |
||
Shift |
Alt |
選択された領域のサイズを均等に変更します。新しい選択領域が定義されます。 |
|
Ctrl |
選択された領域のコンテンツをコピーしてサイズを変更します。 |
||
Ctrl |
Shift |
選択された領域のコンテンツをコピーしてサイズを均等に変更します。 |
ツールのプロパティ
ツール]をクリックすると、指定するイメージにどのように影響するかについての詳細を [プロパティ] のウィンドウを使用できます。たとえば、鉛筆ツールの太さやブラシ ツールの色を設定できます。
前景色と背景色の両方を設定できます。ユーザー定義の不透明度を指定するアルファ チャネルが両方でサポートされます。設定内容がすべてのツールに適用されます。マウスを使用する場合、マウスの左ボタンは前景色に、右ボタンは背景色に対応します。
次の表では、ツールのプロパティについて説明します。
ツール |
プロパティ |
|---|---|
鉛筆、ブラシ、エアブラシ、消しゴム |
|
テキスト |
|
2-D プリミティブ |
|
鉛筆、ブラシ、エアブラシ、2-D プリミティブ |
|
すべてのツールとオプション |
|
杖選択、塗りつぶし |
|
キーボード ショートカット
コマンド |
キーボード ショートカット |
|---|---|
[選択] モードに切り替えます。 |
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 + 方向キー |
現在のレイヤーをコミットする |
Return キー |
ツールの幅を狭くする |
[ |
ツールの幅を広くする |
] |
関連トピック
Title |
説明 |
|---|---|
テクスチャ、イメージ、3-D モデル、シェーダー効果などのグラフィックス アセットを処理するために Visual Studio で使用できるツールの概要について説明します。 |
|
Visual Studio モデル エディターを使用して 3-D モデルを操作する方法について説明します。 |
|
Visual Studio シェーダー デザイナーを使用してシェーダーを操作する方法について説明します。 |