XNA爆発チュートリアル その５ HLSLへ

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

前回までに、爆炎っぽいものをそれらしく表示することが出来ました。
しかしまだ本物には及びません。
本物の爆発は「ぶわっ」という感じに広がっていくものだからです。
今のところ爆炎は動きません。
サイズも変わりません。

こういった、ポイントのいろんな変化を行うには、
HLSLを使うべきでしょう。
BasicEffectとはおさらばです。
HLSLでエフェクトファイルを直接書くことによって、
より詳しく描画をコントロールすることが出来ます。


ただ……、より詳しく描画をコントロールすることが出来るのはいいのですが、
そのかわり代償として、やらなければならないことが多くなり、
面倒になったり、一時的に見た目が逆戻りする（お粗末になる）ことがあるでしょう。

やる気を保つためにも、見た目をあんまりお粗末にしないことが大切です。
ですから、この回が終わるころにはBasicEffectで
やったものに追いついておくべきでしょうね。

心構えはこのくらいにして、さっそくプロジェクトにエフェクトファイルを追加しましょう。
ExplosionShader.fxという名前で、Contentフォルダの中に作ることにします。
それをContentManagerから"Content/ExplosionShader"という風に読み込みます。
こうして出来たEffectはただのEffectなのでTextureプロパティは使えません。
この関連は削除することになるでしょう。

ExplosionTest.cs

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 Effect 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 = content.Load<Effect>("Content/ExplosionShader");
            graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                graphics.GraphicsDevice,
                VertexPositionColor.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.Begin();

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

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

            pass.End();
        }

        effect.End();
    }
}

HLSLで書いたエフェクトファイルは考えられる限りもっともシンプルなものにします。
頂点シェーダは何もしてませんし、ピクセルシェーダは常に白を返します。
もちろんこんなのですから、結果は炎から真っ白タイルに戻ることが予想できます。

ExplosionShader.fx

float4 ExplosionVertexShader(float4 position:POSITION):POSITION
{
	return position;
}

float4 ExplosionPixelShader():COLOR
{
	return 1;   //white
}

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

あいたたた……見た目がただの白タイルに戻ってしまいました。
わかっていたこととはいえ、これは精神的にきついですね。
今まで築き上げてきたものが失われる、いやーな気分です。
でもすぐに建て直しできるので、気を取り直していきましょう。

---

テクスチャ

ここで白タイルから爆炎に復活させるにはHLSLで
ポイントにテクスチャを貼るようにしなければなりません。

これは簡単で、ポイントスプライトを使っているときには
ピクセルシェーダに自動的にテクスチャ座標が引数として入ってくるので
それを元にピクセルシェーダの戻り値をだせばいいのです。

C#側ではまたさっきまでのようにテクスチャをロードして
エフェクトにセットするようにします。

ExplosionTest.cs

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 Effect 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 = content.Load<Effect>("Content/ExplosionShader");
            effect.Parameters["ExplosionTexture"].SetValue(
                content.Load<Texture2D>("Content/explosion")
                );

            graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                graphics.GraphicsDevice,
                VertexPositionColor.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.Begin();

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

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

            pass.End();
        }

        effect.End();
    }
}

ExplosionShader.fx

texture ExplosionTexture;

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

float4 ExplosionVertexShader(float4 position:POSITION):POSITION
{
	return position;
}

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();
	}
}

復活できました。
めでたく、HLSLでBasicEffectを使っていたときと同じことが出来ました。
きちんと、白タイルではなく爆炎が表示されています。

「このまま白いタイルのままだったらどうしよう」
という恐怖があったのですが、安心しました。
これは気分としては「冤罪でつかまったけれど無事疑いが晴れた」
というのに似ている気がしますね！

さて、今回無事にBasicEffectからHLSLに移行できたので
次回からはいろいろなことが詳しく調節できるようになるはずです。
（BasicEffectは柔軟性に欠けるため、さらなる進歩は難しいのです）

たとえばそれぞれの爆炎を時間の経過とともに周囲に「ぶわっ」と広げたり、
フェードアウトさせたり、回転させたり、
遠近法のようにカメラからの距離によって大きさを調節したり、
いろいろなことが出来るようになり、
さらに本物の爆炎に近づくことが出来るのです。
（というか、そうなる予定です）

XNA爆発チュートリアル その４ 透過

XNA爆発チュートリアル　その３　テクスチャを貼るのつづきです。

前回は、爆発を構成する各ポイントにテクスチャが貼られたものの、
テクスチャの爆炎の周りが黒くて、
リアルさよりもシュールさがきわだってしまったようにも思えます。

これを本物に近づけるために、とりあえずこの黒いのを消してみましょう。

アルファ・ブレンディングで透過するのです。

さて、どのようにブレンドするべきでしょうか？
自分で考えるのがめんどうなのでParticle 3D Sampleのやりかたをまねることにします。
ExplosionParticleSystemはどうブレンドしているかというと・・・

SourceBlend = Blend.SourceAlpha;
DestinationBlend = Blend.One;

ですね。
つまり爆炎の色が、透過してるところは無視して、足されるわけです。
たしかにこれなら黒いところが透明になって、爆炎だけ見えるようになるでしょう。

「あれ？"explosion.png"の周りの色は黒なんだから
SourceBlendもBlend.Oneをセットしても同じなんじゃないの？」と思いながらも、
作業を先に進めることにします。
（後になって試してみましたが、やっぱり同じような結果になりました）

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;

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

        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();
    }
}

うまくいきました！

爆炎の周りの黒いふちがなくなって、
きちんと爆炎のように見えています。
もはやテクスチャの貼られたタイルではありません！

ただ、黒いのが消えたのはアルファ・ブレンディングを使っているからですが、
これはもしかすると後になって問題を引き起こすかもしれません。

つまり、RenderState.AlphaBlendEnabledをtrueにしっぱなしで、
描画が終わっても元のfalseに戻していないため、
今後普通の透過しないモデル（敵キャラとか）を描画したくなったときに、
それまでも半透明になってしまって、全体として
描画がメチャクチャになってしまう危険性があるのです。
でもそれはそのときになってから考えることにしましょう（笑）。


さて、今回の変更はプログラマにとっては小さな一歩ですが、見た目としては大きな飛躍です。
加えたのは数行だけですが、もうこの状態で頂点の位置をダブらせれば本物の爆発っぽく見えるでしょう。
もっとも時間がたつにつれ頂点が動いたりはしないのでそれでもやっぱり限界があるといえます。
進化の袋小路、大きな前進があったものの、これ以上何かをするのは難しいというわけです。

本物の爆発なら時間がたつにつれ、爆炎が周囲に広がって、フェードアウトしていくべきではないでしょうか？
しかしそれをどうやって実現すれば良いでしょう？
Game.Updateメソッド内で各頂点の位置データを動かすべきでしょうか？
それも良いかもしれませんが、もしかしたら後でVertexBufferを使うかもしれない可能性を考えると、
C#側での頻繁な更新は避けたいものです。
もうそろそろHLSLを使ったほうが良いかもしれません。
C#側の頂点は止まっていて、HLSLで書いたエフェクトファイル内で頂点を動かすのです。

HLSLを使えばいったん見た目は後退することになるでしょう。
しかしそれは一時的なことで、すぐに現在以上の見た目になるはずです。

HLSLによって、それぞれの爆炎が「ぶわっ」と動いたり、
フェードアウトしたり、
あるいは大きさが変わったり、
色々することによって、本物の爆発のようになるのです。
（というか、そうなる予定です。）

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

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

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

XNA爆発チュートリアル その２

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

前回は大きさ1の点を表示するだけだったので、
こんどはこれを大きくしてみましょう。

点が周りに広がって動くだけでは
あまりリアルな爆発には見えないでしょうからね。
（もちろん現状ではまだ動いてすらいないのですが・・・）

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


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)
    };


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

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

    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();
    }
}

点が大きくなりました！
スクリーン上のサイズが1から50に大きくなりました。

これで一歩前進です。
どこからどう見ても物が爆発しているようには見えませんが、
前進は前進です。

この白い四角い板みたいなのに爆炎のテクスチャが貼られ、
それぞれが動いたりいろんなことをされることによって
爆発っぽく見えるようになるのです。
（というか、そうなる予定です）

XNA爆発チュートリアル その１

Xna Creators ClubのParticle 3D Sampleをもっとよく理解するために
１から爆発のパーティクルを作ってみようと思います。

ついでにこれをチュートリアルとしてブログの記事にしてしまおうという魂胆です。
火の玉の時には最後の結果だけでしたからね。

---

完成予想図（あくまでもイメージです）

（Particle 3D Sampleより）

いきなり爆発を描画するのはあまりにハードルが高すぎるので、
最初は簡単なやつからいきましょう。

爆発のパーティクルは結局のところ大きさを持った点に（幾何学的には矛盾のある表現です）
爆炎のテクスチャを貼って動かしているだけなので、
もっともシンプルなものは点を表示するだけプログラムであると言えるでしょう！

なので、もっともシンプルな頂点構造体であるVertexPositionColorを点のデータとして
使い、まずいくつか表示してみることにします。
必要なのは点の位置だけなのでVertexPositionColorではColorメンバが無駄になりますが、
一番シンプルなのはこれなのでこれが現状では最善なのです。

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


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)
    };


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

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

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

        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();
    }
}

(クリックで拡大：白い点が中央に3つ表示されています。)

シンプルです。
自画自賛したくなるくらいのシンプルさです。

このプログラムはウィンドウのクライアント領域の中央に３つの白い点を表示するだけです。

シンプルすぎてこれが爆発とどう結びつくのかわかりにくいかもしれませんが、
この３つの白い点が、大きくなり、テクスチャが貼られ、数が多くなり、周りに向かって広がって動くようになり、
フェードするようになったり、その他いろいろなことをするようになって、
爆発しているように見えるようになるのです。
・・・・・と言うか、そうなる予定です。