方法: 基本テクスチャを作成するHow to: Create a Basic Texture

このドキュメントでは、イメージ エディターを使用した基本的なテクスチャの作成方法を示します。This document demonstrates how to use the Image Editor to create a basic texture.

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

  • テクスチャのサイズの設定Setting the size of the texture

  • 前景色と背景色の設定Setting the foreground and background colors

  • アルファ チャネル (透過性) の使用Using the alpha channel (transparency)

  • 塗りつぶしツールと楕円ツールの使用Using the Fill and Ellipse tools

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

基本的なテクスチャの作成Creating a basic texture

イメージ エディターを使用すると、ゲームやアプリのイメージやテクスチャを作成したり変更したりできます。You can use the Image Editor to create and modify images and textures for your game or app.

次の手順は、"bullseye" ターゲットを表すテクスチャを作成する方法を示します。終了したら、テクスチャは次の絵のようになります。The following steps show how to create a texture that represents a "bullseye" target.When you are finished, the texture should look like the following picture. テクスチャの透明度がわかりやすくなるために、イメージ エディターは、緑色の格子模様のパターンを使用して透明度を表示するように構成されています。To better demonstrate the transparency in the texture, the Image Editor has been configured to use a green, checkered pattern to display it.

透明度が緑で表示された "Bullseye" ターゲット"Bullseye" target with transparency shown in green

開始する前に、[プロパティ] ウィンドウが表示されていることを確認します。Before you begin, make sure that the Properties window is displayed. 作業中に、[プロパティ] ウィンドウを使用して、イメージのサイズを設定し、ツールのプロパティを変更し、色を指定します。You use the Properties window to set the image size, change tool properties, and specify colors while you work.

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

  1. 操作するテクスチャを作成します。Create a texture to work with. プロジェクトにテクスチャを追加する方法については、「イメージ エディター」の「作業の開始」を参照してください。For information about how to add a texture to your project, see the Getting Started section in Image Editor.

  2. イメージ サイズを 512x512 ピクセルに設定します。Set the image size to 512x512 pixels. [プロパティ] ウィンドウの [幅][高さ] の各プロパティの値を 512 に設定します。In the Properties window, set the values of the Width and Height properties to 512.

  3. イメージ エディターのツール バーで、[塗りつぶし] ツールを選択します。On the Image Editor toolbar, choose the Fill tool. [プロパティ] ウィンドウに、イメージのプロパティとともに塗りつぶしツールのプロパティが表示されるようになります。The Properties window now displays the properties of the Fill tool together with the image properties.

  4. 前景色を完全に透明な黒色に設定します。Set the foreground color to fully-transparent black. [プロパティ] ウィンドウの、[色] プロパティ グループで、[前景] を選択します。In the Properties window, in the Colors property group, select Foreground. カラー ピッカーの横の [R][G][B][A] プロパティの値を 0 に設定します。Set the values of the R, G, B, and A properties next to the color picker to 0.

  5. イメージ エディターのツール バーで、[塗りつぶし] ツールを選択してから、Shift キーを押したままにして、イメージ内のポイントを選択します。On the Image Editor toolbar, choose the Fill tool, and then press and hold the Shift key and choose any point in the image. Shift キーを使用すると、塗りつぶしの色のアルファ値がイメージ内の色と置き換わります。Shift キーを使用しないと、アルファ値とイメージ内の色が混ぜ合わされて塗りつぶしの色になります。Using the Shift key causes the alpha value of the fill color to replace the color in the image; otherwise, the alpha value is used to blend the fill color together with the color in the image.

    重要

    この手順と、前の手順で選択した色を組み合わせて、描画対象の "bullseye" ターゲットのテクスチャの基本イメージが準備されることになります。This step, together with the color selection in the previous step, ensures that the base image is prepared for the "bullseye" target texture that you will draw. イメージが透明な黒色で塗りつぶされると、ターゲットの罫線は黒色になりますが、ターゲットの周囲の成果物にエイリアシングは発生しません。When the image is filled with transparent black—and because the border of the target is black—there will be no aliasing artifacts around the target.

  6. イメージ エディターのツール バーで、[楕円] ツールを選択します。On the Image Editor toolbar, choose the Ellipse tool.

  7. 前景色を完全に不透明な黒色に設定します。Set the foreground color to fully-opaque black. [R][G][B] プロパティの値を 0 に設定し、[A] プロパティの値を 255 に設定します。Set the values of the R, G, and B properties to 0 and the value of the A property to 255.

  8. 背景色を完全に不透明な白色に設定します。Set the background color to fully-opaque white. [プロパティ] ウィンドウの、[色] プロパティ グループで、[背景] を選択します。In the Properties window, in the Colors property group, select Background. [R][G][B][A] プロパティの値を 255 に設定します。Set the values of the R, G, B, and A properties to 255.

  9. 楕円のアウトラインの幅を設定します。Set the width of the outline of the ellipse. [プロパティ] ウィンドウの、[外観] プロパティ グループで、[幅] プロパティの値を 8 に設定します。In the Properties window, in the Appearance property group, set the value of the Width property to 8.

  10. アンチエイリアシングが有効になっていることを確認します。Make sure that anti-aliasing is enabled. [プロパティ] ウィンドウの、[外観] プロパティ グループで、[アンチエイリアス] プロパティが設定されていることを確認します。In the Properties window, in the Appearance property group, make sure that the Anti-alias property is set.

  11. 楕円ツールを使用して、ピクセル座標 (3, 3) からピクセル座標 (508, 508) に円を描画します。Using the Ellipse tool, draw a circle from pixel coordinate (3, 3) to pixel coordinate (508, 508). 円の描画を簡単にするには、描画する間 Shift キーを押したままにすることができます。To draw the circle more easily, you can press and hold the Shift key while you draw.

    注意

    現在のポインターの位置にあるピクセル座標は Visual StudioVisual Studio のステータス バーに表示されます。The pixel coordinates of the current pointer location are displayed on the Visual StudioVisual Studio status bar.

  12. 背景色を変更します。Change the background color. [R]44 に、[G]165 に、[B]211 に、[A]255 に設定します。Set R to 44, G to 165, B to 211, and A to 255.

  13. ピクセル座標 (64, 64) からピクセル座標 (448, 448) に別の円を描画します。Draw another circle from pixel coordinate (64, 64) to pixel coordinate (448, 448).

  14. 背景色を変更して、完全に不透明な白色に戻します。Change the background color back to fully-opaque white. [R][G][B][A]255 に設定します。Set R, G, B, and A to 255.

  15. ピクセル座標 (128, 128) からピクセル座標 (384, 384) に別の円を描画します。Draw another circle from pixel coordinate (128, 128) to pixel coordinate (384, 384).

  16. 背景色を変更します。Change the background color. [R]255 に、[G][B]64 に、[A]255 に設定します。Set R to 255, G and B to 64, and A to 255.

  17. ピクセル座標 (192, 192) からピクセル座標 (320, 320) に別の円を描画します。Draw another circle from pixel coordinate (192, 192) to pixel coordinate (320, 320).

    "bullseye" ターゲットのテクスチャが完成しました。The "bullseye" target texture is complete. 表示される最終的なイメージと透明度を次に示します。Here's the final image, shown with transparency.

    "bullseye" ターゲットのテクスチャ全体The complete "bullseye" target texture

    次の手順では、このテクスチャの MIP レベルを生成できます。As a next step, you can generate MIP levels for this texture. 詳細については、「方法: MIP レベルを作成および変更する」を参照してください。For information, see How to: Create and Modify MIP Levels.

関連項目See Also

イメージ エディターImage Editor