技術コミュニケーション室の中山です。

2017年11月に発売されたいきのこれ！　社畜ちゃん（3）のプログラミング講座にて、プログラム作成をお手伝いしました。

そろそろ実際に手を動かした方が増えただろうということで、私が書ける範囲での裏話的なものを少し紹介します。 講座のネタバレになる可能性が高いので、まだ読んでいない方は先に講座に目を通すことをお勧めします。

調査フェーズ

初回ミーティングにおいて、2つの方針を元にゲーム作成を行うことが決まりました。

• 社畜ちゃんが動くゲームについて解説する
• HTML Canvasを使って左右に動く社畜ちゃんをジャンプさせ、障害物を避ける

ではこの方針を元に早速ゲームを……といきたいところですが、この時点では上記方針と予め共有されていた制約を満たすゲームが作れる確証がまだありませんでした。 そこで、確証を得るためにいくつかの調査を行いました。

制約の具体例としてもっとも知られているのは、原作者ビタワンさんに言及していただいたfor文、while文、switch文を使用しなかった件でしょう。

ゲームプログラミングでは特定の処理を何度も繰り返すことが多く、繰り返しを表現する機能の中でよく用いられるのがfor文やwhile文です。 今回のプログラミング講座ではその2つが利用できない状況でした。

そこで、ミニゲームで繰り返し処理が現れそうな部分を列挙し、解決策を模索することにしました。

1. 障害物を2つ以上登場させた場合の移動処理
2. 画面をアニメーションさせる処理

障害物の数は特に取り決めがなかったので、障害物は画面上に1つだけという制約を導入しました。 障害物を複数出現させてしまうと、障害物を移動させる操作でどうしても繰り返し処理が必要になってしまいます。 しかし障害物が1つだけなら、描画処理のたびに1回だけ移動処理を呼び出せばよいので繰り返し処理が不要になります。

もう1つのアニメーション処理ですが、これはさすがに繰り返し処理が必要だったのでwindow.requestAnimationFrameと関数の再帰呼び出しを検討しました。 window.requestAnimationFrameはブラウザが画面を描画できるタイミングで指定した関数を実行するものです。 このwindow.requestAnimationFrameに同じ関数（講座内でloopと名付けた関数です）を指定すればfor文とwhile文なしで繰り返し処理を実現できます。 また、if文を使って特定の条件を満たした場合にwindow.requestAnimationFrameを実行しないようにすればゲームを停止させることも可能です。 if文と関数は1、2巻で登場済みだったので利用しない手はありません。

このように作りたいものと制約を考慮しながらいくつかの技術を検討していった結果、作成可能だと確信を得るに至りました。

プロトタイプと書籍版の差異

最初に考えたミニゲームと書籍に掲載されているミニゲームには様々な違いがあります。 以下はミニゲームの初期仕様です。

• 画面は縦360px 横640px
• スタート画面にタイトル「避けろ！社畜ちゃん」を表示
• スタート画面をクリックすると画面が遷移してゲーム開始
• 自動で左右に移動している社畜ちゃん
• 画面をクリックすると社畜ちゃんがジャンプする
• 障害物が左右からランダムに現れる
• 社畜ちゃんが障害物にぶつかったらゲームオーバー
• 一定時間経過時にゲームオーバーでなければゲームクリア
• ゲームオーバー、ゲームクリア後に画面をクリックしたらスタート画面に戻る

しかしこの仕様は作成前から分量が多いと感じていたため、スタート画面と関連する仕様を外すことにしました。 そうして出来上がったのが次の仕様です。

• 画面は縦360px 横640px
• 自動で左右に移動している社畜ちゃん
• 画面をクリックすると社畜ちゃんがジャンプする
• 障害物が左右からランダムに現れる
• 敵と社畜ちゃんがぶつかったらゲームオーバー
• 一定時間経過時にゲームオーバーでなければゲームクリア

初回レビューに提出したプログラムはこの仕様に従って開発したものです。

そこから数度のレビューと再構成、そしてビタワンさんによる最終調整を経て書籍版の仕様となりました。

敵（障害物）

プログラムを作成する際、敵用の仮画像には残業を選択しました。 これは障害物を避けて帰宅する社畜ちゃんというイメージでゲームを作っていたときに、第1巻の5ページ目やQ & Aコーナーに残業という単語が登場していた事実を思い出したことがきっかけとなっています。

ゲームの概要は最終的に飛んでくる敵を避ける社畜ちゃんという形に落ち着きましたが、敵を残業に置きかえても違和感がないところに驚かされます。

おわりに

最後に、この場を借りて改めてビタワンさんと編集者の方に感謝の言葉を述べさせて頂きます。 貴重な機会をくださり、ありがとうございました。

一読者として、これからも社畜ちゃん達の物語を楽しみにしています。