Windows Phone XNAでアニメーション – パラパラ

この投稿ではWindows PhoneのXNA Frameworkで作成したアプリケーションにパラパラ漫画的アニメーションを加える方法を説明します。 ※このブログで使う画像、ロジックは、http://create.msdn.com/en-US/education/tutorial/2dgame/getting_started のものをほぼそのまま使用しています。このサンプルは少ない労力でかなり立派なアプリが出来上がるので、是非試してみてくださいね。 例えば敵に弾が当たったときなどに爆発のアニメーションを加えたいな…なんて思いますよね。そんな時には爆発シーンの各コマの画像を作成して、その画像をUpdateで更新し、Drawメソッドでカレントの画像を描画していけば、一定のフレームレート(デフォルトは30fps)で画像がパラパラと描画されます。ですから基本的には、以下のような画像を用意し、 Updateメソッド内で、順次右にずらしていくだけでアニメーションになりますね。 ここで、Drawメソッドの中で、どうやって画像の一部だけを描画するか、その方法が問題になるわけですが、 spriteBatch.Draw(spriteStrip, destinationRect, sourceRect, color); とします。ここで一番目の引数spriteStripeは、上の図のテクスチャ、二番目の引数は、表示スクリーン上の描画位置を示す四角形、三番目の引数sourceRectは、テクスチャ(爆発の絵)のどの位置を描画するかを示す四角形です。こんな風に書いて、Updateメソッドで、sourceRectの位置を順番に右にずらしていくと、アニメーションっぽく見えるわけです。 こちらも、ゲームで敵に弾が当たったときの敵機の爆発等を考えればわかるように複数同時に描画されるので、以下のようなクラスを用意しておくと便利です。     using Microsoft.Xna.Framework;    using Microsoft.Xna.Framework.Content;    using Microsoft.Xna.Framework.Graphics;     class FrameAnimation    {        Texture2D spriteStrip;        float scale;        int elapsedTime;        int frameTime;        int frameCount;        int currentFrame;        Color color;        Rectangle sourceRect = new Rectangle();        Rectangle destinationRect = new Rectangle();        public int FrameWidth;        public int FrameHeight;       …

0

Windows Phone XNAでアニメーション – ぐるぐる

この投稿では、Windows PhoneでGameなどの高機能なグラフィックスを必要とするアプリケーション開発に最適な、XNA Frameworkを使って、テクスチャイメージを一定の速さで変形させる方法を解説します。 ここでは図のテクスチャを一定速度で回転させるアニメーションをベースに説明を行います。 この画像は、PowerPoint 2010で、フリーハンドでぐるぐるを描いて、図としてPNGで保存したものです。背景が透明なので他の描画に重ねることができます。好きな画像を用意してください。 次に、Windows Phone SDKをインストールしたVisual Studioを起動して、XNA Game Studio 4.0のWindows Phone ゲーム(4.0)という名前のテンプレートで新しくプロジェクトを作成します。名前を仮にWPGuruGuruとしておきます。 作っておいた図を、新しく作成されたプロジェクトのフォルダーWPGuruGuruContentにコピーします。 そして、WPGuruGuruのソリューションエクスプローラーで、新しく作成されたソリューションの2つのプロジェクトのうち、お尻にContentがついたプロジェクト(ここではWPGuruGuruContent)をマウスで右クリックし、”追加”→”既存の項目”を選択して、この画像ファイルをこのプロジェクトに追加します。画像ファイル名は、GuruGuru.pngとしておきますね。 WPGuruGuruプロジェクトのGame1.csのGame1クラスのメンバー変数として、 private Texture2D guruguruTexture;    // 画像を保持する為のメンバー変数private float angle;                                // 画像を描画する時の角度private float deltaAngle;                        // 画像角度を更新する際の単位角度 を追加します。 そして、Game1クラスのLoadContentメソッドに、以下のコードを加えます。 guruguruTexture = Content.Load<Texture2D>(“GuruGuru”); XNAの場合、(デフォルトで)毎秒30回、描画内容の更新(Updateメソッド)、描画(Drawメソッド)がコールされます。Updateメソッドで、angleにdeltaAngleを足して、360度を超えたら、360度の剰余を代入して、angleを順次更新していきます。そして、Drawメソッドで、そのangleの角度でテクスチャ画像を描画すれば、ぐるぐる回っているアニメーションの出来上がりです。なので、Initializeメソッドでangleを0、deltaAngleを10で、初期化しておいて、 Updateメソッドで、 angle += deltaAngle;if (angle >= 360) angle %=360; と描いておき、Drawメソッドで、 Vector2 origin = new Vector(guruguruTexture.Width / 2, guruguruTexture.Height /…

0