Webブラウザで簡単ゲームを作ってみよう: 壁打ちテニス編 #2「ゲーム仕様」

基本は大事と知りつつも、応用ばかりしている、ユゲタです。 簡単ゲームを作ってプログラミング学習をする楽しい企画の2回目ですが、 今回はそのゲームの仕様について考えてみたいと思います。 ここでしっかりと仕様を構築できるかどうかが、実際のゲームを作るプログラミング作業が楽しくなるか、しんどくなるかの分かれ目になります。

壁打ちテニス仕様検討

環境 : インターネットブラウザ（webkitブラウザ限定） ※GoogleChromeで開発するので、基本的にそれだけにしようと思ったんですが、できればiPhoneでも遊べたほうが良いので、safariも対象になるようにします。 ついでに、Edgeもwebkitベースなので、問題なく動作できると思います。 概要 : 画面の3辺に壁を作り、ボールがそれをバウンドしながら直進する。残された1辺には、ユーザーのラケットを配置して、それを動かすことでボールがその枠から出ないように打ち返します。 表示サンプル : コントロール : 1. キーボードの左右キーまたは、スマホのドラッグに対応して、ラケットを動かす 2. ゲームスタートは、キーボードのスペースバーまたは、画面タップ

フローチャート

1. ボールがラケットの位置にあり、ゲーム開始するまでは、ボールとラケットは、同時に移動する。 * 画面クリック（またはスペースバー）を押すと(2)に進む 2. ボール移動開始 - ラケットからボールが離れて動き出します。 3. ボールのコリジョン判定（当たり判定） - 壁にあたった場合→当たった面を軸としてそれを反転させる。 - ラケットに当たった場合→当たった面を軸としてそれを反転させる。 - 画面外に出た場合→ゲーム終了 4. コントロールイベント [PC用] - 左ボタンが押されている間は、ラケットを左に移動（押しっぱなし可能にする） - 右ボタンが押されている間は、ラケットを右に移動（押しっぱなし可能にする） [スマホ用] - 画面タップした場合にタップされた座標を取得 - タップした状態で、ドラッグ（スワイプ）した際に、左右のどちらに移動したかを判定して、同じ座標分ラケットを移動 一般的なフローチャートではなく、重要な要素を抜き出した記述にしています。 どちらかというと、プログラミングをする内容の書き方に近くなってしまいましたね。

まとめ

仕様を書いてみると、このゲームの内容が自分でもよく理解できたので、改めてこうした仕様書の重要性がわかります。 あと、パソコンのキーボード操作と、スマートフォンのタップ操作で、ゲーム感覚が大きく変わると思いますが、その点を理解するにも、こうしたミニゲームで体感できるというのは、ゲーム制作のユーザーインターフェイスで重要な要素かもしれません。 とにかく、この事前準備を「する」か、「しない」かで、プログラミングの進行が大きく変わってくるので、めんどくさくてもこうした仕様を書く癖をつけるようにしてみてはいかがでしょうか？ 今回は、デザインなどは必要がないのですが、実際は、これに色々な見た目なども考慮したデザインを入れていくことも考えると、結構時間のかかる作業になるはずです。 実際のビジネスで行うゲーム開発の場合は、こういう作業はプランナーやディレクターという立場の人がやることが多いのですが、プログラマーにおいてもこうした作業は出来たほうが、良いことは言うまでもありませんね。