埋め込み画像で学ぶWinFormsの基本操作とオブジェクト指向

2025年1月3日2025年1月5日

1. このチュートリアルで学べること
2. 1. 新しいプロジェクトを作ろう！
3. 2. キャラクターの画像をプロジェクトに追加しよう！
4. 3. キャラクターを作るクラスを追加しよう！
5. 4. キャラクターを画面に表示してみよう！
6. 5. プログラムを動かしてみよう！
7. 6. トラブルが起きたら？
8. このプログラムで学べること
9. このチュートリアルに含まれる学習項目詳細
10. まとめ

このチュートリアルで学べること

プログラムでキャラクターを表示する方法
キャラクターを動かす方法
画像をプロジェクトに組み込んで簡単に使う方法

今回は、簡単なキャラクターを表示して、矢印キーで動かすプログラムを作ります！

1. 新しいプロジェクトを作ろう！

Visual Studioのバージョン　17.12.3

Visual Studioを開きます。
上のメニューから[ファイル] > [新規作成] > [プロジェクト]をクリックします。
検索バーで「Windows Forms アプリ (.NET)」を検索し、それを選びます。
プロジェクト名を「PlayerApp」として、作成をクリックします。

これで新しいプロジェクトができました！

2. キャラクターの画像をプロジェクトに追加しよう！

次に、キャラクターの画像をプログラムに使えるようにしましょう。

ソリューションエクスプローラー（画面右側にあるはず）でプロジェクト名（例: PlayerApp）を右クリックして、[プロパティ]を選びます。
左側に[リソース]というメニューがあるのでクリックします。
「このプロジェクト用のリソースファイルを作成する」というボタンがあればクリックしてください。
[リソースの追加] > [既存のファイルを追加]をクリックして、用意したキャラクター画像（例: player.png）を選びます。

これで画像がプロジェクトに追加され、Properties.Resources.playerという名前で使えるようになりました。

3. キャラクターを作るクラスを追加しよう！

プログラムでキャラクターを動かせるように、専用の「キャラクタークラス」を作ります。

ソリューションエクスプローラーでプロジェクト名を右クリックし、[追加] > [クラス]を選びます。
新しいクラスの名前をPlayer.csと入力して追加をクリックします。
次のコードを入力してください：

using System.Drawing;
using System.Windows.Forms;

public class Player
{
    public string Name { get; set; }
    public Point Position { get; set; }
    public PictureBox PictureBox { get; private set; }

    public Player(string name, Image image, Point position, Size size)
    {
        Name = name;
        Position = position;

        // キャラクター用のPictureBoxを作る
        PictureBox = new PictureBox
        {
            Image = image,
            Location = Position,
            Size = size,
            SizeMode = PictureBoxSizeMode.StretchImage // 画像を枠に合わせる
        };
    }

    // キャラクターを移動させる
    public void Move(int dx, int dy)
    {
        Position = new Point(Position.X + dx, Position.Y + dy);
        PictureBox.Location = Position;
    }
}

これでキャラクターをプログラムで作れるようになりました！

4. キャラクターを画面に表示してみよう！

4.1. デフォルトのフォームを使う

ソリューションエクスプローラーでForm1.csを探します。
これをダブルクリックするとフォームデザイナー（画面設計ツール）が開きます。

4.2. 名前を変更してみる（やってみたい人向け）

ソリューションエクスプローラーでForm1.csを右クリックして、[名前の変更]を選びます。
フォームの名前をMainForm.csに変更します。
名前を変更すると関連するコードも自動的に修正されます。

4.3. キャラクターをプログラムに追加する

次のコードをForm1.cs（または変更した場合はMainForm.cs）に追加してください。

using System;
using System.Drawing;
using System.Windows.Forms;

public partial class MainForm : Form
{
    private Player player;

    public MainForm()
    {
        InitializeComponent();

        // キャラクターを作る
        player = new Player("Hero", Properties.Resources.player, new Point(100, 100), new Size(50, 50));

        // フォームにキャラクターを追加
        this.Controls.Add(player.PictureBox);

        // 矢印キーで操作できるようにする
        this.KeyDown += MainForm_KeyDown;
        this.KeyPreview = true;
    }

    private void MainForm_KeyDown(object sender, KeyEventArgs e)
    {
        int step = 10;

        // 矢印キーでキャラクターを動かす
        if (e.KeyCode == Keys.Up) player.Move(0, -step);
        if (e.KeyCode == Keys.Down) player.Move(0, step);
        if (e.KeyCode == Keys.Left) player.Move(-step, 0);
        if (e.KeyCode == Keys.Right) player.Move(step, 0);
    }
}

5. プログラムを動かしてみよう！

Ctrl + F5を押してプログラムを実行します。
フォームが表示され、キャラクターが画面に表示されます。
矢印キーを押してキャラクターを動かしてみてください！

6. トラブルが起きたら？

キャラクターが表示されない場合：
- リソースに画像が正しく追加されているか確認してください。
- 画像の名前がProperties.Resources.playerになっているかチェックしましょう。
矢印キーで動かない場合：
- this.KeyPreview = true;が書かれているか確認してください。
- 矢印キーの動作はKeyDownイベントで設定されています。

このプログラムで学べること

リソースの仕組み：画像をプログラムに埋め込んで使える！
クラスとオブジェクト：キャラクターを作る設計図（クラス）と、それを使う実体（オブジェクト）の違いを学べる。
イベント駆動プログラミング：キー入力（矢印キー）に反応する仕組みを体験できる。

このチュートリアルには、初心者が学ぶべき基本的なプログラミング概念が多数含まれています。以下に、それぞれの学習項目とその具体的なポイントを挙げます。

このチュートリアルに含まれる学習項目詳細

1. クラスとオブジェクト

学ぶ内容:
- クラスの定義とインスタンス化（Playerクラスを作り、それを使う）。
- クラスの役割（設計図としての役割）。
具体例:

  public class Player
  {
      public string Name { get; set; }
  }
  Player player = new Player();

2. プロパティ

学ぶ内容:
- クラス内でプロパティを使い、データ（名前や位置）を管理する方法。
- getとsetを使ったデータの取得・設定。
具体例:

  public string Name { get; set; }
  player.Name = "Hero"; // 値を設定
  string playerName = player.Name; // 値を取得

3. メソッド

学ぶ内容:
- クラス内で動作（キャラクターの移動など）を定義する方法。
- メソッドの呼び出し方。
具体例:

  public void Move(int dx, int dy)
  {
      Position = new Point(Position.X + dx, Position.Y + dy);
  }
  player.Move(10, 0); // キャラクターを右に移動

4. コンストラクタ

学ぶ内容:
- クラスの初期化処理をコンストラクタで行う方法。
- 初期値の設定（名前や位置など）。
具体例:

  public Player(string name, Point position)
  {
      Name = name;
      Position = position;
  }
  Player player = new Player("Hero", new Point(100, 100));

5. イベント駆動プログラミング

学ぶ内容:
- キー入力イベント（KeyDown）の使い方。
- イベントハンドラの紐付け。
具体例:

  this.KeyDown += MainForm_KeyDown;

  private void MainForm_KeyDown(object sender, KeyEventArgs e)
  {
      if (e.KeyCode == Keys.Up)
          player.Move(0, -10);
  }

6. PictureBox（WinFormsの基本コントロール）

学ぶ内容:
- 画像を表示するためのコントロール（PictureBox）の使い方。
- プロパティ（Image, Location, Size, SizeMode）の設定。
具体例:

PictureBox = new PictureBox
{
    Image = Properties.Resources.player,
    Location = new Point(100, 100),
    Size = new Size(50, 50)
    SizeMode = PictureBoxSizeMode.StretchImage
};

7. プロジェクトリソース

学ぶ内容:
- 埋め込みリソースの利用方法（画像をプログラムに含める）。
- Properties.Resourcesを使ったリソースの呼び出し。
具体例:

PictureBox.Image = Properties.Resources.player;

8. データ型と構造体

学ぶ内容:
PointやSizeといった構造体の利用。
データ型（整数、文字列）の活用。
具体例:

Point position = new Point(100, 100);
Size size = new Size(50, 50);

9. プログラムの流れ

学ぶ内容:
- MainFormの初期化とイベントの流れ。
- InitializeComponentの役割とフォームの初期設定。

10. フォームの基本操作

学ぶ内容:
- Windows Formsアプリの基礎。
- フォーム上のコントロールの追加（this.Controls.Add()）。
具体例:

this.Controls.Add(player.PictureBox);

11. コードとデザインの連携

学ぶ内容:
- ソリューションエクスプローラーの使い方。
- コードエディタとデザイナの連携（フォームの名前を変更したときの挙動）。

12. 問題解決の手法

学ぶ内容:
- トラブルシューティングの考え方（画像が表示されない、キー入力が動作しない場合の確認方法）。
- プログラムのデバッグ。

まとめ

このチュートリアルで学べるのは、プログラミングの基礎からWinFormsの基本操作まで、幅広い内容です。特に以下の点で役立ちます：

プロパティやメソッドなどのオブジェクト指向の基礎を学ぶ。
Windows Formsの基本的な操作を理解し、実際に動くプログラムを作る。
イベント駆動プログラミングの考え方を身につける。

この内容をしっかり理解すれば、より高度なアプリケーション開発にも応用できるようになります！

これで完成です！うまく動いたら、次はキャラクターを増やしたり、ボタンで動かす仕組みを作ったりしてみましょう！

C#,WindowsFormアプリ,イベント,オブジェクト指向,クラス,プロパティ,メソッド,初学者

Posted by hidepon

【Winforms】DataSetを使ったデータ操作を学ぼう！（コードで記述）

C#初学者向け技術資料：配列を使ったゲームサンプル

コメント一覧

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

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

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