これはなに？
『APPRENTICE WIZARD (みならいまほうつかい)』はArduboy専用のゲームです。
まずArduboyというのは下のゲーム機です。
Arduinoを基にしているこのゲーム機は、誰でもゲームを開発することができます。
今回このArudoy向けのゲームコンテストである「Game Jam 5」が開催されているということで、自分もゲームを作ってみました。
このGame Jamではテーマが決まっており今回は「Pretty」＋「Simple」です。
さて、肝心の『APPRENTICE WIZARD (みならいまほうつかい)』ですが、「魔法陣を描く」ゲームです。
右側に見本の魔法陣が表示されるので、それと同じ魔法陣を描いていきます。
まぁこれだけのゲームなのですが、この「魔法陣を描く」というのをどうやってゲーム機で操作するのか？というのがこのゲームのキモです。
Arduboyには上下左右とA、Bキーしかないので、これだけのキーで魔法陣を描きます。描き方は下記の通り。
- 上・下: 未確定図形の拡大・縮小
- 左・右: 未確定図形の種類変更
- A: 未確定図形を確定する
- B＋A: 今まで描いた魔法陣をリセットする
- B+上、B+下: 未確定図形の上・下移動
- B+左、B+右: 未確定図形の左・右回転
このように、キーをフル活用して魔法陣を描きます。
このゲームではこれらの操作を順番に学べるようにステージを配置しています。
さらにちょっと頑張った点としては、このゲームは珍しく日本語にも対応しています。
Arduboyの実機を持っていなくてもこのゲームを遊ぶことができます。
下記リンクからブラウザで動作するArduboyエミュレータでこのゲームを遊ぶことができます。
Arduboyを実機をお持ちの方は、Release v1.1 · inajob/arduboy-apprentice-wizard · GitHubからHEXファイルをダウンロードしてArduboyに書き込むことで遊べます。
ゲームの動いている様子の動画は下記Tweetからも見ることができます。
Arduboy エミュレータで動く様子をキャプチャしました。
— ina_ani@育休中 (@ina_ani) August 21, 2020
音がとれなかったし、画面もつぶれてしまっているので気になる人は上の発言のリンクから実際に遊んでみてください。 pic.twitter.com/O66ButAoXL
どのようにして、このゲームを作ったのか？
折角なので、この記事ではこのゲームをどうやって作ったのかを紹介しようと思います。特にプログラミングの細かいテクニックではなく、アイデア出しから、ゲームを徐々に完成させていくというワークフローについて紹介します。
というのも、巷にはプログラミングの細かいテクニックは多く紹介されていますが、ゲームを作るための一連の流れについてはあまり見たことがなかったからです。
重厚長大なゲームの場合はこのプロセスは複雑で説明も難しいものとなってしまいますが、今回のようなミニゲームであれば、比較的簡単に説明できるため、題材としてはちょうど良いと感じています。
アイデア出し
まずはどんなゲームを作るか？を考えます。今回のGame Jamはテーマがあるので、まずはそれをとっかかりにしてアイデアを出します。
Simple というのは 「操作やルールが簡単でゲームを普段やらない人でも遊べる」こと、Prettyというのは「画面が魅力的で遊びたくなるものである」こと、ということのようでした。
まずはこれらのテーマから思い浮かぶ単語や、既存のゲームを書きだしました。
その時のメモがこれです↓。
本当に思いつくPrettyでSimpleそうな単語を書きだしていきました。ちょうどそこで思い出したのがPlayStation2用のゲームであるFANTAVISIONです。
まぁ、自分は遊んだことがなかったのですが、PlayStation2が発売された当時CMで何度も目にしました。自分が知っている中ではこのゲームはかなりPrettyでした。そして何より「花火のゲーム」という新ジャンル感が強烈で、印象に残っています。
さて、ではここで「花火のゲーム」を作るか・・このGame Jamではパーティクルを使うと評価が高いといったことも書かれていたので、ちょっと考えたのですが、なかなかArduboyの狭い画面のモノクロの画面で「花火のゲーム」をうまく構築できる気がしませんでした。
ここで、ちょっと立ち止まって「きれいなもの（花火）を題材にする」という点に着目して思いついたのが「魔法陣」です。
何を隠そうこの私、「魔法陣」にはこだわりがあって、過去にたくさんの「魔法陣」がらみのプロダクトを作ってきました。
ということで、「魔法陣」なら何か自分も得意だし(?)、ゲームが作れるのでは？ということで、魔法陣が題材となるゲームを作る事に決めました。
ゲームデザインとプロトタイピング
「魔法陣」が題材 と決まりましたが、どんなゲームか考える必要があります。
今まで自分は「魔法陣」を描くプログラム言語などを作ってきたこともあり、「魔法陣を描く楽しさ」のようなものを伝えられるようなゲームがいいなと考えました。
そこでとりあえず、「見本の通り魔法陣を作るゲーム」を作ってみることにしました。
Arduboyのゲーム画面はモノクロで128×64と、非常にミニマルなので、ゲームの試作としては「ドットエディタ」でゲーム画面を描いてみるのがおすすめです。
最終的な画面からはずいぶんと異なりますが、画面の大きさ的に魔法陣を描くスペースはありそうだなということがわかりました。
重要なのは、ここまではプログラミングせずに、メモ帳やペイントだけで進めているということです。
（ちなみに利用したドット絵エディタは高機能ドット絵エディタ EDGE | TAKABO SOFT です。）
さて、ここからは実際に動くものを作りながら内容をチューニングしていきます。
プログラミングによるプロトタイピング
そもそも「魔法陣」をどのように描くのか・・これを考えるためには、操作性などの兼ね合いもあるので、実際にプログラミングしながら考えることにしました。
ぼんやりと頭に描いていたのは、回転・拡縮・平行移動をキー入力で行い、Viewポートを移動させつつ円や四角、三角、星などの基本図形を配置していくという方法です。
最終的にはこれに近い方法を採用することになったのですが、一番初めに作ったプロトタイピングでは、もっと自由度が高い操作を許容していました。
その結果・・・「答え合わせができない」という問題に直面しました。任意の回数の回転・拡縮・平行移動を組み合わせて基本図形を配置する方法では、同じ魔法陣を得るために必要な操作の組み合わせが非常に多くなってしまい、答え合わせをすることが困難となってしまいました。
操作の答え合わせができないなら、最終的な図形が同じものかどうかを座標で判定する方法も考えたのですが、デジタルデータの誤差などをうまく許容して答え合わせをする必要があり、微妙に似た魔法陣をどのように扱うかなどが難しく、またプレイヤーにとっても、もどかしい感じになってしまいそうだと考え、この方法も却下しました。
ここで、一度「見本と同じ魔法陣を描くゲーム」というのを作るのは難しいのでは・・？と考え、別の案にしようかと思い始めました。
しかし、改めて前述の自由すぎる魔法陣システムを見直すと、答え合わせが簡単な魔法陣しか描けないように制限することで、ゲームとして成立するのでは？という気がしてきました。
答え合わせが難しくなる原因は任意の回数の回転・拡縮・平行移動のためです、それぞれの操作を決まった順番でしか適用できないように制限することで、ほぼ一意に魔法陣を特定できそうだということを思いつきました。
ゲーム開発の面白いところは、このようにゲームのルールを実装の難易度に合わせて、変更できることです。有名な例では「スペランカー」の「ある程度早い速度で移動したら死ぬ」というルールや、よくあるシューティングゲームの「壁に当たると即死」というようなルールがこれに当たります。（ある程度より速い速度で移動すると小さなキャラクタを飛び越してワープする現象が発生する、また壁に当たらないように制御するためには、めり込み判定し、めり込まない位置までキャラクタを戻す必要があるなど）
ということで、「魔法陣を描くゲーム」の操作方法として、回転、移動、拡縮は1回のみで適用順序は 回転→移動→拡縮のみ と制限しました。
これで大半の魔法陣を操作の照合だけで同定することができるようになりました。
また、回転は45度単位、移動は8マスのみ、拡縮は8段階とすることで、操作をそこそこ簡単にしつつ、解空間はなるべく広くとれるようにしました（8x8x8=512通り）
円の場合は下図のような位置を指定できます（この図も魔法陣言語で書きましたMagicalCircleEngine - 魔法陣エンジン）
Arduboyは上下左右とABしかボタンがないことも問題でした。回転・移動・拡縮、図形の切り替えを、ある程度直感的になるように、これら6つのボタンに割り当てるのは苦労しました。
その過程で「一度配置した図形を消す」という操作は用意しないことにして「今まで配置したすべての図形を消す」ということしかできないようにしました。
これにより魔法陣を描くという点では不便になりましたが、ゲームに緊張感が出るようになったのではと感じています。
おそらく本当の魔法陣を描く際も、書き直しなどしていたら魔法は正しく発動しないでしょう（しらんけど）
魔法陣の同定ロジック
ここまでで説明したように、操作を「回転→移動→拡縮」とすることで、魔法陣を操作の照合だけで同定できるようになりましたが、いくつか例外があります。
この段階で基本図形として考えていたのは丸と四角です。
これらの図形は点対称です。そのため、原点に配置した場合、それを何度か回転した図形が同じ図形となる場合があります。
丸が原点に配置された場合は、どれだけ回転しても同じ図形であるため、回転角は無視する必要があります。
四角が原点に配置された場合は、90度回転するたびに同じ図形となるため、回転角の90度に対する剰余が同じかどうかで同じ図形かどうかを判定します。
(MagicalCircleEngine - 魔法陣エンジン)
このように、ここまでシンプルにした魔法陣の生成ルールにおいても、手順を見るだけで単純に図形の同定をすることは難しかったです。
基本図形の選定
ここまでで基本図形は丸と四角でしたが、これだけでは自分が描きたい魔法陣を描くことができませんでした。
どうしても描きたい魔法陣の1つに「六芒星」がありました。これは正三角形を2つ組み合わせて作る事ができます。（六芒星という図形を足しても良いのですが、せっかくならプリミティブな図形のほうが良いと思いました）
(MagicalCircleEngine - 魔法陣エンジン)
そこで、基本図形に正三角形を追加するわけですが、、ここで問題が生じます。
原点を中心とする六芒星は正三角形を2つ180度回転させて配置することで描くことができますが、原点以外を中心とする六芒星をここまでのルールで描くことができません。
それは回転→移動→拡縮という操作しか許さないルールに対して、原点以外を中心とする六芒星の作成には移動→回転という操作が必要だからです。
ここで、今までのルールに例外を作るなども考えたのですが、プレイヤーが混乱するような操作体系しか思いつかず、断念し、素直に 180度反転した正三角形も基本図形に加えることにしました。
最後に縦線図形も基本図形に加えました。この図形はちょっと特殊で拡大縮小ができません。これは複数本の短い縦線と、拡大した縦線の同定を行うことが面倒という理由によるものです。
ということで最終的な基本図形は下記のように 四角、丸、上三角、下三角、縦棒 となりました。
ゲームとしての構成
ゲームのルールは、ここまでで固まり、ある程度面白いものになりそうだという感覚もつかめました。
ここからはゲームとしての構成をプログラミングしていきます。具体的には「タイトル画面」「ステージクリア画面」などを作っていきます。
今回は以下の画面を用意しました
- タイトル画面
- 操作方法説明付きREADY画面
- ゲーム中画面
- ステージクリア画面
- 全面クリア画面
さらに、せっかくなのでいくつかのモードを用意しました。
普通に面を1面ずつ攻略していく「アーケードモード」、時間が計測される「タイムアタックモード」、見本がなく好きに魔法陣を描ける「プラクティスモード」です。
まぁ3つもモードがありますが、すべてアーケードモードの亜種です。
ステージの構築
ここからはお楽しみ！ステージの作成です。プラクティスモードを活用して良さそうな魔法陣を描いて、それをソースコードにします。ステージが多いとエディタなどを作ったりするのですが、今回は20以下のステージ数となりそうだったので、手で頑張ってステージを打ち込みました。
余談ですが、ちょっとメモ端末に魔法陣の例を書いていると、「魔導書」みたいでテンションが上がりました。
途中からデバッグ用に好きなステージから始められる機能を付けて、ステージの確認が簡単に出来るようにしました。（リリース時はコメントアウトしています。ソースをいじれば有効にできるので、気になる人はやってみてください。）
プラスアルファ: 日本語モード
ここまでで、ややROM容量に余裕があったので、「日本語化」というのに挑戦してみました。このゲームは、文字が少ないので容量さえ許せば、日本語化は比較的簡単です。
これを実現するために
こちらのライブラリを利用しています。このライブラリを使うことで8x8ドットのフォントとして有名な「美咲フォント」をArduboyから簡単に利用できます。
漢字を含むとさすがに容量が多くなりそうだったので、ひらがなとカタカナのみを利用しています。そういった容量削減の工夫もこのライブラリの機能として提供されているので、非常に使いやすかったです。
見た目のブラッシュアップ
だいたいステージができてきたところで、ブラッシュアップを始めました。タイトル画面にいい感じに魔法陣を表示したり、図形を切り替えるときに選択肢を表示するポップアップ画面を作ったりしました。
最後にAllClear画面を作りこんで、、完成！
と思いつつ音が無かったので、キー入力時に音が鳴るように、ちょちょいとコードを書き足して本当に完成！！
公開用のもろもろ
開発はGitで管理していたので、基本的にはGitHubにPushするだけでOK。 README.mdとLICENSEを配置して、、 と実はここでタイトルを決めました（はじめは MagicalCircleって名前にしていました）
タイトルは・・・ 『APPRENTICE WIZARD (みならいまほうつかい)』！
正直「見習い」なんて単語初めて知りました；
で、ドキドキしながらArduboyのフォーラムに投稿！！！
まとめと今後
ということで、無事『APPRENTICE WIZARD (みならいまほうつかい)』のv1.0が完成しました。ざっとここまでで10日くらい、1日1~2時間くらいの作業だったかな？
Arduboyはこのようなコンパクトなゲームを作るのにぴったりで、特に128×64で白黒しか表示できないディスプレイのおかげでゲームのコア要素に集中できる点が素晴らしいです。
今回うれしいことにフォーラムでたくさんのコメントをいただき、そこからGitHubにもいくつかのPRをいただき、もう少しこのゲームの開発は続きそうです。
このように面白いゲームができた場合は、ほかの方とのコラボレーションが楽しめるというのもコミュニティが活発なArduboyならではの楽しみです。
これを読んでいる皆さんも、まずはドット絵エディタで 128x64のゲーム画面を描くところから始めてみませんか？
