XNA爆発チュートリアル その３ テクスチャを貼る

爆発チュートリアルその２のつづきです。

前回は爆発と言いつつ白いタイルのようなものが3つ表示されるだけでした。
今度はこれに炎のテクスチャを貼ってみましょう。

これから貼り付けるテクスチャはXna Creators Clubの
Particle 3Dから拝借してきたexplosion.pngです。

(explosion.png : Particle 3D Sampleより)

これを白い四角に貼り付ければ少しはましになるのではないでしょうか。

この"explosion.png"をプロジェクトに追加して、
クラスファイルとごっちゃになるのも嫌なので
Contentフォルダを作ってその中に入れましょう。
つまりアセット名は"Content/explosion"になるわけです。

ではこれをContentManagerから読み込み、
BasicEffect.Textureプロパティにセットして、
BasicEffect.TextureEnabledプロパティをtrueにします。
これでうまくいくはず・・・！

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;


public class ExplosionTest : Microsoft.Xna.Framework.Game
{
    private GraphicsDeviceManager graphics;

    private BasicEffect effect;
    private VertexPositionColor[] vertices = {
        new VertexPositionColor(new Vector3(0, 0.1f, 0), Color.White),
        new VertexPositionColor(new Vector3(0.1f, 0, 0), Color.White),
        new VertexPositionColor(new Vector3(-0.1f, 0, 0), Color.White)
    };

    private ContentManager content;


    public ExplosionTest()
    {
        graphics = new GraphicsDeviceManager(this);
        content = new ContentManager(Services);
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = new BasicEffect(graphics.GraphicsDevice, null);
            graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                graphics.GraphicsDevice,
                VertexPositionColor.VertexElements
                );

            effect.Texture = content.Load<Texture2D>("Content/explosion");
            effect.TextureEnabled = true;
        }
    }

    protected override void UnloadGraphicsContent(bool unloadAllContent)
    {
        if (unloadAllContent) { content.Unload(); }
    }

    protected override void Draw(GameTime gameTime)
    {
        graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

        graphics.GraphicsDevice.RenderState.PointSize = 50;

        effect.Begin();

        foreach (EffectPass pass in effect.CurrentTechnique.Passes)
        {
            pass.Begin();

            graphics.GraphicsDevice.DrawUserPrimitives<VertexPositionColor>(
                PrimitiveType.PointList,
                vertices,
                0,
                vertices.Length
                );

            pass.End();
        }

        effect.End();
    }
}

はい失敗です。（イライラ）

四角の色が白でなくなってはいますが、
ここでやりたかったのはテクスチャを貼り付けることです。
四角の色を変えることではありません。

どうしてこういう失敗をしてしまったのかというと、
レンダーステートのPointSpriteEnabledプロパティをtrueにしていなかったからです。
このプロパティをtrueにすることによって初めて、
ポイントの上にテクスチャが表示されるようになります。

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;


public class ExplosionTest : Microsoft.Xna.Framework.Game
{
    private GraphicsDeviceManager graphics;

    private BasicEffect effect;
    private VertexPositionColor[] vertices = {
        new VertexPositionColor(new Vector3(0, 0.1f, 0), Color.White),
        new VertexPositionColor(new Vector3(0.1f, 0, 0), Color.White),
        new VertexPositionColor(new Vector3(-0.1f, 0, 0), Color.White)
    };

    private ContentManager content;


    public ExplosionTest()
    {
        graphics = new GraphicsDeviceManager(this);
        content = new ContentManager(Services);
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = new BasicEffect(graphics.GraphicsDevice, null);
            graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                graphics.GraphicsDevice,
                VertexPositionColor.VertexElements
                );

            effect.Texture = content.Load<Texture2D>("Content/explosion");
            effect.TextureEnabled = true;
        }
    }

    protected override void UnloadGraphicsContent(bool unloadAllContent)
    {
        if (unloadAllContent) { content.Unload(); }
    }

    protected override void Draw(GameTime gameTime)
    {
        graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

        graphics.GraphicsDevice.RenderState.PointSize = 50;
        graphics.GraphicsDevice.RenderState.PointSpriteEnable = true;

        effect.Begin();

        foreach (EffectPass pass in effect.CurrentTechnique.Passes)
        {
            pass.Begin();

            graphics.GraphicsDevice.DrawUserPrimitives<VertexPositionColor>(
                PrimitiveType.PointList,
                vertices,
                0,
                vertices.Length
                );

            pass.End();
        }

        effect.End();
    }
}

（クリックで写真を拡大）

うまくいきました。

たしかに"explosion.png"が貼られています。
四角形の中に爆炎っぽいものが表示されています。
周りが黒くて、とても爆発には見えないという嫌な事実は無視です。
これによってほんのちょっと、完成に近づいたといえるのではないでしょうか！

白いタイルがそれぞれ爆発の頂点のように動いたとしても
ゲームプレイヤーからは爆発には見えずに、「？？？？」となるはずです。
だから、これはとても必要なことだったのです。

これからさらに透過処理して本物の爆炎っぽく見せたり、
それぞれの四角を時間の経過とともに「ぶわっ」と動かしたり、
四角の数自体をふやしたりすることによって、
本物の爆発に近づいていくのです。
（というか、そうなる予定です。）