音ゲーアプリ ”Ekscita” 開発記

はじめに

 はじめまして! Ekscita 制作班、プログラム担当の大佐といいます。班長と譜面作成者も兼任しています。

Ekscita は、筑駒文化祭2020において、高3縁日班が作成した、10/30に公開予定の音ゲーアプリです。公式Twitterアカウントは @Ekscita_tk です。(ぜひフォローお願いします!)

 それでは、開発の経緯からプログラムの中身まで、色々書いていこうと思います。

制作班紹介

 制作班のメンバーは8人で、プログラマー1人、デザイナー2人、作曲者3人、ボーカル1人、譜面作成者7人からなります。全員高3縁日班の班員です。音ゲーの世界で戦ってきた班員が多く、その音ゲー力の高さにはよく助けられました。

 また、曲はOBの方々と学校の先生からも提供していただいています。本当にいい曲ばかりです。ありがとうございます。

7月

 例年、本校の文化祭では、縁日班がアーケードの音ゲーを作っていました。しかし、このコロナ禍では現地開催で文化祭なんてできないだろうし、できたとしても作業に制限がついて、学校ではまともに準備ができないだろうということは予想できました。

そのため、高2の3学期から、アーケード音ゲーを作る前提で色々話し合ってきたのを、一旦白紙に戻すことになりました。結構前から作るのを楽しみにしていたので、残念な気持ちになりました。

 そんな中、数ヶ月ぶりの登校日がやってきたので、今後について話し合いました。そして、いっそこの状況を利用して多くの人に遊んでもらおうということで、「スマホ・タブレット向け音ゲーアプリ」を作り、公開することが決まりました。

 自分はスマホアプリなんて作ったことがなく、自信がなかったので、実はそんなに乗り気ではなかったんです。しかし、オンラインの話し合いでゲームシステムが決まり、そのプレイ画面のラフを見て、これは絶対面白いゲームになると確信しました。そして、翌日から早速開発を始めました。

alt_text

(話し合い中のプレイ画面のラフです。)

8月

 巷では受験の天王山などと言われる高3の夏休みですが、当然このゲームの開発もしていました。大体1日2時間くらい作っていたと思います。

リアルで会合ができる感じではなく、オンラインでの話し合いも捗らなかったため、ゲームの細部はあまり固まっていませんでした。そのため、作れたのはタップとホールドくらいでした。

alt_text

(この頃のプレイ画面です。)

9月上旬

 この頃からOBの方々にお願いしていた曲が届きだし、譜面作成が始まりました。

譜面作成が意外と大変だということが判明したので、班員総出でやっていました。自分は高みの見物をしつつ、スライドやフリックの実装をし、山のようなバグを潰していました。

このころからデザイン担当2人がデザインを始めていたので、期待に胸を膨らませながら待機していました。

9月下旬

 プレイ画面のデザインが上がったので、話し合いながらゲームに組み込んでいきました。

良いデザインが付くとこうも雰囲気が変わるのかと、デザイナーの偉大さを噛み締めていました。PVを先ほどの初期プレイ画面と比較するとすごい変化ですよね。PVをまだ見てない人はぜひ今見てみてください。公式Twitterに上がっています。

alt_text

(デザイン組み込み中の画面です。)

 この頃、ある班員が突然自作曲を2曲アップロードしてきたので、みんながやる気になり、怒涛の作曲・譜面作成ラッシュが始まっていたのが面白かったです。

 あと実は、この時まだタイトルが決まっていなかったんですよね。それで探そうと思ってエスペラント語の辞書を調べていたんですが、偶然「刺激的な」という意味の「Ekscita」という単語を見つけたので、「これだ!!」と思って命名しました。

結構お気に入りのタイトルです。

10月上旬

 リザルト、選曲、タイトル画面のデザインが完成しました。本当に格好いいデザインで感動しました。

自分はデザインの組み込み、アニメーションの実装などをしていました。

alt_text

(制作中のリザルト画面です。)

この辺の作業になってくると、プログラムを頭を使って書く必要がなくなってきます。ただするべき処理を書いていくだけなので。

だからつまらないのかと思いきや、意外と楽しかったです。ちょっとした作業でゲームの見た目がどんどん良くなっていくのって、すごい気持ちいいんですよね。

逆に開発の最初の方は、少し変な部分を直すだけでも頭を使って何十行もプログラムを書く必要があり、大変だった覚えがあります。

10月下旬

 この頃になると大きな仕様変更ができなくなってくるので、BGM・SEの追加などの細かい改善をしていました。また、遊んだ班員たちから報告されたバグを1つ1つ潰していきました。

譜面作成陣は、手直しや新たに届いた曲の譜面作成に忙しくしていました。自分も仕事がなくなってきたので、譜面作成に加わりました。

 これを書いている今もある譜面を作っている途中なのですが、正直プログラミングの何倍も頭を使います。

そもそものコンセプトが「脳トレ音ゲー」なので、当然制作も脳トレになるわけです。

それでも筑駒生たちが頭を振り絞って色んな譜面を作ったので、譜面にも注目して遊んでみて欲しいです。

開発環境

 開発では、「Unity」という、様々な有名ゲームアプリの開発でも使われているゲームエンジンを使用しました。これ1つでiOSアプリとAndroidアプリが両方作れるのが良かったです。インターネットを頼りに使い方を勉強しました。

 エディタは普段から使っていたVSCode、言語は初めて使うC#を使いました。といっても慣れているC++と同じような雰囲気で書けるので、習得に苦労したということはなかったです。(C#として良くないコードにはなっていそうですが...。)

プログラムについて

 書いたプログラムの行数は約2500行でした。多いのか少ないのか分かりませんね。

中身は、プレイ中の判定処理に約700行、判定以外の処理に約600行、譜面ファイルの読み込みに約200行使い、残りは画面遷移やアニメーションを実現するためのコードという感じです。

 また、競技プログラミングをやっていたので、効率的なコードを書こうという意識はあったと思います。

例えばノーツを動かす時に、画面外のノーツについても処理するのは無駄なので、画面内のノーツだけ見るようにするために、「尺取り法」というアルゴリズムを使って高速化しました。

擬似コードで書くと、こんな感じのことを毎フレーム処理しています。

	
while((notes[right]が出現予定の時刻)≦(今の時刻) の間){
	notes[right]を出現させる;
	rightを1進める;
}
while((notes[left]が判定ライン到達後、消失する予定の時刻)≦(今の時刻) の間){
	notes[left]を消失させる;
	leftを1進める;
}
for(leftとrightの間にあるiについて){
	notes[i]について処理;
}

要するに、leftとrightを尺取り虫みたいに動かす感じです。競技プログラミングでの使い方とはちょっと違いますが、100倍近い高速化になっています。

 ただ、プログラムが複雑になってくると、高速化によってコードが読みにくくなり、デバッグしにくくなるのが結構痛かったりするので、積極的に高速化していたわけではないです。重い場所を見つけたらその都度やる感じですね。

最初はノーツを流すタイミングで生成していたのですが、生成の処理が重いらしくカクついてしまったので、ゲーム読み込み時に全て生成して無限遠方に置いておき、必要になった時に持ってくるようにしました。すると、一気に快適に遊べるようになったのが印象的でした。

開発中の苦労

 結構頭を使ったのが、譜面作成を簡単にできるようにすることです。10レーンに加えて色んな形のスライドがあるので、情報を圧縮して、シンプルな形式のファイルで表現できるように工夫する必要がありました。

 スライドの実装では、三角関数を駆使して、紙の上で傾きやサイズを計算していた記憶があります。数学が苦手なので、計算ミスがたくさんあって大変でした。

 一番苦労したのが、ホールド、スライド、フリックあたりの特殊ノーツの判定です。音ゲーは判定が命なので、遊んだ班員からフィードバックをもらいつつ、おかしな判定にならないように調整しました。

音ゲーはアーケードもアプリもそこそこ嗜んでいたので、その経験のおかげでスムーズに開発できた気がします。

おわりに

 さて、ここまで Ekscita 制作の裏話を書いてきましたが、いかがでしたでしょうか?
実際にプレイしてからまた読んでみても面白いかもしれません。

 そんな音ゲーアプリ "Ekscita" は、 App Store と Google Play Store で 10/30 に公開予定です!

楽しく遊べる音ゲーになるようにいっぱい工夫したので、ぜひ遊んでくださいね!

alt_text