今回は、Processingでゲーム開発をするためのプロットを作成していきたいと思います。昔は紙とペンを使ってプロットを作成していたのですが、これだけブログを書いているので記事にまとめていきたいと思います。プロットを作成する意図としては、作る画面の整理や各画面において必要となる機能などを書き出しておいて工程に分割するなどがあります。
こちらの記事は、Techブログで連載中のProcessingシリーズ外伝となっています。環境構築から現在の流れを以下にまとめておきますね。興味があったら手を動かして参加してみてね。
- Processing環境をシンプルに 【Visual Studio Code】
- 【Processing】ベース知識Step.1
- 【Processing】ベース知識Step.2
- 【Processing】ゲーム要素：横移動・玉の跳ね返り
それでは始めていきましょう。
初期プロット
全体の流れとしては、上記の図になると思います。いきなりゲームを始めるわけにもいけないのでタイトルコールから始まり、ゲーム画面とリザルト表記である終了画面の計3画面で構築します。今回は、設定などがある重めのゲームではなくシンプルなゲームを想定しています。そのため、ゲーム画面は1つの画面で収まります。ガッツリと重めなゲームも作ることができますが、規模が大きい重めのゲームを作る場合は、「設定画面」や2面など複雑になるかと思うので、しっかりとプロットは作ってゲームづくりに挑んだほうが良いですね。（というかそもそもProcessingで作らないという手が….）
この辺はWEB系とあまり変わらないですね。何かを作るときは、企画書やプロットをしっかりと作ったほうが良いということになります。
それでは、ここからは各画面にどういった機能が必要となるかについて書いていきたいと思います。
各画面における機能について
ここでは、先程「全体の流れ」で紹介した図に沿って、各画面で必要となる機能について言及していきたいと思います。
全体に共通する機能としては、キーボード入力を受け付ける機能になります。ゲームなので当たり前ですが、操作性の観点からキーボードの入力とマウス入力を受け付けます。特にシンプルなゲームの場合では、操作が混同しないためにキーボードかマウスどちらか一方を選択するといいですね。
タイトル
タイトル画面で必要となる機能としては、以下になるかと思います。
- タイトルコール
- 操作説明
- ゲームスタート
タイトルコールは読んで字の如くですね。せっかくゲーム作るなら名前を与えてください。なんなら一番最初につけてもいいかもしれません。操作説明に関しては、シンプルなゲームが故にと言った側面があります。重めのゲームの場合は、ヘルプとして独立したページを作る方がいいかもしれませんが、操作が単純な場合はタイトル画面に一緒に入れちゃうのも手ですね。この画面で最も必要となる機能は、ゲームを始める機能ですね。これは、ボタンを押すでもいいですし、カウントダウンで自動で始まってもいいと思います今回は、スペースボタンを押したら開始するように設計しましょう。
ゲーム画面
ゲーム画面はそのまんまです。ゲームを作ってみましょう。僕はゲームクリエイターではないので、難しいゲームは作れませんが当たったら跳ね返す処理や座標が重なったら判定すると言ったことはプログラム上で実現することができるので簡単なゲームを作成します。
この辺はミニゲーム感覚で作っているので完成したら報告入れますね。今回は全体に流れに重点を置いているので、ゲームの内容については割愛します。
終了画面
終了画面で必要になる機能としては、以下になると思います。
- リザルト表記
- タイトル画面に戻る
リザルト表記に関しては、ゲームの結果を表示しましょう。やはりゲームを謳っているわけですから何かしらのスコアは出てくると思います。スコアが画面に出る方が、やる気が出るといいますかユーザもやる気になってくれると思います。タイトル画面に戻る機能は、終了画面で最も重要になる機能です。今回作成するゲームがシンプルであるため、何度も繰り返しプレイする可能性があると思います。その都度、アプリを立ち上げ直すわけにもいかないのでループできるように作りましょう。
各画面の機能を踏まえたプロット
各画面の機能を踏まえてプロットを追記した図を示します。ここまで図化したことでプログラムで必要な機能が明確になります。とりあえず、「テキスト表示」が必要になります。加えて、ゲームの結果を終了画面に伝える必要があること、現在の画面の状態を把握して画面を表示する仕組みが必要です。あとはゲームを用意する必要がありますね。
次章で現在の状態を把握して画面を切り替えるプログラムの紹介をしたいと思います。
ユーザの状態によって画面を切り替えるプログラム
今回のプログラムはこちらです。プログラムの構造としてはシンプルで、ENTERキーを押すことで画面が更新されます。本来であるならば、ゲームプログラムを書いていくところなのですが、内容をシンプルにするためにENTERキーで画面を移動させ、文字で確認するという処理になっています。ソース自体は、前回説明した要素で構成されています。進行度の管理は「fase」変数で管理しており、「fase」の数値が変わることで画面が切り替わります。
新たに画面に文字を出力する「TEXT」コマンドが登場しています。こちらに関しては、実際にタイトル画面を作成する際に解説を入れますが、日本語を表示させるためには一工夫必要となります。「【Processing】日本語表示の文字化けを修正 – 物を作る者」こちらの記事が参考になったのでおいておきます。
動画を見ていただくとわかるのですが、ENTERキーを押しっぱなしにすることで、画面が素早く切り替わるという問題があります。本来のゲームシステムでは、ボタンを押すことで遷移するタイミングとゲームの判定で遷移するタイミングがあるので、このバグに関しては別途対応が必要になるかもしれません。実際に開発する際は、念頭に置いておくと良いかもしれません。
終わりに
お疲れ様です。今回は、ゲームシステム全体のプロットと必要機能の洗い出し、サンプル実装までを行いました。次回はいよいよゲーム作成ですね。ゲーム側でも企画書が必要になると思うので、また別途用意して完全版を作成していきたいと思います。亀の速度で進んでいますが、ゆったりと丁寧に進めていく予定ですのでよろしくお願いします。
こちらのライトブログでも合わせて報告を入れていきますので、ぜひご一読ください。
ではでは！またよろしくお願いします( *´艸｀)。
