【C#言語】パズルゲームを開発してみよう!




みずき
現役プログラマーとして奮闘中のみずきです。
今日もブログをみていただき、ありがとうございます。
もう1人の僕
本日から大好きな格闘ゲーム & ビーチバレーのDead or Alive (Xtreme Venus Vacation)のパズルゲームでも開発しようと思います。

Dead or Aliveとは、コーエーテクモゲームス(略:KT)が販売している美少女多めの大人気格闘ゲームです。

世界中で人気の高い格闘ゲームですので、私のオススメのゲームの1つでもあります。
この記事では以下の事を知る事が出来ます。


C#言語でゲームを開発するにはどうすればいい?
作り方の工程を知りたい!
C#言語の勉強をしたい!

コードの解説も交えますので、プログラミング初心者でも分かりやすく、かつ読みやすく工夫をしていますので、ご安心下さい。

よろしくお願いします。

開発するのに必要な準備

使用する画像を入手する


私は絵心がない為、パズルに使用する絵を準備できないので、パズルで使用する画像は、DOAの公式サイトの物を使用したいと思います。

公式サイトのURLでTwitter用のアイコンやPC用の壁紙を無償で配布しているので、使用させていただきます。

Dead or Alive Xtreme Venus Vacationの公式サイト


もう1人の僕
この画像は商用登録があるので、営利目的では使用しないようにしましょう。
なので、パズルが完成したら、無償で遊べるようにしようと思います。

プロジェクトを作成する


パズルゲームを開発するにあたって、Visual Studioでプロジェクトを作成します。
プロジェクトを作成する際は、以下の手順で行います。

✅ファイルをクリックする



✅新規作成 → プロジェクトをクリックする



✅Windowsアプリケーション(.NetWorkを選択)



✅好きな「名前」、「場所」、「ソリューション」を決めてください。
「名前」と「ソリューション」は同じ名前でOKです。


visual studio(開発環境)に画像を追加する


プロジェクトの作成が完了したので、次にパズルゲームに使用する画像をプロジェクトに追加しましょう。

画像を使用させるには、画像をvisual studioに追加する事が必須ですので、追加を忘れないようにしましょう。

追加方法は、プロジェクトを右クリックして「追加」→「既存の項目」を選択です。


もう1人の僕
画像の拡張子は、pngかjpgを使用するようにしましょう。
理由は、他の拡張子だとVisual Studioにうまく認識されず、追加しても画像が正しく表示されない事があるからです。

タイトル画面の構成を考える


次にタイトル画面の構成を考えます。
タイトル画面は、ゲームにとってかなり重要な部分になります。

タイトル画面が魅力的 or 魅力的じゃないというだけでも「このゲームをプレイしてみたい♪」という気持ちに大きな差が出てしまいます。

もう1人の僕
タイトル画面は、しっかり構成を考えて、作成をしましょう

DOAXVVはビーチバレーのゲームなので、夏らしさを大切にしたタイトル画面にしたいと思います。

なのでタイトル画面は、夏らしさを一番強調できそうな、なタイトル画面にします。

後は、タイトルに表示する文字もおしゃれな文字にしたほうが見栄えもよくなるので、無料画像加工サイトで作成します。


📃完成予定図

無料画像加工サイトを使用するだけで、かなりおしゃれなタイトル画面が作成できるのは、嬉しいですね!


もう1人の僕
ここでのポイントは、英文字を筆記体で記載する事で、よりおしゃれ感をアップさせています。

プレイ画面の構成を考える


おしゃれなタイトル画面の構成を考える事が出来たので、次に魅力的なプレイ画面を考えていきましょう。

構成としては、画面の左側にパズルで遊ぶ配置をしたいと思います。
上側がパズル貼り付け部分、下側がパズル部品配置部分にしていきたいと思います。


もう1人の僕
ここでのポイントは、画像を透過する事によって、のきれいな背景が見えるようにしています。

次にキャラクター選択画面とメニュー画面の配置です。


もう1人の僕
ここでのポイントは、キャラクター選択をラジオボタンにする事で、簡単にキャラクター変更ができるようにしています。


📃完成予定図


📃完成予定図(画像付きver)

パズルをする際の参考画像が貼り付くだけで、かなり良いレイアウトになりますね♪


もう1人の僕
全体的にきれいにバランスの取れたプレイ画面を考案できたと思うので、お気に入りです♪



タイトル画面の作成

上記で下画像のタイトル画面を考案しましたので、さっそく点滅させる為のコーディング(コードをPCに入力)をして行きましょう!


今回のコーディングに使用するのは、画像描画処理(Canvas)とif文条件式です。


画面描画処理とは、その名の通りWindowsフォームというゲームに使用する画面に画像を表示させる処理の時など、主に画像や描画を行う時に使用するメソッドです。


📃メソッドとは?
✒簡単に言うと、コードを記載する為に必要な{}(カッコ)で区切ったものと考えてください。
✒専門用語を使用すると、「オブジェクトの操作を定義したもの」をメソッドとと言います。


if文条件式とは、例を出しますと、「今日は雨が降りますか?」の問いに対し、Yes or Noで答える事が出来ます。

図で説明するとこうなります。


このようにどちらかの可能性が存在している時、つまり条件を分岐させたい時に、if文条件式を使用します。


画像を描画する為の準備


画像を表示するためには、まず名前空間にコードを定義する必要があります。

📃名前空間とは?
✒名前空間とは、拡張機能宣言(プラグイン宣言)の事です。

✒Visual Studio(開発環境)では、色々な機能が使用できますが、それを使用する為には、宣言文を書かないと使用する事が出来ません。

なので、今回は描画を使用する為に、using System.Drawingとコーディング(コードをPCに入力)しましょう!

このコードの意味は、「visual studioのプラグイン(拡張機能)の描画機能を使用するよ〜」という定義になります。




次に画像を表示出来るようにする範囲を指定するコードを追加します。

Bitmap canvas = new Bitmap(引数1,引数2)と定義します。

📃Bitmapとは?
✒Bitmapとは、画像や線などの描画を表示する事ができる、有効範囲を指定する事です。

なので、
引数1の意味は、画像表示が出来る横幅(width)の指定をしています。
引数2の意味は、画像表示が出来る縦幅(height)の指定をしています。


描画の範囲指定ができましたので、実際に画像を表示させるコードを追加します。

Graphics gg = Graphics.FromImage(Bitmapの変数)と定義します。

📃 Graphics.FromImage(Bitmapの変数)とは?
✒Graphics.FromImage(Bitmapの変数)とは、Visual Studio(開発環境)に追加した画像を描画する処理です。




上記のコードで、プレイ画面内(Windowsフォーム内)に、描画をする準備が整いました。

次に点滅させる文字の初期位置を設定しましょう♪

点滅させる文字の初期位置を設定する


次に、点滅させる文字を表示させる為のコードを追加します。

画像を表示する基本コードなので、これは覚えてしまいましょう。
画像表示 = DrawImageで覚えると覚えやすいです。

gg.DrawImage(画像のデザイン名, new Rectangle(引数1, 引数2, 引数3, 引数4));と定義します。

📃gg.DrawImageとは?
✒gg.DrawImageとは、Visual Studioに追加した画像を表示させる時に使用します。
✒gg.DrawImage(画像のデザイン名, …の画像のデザイン名は、Visual Studioに追加した画像名を入力します。

new Rectangle(引数1, 引数2, 引数3, 引数4)の意味は、指定した位置に指定した画像を描画します。

上記のコードを追加すると、下画像のように表示できます。

他の文字も同じ様に、gg.DrawImage(画像のデザイン名, new Rectangle(引数1, 引数2, 引数3, 引数4));を使用する事で「画面クリック スタート」のように文字を表示させることが可能です。

ここでは、「Venus Puzzle」の文字が同じコードで表示させています。


文字を点滅させる


この部分が今回の記事の目玉になります。
ここでは、冒頭にもあったように、文字を点滅させる為のロジックを使用します。

もう1人の僕
汎用性が高いので、点滅させたい処理がある時は、このロジックを参考にしてください。

では、本題に入ります!!

文字を点滅させる為には、if文条件式を使用します。
前半部分でも説明したように、if文条件式は、条件を分岐させたい時に使用します。


まずは、クラスのフィールドにフィールド変数を定義しましょう。フィールド変数は、グローバル変数とも言います。

📃フィールド変数(グローバル変数)とは?
✒フィールド変数(グローバル変数): クラス内の全メソッドから参照する事ができる変数の事を指します。

✒変数: 値を格納する事ができる箱と考えてください。

✒クラス: プログラムを実行するための処理をまとめたオブジェクト(実体)で、クラスの処理の中には変数や処理を実行するためのメソッドがあります。

メソッドについては、前半部分で意味を記述していますので、ご参照ください。



次に下画像のコードを追加します。

ここは、「メインタイトル表示画面」を表示するメソッド部分です。
このロジックの解説は、最後の部分で説明していますので、楽しみにしていてください。




もう1人の僕
上記のコードを追加した後の画面が動画になっていますので、確認してみましょう!!

みずき
なんと!! 点滅するでは、ありませんか!!!

みずき
点滅する原理を教えて!
もう一人の僕!!

もう1人の僕
点滅する原理は、フィールド変数のmsgcntを常にインクリメント(加算)して、「インクリメントした数➗60を行い、あまりの数が20以上の時にだけ、表示させる」というロジックになっているからだよ。
なので、永遠と点滅をし続けるのだ!!!

みずき
なるほど♪
だからS〇GAの棒ゲームの様に点滅する文字を実現する事が出来たんだね!



プレイ画面に切り替える為の方法

上記で、メインタイトル画面のメソッドを作成しましたので、次はメインタイトル画面のメソッドとは、別のメソッドを作成する必要があります。

理由は、同じメソッド内で完結させようとすると、融通の利かないメソッドになってしまい、後にパズルのピースを呼び出すロジックを作成する際に、作成が困難になるからです。

もう1人の僕
開発を行う際には、1つの処理に対して、1つのメソッドを作るのがオススメです。
なぜかというと、「1つの処理 = 1つのメソッド」にしておく事で、他のメソッドからメソッドを呼び出した(継承した)時に必要なロジックのみを呼び出すことができるからです!

📃補足
✒この記事では、継承を使用しないので、「1つの処理 = 1つのメソッド」を頭に入れておいてください。(後の記事で継承を説明します。)

プレイ画面用のメソッドを作成する


まず最初にプレイ画面を構成する(表示する)メソッドを作成しましょう。
メソッドを作成する際は、メソッド名を見て、一目で何の処理を行っているメソッドか分かるものにしましょう。

もう1人の僕
なので、「dispGame = ゲームプレイ画面」と名付けてみます。

📃publicとは?
publicとは、型と型のメンバーを表すアクセス修飾子です。
✒public修飾子がついたメソッドは、他のメソッドからアクセスする事が可能です。(最も制限の少ないアクセスレベルを指す。)

他にもprotected修飾子やprivate修飾子も存在しますが、この記事では使用しないので、後の記事で説明をします。


📃voidとは?
✒voidとは、英語に訳すと「なし」という意味になります。つまり「戻り値がなし」という事を指しています。
✒戻り値とは、他メソッドから整数や文字列などの値を受け取らないという事になります。

戻り値は、メソッド以外もありますが、今はメソッドだけと覚えておけば良いです。

timer_tick(一定間隔処理)を準備する


次に処理を一定間隔で行う為に、timer_tickというコンポーネントを追加します。

📃timer_tickとは?
timer_tickとは、.NET Frameworkの一定時間間隔で処理を行う(メソッドを呼び出す)ためのタイマ機能として、用意されているTimerクラスの事です。
✒主に、描画などを動的に処理したい時などに使用します。


もう1人の僕
追加方法はツールボックスでtimerと検索すると、timerのコンポーネントが表示されますので、対象(timerコンポーネント)をダブルクリックする事で、Windowsフォームに機能が追加されます。


もう1人の僕
追加されると、デザイン表示画面に下画像のような表示になります。
追加したコンポーネントのアイコンがあるのは、視覚的にも分かりやすくてとてもGoodです♪

みずき
timer_tick以外にも様々な機能がありますので、ぜひチェックしてみてください。

初期化メソッドを作成する


初期化メソッドは、ゲームの表示などをリセットする際に使用する重要なメソッドになります。
なので、必ず初期化メソッドは、作成しましょう!


📃初期化とは?
✒初期化とは、変数を宣言してから最初に値を代入する事を意味します。
✒初期化が行われていないと、コンパイルすることができないのでエラーになります。



ここで、プレイ画面用のメソッド(dispGame();)も呼び出すように呼び出し宣言をします。

もう1人の僕
初期化メソッドを命名する際も、分かりやすい名前にするのを忘れずに!

他にも変数に初期値をいれて、宣言する事も変数の初期化と言います。
知識がごちゃごちゃにならない様に、注意してください。

timer_tickのメソッドを使用し、メインタイトルとプレイ画面の切り替えを行う


もう1人の僕
今回の記事で、ここ一番理解が難しい箇所ですので、一度で理解できない場合は、再度読み返してください!

先ほど追加したtimer_tick(一定間隔処理)メソッドを使用し、if条件式を使用し、「メインタイトル画面を呼ぶ? or プレイ画面を呼ぶ?」というロジックで、コーディングを行います。


もう1人の僕
このコードの内容は
①グローバル変数にboolean変数(fmt)を作成する。
②boolean変数がtrueの時、メインタイトル画面表示、falseの時、プレイ画面表示となっています。
📃Booleanとは?
✒Booleanとは、変数を使用する際、一緒に宣言する(コーディングする)データ型の事です。
Booleanに格納できる値は、true(真) or false(偽)の2種類のみです。

このコードを追加する事で、それぞれの画面の切り替えが可能になります。

プレイ画面に表示するオブジェクト名を記載する


プレイ画面への切り替えロジックが完了したので、次にプレイ画面に表示するオブジェクト(背景画像など)を表示するコードを追加します。

もう1人の僕
方法はとても簡単で、プレイ画面に表示したいオブジェクト名をコードに追加する事で、メソッドの切り替えだけでなく、画像の切り替えも行うことができます。

✒xxx.Showとは、対象のオブジェクト(画像など)の表示状態を有効にするという意味です。




画面の切り替えが出来ているか、確認


もう1人の僕
最後に画面の切り替えが可能になっているか、確認を行いましょう!!

確認方法は、コードを追加した後にビルドを行い、デバッグ実行をして思い通りの動作になっているか、確認を行いましょう!

みずき
実際に下動画でも確認をしてみましょう♪


思い通りの動作になっている事が確認できましたね♪


もう1人の僕
アプリケーション開発を行う時は、コーディングをしたら、こまめにビルド(生成)を行い、常にアプリケーションの動作チェックを行いましょう。
不具合(バグ)があった場合に、何のコードを追加した影響で、不具合(バグ)が発生したかすぐに分かります!


キャラクター選択の変更方法

グループボックスとラジオボタンを準備する



Visual Studioの左端側にある「ツールボックス」からグループボックス(Group Box)とラジオボタン(radio Button)を追加しましょう。

📃グループボックスとは?
グループボックスとは、ラジオボタンやテキストボックスなどを一纏め(ひとまとめ)にしたい時に、使用します。
✒項目を一纏め(ひとまとめ)にする事で、デザイン画面でテキストボックスの表示位置を変更する時などに、一緒に移動させる事ができます。

もう1人の僕
私の場合は、右端側にグループボックスとラジオボタンを配置して、いい感じに見栄えを良くしています♪



グループボックスやラジオボタンの名前を変更する時は、Visual Studioの右下のプロパティの「Text」から、名前の変更を行う事ができます。

もう1人の僕
私は、グループボックスの名前をCharacter Changeにしました♪

ラジオボタンチェック時のメソッドを作成


次にラジオボタンのチェックされた項目が変更された時に、使用するメソッドを作成します。
このメソッドが、キャラクター選択変更の基盤になります。


もう1人の僕
①対象キャラのラジオボタンをワンクリックし、マウスのフォーカスをします。
②右下のプロパティの雷アイコンをクリックします。
③その他の「CheckedChanged」をダブルクリックします。



📃CheckedChanged(メソッド)とは?
✒CheckedChanged(メソッド)とは、チェックされているフォーカスが変更された時に、呼び出されるメソッドです。
✒今回の場合だと、グループボックス内にあるラジオボタンのキャラクターを変更する事で、このメソッドが呼び出されます。

CheckedChanged(メソッド)を追加すると、コード側で下画像のメソッドが自動で生成されます。


もう1人の僕
第1引数のObject senderは、「object = 物」なので、実際の値(イベントで使用している)の送信をしています。
第2引数のEventArgs eは、イベント送信(この場合は、キャラが変更された事を指す)を表しています。

みずき
他のキャラクターを追加したい場合にも、この方法で同様に追加する事が可能です!

フラグを作成して、キャラ切り替えの番号を割り振る


次にラジオボタンのチェックを変更した際に、キャラクターが切り替わるようにします。
そこでキャラの切り替えには、フラグを作成して切り替えした方が楽なので、フラグを使用しましょう。

①グローバル変数(flg_number)を作成する。


もう1人の僕
今回のフラグでboolを使用しない理由は、キャラクター数が多いので、true or falseのみでは対応できない為です。
なので、フラグにint(整数)を使用しています。


前回の記事(DOAXVVのパズルゲームを開発します!(part3))で作成した時のゲームプレイ画面表示メソッドに、引数を追加します。

②ゲームプレイ画面表示メソッド(dispGame())に引数を追加する。


もう1人の僕
前々回の記事でも同じような事を言った気がしますが、変数名は名前をみて何の役割を持った変数か、分かるような名前にしましょう。


先ほど追加した、CheckedChanged()メソッドに、フラグカウント数の割り当てとゲームプレイ画面表示メソッド(dispGame())を呼び出すメソッドを呼び出すコードを追加しましょう。

③CheckedChanged()メソッド内にフラグカウント数などを割り振る


もう1人の僕
コードを書く順番は、フラグ変数の後にゲームプレイ画面表示メソッドを呼び出しましょう。

理由は各キャラごとにフラグ番号を割り当てる為、ゲームプレイ画面表示メソッドには、各キャラの割り当てた番号を引数として渡す必要があるからです。

キャラ表示の為の条件式を追加する


if文を使用し、対象のキャラが選択された時に、選択されたキャラの画像が表示されるようにコードを追加していきましょう!

条件式の内容は、グローバル変数のフラグカウントの数と一致するかどうかです。

①if条件式を追加する。


もう1人の僕
このif条件式の内容は、flg_number = 0の時にoriginal_marieという画像を表示し、flg_number = 1の時にoriginal_kokoroという画像を表示します。


最後に、キャラ切り替えが出来るようになっているか、チェックを使用ましょう!



切り替えが出来る事が、確認できましたね♪
本来は他のキャラクターの選択も見せたいのですが、画像がまだ用意できていない為、完成した時にお見せします。(笑)



みずき
記事を読んでくださり、ありがとうございます。
ぜひ、次記事も読んでください。


お問い合わせ




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

佐藤 瑞希

皆さん、はじめまして。佐藤瑞希です。 ブログを見ていただき、ありがとうございます。ここでは主に、プログラミング学習などの事をつぶやく予定です。たくさんの人に見てもらえると嬉しいです。 職種:プログラマー(主にC#)。 趣味:ギター、ゲーム、英語、アウトドアなど。 DOAのMarie Roseが大好きで、毎日を必死に生きています。(笑)