譜面作成ツールを作ろう！【魔眼のアンナ ＃3】

気温の上下が激しくて微妙に気だるいこの頃です。
あまつさえ6月のくせに台風という……皆さまもお気をつけて～！

さて、今回はサークル『ろたたた！』さんで制作協力している魔眼のアンナについてです！

音ゲー部分の全面改修

まずはこちらを見てください！

おや？なんか前の記事で見せたゲーム画面となんか違うかも？ということに気づかれるかもしれません。

今後の拡張性を考えて、音ゲー部分を全面的に作り直しました。まだ改修途中なのでアンナなどのグラフィックは組み込んでいませんが、かなり音ゲーらしい雰囲気になったのが分かると思います。

では、なぜこのような改修になったのか振り返っていきます。

音ゲーらしくしたい

改修前のものは以下のような仕様になっていました。

• BPMに合わせてノーツをランダムで生成する
• ノーツを手動で拡大させながらスライドさせる疑似3D

ただ、せっかく音ゲーをやるからには、単にBPMに合わせてノーツを流すのではなく、曲の流れに合わせた譜面を作りたいよなあということで、その実現可能性を検証しました。

一番のハードルはノーツ位置の入力かなあ？と考えました。

自分たちで楽曲を制作しているわけではないので、音楽はフリーBGMなどを利用することになります。

しかし、手がかりのないところから何も補助機能なく譜面を作ろうとすると耳で音声ファイルを聞いて、どのミリ秒位置にノーツを置くかを手動で入力することになるんですよね。

これはちょっと面倒すぎて現実的じゃないなあと。

そこで、ウディタ内に譜面作成を補助するツールを作るところから始めることにしました。

3Dとして作り直す

譜面作成ツールを作るとなると、いくつか課題が生じます。

• 編集モードとプレイモードで2つ画面を作る必要がある
• シークバーを操作して譜面を飛んだり巻き戻したりできるようにしたい
• ノーツをマウスドラッグで直接置いたり消したりできるようにしたい

ただ、プロトタイプ版だとこれが難しいと感じました。特に、ノーツに対して直接拡大しながらスライドさせているため「譜面を巻き戻す」ような処理を組むのが極めて困難なわけですね。

そこで、内部を疑似3Dではなくちゃんとした3Dで作り直すことにしました。

3Dにすれば、カメラを切り替えるだけで「プレイモード」と「編集モード（真上から見たレーン）」とを切り替えられるなと思ったんですよね。

わざわざ別に2つの画面を作る必要がなくなるし、両者が完全に同一のロジックで動くのでバグも出にくくなるかなと。

また、ノーツ位置の調整や拡大縮小も、ノーツのZ座標をスライドさせるだけで実現できるので、譜面の巻き戻しなどの処理が作りやすくなります。

3D描写エンジン

覚えている人がどのくらいいるか微妙ですが、過去の記事で3Dを使ったゲームを試作してた時期があるんですよね。

これは結局作り進めてはいませんが、このときに組んだ3D描写エンジンをそのまま流用することができるので、制作工数的にも現実的にそこそこ実現可能性があるなあと。

ちなみに、冒頭の3D譜面や上記動画を見て「なるほど、ウディタは3Dを扱うこともできるのか」と思うかもしれません。

……できないんですよね、これが。

変数操作やピクチャの変形を駆使して3Dを扱うための処理を自分で作っているので、本来そういう機能は存在しないです。やってることはツクール2000とかで3Dを動かすのに近いかな。

もともと遊びのつもりで組んだ処理だったので、まさか現実的に採用することになるとは思わなかったな……。

でも、考えてみると音ゲーとは相性が結構いいんですよね。無理やり3Dを実現しているのでローポリ程度の表現が限界なのですが、音ゲーの譜面を表現するのにポリゴン数は必要ないので。

この辺りの技術的な解説もしたいけど、さすがに長くなりすぎるな。来週にでも息抜きがてら、また技術解説記事でも投げようかな？

進捗に関係ないどうでもいい記事になると思うので、それについては興味ある人だけ読んでください。

譜面作成ツール

ということで、先月はまず譜面の内部を3Dとして作り直したあとに、ちまちまと譜面作成ツールを組んでいました。

こんな感じ！！！です！！！！

ほぼ頭の中での想定通りに組めたので満足。まだまだ手を入れる場所はたくさんあるけど、現時点でも譜面を作成しやすそうなツールが見えてきたかなと思います。

ちゃんと内部的に3Dで動いてるので、実際こんな↓動かし方をするかはともかくとして、カメラの移動も自由です。

譜面作成ツールを作るメリットはもうひとつあって、先方（ろたさん側）でも譜面を弄れるようになるのも大きいですね。

『魔眼のアンナ』の企画はろたさん主導のものなので、私自身は音ゲーはそんなに触れてきてないんですよね。なので、譜面を弄れる人が多いに越したことは無いので、ツール制作は避けて通れないかなと思っていました。

あくまで自分たちの制作を楽にするためのツールなので、ユーザーさんが扱うことは現段階では想定していませんが、こういうツールがあれば、やろうと思えばオリジナル譜面を作る機能を入れられるのも面白いところ。

指定した位置の譜面を再現する

まあ3D処理として改修するのも大変だったのですが、その後の譜面作成ツールの設計もかなり頭を悩ませたので、その辺りの話をしてみます。

まず、改修前はノーツを直接動かしていましたが、改修後はその辺りのロジックを根本的に変えました。

再生位置を指定すると指定した再生位置の譜面配置を再現するように作り直して、ノーツを直接動かすのではなく、毎フレーム再生位置に合わせて譜面を再描写するよう作り直しました。

これのいいところは、シークバーの実装がめちゃくちゃ楽になる事ですね。あとは音ズレから譜面の位置を補正するのもかなり楽になりました。

ただ、その処理を作るにあたって「ゲーム内の経過フレーム」「BGMの再生位置」「ノーツの位置」という3要素をどう扱うか課題でした。

譜面をどう管理するか？

ウディタ側での画面更新のタイミングは、必ず経過フレームに沿うことになります。

そして、経過フレーム⇔BGM再生位置の変換については、1フレームあたり「1000ミリ秒/60FPS」ごとに再生位置が進行していくので、計算自体はそこまで複雑ではないです。

問題は、譜面ファイルに「ノーツの位置」をどう記載するかですね。

例えば、特定のミリ秒位置にノーツを置く、というように直接時間を指定してしまうと、後からBPMの指定ミスなどに気づいたときに、すべてのノーツの時間を書き換え直す必要が発生してしまいます。

で、勉強してみた結果MIDIファイルなんかで使われるtick値という概念が適していると考えました。

簡単に言うと、そのノーツが「何拍め」にあるかを記述する方法です。具体的な再生時間ではなく、拍数の位置だけを記録しているので、後からBPMを変えたり譜面を弄り回してもノーツの位置はズレません。

今回は480tick=4分音符として設定しました。

中途半端な数なのは、約数の多い数だからですね。このように設定すると

• 4分音符=480tick
• 16分音符=120tick
• 32分音符=60tick

というように細分化もしやすくなります。

例えば、簡略化した表記ですが、

• 480tick：タップノーツ（レーン1）
• 960tick：タップノーツ（レーン1）
• 1440tick：タップノーツ（レーン1）
• 1920tick：タップノーツ（レーン1）

と記述されていれば、4分の4拍子なら4拍連続でレーン1にタップノーツが流れてくることになります。

……伝わるかな？伝わらない気がするな。まあいいや。

ともかく「ゲーム内での経過フレーム」「BGMの再生ミリ秒位置」「譜面のTick値」を相互に変換する処理を描いて、指定した再生位置の譜面を手軽に再現できるようにしたわけですね。

技術的なお話、おわり。

エンタメ感想

以下、最近触れたエンタメの感想。

星を継ぐもの（小説・漫画）

SF小説ですね。自分はだいぶ昔に読んだことがあります。古い小説ですが、すこし前にXで話題になっていてひさびさに再読しました。

話題になっていたXの呟きから引用させて貰うと「月の裏で、死後五万年経過した、宇宙服をまとった死体を発見した。人類はまだ旧石器時代だったはずなのに」という導入のあらすじだけでめちゃくちゃワクワクするSFミステリなんですよね。

あらすじだけで面白そう、っていうのは自分ももう少し意識したいなあ。

ちなみに、自分がむかし読んだのは小説でしたが、今回調べたら漫画版が出てるのに気づいたのでこれも読んでみました。自分の感想としては、先に小説版を読むことをおすすめします。

元の小説は『星を継ぐもの』『ガニメデの優しい巨人』『巨人たちの星』と複数冊から成るシリーズもので、先ほど述べた謎解き要素が描かれているのが、1冊目の『星を継ぐもの』なんですよね。

物語としては1冊でもきちんとまとまっていて、以降のシリーズはその後に起こる政治劇などを書いた物語になります。

漫画版はこれら3冊をリミックスして漫画化しているのですが、謎解き部分はダイジェスト気味に流れて、政治劇の方に尺が割かれているんですよね。これはこれで面白くまとまっているのですが、「月に太古の人類の死体が、いったいなぜ！？」から始まるミステリとしては、小説単巻の方が満足感を得られると思います。

まあ『星を継ぐもの』はおっさんたちが延々と会議して考察や検証してる話なので、あまりにも漫画向きじゃ無さすぎるのは分かる。

先に小説を読んで、ビジュアル的イメージを補完する形で漫画も読んでみる順番の方がいいかなあと。

超かぐや姫！（映画）

前から話題になっていて気になっていたのですが、今年は忙しくてなかなかタイミングが無かったので、やっと見れました。

うん、めちゃくちゃ好きだなあ！！

まあ最新のエンタメなのでネタバレには触れませんが、自分もボカロなどサブカルをかなり経由してきている人間なので、題材自体がワクワクするし、ネトフリくんのマネーパワーか分からないけど作画も超絶クオリティで楽しい映画でした。

意外なのは、脚本については意外と賛否があるらしいことかな？

最新エンタメは自分で触るまで一切情報を踏まないようにしてるので、見たあとに感想を調べてみたら意外と割れてるなあと。王道にクオリティ高くまとまってるから、そんな荒れるような作品には見えなかったんだけどな。

ただ、考えてみるに、「ストレス要素」の扱い方について、結構実験的なことをしている脚本だなと思ったんですよね。

……とつらつら感想をまとめていたらめちゃくちゃ長くなってしまったので、自分の感想はfusetterくんに投げておきます。こちらはネタバレに触れていますが興味のある奇特な人はどうぞ。

• fusetter 超かぐや姫の感想

エンタメの感想を喋り始めるとすぐ長くなるなあ！！

おわり

ということで、今回は譜面作成ツールについてのお話でした！
かなり音ゲーらしくなってきたので満足！！

ちなみに以前は矢印型ノーツだったものが長方形ノーツに変わっていますが、これは3D化したら矢印自身にパースが掛かることで、かなり視認性が悪くなってしまったためですね。

特に既存の音ゲーを目指していたわけではないですが、最適化していく内に現代の音ゲーらしい外観に収まっていったので、多くの音ゲーでこういうUIが採用されているのには一定の合理性があるのだなあと思った。

エルローグもそうだったんですよね。思考停止で風来のシレンを模倣することはしたくなかったので、各要素が本当に必要かを考えながら制作していたのですが、結局合理的に突き詰めていくとシレンに近づいていったので。

偉大な先例には、そうであるだけの理由があるのだなと！

つぎは、上で述べたように技術的な解説記事になると思います。
それではまた！