Memeplexes

[PR]

2025年01月22日

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

XNA爆発チュートリアル　その８．５のつづきです。

前回は爆発を表すオブジェクトを作りました。
爆発の描画される寿命を管理するオブジェクトです。
しかしこれには足りないものがあるように思えます。

たとえば、爆発の位置です。
現在の作っているゲームコンポーネントの機能は、爆発を描画することですが、
これは位置を制御できません。
常に爆発は原点O(0, 0, 0)のまわりに描画されます。
これでは使い物になりません

現実には、ゲーム中のアイテムが壊れたときに爆発を表示しなければならないため、
爆発の位置をコントロールすることが出来なくてはいけないでしょう。
つまり、爆発を表す構造体Explosionには爆発の中心を表すフィールドが必要です。

そしてExplosionオブジェクトはクライアントコードであるGame側から
セットするようにすべきでしょう。
ExplosionRendererゲームコンポーネントクラスの責任ではありません。

使い方はこんな感じでしょう：

ExplosionTest.cs

using Microsoft.Xna.Framework;


public class ExplosionTest : Game
{
    private GraphicsDeviceManager graphics;

    private ExplosionRenderer explosion;
    private float life;

    public ExplosionTest()
    {
        graphics = new GraphicsDeviceManager(this);
        explosion = new ExplosionRenderer(this);
        Matrix view = Matrix.CreateLookAt(
            new Vector3(0, 0, 4),
            new Vector3(),
            new Vector3(0, 1, 0)
            );
        Matrix projection = Matrix.CreatePerspectiveFieldOfView(
            MathHelper.ToRadians(45),
            (float)Window.ClientBounds.Width/Window.ClientBounds.Height,
            0.1f, 1000
            );
        explosion.SetCamera(view, projection);
        this.Components.Add(explosion);
    }


    protected override void Update(GameTime gameTime)
    {
        life -= (float)gameTime.ElapsedGameTime.TotalSeconds;

        if (life < 0)
        {
            life = 2;
            explosion.SetExplosion(new Explosion(new Vector3(), life));
        }

        base.Update(gameTime);
    }

}

爆発のセットはゲームクラスで行っています。
爆発を描画するゲームコンポーネントのExplosionRendererに
SetExplosionというメソッドを追加し、それを使って爆発オブジェクトをセットします。

爆発を表す構造体Explosionのコンストラクタも変わりました。
一番最初の引数に爆発の中心が追加されています。
これで爆発する場所を自由に決められるようになりました。（実装はまだですけどね）

とりあえずExplosion構造体のほうをこの変更に合わせましょう

Explosion.cs

using Microsoft.Xna.Framework;

public struct Explosion
{
    private float life;
    private float startLife;

    public float Life { get { return life; } }
    public float StartLife { get { return startLife; } }
    public float Age { get { return startLife - life; } }
    public Vector3 Center;

    public Explosion(Vector3 center, float life)
    {
        this.Center = center;
        this.life = life;
        this.startLife = life;
    }

    public void Update(GameTime gameTime)
    {
        life -= (float)gameTime.ElapsedGameTime.TotalSeconds;
    }
}

つまり、爆発中心を表すCenterフィールドを追加しただけです。
（プロパティにしたほうがよかったかな？いやでもむやみに複雑化しても困ります）

次はこれを使うゲームコンポーネント、ExplosionRendererの変更です。
まずSetExplosionメソッドを追加して、さらにセットされた爆発の中心を読み込んでエフェクトにセットしなきゃいけません。
（ややこしいですね。もしかするともうちょっと作業を細分化したほうがよかったかもしれないと反省しつつ、続行です）

ExplosionRenderer.cs

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


public class ExplosionRenderer : Microsoft.Xna.Framework.DrawableGameComponent
{
    private Effect effect;
    private VertexDeclaration vertexDeclaration;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();

    private Matrix view;
    private Matrix projection;

    private Explosion explosion;


    public ExplosionRenderer(Game game)
        : base(game)
    {
        content = new ContentManager(game.Services);
    }


    public override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            vertexDeclaration = new VertexDeclaration(
                GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }


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

    public override void Update(GameTime gameTime)
    {
        explosion.Update(gameTime);
    }

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

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

        GraphicsDevice.RenderState.AlphaBlendEnable = true;
        GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        GraphicsDevice.RenderState.DestinationBlend = Blend.One;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = false;

        GraphicsDevice.VertexDeclaration = vertexDeclaration;

        effect.Parameters["View"].SetValue(view);
        effect.Parameters["Projection"].SetValue(projection);

        drawExplosion(explosion);

        GraphicsDevice.RenderState.AlphaBlendEnable = false;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = true;
    }

    private void drawExplosion(Explosion explosion)
    {
        effect.Parameters["Center"].SetValue(explosion.Center);
        effect.Parameters["Age"].SetValue(explosion.Age);
        effect.Parameters["StartLife"].SetValue(explosion.StartLife);

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();
    }

    public void SetCamera(Matrix view, Matrix projection)
    {
        this.view = view;
        this.projection = projection;
    }

    public void SetExplosion(Explosion explosion)
    {
        this.explosion = explosion;
    }
}

最後に、HLSLで書くエフェクトファイルにグローバル変数Centerを
追加しなくてはいけません。

ExplosionShader.fx

float4x4 View;
float4x4 Projection;

float3 Center;
float Age;
float StartLife;

texture ExplosionTexture;

sampler explosionSampler = sampler_state
{
	Texture = <ExplosionTexture>;
};

struct ExplosionVertexShaderOutput
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

float4 ComputeColor(float normalizedAge)
{
	float4 color = 1;
	color.a *= normalizedAge * (1 - normalizedAge) * (1 - normalizedAge) * 6.7;
	return color;
}

ExplosionVertexShaderOutput ExplosionVertexShader(float4 velocity:COLOR)
{
	ExplosionVertexShaderOutput output;
	float4 worldPosition = float4(velocity.xyz * Age + Center, 1);
	output.Position = mul(worldPosition, mul(View, Projection));
	output.Color = ComputeColor(Age / StartLife);
	return output;
}

float4 ExplosionPixelShader(
	float2 textureCoordinate:TEXCOORD,
	float4 color:COLOR
	):COLOR
{
	return tex2D(explosionSampler, textureCoordinate) * color;
}

technique ExplosionShaderTechnique
{
	pass P0
	{
		VertexShader = compile vs_2_0 ExplosionVertexShader();
		PixelShader = compile ps_2_0 ExplosionPixelShader();
	}
}

これでひとまずOKです。
ウィンドウに描画される爆発は以前と変わりませんが、
ソースコードに柔軟性が生まれました。
爆発の位置を色々と変えることが出来ます。
ためしに、右に1ずらしてみましょう。

explosion.SetExplosion(new Explosion(new Vector3(1, 0, 0), life));

(ずらす前。爆発の中心は(0, 0, 0))

（ずらした後。爆発の中心は(1, 0, 0)）

うまくずれています。
これで好きなところに爆発を描画することができるようになりました。

[0回]

XNA爆発チュートリアル　その８．５　爆発オブジェクトの導入

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

前回では3Dの爆発をフェードアウトさせたものの、
時間がたつとまた爆炎が描画されるようになってしまいます。
これではいつまでたっても爆発が画面から消えません。

この問題を解決するために、C#のコードのほうを
少々いじります。
爆発を表すクラス（まあ正確には構造体ですが）を作り、それに寿命を管理させるのです。
寿命が尽きたら新しい、別のインスタンスを使えばいいわけです。
そうすれば寿命が尽きた爆発は決して描画されません。

この構造体を利用すれば、ついでにHLSL側の全体の寿命を表す
マジックナンバー”２”も消してしまえるでしょう。
一石二鳥というわけです。

さらにせっかくですからHLSL側とC#側の変数名のミスマッチも解消します。

ExplosionRenderer.cs

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


public class ExplosionRenderer : Microsoft.Xna.Framework.DrawableGameComponent
{
    private Effect effect;
    private VertexDeclaration vertexDeclaration;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();

    private Matrix view;
    private Matrix projection;

    private Explosion explosion;


    public ExplosionRenderer(Game game)
        : base(game)
    {
        content = new ContentManager(game.Services);
    }


    public override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            vertexDeclaration = new VertexDeclaration(
                GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }


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

    public override void Update(GameTime gameTime)
    {
        explosion.Update(gameTime);

        if (explosion.Life < 0)
        {
            explosion = new Explosion(2);
        }
    }

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

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

        GraphicsDevice.RenderState.AlphaBlendEnable = true;
        GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        GraphicsDevice.RenderState.DestinationBlend = Blend.One;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = false;

        GraphicsDevice.VertexDeclaration = vertexDeclaration;

        effect.Parameters["View"].SetValue(view);
        effect.Parameters["Projection"].SetValue(projection);

        drawExplosion(explosion);

        GraphicsDevice.RenderState.AlphaBlendEnable = false;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = true;
    }

    private void drawExplosion(Explosion explosion)
    {
        effect.Parameters["Age"].SetValue(explosion.Age);
        effect.Parameters["StartLife"].SetValue(explosion.StartLife);

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();
    }

    public void SetCamera(Matrix view, Matrix projection)
    {
        this.view = view;
        this.projection = projection;
    }
}

爆発の寿命が尽きたら直ちにライフ２秒にして初期化するようにしました。
実行したら２秒ごとに爆発していく様子が見られるでしょう。

次は爆発を表す構造体です。
クラスではなくて構造体なのはこの方がたぶん
パフォーマンス上有利なのではないかという理由です。

構造体で作った変数はヒープではなくスタック上におかれるため、
ガベージコレクションが発動しないので、
パフォーマンスのボトルネックにはならないはずです。（たぶん）

ふつうパフォーマンスを考慮したコードは、
可読性が低下するため避けるべきなのですが、
classをstructにするくらいは問題ないでしょう。

Explosion.cs

using Microsoft.Xna.Framework;

struct Explosion
{
    private float life;
    private float startLife;

    public float Life { get { return life; } }
    public float StartLife { get { return startLife; } }
    public float Age { get { return startLife - life; } }

    public Explosion(float life)
    {
        this.life = life;
        this.startLife = life;
    }

    public void Update(GameTime gameTime)
    {
        life -= (float)gameTime.ElapsedGameTime.TotalSeconds;
    }
}

お次はHLSLで書いたエフェクトファイルです。
前回のマジックナンバー”２”をグローバル変数StartLifeで置き換え、
C#側から設定するようにしました。
また、変数名をC#側と同じになるようにそろえました。（Time → Age）

ExplosionShader.fx

float4x4 View;
float4x4 Projection;

float Age;
float StartLife;

texture ExplosionTexture;

sampler explosionSampler = sampler_state
{
	Texture = <ExplosionTexture>;
};

struct ExplosionVertexShaderOutput
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

float4 ComputeColor(float normalizedAge)
{
	float4 color = 1;
	color.a *= normalizedAge * (1 - normalizedAge) * (1 - normalizedAge) * 6.7;
	return color;
}

ExplosionVertexShaderOutput ExplosionVertexShader(float4 velocity:COLOR)
{
	ExplosionVertexShaderOutput output;
	float4 worldPosition = float4(velocity.xyz * Age, 1);
	output.Position = mul(worldPosition, mul(View, Projection));
	output.Color = ComputeColor(Age / StartLife);
	return output;
}

float4 ExplosionPixelShader(
	float2 textureCoordinate:TEXCOORD,
	float4 color:COLOR
	):COLOR
{
	return tex2D(explosionSampler, textureCoordinate) * color;
}

technique ExplosionShaderTechnique
{
	pass P0
	{
		VertexShader = compile vs_2_0 ExplosionVertexShader();
		PixelShader = compile ps_2_0 ExplosionPixelShader();
	}
}

変更は以上です。
これでプログラムを実行すると２秒ごとに爆発が
「ぶわっ」っと広がっていくのがわかると思います。

フェードアウトした爆発は、もはや決して再び描画されることはありません。
さらに一歩前進しましたね。

[0回]

XNA爆発チュートリアル　その８　フェードアウト

XNA爆発チュートリアル　その７．５のつづきです。

最後に新しい機能を付け加えた「その７」では
頂点を増やしてより爆発っぽくなりました。
しかし、それぞれの爆炎は時間がたっても
消えたりはせず、不自然でした。

ここではさらに本物に近づけるため、炎をフェードアウトさせます。
頂点のアルファ・チャンネルを時間に従ってうまく制御すれば、
それらしく炎が消えてくれるはずです。
頂点シェーダ内でその頂点の色（アルファ・チャンネルを操作してある）を決め、
ピクセルシェーダでそいつを乗算するのです。

では具体的にどのようにアルファ・チャンネルを決めればいいのでしょうか？
Xna Creators Clubのサンプルでは、次のようにして決めていました。

まず、各頂点に対応する、ノーマライズされた年齢を求めて、
これをもとにαを決めます。

ノーマライズされた年齢　＝　現実の年齢　/　現実の寿命

どういうことかというと、この年齢は、0~1の範囲内になっており、
たとえば現実に炎の寿命が２秒、現在の歳が１秒だとすると、０．５です。（1 / 2）
現実の寿命が4秒、現実の歳が１秒だとすると０．２５です（1 / 4）。

この、ノーマライズされた年齢を元にαを決めます。
Particle 3Dサンプル（Xna Creators Club）のシェーダー、ParticleEffect.fxでは
次のような三次関数でαを求めています：

color.a *= normalizedAge * (1 - normalizedAge) * (1 - normalizedAge) * 6.7;

この式を使って獏炎のα・チャンネルを計算するとうまい具合に
爆発が消えていきます。
（一番最後にマジックナンバー6.7がかけられているのは、ある一定の時間がたつまでは炎がはっきり(α = 1で)映し出されるようにするためです。）
ただし！これはなにぶん三次関数なので、寿命が切れた後に呼び出すと、
また爆発が見えるようになります。
たとえば２秒で消えることを予定している爆発を、
２秒後も３秒後も描画し続けていると、
いったん消えたはずの爆発がまた画面に現れるのです。
このことに気をつけましょう。
（いやでも目に入ってきますが）

この変更はエフェクトファイルだけです。

float4x4 View;
float4x4 Projection;

float Time;

texture ExplosionTexture;

sampler explosionSampler = sampler_state
{
	Texture = <ExplosionTexture>;
};

struct ExplosionVertexShaderOutput
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

float4 ComputeColor(float normalizedAge)
{
	float4 color = 1;
	color.a *= normalizedAge * (1 - normalizedAge) * (1 - normalizedAge) * 6.7;
	return color;
}

ExplosionVertexShaderOutput ExplosionVertexShader(float4 velocity:COLOR)
{
	ExplosionVertexShaderOutput output;
	float4 worldPosition = float4(velocity.xyz * Time, 1);
	output.Position = mul(worldPosition, mul(View, Projection));
	output.Color = ComputeColor(Time / 2);
	return output;
}

float4 ExplosionPixelShader(
	float2 textureCoordinate:TEXCOORD,
	float4 color:COLOR
	):COLOR
{
	return tex2D(explosionSampler, textureCoordinate) * color;
}

technique ExplosionShaderTechnique
{
	pass P0
	{
		VertexShader = compile vs_2_0 ExplosionVertexShader();
		PixelShader = compile ps_2_0 ExplosionPixelShader();
	}
}

（爆発はほとんどフェードアウトしてしまっていて、かすかにしか見えません）

これで実行すると、２秒でフェードアウトします。
（爆発の寿命を2秒に設定しているので、ノーマライズされた寿命はTime / 2です。）

しかしそのまま実行し続けていると、すぐにまた炎があらわれます。
これはα・チャンネルを計算している関数の性質によるもので、
しかたがありません。
爆発に寿命が来たら描画しないような仕掛けが必要でしょう。

[0回]

XNA爆発チュートリアル　その７．５　ゲームコンポーネントにする

XNA爆発チュートリアルその７のつづきです。
（今回は機能を付け加えるのではなく、
リファクタリングが目的なので、
「その７．５」です。）

どうも紛糾してきたので爆発の描画をするクラスを作り、
それをGameから利用することにします。

その爆発を描画するクラスは、ゲームコンポーネント
ということにします。
Gameからやることは、そのゲームコンポーネントを
自分に登録することだけです。
ですからExplosionTest.csはうんと短くなって、
こうなります：

ExplosionTest.cs

using Microsoft.Xna.Framework;


public class ExplosionTest : Game
{
    private GraphicsDeviceManager graphics;

    public ExplosionTest()
    {
        graphics = new GraphicsDeviceManager(this);
        this.Components.Add(new ExplosionRenderer(this));
    }
}

ExplosionRendererクラスは、DrawableGameComponentを
継承しており、今までExplosionTestクラスでやっていたこと、
つまり爆発の描画を行います。

ExplosionRenderer.cs

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


public class ExplosionRenderer : Microsoft.Xna.Framework.DrawableGameComponent
{
    private Effect effect;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();


    public ExplosionRenderer(Game game)
        : base(game)
    {
        content = new ContentManager(game.Services);
    }


    public override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            effect.Parameters["View"].SetValue(
                Matrix.CreateLookAt(
                    new Vector3(0, 0, 5), new Vector3(), new Vector3(0, 1, 0)
                    )
                );
            effect.Parameters["Projection"].SetValue(
                Matrix.CreatePerspectiveFieldOfView(
                    MathHelper.ToRadians(45),
                    aspectRatio,
                    0.1f, 1000
                    )
                );


            GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }

    float aspectRatio
    {
        get
        {
            return (float)GraphicsDevice.Viewport.Width 
                / GraphicsDevice.Viewport.Height;
        }
    }

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

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

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

        GraphicsDevice.RenderState.AlphaBlendEnable = true;
        GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        GraphicsDevice.RenderState.DestinationBlend = Blend.One;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = false;

        effect.Parameters["Time"].SetValue(
            (float)gameTime.TotalGameTime.TotalSeconds
            );

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();
    }
}

これでプログラムを実行しても結果は変わりません。
クラスの分離はうまく行っているようです。

さて、この時点でちょっと気持ち悪いところがあります。
それは、カメラの位置とレンズを表すViewとProjectionが、
ゲームコンポーネントの内部で決められていることです。
これではゲーム中にカメラを動かしたりが出来ません。
自分が動けないゲームなんておもしろくないでしょう。

そこで、カメラを自由に動かせるように、
カメラを表すViewとProjectionをGame側から
制御できるようにします。
こんな感じでしょうか：

ExplosionTest.cs

using Microsoft.Xna.Framework;


public class ExplosionTest : Game
{
    private GraphicsDeviceManager graphics;

    public ExplosionTest()
    {
        graphics = new GraphicsDeviceManager(this);
        ExplosionRenderer explosion = new ExplosionRenderer(this);
        Matrix view = Matrix.CreateLookAt(
            new Vector3(0, 0, 5),
            new Vector3(),
            new Vector3(0, 1, 0)
            );
        Matrix projection = Matrix.CreatePerspectiveFieldOfView(
            MathHelper.ToRadians(45),
            (float)Window.ClientBounds.Width/Window.ClientBounds.Height,
            0.1f, 1000
            );
        explosion.SetCamera(view, projection);
        this.Components.Add(explosion);
    }
}

ゲームコンポーネント側はこうです：

ExplosionRenderer.cs

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


public class ExplosionRenderer : Microsoft.Xna.Framework.DrawableGameComponent
{
    private Effect effect;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();

    private Matrix view;
    private Matrix projection;


    public ExplosionRenderer(Game game)
        : base(game)
    {
        content = new ContentManager(game.Services);
    }


    public override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }


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

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

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

        GraphicsDevice.RenderState.AlphaBlendEnable = true;
        GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        GraphicsDevice.RenderState.DestinationBlend = Blend.One;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = false;

        effect.Parameters["Time"].SetValue(
            (float)gameTime.TotalGameTime.TotalSeconds
            );
        effect.Parameters["View"].SetValue(view);
        effect.Parameters["Projection"].SetValue(projection);

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();
    }

    public void SetCamera(Matrix view, Matrix projection)
    {
        this.view = view;
        this.projection = projection;
    }
}

SetCameraメソッドで直接エフェクトに値をセットできていないのは
エフェクトがまだ初期化できていない（まだnull）可能性があるからです。
変数を間接層にすることで、いつでもこのメソッドを
呼ぶことが出来るようになります。

これはなんだか意味のない間接層で、必要のない複雑性をプログラムに
組み込んでしまったような気もしますが、この程度ならまだ許容範囲ということにしておきましょう。
SetCameraメソッドを呼ぶタイミングを縛るというのもなんですしね。

最後に、ゲームコンポーネントとして再利用できるように、
別のシチュエーションで使われるときのことを考えて見ましょう。

現時点では再利用を難しくする二つの欠点があります。

１つめは、VertexDeclarationを一度だけ、LoadGraphicsContent内で
セットしていることです。
この方法はシンプルですが、再利用しようとすると問題が生まれます。
別のVertexDeclarationを使うモデルを描画した場合、上書きされてしまい
このコンポーネントの描画はうまくいかないでしょう。。

ですから、VertexDeclarationのインスタンスをDrawメソッド内で毎回セットする
必要があります。

２つ目の問題も似たようなタイプの問題で、Drawメソッドにからんでいます。
今のところDrawメソッド内でレンダーステートを色々と変更していますが、
このままだと、別のモデルを描画したときにその設定が受け継がれてしまい、
メチャクチャに描画されるでしょう。
どうしても元に戻さない設定はAlphaBlendEnableとDepthBufferWriteEnableです。

コードを書き換えて、この２つの問題を解決しましょう。

ExplosionRenderer.cs

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


public class ExplosionRenderer : Microsoft.Xna.Framework.DrawableGameComponent
{
    private Effect effect;
    private VertexDeclaration vertexDeclaration;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();

    private Matrix view;
    private Matrix projection;


    public ExplosionRenderer(Game game)
        : base(game)
    {
        content = new ContentManager(game.Services);
    }


    public override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            vertexDeclaration = new VertexDeclaration(
                GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }


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

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

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

        GraphicsDevice.RenderState.AlphaBlendEnable = true;
        GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        GraphicsDevice.RenderState.DestinationBlend = Blend.One;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = false;

        GraphicsDevice.VertexDeclaration = vertexDeclaration;

        effect.Parameters["Time"].SetValue(
            (float)gameTime.TotalGameTime.TotalSeconds
            );
        effect.Parameters["View"].SetValue(view);
        effect.Parameters["Projection"].SetValue(projection);

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();

        GraphicsDevice.RenderState.AlphaBlendEnable = false;
        GraphicsDevice.RenderState.DepthBufferWriteEnable = true;
    }

    public void SetCamera(Matrix view, Matrix projection)
    {
        this.view = view;
        this.projection = projection;
    }
}

これでこのゲームコンポーネントを再利用できるようになったはずです。

[0回]

XNA爆発チュートリアル　その７　頂点を増やしてみる

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

前回は爆炎を初めて動かしてみました。

今回はこれをもっと派手にしてみましょう。
頂点（爆炎）を増やしてみます。
前回までは爆炎は3つだけでしたが、ここではその１０倍の30個にしてみます。
（なんで30個かというと、Xna Creators ClubのParticle 3Dサンプルの爆発で使われていた数（Particle3DSample.Projectile.numExplosionParticles）がちょうど30だったからです。）

そして、各頂点の速度をあらわすVelocityメンバはランダムに初期化することにします。

ひとまず、この変更はC#側だけですね。

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


public class ExplosionTest : Game
{
    private GraphicsDeviceManager graphics;

    private Effect effect;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();


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

    protected override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                graphics.GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }

    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;

        graphics.GraphicsDevice.RenderState.AlphaBlendEnable = true;
        graphics.GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        graphics.GraphicsDevice.RenderState.DestinationBlend = Blend.One;

        effect.Parameters["Time"].SetValue(
            (float)gameTime.TotalGameTime.TotalSeconds
            );

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();
    }
}

にぎやかになってきましたね。
なんといっても、爆炎の数を30に増やしたのですから当然です！

かく爆炎の速度はランダムに、System.Randomクラスで決めています。
速度成分X, Y, Zそれぞれが、-1 / 10 から1 / 10 の範囲内になるようになっています。

しかしここには明らかに２つ、問題があります。

１つめは、「爆炎の周りに透明な四角形が見える」ということです。
これは、それぞれの深度テストの問題です。
すぐに問題は解決するでしょう。
各頂点を描画するときに深度バッファに書き込まないようにすればいいのです。

２つめは、「爆炎の数が明らかに、（総頂点数の）３０より少ない」ということです。
せいぜい10個かそのくらいです。
あとの10~20個はどこへいったのでしょうか？

それは、描画されない領域です。
つまり、描画されるZの範囲は0～1までなので、
そこからはみ出てしまった約20個の爆炎は描画されないということです。
BasicEffectでこの問題を解決していたのはProjectionプロパティで、
各頂点のZの値を、うまく0~1の領域に押し込んでいたのです。
解決するにはエフェクトファイルでBasicEffectのProjectionに
相当するものを作ってやる必要があるでしょう。

この問題を解決することにしましょう。
まずは１つめの問題、透明な四角を消すことからはじめます。
これは透明な四角の領域の深度バッファが更新されて、
それ以後そこに新たな爆炎が描画されなくなってしまうことが原因なので、
爆発を描画する間は深度バッファが書き込まれないようにします。
RenderState.DepthBufferWriteEnableをfalseにするのです。
(ただ、これには副作用もあります。この方法で爆発を描画した後、より遠いところに何か別のものを描画した場合、上書きされてしまい、前後関係がおかしくなります。このテクニックによる描画はなるべく最後に回したほうが良いでしょう。)

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


public class ExplosionTest : Game
{
    private GraphicsDeviceManager graphics;

    private Effect effect;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();


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

    protected override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                graphics.GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }

    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;

        graphics.GraphicsDevice.RenderState.AlphaBlendEnable = true;
        graphics.GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        graphics.GraphicsDevice.RenderState.DestinationBlend = Blend.One;
        graphics.GraphicsDevice.RenderState.DepthBufferWriteEnable = false;

        effect.Parameters["Time"].SetValue(
            (float)gameTime.TotalGameTime.TotalSeconds
            );

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();
    }
}

透明な四角形が消えました。

次は爆炎が消えてしまう問題を解決します。
この問題を解決するには、Projectionマトリックスを使って、
描画されるZの領域を0~1からもっと大きく、
たとえば0.1f~1000というように広げてやればいいでしょう。
（正確には最終的に描画される領域は変わりません。Projectionマトリックスは頂点データを変換するだけです。0.1f~1000を0~1に変換するというわけです）

ただ、このシチュエーションでこの方法を使うと、カメラと爆発が重なってしまうため、
カメラの位置を表すViewマトリックスも使ってカメラをもう少し手前にずらすべきでしょう。

この２つのマトリックス、ProjectionとViewを使って、頂点データを変換してやります。

ExplosionTest.cs

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


public class ExplosionTest : Game
{
    private GraphicsDeviceManager graphics;

    private Effect effect;
    private VertexVelocity[] vertices;

    private ContentManager content;
    private static System.Random random = new System.Random();


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

    protected override void Initialize()
    {
        vertices = new VertexVelocity[30];

        for (int i = 0; i < vertices.Length; i++)
        {
            vertices[i].Velocity = randomVector3()/10;
        }

        base.Initialize();
    }

    Vector3 randomVector3()
    {
        return new Vector3(
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1),
            (float)(random.NextDouble() * 2 - 1)
            );
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            effect.Parameters["View"].SetValue(
                Matrix.CreateLookAt(
                    new Vector3(0, 0, 5), new Vector3(), new Vector3(0, 1, 0)
                    )
                );
            effect.Parameters["Projection"].SetValue(
                Matrix.CreatePerspectiveFieldOfView(
                    MathHelper.ToRadians(45),
                    aspectRatio,
                    0.1f, 1000
                    )
                );


            graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                graphics.GraphicsDevice,
                VertexVelocity.VertexElements
                );
        }
    }

    float aspectRatio
    {
        get
        {
            return (float)graphics.GraphicsDevice.Viewport.Width 
                / graphics.GraphicsDevice.Viewport.Height;
        }
    }

    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;

        graphics.GraphicsDevice.RenderState.AlphaBlendEnable = true;
        graphics.GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
        graphics.GraphicsDevice.RenderState.DestinationBlend = Blend.One;
        graphics.GraphicsDevice.RenderState.DepthBufferWriteEnable = false;

        effect.Parameters["Time"].SetValue(
            (float)gameTime.TotalGameTime.TotalSeconds
            );

        effect.Begin();

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

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

            pass.End();
        }

        effect.End();
    }
}

ExplosionShader.fx

float4x4 View;
float4x4 Projection;

float Time;

texture ExplosionTexture;

sampler explosionSampler = sampler_state
{
	Texture = <ExplosionTexture>;
};

float4 ExplosionVertexShader(float4 velocity:COLOR):POSITION
{
	float4 worldPosition = float4(velocity.xyz * Time, 1);
	return mul(worldPosition, mul(View, Projection));
}

float4 ExplosionPixelShader(float2 textureCoordinate:TEXCOORD):COLOR
{
	return tex2D(explosionSampler, textureCoordinate);
}

technique ExplosionShaderTechnique
{
	pass P0
	{
		VertexShader = compile vs_2_0 ExplosionVertexShader();
		PixelShader = compile ps_2_0 ExplosionPixelShader();
	}
}

静止画ではわかりにくいですが、
だいぶそれらしくなってきました。

最初の数秒間はまさに「爆発」って感じです！
かなり前進したといえるでしょう。

これを今後、それぞれの爆炎をフェードアウトさせたり、
フェードアウトするにしたがって回転させたり、
その他色々なことをすることによって
より本物の爆発らしくしていくのです！
（というか、そうなる予定です）

[0回]

S	M	T	W	T	F	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31