方法: 基本テクスチャを作成する

このドキュメントでは、イメージ エディターを使用した基本的なテクスチャの作成方法を示します。

このドキュメントでは、以下のアクティビティについて説明します。

  • テクスチャのサイズの設定

  • 前景色と背景色の設定

  • アルファ チャネル (透過性) の使用

  • 塗りつぶしツールと楕円ツールの使用

  • ツール プロパティの設定

基本的なテクスチャの作成

イメージ エディターを使用すると、ゲームやアプリのイメージやテクスチャを作成したり変更したりできます。

次の手順は、"bullseye" ターゲットを表すテクスチャを作成する方法を示します。終了したら、テクスチャは次の絵のようになります。 テクスチャの透明度がわかりやすくなるために、イメージ エディターは、緑色の格子模様のパターンを使用して透明度を表示するように構成されています。

透明度が緑で表示された "Bullseye" ターゲット

開始する前に、[プロパティ] ウィンドウが表示されていることを確認します。 作業中に、[プロパティ] ウィンドウを使用して、イメージのサイズを設定し、ツールのプロパティを変更し、色を指定します。

"bullseye" ターゲットのテクスチャを作成するには

  1. 操作するテクスチャを作成します。 プロジェクトにテクスチャを追加する方法については、「イメージ エディター」の「作業の開始」を参照してください。

  2. イメージ サイズを 512x512 ピクセルに設定します。 [プロパティ] ウィンドウの [幅][高さ] の各プロパティの値を 512 に設定します。

  3. イメージ エディターのツール バーで、[塗りつぶし] ツールを選択します。 [プロパティ] ウィンドウに、イメージのプロパティとともに塗りつぶしツールのプロパティが表示されるようになります。

  4. 前景色を完全に透明な黒色に設定します。 [プロパティ] ウィンドウの、[色] プロパティ グループで、[前景] を選択します。 カラー ピッカーの横の [R][G][B][A] プロパティの値を 0 に設定します。

  5. イメージ エディターのツール バーで、[塗りつぶし] ツールを選択してから、Shift キーを押したままにして、イメージ内のポイントを選択します。 Shift キーを使用すると、塗りつぶしの色のアルファ値がイメージ内の色と置き換わります。Shift キーを使用しないと、アルファ値とイメージ内の色が混ぜ合わされて塗りつぶしの色になります。

    重要

    この手順と、前の手順で選択した色を組み合わせて、描画対象の "bullseye" ターゲットのテクスチャの基本イメージが準備されることになります。 イメージが透明な黒色で塗りつぶされると、ターゲットの罫線は黒色になりますが、ターゲットの周囲の成果物にエイリアシングは発生しません。

  6. イメージ エディターのツール バーで、[楕円] ツールを選択します。

  7. 前景色を完全に不透明な黒色に設定します。 [R][G][B] プロパティの値を 0 に設定し、[A] プロパティの値を 255 に設定します。

  8. 背景色を完全に不透明な白色に設定します。 [プロパティ] ウィンドウの、[色] プロパティ グループで、[背景] を選択します。 [R][G][B][A] プロパティの値を 255 に設定します。

  9. 楕円のアウトラインの幅を設定します。 [プロパティ] ウィンドウの、[外観] プロパティ グループで、[幅] プロパティの値を 8 に設定します。

  10. アンチエイリアシングが有効になっていることを確認します。 [プロパティ] ウィンドウの、[外観] プロパティ グループで、[アンチエイリアス] プロパティが設定されていることを確認します。

  11. 楕円ツールを使用して、ピクセル座標 (3, 3) からピクセル座標 (508, 508) に円を描画します。 円の描画を簡単にするには、描画する間 Shift キーを押したままにすることができます。

    注意

    現在のポインターの位置にあるピクセル座標は Visual Studio のステータス バーに表示されます。

  12. 背景色を変更します。 [R]44 に、[G]165 に、[B]211 に、[A]255 に設定します。

  13. ピクセル座標 (64, 64) からピクセル座標 (448, 448) に別の円を描画します。

  14. 背景色を変更して、完全に不透明な白色に戻します。 [R][G][B][A]255 に設定します。

  15. ピクセル座標 (128, 128) からピクセル座標 (384, 384) に別の円を描画します。

  16. 背景色を変更します。 [R]255 に、[G][B]64 に、[A]255 に設定します。

  17. ピクセル座標 (192, 192) からピクセル座標 (320, 320) に別の円を描画します。

    "bullseye" ターゲットのテクスチャが完成しました。 表示される最終的なイメージと透明度を次に示します。

    "bullseye" ターゲットのテクスチャ全体

    次の手順では、このテクスチャの MIP レベルを生成できます。 詳細については、「方法: MIP レベルを作成および変更する」を参照してください。

関連項目

イメージ エディター