【C#】 WinFormsアプリケーションでのセルグリッド上の動的キャラクターと敵キャラの配置チュートリアル

2024年8月14日2024年8月19日

このチュートリアルでは、C#とWinFormsを使用してセルグリッド上に動的に動くプレイヤーキャラクターと、指定された位置に配置される敵キャラクターを実装する手順を解説します。プレイヤーキャラクターはマウスの移動に合わせて動き、クリックで静止します。セルグリッドの描画から、PlayerクラスとEnemyクラスの詳細な実装手順まで、段階的に説明しています。基本的なゲームシステムの構築を学びましょう

1. 目標
2. ベース知識
3. 前提条件
4. ステップ 1: プロジェクトの作成とセットアップ
- 4.1. 1.1 新しいプロジェクトの作成
- 4.2. 1.2 画像リソースの追加
5. ステップ 2: セルグリッドを描画する
- 5.1. 2.1 セルグリッドの描画
- 5.2. 2.2 セルグリッドの描画を確認
6. ステップ 3: プレイヤーキャラクターの実装
7. ステップ 4: プレイヤーキャラクターをクリックで静止させる
- 7.1. 4.1 クリックイベントを追加
- 7.2. 4.2 プレイヤーキャラクターの静止を確認
8. ステップ 5: 敵キャラクターの実装
9. チュートリアルのまとめ

目標

このチュートリアルでは、WinFormsを使用して以下の機能を実装します。

セルグリッドを表示する
プレイヤーキャラクターをマウスの移動に合わせてセルグリッド上で動かす
プレイヤーキャラクターがマウスクリックで静止する
敵キャラクターを指定されたセルに配置する

ベース知識

この課題の前にベースの課題に取り組むことをお勧めします

【C#】WinFormsアプリケーションでのセルグリッド上の動的PictureBoxの実装

この資料は、WinFormsアプリケーションを使用してセルグリッド上で動的に動くPictureBoxを作成する方法 ...

https://soft-rime.com/post-17974/

前提条件

基本的なC#の知識
Visual Studioがインストールされていること

ステップ 1: プロジェクトの作成とセットアップ

1.1 新しいプロジェクトの作成

Visual Studioを開き、[新しいプロジェクトの作成] をクリックします。
[Windows Forms App (.NET Framework)] を選択し、プロジェクト名を「GridPictureMover」に設定します。
[作成] をクリックしてプロジェクトを作成します。

1.2 画像リソースの追加

プロジェクトを作成したら、プレイヤーキャラクターと敵キャラクターの画像ファイル（例：PlayerImage.png、EnemyImage.png）を用意します。
ソリューションエクスプローラーでプロジェクト名を右クリックし、[プロパティ] を選択します。
左側のメニューから [リソース] タブを選択し、上部のドロップダウンメニューから [画像] を選択します。
[追加] ボタンをクリックし、[既存ファイルの追加] を選択して画像ファイルを追加します。

ステップ 2: セルグリッドを描画する

2.1 セルグリッドの描画

Form1.cs を開き、次のコードを追加してフォームにセルグリッドを描画します。

private const int CellSize = 50; // セルのサイズ
private const int NumCells = 10; // 行と列の数

private void Form1_Paint(object sender, PaintEventArgs e)
{
    DrawGrid(e.Graphics);
}

private void DrawGrid(Graphics graphics)
{
    using (Pen pen = new Pen(Color.Black))
    {
        for (int i = 0; i <= NumCells; i++)
        {
            graphics.DrawLine(pen, 0, i * CellSize, NumCells * CellSize, i * CellSize); // 水平線
            graphics.DrawLine(pen, i * CellSize, 0, i * CellSize, NumCells * CellSize); // 垂直線
        }
    }
}

フォームにセルグリッドが描画されるようにするために、Form1.cs のコンストラクタに以下のコードを追加します。

public Form1()
{
    InitializeComponent();
    this.Paint += Form1_Paint; // フォームのペイントイベントをバインド
}

2.2 セルグリッドの描画を確認

プロジェクトをビルドして実行します。
フォームに10×10のセルグリッドが描画されていることを確認します。

ステップ 3: プレイヤーキャラクターの実装

プレイヤーキャラクターは、セルグリッド上をマウスの動きに合わせて動くキャラクターです。このステップでは、プレイヤーキャラクターを管理するPlayerクラスを段階的に作成していきます。

3.1 `Player`クラスの作成

まず、プレイヤーキャラクターを管理するためのPlayerクラスを作成します。このクラスでは、PictureBoxを使用してキャラクターを表示し、その位置をセルグリッド上で管理します。

3.1.1 `Player`クラスの基本構造

新しいクラスファイルを作成:
- ソリューションエクスプローラーでプロジェクトを右クリックし、[追加] > [クラス] を選択します。
- クラス名を「Player.cs」とし、[追加] をクリックします。
基本的なクラスの定義:
- 以下のコードを追加して、Playerクラスの基本構造を定義します。

public class Player
{
    public PictureBox PictureBox { get; private set; }
    private int CellSize;
    public Point GridPosition { get; private set; }

    public Player(int cellSize)
    {
        CellSize = cellSize;
        InitializePictureBox();
    }

    private void InitializePictureBox()
    {
        // PictureBoxの初期設定を行う
    }

    public void UpdatePosition(Point mousePosition)
    {
        // マウス位置に基づいてセル座標を更新する
    }

    public void Move()
    {
        // Playerをセルの中央に移動させる
    }

    public void StopMoving()
    {
        // Playerの移動を停止する
    }
}

3.2 `PictureBox`の初期化

プレイヤーキャラクターはPictureBoxで表示されます。このステップでは、InitializePictureBoxメソッドを実装してPictureBoxを初期化します。

3.2.1 `InitializePictureBox`メソッドの実装

PictureBoxの初期設定:
- InitializePictureBoxメソッドに以下のコードを追加し、PictureBoxのサイズ、画像、配置モードなどを設定します。

private void InitializePictureBox()
{
    PictureBox = new PictureBox
    {
        Size = new Size(CellSize, CellSize),
        BackColor = Color.Transparent,
        Image = Properties.Resources.PlayerImage, // リソースに追加したプレイヤー画像を指定
        SizeMode = PictureBoxSizeMode.StretchImage
    };
}

実装内容の確認:
- PictureBoxはセルサイズに合わせてリサイズされ、プレイヤー画像が表示されるようになります。

3.3 プレイヤーキャラクターの位置更新

次に、マウスの位置に応じてプレイヤーキャラクターがセルグリッド上でどの位置にあるかを更新するためのUpdatePositionメソッドを実装します。

3.3.1 `UpdatePosition`メソッドの実装

セル座標の計算:
- UpdatePositionメソッドで、マウスの位置からセル座標を計算し、GridPositionにその値を設定します。

public void UpdatePosition(Point mousePosition)
{
    int x = mousePosition.X / CellSize;
    int y = mousePosition.Y / CellSize;
    GridPosition = new Point(x, y);
}

実装内容の確認:
- このメソッドにより、プレイヤーキャラクターが現在どのセルに位置しているかが計算されます。

3.4 プレイヤーキャラクターの移動

プレイヤーキャラクターがセルグリッド上の計算された位置に移動するためのMoveメソッドを実装します。

3.4.1 `Move`メソッドの実装

セルの中央に移動:
- Moveメソッドで、プレイヤーキャラクターをセルの中央に移動させるコードを追加します。

public void Move()
{
    int x = GridPosition.X * CellSize + (CellSize - PictureBox.Width) / 2;
    int y = GridPosition.Y * CellSize + (CellSize - PictureBox.Height) / 2;
    PictureBox.Location = new Point(x, y);
}

実装内容の確認:
- プレイヤーキャラクターは、GridPositionに基づいて計算されたセルの中央に移動します。

3.5 プレイヤーキャラクターの移動停止

最後に、プレイヤーキャラクターの移動を停止するためのStopMovingメソッドを実装します。

3.5.1 `StopMoving`メソッドの実装

移動状態の管理:
- isMovingフラグを使って、移動を停止するためのコードをStopMovingメソッドに追加します。

private bool isMoving = true;

public void StopMoving()
{
    isMoving = false;
}

実装内容の確認:
- StopMovingメソッドが呼び出されると、プレイヤーキャラクターはその位置で静止し、以降の移動が停止します。

3.6 `Player`クラスをフォームに追加

Form1.cs に戻り、以下のコードをコンストラクタに追加してプレイヤーキャラクターをフォームに配置します。

private Player player;

public Form1()
{
    InitializeComponent();
    this.Paint += Form1_Paint;

    player = new Player(CellSize);
    this.Controls.Add(player.PictureBox);
}

3.7 プレイヤーキャラクターの移動を実装

MouseMoveイベントを使って、プレイヤーキャラクターをマウスの動きに合わせて移動させます。

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    player.UpdatePosition(e.Location);
    player.Move();
}

このコードを適用するために、コンストラクタに以下のコードを追加します。

this.MouseMove += Form1_MouseMove;

3.8 プレイヤーキャラクターの動作を確認

プロジェクトをビルドして実行します。
プレイヤーキャラクターがマウスの動きに合わせてセルグリッド上を移動することを確認します。

ステップ 4: プレイヤーキャラクターをクリックで静止させる

4.1 クリックイベントを追加

Form1.csにクリックイベントを追加して、クリックでプレイヤーキャラクターを静止させるようにします。

private void Form1_MouseDown(object sender, MouseEventArgs e)
{
    player.StopMoving();
}

コンストラクタに以下のコードを追加して、MouseDownイベントをバインドします。

this.MouseDown += Form1_MouseDown;

フォーム内のすべてのコントロールにMouseDownイベントをバインドするため、コンストラクタに次のコードを追加します。

foreach (Control control in this.Controls)
{
    control.MouseDown += Form1_MouseDown;
}

4.2 プレイヤーキャラクターの静止を確認

プロジェクトをビルドして実行します。
プレイヤーキャラクターがクリックした場所で静止することを確認します。

ステップ 5: 敵キャラクターの実装

敵キャラクターは、セルグリッド上の特定の位置に配置されるキャラクターです。このステップでは、Enemyクラスを作成し、プレイヤーキャラクターと同様にPictureBoxを使用して表示します。

5.1 `Enemy`クラスの作成

まず、敵キャラクターを管理するためのEnemyクラスを作成します。

5.1.1 `Enemy`クラスの基本構造

新しいクラスファイルを作成:
- ソリューションエクスプローラーでプロジェクトを右クリックし、[追加] > [クラス] を選択します。
- クラス名を「Enemy.cs」とし、[追加] をクリックします。
基本的なクラスの定義:
- 以下のコードを追加して、Enemyクラスの基本構造を定義します。

public class Enemy
{
    public PictureBox PictureBox { get; private set; }
    private int CellSize;
    public Point GridPosition { get; private set; }

    public Enemy(int cellSize, Point initialPosition)
    {
        CellSize = cellSize;
        GridPosition = initialPosition;
        InitializePictureBox();
        SetPosition();
    }

    private void InitializePictureBox()
    {
        // PictureBoxの初期設定を行う
    }

    private void SetPosition()
    {
        // 初期位置に敵キャラクターを配置する
    }
}

5.2 `PictureBox`の初期化

次に、敵キャラクターを表示するためのPictureBoxを初期化します。

5.2.1 `InitializePictureBox`メソッドの実装

PictureBoxの初期設定:
- InitializePictureBoxメソッドに以下のコードを追加し、敵キャラクターのPictureBoxを設定します。

private void InitializePictureBox()
{
    PictureBox = new PictureBox
    {
        Size = new Size(CellSize, CellSize),
        BackColor = Color.Transparent,
        Image = Properties.Resources.EnemyImage, // リソースに追加した敵キャラの画像を指定
        SizeMode = PictureBoxSizeMode.StretchImage
    };
}

実装内容の確認:
- PictureBoxはセルサイズに合わせてリサイズされ、敵キャラクターの画像が表示されます。

5.3 敵キャラクターの配置

最後に、指定されたセルに敵キャラクターを配置するためのSetPositionメソッドを実装します。

5.3.1 `SetPosition`メソッドの実装

セルの中央に配置:
- SetPositionメソッドで、敵キャラクターを指定されたセルの中央に配置するコードを追加します。

private void SetPosition()
{
    int x = GridPosition.X * CellSize + (CellSize - PictureBox.Width) / 2;
    int y = GridPosition.Y * CellSize + (CellSize - PictureBox.Height) / 2;
    PictureBox.Location = new Point(x, y);
}

実装内容の確認:
- 敵キャラクターは、初期化時に指定されたセルの中央に配置されます。

5.4 敵キャラクターをフォームに配置

Form1.cs に戻り、以下のコードを追加して敵キャラクターを初期化し、フォームに配置します。

private Enemy[] enemies;

private void InitializeEnemies()
{
    enemies = new Enemy[3];
    enemies[0] = new Enemy(CellSize, new Point(2, 3));
    enemies[1] = new Enemy(CellSize, new Point(5, 5));
    enemies[2] = new Enemy(CellSize, new Point(7, 1));

    foreach (var enemy in enemies)
    {
        this.Controls.Add(enemy.PictureBox);
    }
}

コンストラクタに以下のコードを追加して敵キャラクターを初期化します。

InitializeEnemies();

5.5 敵キャラクターの配置を確認

プロジェクトをビルドして実行します。
敵キャラクターが指定されたセルに配置されていることを確認します。

チュートリアルのまとめ

このチュートリアルでは、以下の機能を順を追って実装しました。

セルグリッドの描画
マウスの移動に合わせて動くプレイヤーキャラクター
クリックで静止するプレイヤーキャラクター
特定のセルに配置された敵キャラクター

これらの機能を通じて、C#とWinFormsを使用した基本的なゲームシステムの構築方法を学びました。このチュートリアルを基に、さらに複雑な機能やロジックを追加することができます。

C#,WindowsFormアプリ,オブジェクト指向

Posted by hidepon

【C#】WinFormsアプリケーションでのセルグリッド上の動的PictureBoxの実装

【C#】Convert.ToInt32と他の四捨五入メソッドの違い

コメント一覧

まだ、コメントがありません

コメントをどうぞコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

目標