バネオプション


バネとかゴムひものような動きをするオプションを作ってみましょう。
普通に引っ張って移動するだけだとイマイチ面白くなかったので、位置ロック機能を付けました。ボタンを押している間は位置が固定され、離すと解除されます。固定して引っ張ってから解除すると、さながら、ゴムゴムのピストル!という感じになります。



考え方

バネ的な動きを作るのは、それほど難しくはないです。
慣性のあるオプション+アルファって感じです。

バネは、長く引き伸ばすほど、強い力で縮もうとします。つまり、遠くにあるほど、強い力で元の場所に戻ろうとします。そういうプログラムを書いてあげればOKです。

あとは、摩擦力というか空気抵抗というか、そういう速度を減衰させる処理が必要です。さもないと、永久にビヨンビヨンし続けてしまいます。




サンプルコード

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

namespace Spring
{
    /// <summary>
    /// This is the main type for your game.
    /// </summary>
    public class Game1 : Game
    {
        // プレイヤー移動速度
        const float PlayerSpeed = 7.0f;
        // オプションの距離
        const float OptionDistance = 80f;
        // オプションのバネ係数
        const float Spring = 0.2f;
        // オプションの減衰率
        const float Dump = 0.947f;

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        // ぱっちぃのテクスチャ
        Texture2D texturePacchi;
        // かまトゥのテクスチャ
        Texture2D textureKamatoo;
        // プレイヤーの位置
        Vector2 playerPosition = new Vector2(200, 200);
        // オプションの位置
        Vector2 optionPosition;
        // オプションの速度
        Vector2 optionVelocity;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            base.Initialize();
        }

        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here

            // 画像を読み込む
            texturePacchi = Content.Load<Texture2D>("pacchi_32");
            textureKamatoo = Content.Load<Texture2D>("kamatoo_32");
        }

        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// game-specific content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // TODO: Add your update logic here

            // 上下左右が押されたらプレイヤーを移動させる
            if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                playerPosition.X -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                playerPosition.X += PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                playerPosition.Y -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                playerPosition.Y += PlayerSpeed;
            }

            // Spaceキーを押している間は、オプションをその場に固定する
            if (Keyboard.GetState().IsKeyDown(Keys.Space))
            {
                optionVelocity = Vector2.Zero;
            }
            // Spaceキーを押してないときは、あるべき位置に向かってバネの力で移動する
            else
            {
                // オプションがあるべき位置を算出
                Vector2 desiredPosition = CalcOptionPosition(optionPosition, playerPosition);

                // オプションの現在の位置とあるべき位置の差分
                Vector2 delta = desiredPosition - optionPosition;

                // 差分が大きいほど(あるべき位置から離れているほど)強い力で、あるべき位置に向かうようにする
                optionVelocity += delta * Spring;

                // 速度を減衰させる(摩擦抵抗とか空気抵抗みたいなもの)
                optionVelocity *= Dump;

                // 速度の分だけ移動させる
                optionPosition += optionVelocity;
            }

            base.Update(gameTime);
        }

        /// <summary>
        /// オプションのあるべき位置を計算する
        /// </summary>
        /// <param name="currentPosition">オプションの現在の位置</param>
        /// <param name="playerPosition">自機の位置</param>
        /// <returns>あるべき位置</returns>
        Vector2 CalcOptionPosition(Vector2 currentPosition, Vector2 playerPosition)
        {
            // オプションと親の距離を算出
            float distance = Vector2.Distance(playerPosition, currentPosition);

            // 距離が一定以下の場合は、移動の必要はない
            if (distance <= OptionDistance)
                return currentPosition;

            // 親から見たオプションへの方向ベクトルを算出
            Vector2 direction = currentPosition - playerPosition;

            // 正規化(長さを1に)
            direction.Normalize();

            // 親から上限まで離した位置があるべき場所
            return playerPosition + direction * OptionDistance;
        }

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here

            spriteBatch.Begin();

            // オプションを描画
            spriteBatch.Draw(textureKamatoo, optionPosition, Color.White);

            // プレイヤーを描画
            spriteBatch.Draw(texturePacchi, playerPosition, Color.White);

            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}


定数Springがバネの強さで、定数Dumpが空気抵抗みたいなやつです。
値をいろいろと変更して遊んでみてください。モッッサリしたり、ビヨビヨビヨビヨン!ってなったり、いろいろ変わります。



色んなオプションを作る目次へ戻る




ローリングオプション

自機の周りをぐるぐる回る、ローリングオプションを作ります。


まあ、ぐるぐる回るという動きは、2Dゲーム制作の基本中の基本ですね。三角関数のサインおよびコサインを使えば一発です!

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using System;

namespace RollingOption
{
    /// <summary>
    /// This is the main type for your game.
    /// </summary>
    public class Game1 : Game
    {
        // プレイヤー移動速度
        const float PlayerSpeed = 4.0f;
        // オプションの回転速度
        const float RotateSpeed = 4.0f;
        // オプションの回転半径
        const float OptionRadius = 100.0f;

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        // ぱっちぃのテクスチャ
        Texture2D texturePacchi;
        // かまトゥのテクスチャ
        Texture2D textureKamatoo;
        // プレイヤーの位置
        Vector2 playerPosition = new Vector2(200, 200);
        // オプションの位置
        Vector2 option0Position;
        Vector2 option1Position;
        Vector2 option2Position;
        Vector2 option3Position;
        // オプションの回転角度
        float angle = 0;


        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            base.Initialize();
        }

        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here

            // 画像を読み込む
            texturePacchi = Content.Load<Texture2D>("pacchi_32");
            textureKamatoo = Content.Load<Texture2D>("kamatoo_32");
        }

        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// game-specific content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // TODO: Add your update logic here

            // 上下左右が押されたらプレイヤーを移動させる
            if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                playerPosition.X -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                playerPosition.X += PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                playerPosition.Y -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                playerPosition.Y += PlayerSpeed;
            }

            // オプションの回転角度を更新
            angle += RotateSpeed;

            // オプションの位置を更新
            option0Position = CalcOptionPosition(playerPosition, angle, OptionRadius);
            option1Position = CalcOptionPosition(playerPosition, angle + 90, OptionRadius);
            option2Position = CalcOptionPosition(playerPosition, angle + 180, OptionRadius);
            option3Position = CalcOptionPosition(playerPosition, angle + 270, OptionRadius);

            base.Update(gameTime);
        }

        /// <summary>
        /// オプションの位置を計算して返却する
        /// </summary>
        /// <param name="center">回転の中心位置</param>
        /// <param name="angle">回転角度(度数法で指定)</param>
        /// <param name="radius">回転の半径</param>
        /// <returns>オプションがあるべき位置</returns>
        Vector2 CalcOptionPosition(Vector2 center, float angle, float radius)
        {
            // 度数法の角度をラジアンに変換する
            float radian = MathHelper.ToRadians(angle);
            // サインとコサインを使って位置を計算する
            return center + new Vector2((float)Math.Cos(radian), (float)Math.Sin(radian)) * radius;
        }

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here

            spriteBatch.Begin();

            // オプションを描画
            spriteBatch.Draw(textureKamatoo, option0Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option1Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option2Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option3Position, Color.White);

            // プレイヤーを描画
            spriteBatch.Draw(texturePacchi, playerPosition, Color.White);
         
            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}





解説

今回はオプションが4つあって、オプションの位置を更新する処理も4回行う必要があるため、位置を計算する処理を関数にしました。
        /// <summary>
        /// オプションの位置を計算して返却する
        /// </summary>
        /// <param name="center">回転の中心位置</param>
        /// <param name="angle">回転角度(度数法で指定)</param>
        /// <param name="radius">回転の半径</param>
        /// <returns>オプションがあるべき位置</returns>
        Vector2 CalcOptionPosition(Vector2 center, float angle, float radius)
        {
            // 度数法の角度をラジアンに変換する
            float radian = MathHelper.ToRadians(angle);
            // サインとコサインを使って位置を計算する
            return center + new Vector2((float)Math.Cos(radian), (float)Math.Sin(radian)) * radius;
        }

2Dゲームで円運動をさせる場合は、三角関数のサインとコサインを使います。
C#で三角関数を使うには、Mathクラスを使います。MathクラスはSystemという名前空間にあるため、冒頭に
using System;
という記述を忘れないようにしましょう。 または、Mathクラスを使うときにSystem.Mathと書きましょう。
で、C#のSinおよびCos関数には、角度をラジアン(弧度法)で渡す必要があります。
ラジアンというのは角度の表し方のひとつです。
普段の日常生活では、1回転のことを360度と言いますが、これは度数法と呼ばれる表し方です。
数学やプログラムでは、ラジアンで角度を表すことが多いです。ラジアンでは、1回転を2πラジアンと言います。πとは円周率3.141592...のことです。つまり2πとは約6.28であり、つまり360度は約6.28ラジアンです。
角度をラジアンで表すのはわかりづらいので、角度の指定は度数法で行い、必要に応じてラジアンに変換するのが良いと思います。
360度=2πラジアンなので、つまり1度=2π/360ラジアンです。2π/360は約0.0174533です。つまり度数法の角度に0.0174533をかけてあげればラジアンでの角度に変換できるのですが、しかしMonoGameには度数法をラジアンに変換してくれる関数が用意されているため、せっかくなので、それを使いましょう。MathHelper.ToRadians()という関数です。

あとは、Math.Sin()やMath.Cos()の戻り値はdouble型なので、そのままではVector2に使えません。Vector2のXやYはfloat型です。なので、float型へのキャストをしています。
めんどくさいですね。角度を度数法で受け取って、float型で返却する独自のSin関数やCos関数をあらかじめ作っておくと、捗ると思います。


練習問題

以下にチャレンジ!
  • 回転速度を変えてみる
  • 回転方向を変えてみる
  • 円運動の半径を変えてみる
  • オプションの数を4個固定ではなく、動的に変更可能にする(例えば、ボタンを押すたびに1つ増える、など)

  • 軌道を楕円にして、奥行きを感じさせる












オプションの個数が変えられるサンプル

まずはぜひ自力でやってみてほしいですが、一応、オプションの個数を無制限に増やせるサンプルプログラムを掲載します。

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using System;
using System.Collections.Generic;

namespace RollingOption
{
    /// <summary>
    /// This is the main type for your game.
    /// </summary>
    public class Game1 : Game
    {
        // プレイヤー移動速度
        const float PlayerSpeed = 4.0f;
        // オプションの回転速度
        const float RotateSpeed = 4.0f;
        // オプションの回転半径
        const float OptionRadius = 100.0f;

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        // ぱっちぃのテクスチャ
        Texture2D texturePacchi;
        // かまトゥのテクスチャ
        Texture2D textureKamatoo;
        // プレイヤーの位置
        Vector2 playerPosition = new Vector2(200, 200);
        // オプションの回転角度
        float angle = 0;
        // オプションの位置を格納するリスト
        List<Vector2> optionPositions = new List<Vector2>();
        // 前フレームのキーボードの押下状況
        KeyboardState prevKeyboardState;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            base.Initialize();
        }

        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here

            // 画像を読み込む
            texturePacchi = Content.Load<Texture2D>("pacchi_32");
            textureKamatoo = Content.Load<Texture2D>("kamatoo_32");
        }

        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// game-specific content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // TODO: Add your update logic here

            // 上下左右が押されたらプレイヤーを移動させる
            if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                playerPosition.X -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                playerPosition.X += PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                playerPosition.Y -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                playerPosition.Y += PlayerSpeed;
            }

            // オプションの回転角度を更新
            angle += RotateSpeed;

            // スペースキーを押したら、オプションを追加する
            if (prevKeyboardState.IsKeyUp(Keys.Space) && Keyboard.GetState().IsKeyDown(Keys.Space))
            {
                optionPositions.Add(Vector2.Zero);
            }

            // オプションの位置を更新
            for (int i = 0; i < optionPositions.Count; i++)
            {
                float delta = 360f / optionPositions.Count; // オプション同士の間隔(角度)
                float angle2 = delta * i + angle;
                optionPositions[i] = CalcOptionPosition(playerPosition, angle2, OptionRadius);
            }

            // 次フレームで使うために、キーボードの押下状況を保存しておく
            prevKeyboardState = Keyboard.GetState();

            base.Update(gameTime);
        }

        /// <summary>
        /// オプションの位置を計算して返却する
        /// </summary>
        /// <param name="center">回転の中心位置</param>
        /// <param name="angle">回転角度(度数法で指定)</param>
        /// <param name="radius">回転の半径</param>
        /// <returns>オプションがあるべき位置</returns>
        Vector2 CalcOptionPosition(Vector2 center, float angle, float radius)
        {
            // 度数法の角度をラジアンに変換する
            float radian = MathHelper.ToRadians(angle);
            // サインとコサインを使って位置を計算する
            return center + new Vector2((float)Math.Cos(radian), (float)Math.Sin(radian)) * radius;
        }

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here

            spriteBatch.Begin();

            // オプションを描画
            foreach (Vector2 pos in optionPositions)
            {
                spriteBatch.Draw(textureKamatoo, pos, Color.White);
            }

            // プレイヤーを描画
            spriteBatch.Draw(texturePacchi, playerPosition, Color.White);

            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}

オプションの位置を格納するのにListを使っているので、冒頭に
using System.Collections.Generic;
を忘れないようにしましょう。


色んなオプションを作る目次へ戻る

グラディウスのオプション



オプションといったらこれ!
シューティングゲームの金字塔「グラディウス」のオプションを作ってみましょう。

・・・といっても、ツインビーのオプションとほぼ同じです。何が違うのか?



ツインビーの場合、自機が動かないときもオプションが動き続け、じっとしているとオプションが自機の位置に戻ってきます。
一方、グラディウスの場合、自機が動かないときはオプションも動きません。

個人的にはグラディウスのオプションのほうが好きです。好きな場所にオプションを配置しておくことができるので、敵の出現パターンや地形を先読みしてあらかじめオプションを配置しておくという戦略性が生まれるからです。




サンプルコード

まあ・・・ツインビーのときとほぼ一緒です・・・

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using System.Collections.Generic;

namespace Gradius
{
    /// <summary>
    /// This is the main type for your game.
    /// </summary>
    public class Game1 : Game
    {
        // プレイヤー移動速度
        const float PlayerSpeed = 4.0f;
        // プレイヤーの位置の履歴の個数
        const int HistorySize = 40;

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        // ぱっちぃのテクスチャ
        Texture2D texturePacchi;
        // かまトゥのテクスチャ
        Texture2D textureKamatoo;
        // プレイヤーの位置
        Vector2 playerPosition = new Vector2(200, 200);
        // プレイヤーの位置の履歴
        List<Vector2> positionHistory = new List<Vector2>();
        // オプションの位置
        Vector2 option0Position;
        Vector2 option1Position;
        Vector2 option2Position;
        Vector2 option3Position;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            // 履歴を初期化。とりあえず現在の位置で埋めておく。
            for (int i = 0; i < HistorySize; i++)
            {
                positionHistory.Add(playerPosition);
            }

            base.Initialize();
        }

        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here

            // 画像を読み込む
            texturePacchi = Content.Load<Texture2D>("pacchi_32");
            textureKamatoo = Content.Load<Texture2D>("kamatoo_32");
        }

        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// game-specific content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // TODO: Add your update logic here

            // 移動前の位置をとっておく
            Vector2 prePosition = playerPosition;

            // 移動したか? 移動したらtrue
            bool moved = false;

            // 上下左右が押されたらプレイヤーを移動させる
            if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                playerPosition.X -= PlayerSpeed;
                moved = true;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                playerPosition.X += PlayerSpeed;
                moved = true;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                playerPosition.Y -= PlayerSpeed;
                moved = true;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                playerPosition.Y += PlayerSpeed;
                moved = true;
            }

            // 移動が行われたときだけ、履歴を更新する
            if (moved)
            {
                // プレイヤーの位置(1フレーム前のやつ)を履歴の先頭に挿入する
                positionHistory.Insert(0, prePosition);

                // 最も古い履歴を除去する
                positionHistory.RemoveAt(positionHistory.Count - 1);
            }

            // オプションの位置を更新する
            option0Position = positionHistory[9];
            option1Position = positionHistory[19];
            option2Position = positionHistory[29];
            option3Position = positionHistory[39];

            base.Update(gameTime);
        }
        
        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here

            spriteBatch.Begin();

            // オプションを描画
            spriteBatch.Draw(textureKamatoo, option3Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option2Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option1Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option0Position, Color.White);

            // プレイヤーを描画
            spriteBatch.Draw(texturePacchi, playerPosition, Color.White);

            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}







解説

ツインビーのときとほぼ同じなので、解説はそちらを参照してください!



色んなオプションを作る目次へ戻る


ツインビーのオプション



ツインビーのオプションみたいなものを作ってみましょう。
自機の後ろについてくるやつです。自機の動きを完全になぞります。


サンプルコード

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using System.Collections.Generic;

namespace Twinbee
{
    /// <summary>
    /// This is the main type for your game.
    /// </summary>
    public class Game1 : Game
    {
        // プレイヤー移動速度
        const float PlayerSpeed = 4.0f;
        // プレイヤーの位置の履歴の個数
        const int HistorySize = 40;

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        // ぱっちぃのテクスチャ
        Texture2D texturePacchi;
        // かまトゥのテクスチャ
        Texture2D textureKamatoo;
        // プレイヤーの位置
        Vector2 playerPosition = new Vector2(200, 200);
        // プレイヤーの位置の履歴
        List<Vector2> positionHistory = new List<Vector2>();
        // オプションの位置
        Vector2 option0Position;
        Vector2 option1Position;
        Vector2 option2Position;
        Vector2 option3Position;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            // 履歴を初期化。とりあえず現在の位置で埋めておく。
            for (int i = 0; i < HistorySize; i++)
            {
                positionHistory.Add(playerPosition);
            }

            base.Initialize();
        }

        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here

            // 画像を読み込む
            texturePacchi = Content.Load<Texture2D>("pacchi_32");
            textureKamatoo = Content.Load<Texture2D>("kamatoo_32");
        }

        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// game-specific content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // TODO: Add your update logic here

            // プレイヤーの現在位置(移動前の位置)を履歴の先頭に挿入する
            positionHistory.Insert(0, playerPosition);

            // 最も古い履歴を除去する
            positionHistory.RemoveAt(positionHistory.Count - 1);

            // 上下左右が押されたらプレイヤーを移動させる
            if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                playerPosition.X -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                playerPosition.X += PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                playerPosition.Y -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                playerPosition.Y += PlayerSpeed;
            }

            // オプションの位置を更新する
            option0Position = positionHistory[9];
            option1Position = positionHistory[19];
            option2Position = positionHistory[29];
            option3Position = positionHistory[39];

            base.Update(gameTime);
        }

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here

            spriteBatch.Begin();

            // オプションを描画
            spriteBatch.Draw(textureKamatoo, option3Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option2Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option1Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option0Position, Color.White);

            // プレイヤーを描画
            spriteBatch.Draw(texturePacchi, playerPosition, Color.White);
         
            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}







解説

自機が移動した場所をなぞるためには、自機が移動した場所の履歴を記憶しておく必要があります。そのために今回はListを使っています。よって、冒頭に
using System.Collections.Generic;
を追加するのを忘れないようにしましょう。

positionHistoryという名前のListに自機の位置の履歴を格納しています。0番目が最も新しい履歴で、後ろにいくほど古いものとなります。

毎フレーム、自機を移動させる前に、位置をpositionHistoryの先頭に挿入しています。挿入しっぱなしだと、履歴がどんどん膨らんでいくので、末尾の最も古い履歴を除去しています。

あとは、最初のオプションは10フレーム前の履歴を参照し、次のオプションは20フレーム前の履歴を参照し、その次のオプションは30フレーム前の履歴を・・・とやってるだけです。



補足~循環バッファ

いまからするのは、動きのアルゴリズムには関係ない話で、データ構造についての話なのですが、今回、履歴を格納するのにListを使っていますが、実はこれはあまり好ましくありません。
Listは挿入や削除が遅いので、頻繁に挿入や削除が行われるのであれば、別のデータ構造を採用すべきです。
今回はデータ数が決まっていて、挿入や削除があるといっても、先頭と末尾にだけ行われます(途中への挿入や削除は行われない)。このようなケースでは、循環バッファと呼ばれる(またはリングバッファとも呼ばれる)データ構造が最適です。
残念ながら、C#には循環バッファが用意されていないため、自分で実装する必要がありそうです・・・(C#のQueueというクラスの内部実装は循環バッファだけど、先頭以外の要素にアクセスできないので今回は使えない)

まあぶっちゃけ、今回は要素数が40個程度なので、Listでもまったく問題にはならないです(要素数が多ければ多いほど、挿入や削除に時間がかかります)。

でも気になる人は、せっかくなので、循環バッファ、勉強してみてください。

汎用的な循環バッファを作ろうとすると、やや面倒ですが、今回のように用途が決まっているなら、特に難しいことはなく、配列を使ってちょちょいのちょいです。

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
// using System.Collections.Generic;←これもう不要

namespace Twinbee
{
    /// <summary>
    /// This is the main type for your game.
    /// </summary>
    public class Game1 : Game
    {
        // プレイヤー移動速度
        const float PlayerSpeed = 4.0f;

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        // ぱっちぃのテクスチャ
        Texture2D texturePacchi;
        // かまトゥのテクスチャ
        Texture2D textureKamatoo;
        // プレイヤーの位置
        Vector2 playerPosition = new Vector2(200, 200);
        // プレイヤーの位置の履歴
        Vector2[] positionHistory = new Vector2[40];
        // 最新の履歴が格納されているindexを指す
        int topIndex = 0;
        // オプションの位置
        Vector2 option0Position;
        Vector2 option1Position;
        Vector2 option2Position;
        Vector2 option3Position;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            // 履歴を初期化。とりあえず現在の位置で埋めておく。
            for (int i = 0; i < positionHistory.Length; i++)
            {
                positionHistory[i] = playerPosition;
            }

            base.Initialize();
        }

        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here

            // 画像を読み込む
            texturePacchi = Content.Load<Texture2D>("pacchi_32");
            textureKamatoo = Content.Load<Texture2D>("kamatoo_32");
        }

        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// game-specific content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // TODO: Add your update logic here

            // 自機の現在の位置を記録する
            AddHistory(playerPosition);

            // 上下左右が押されたらプレイヤーを移動させる
            if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                playerPosition.X -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                playerPosition.X += PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                playerPosition.Y -= PlayerSpeed;
            }
            if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                playerPosition.Y += PlayerSpeed;
            }

            // オプションの位置を更新する
            option0Position = GetHistory(10); // 10フレーム前の履歴を参照
            option1Position = GetHistory(20); // 20フレーム前の履歴を参照
            option2Position = GetHistory(30); // 30フレーム前の履歴を参照
            option3Position = GetHistory(40); // 40フレーム前の履歴を参照

            base.Update(gameTime);
        }

        // 自機の位置の履歴を記録する
        void AddHistory(Vector2 position)
        {
            // 先頭を指しているindexをひとつ進める(末尾を超えたら、0に戻す)
            topIndex = (topIndex + 1) % positionHistory.Length;
            // 場所を格納する
            positionHistory[topIndex] = position;
        }

        // 自機の位置の履歴を取得する。
        // time : 何フレーム前の履歴か
        Vector2 GetHistory(int time)
        {
            time -= 1;

            return positionHistory[(positionHistory.Length + topIndex - time) % positionHistory.Length];
        }

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here

            spriteBatch.Begin();

            // オプションを描画
            spriteBatch.Draw(textureKamatoo, option3Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option2Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option1Position, Color.White);
            spriteBatch.Draw(textureKamatoo, option0Position, Color.White);

            // プレイヤーを描画
            spriteBatch.Draw(texturePacchi, playerPosition, Color.White);
            
            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}


色んなオプションを作る目次へ戻る

まるばつゲーム


誰でも知っている「まるばつゲーム」を作ってみたいと思います。2人対戦専用です。マウス操作です。

フラッピーバード風ゲーム


2014年頃に突発的な大ブームを巻き起こしたゲーム「フラッピーバード」風のゲームをMonoGameで作ってみましょう。