「最新技術」で写真を譜面に変換するツールを作ってみた!

はじめに

こんにちは。ArqbeatプログラマーのKazuweeです。

いつもArqbeatを楽しみにして頂き、誠にありがとうございます!

このたびArqbeatチームは、ゲーム内で実装している譜面において、最新の譜面作成技術の開発に成功いたしました。

そこで今回、開発に成功した最新技術の一部をご紹介いたします!

Arqbeatチームが開発した「最新譜面作成技術」では、ライゼン的な何かが入った超ハイテクらしきペン(以下:ペン)と、どこのご家庭にもあるコピー用紙(以下:紙)が必要になります。

また、このペンは、Arqbeatのキャラクター「ラデック・テイル」が見える場所で使用を開始することが必要となりますが、通常の譜面制作陣のご家庭でも威力を発揮いたしますので、ご安心ください。

ペン(体温測定機能付き)

またこのペンには検温機能がついており、人間の場合は37.5℃以上だとインクが出ず仕事ができないようになっています。

このペンを使用し、ラデックくんが見える場所で、譜面内に登場させたい文字や記号を実際に書き出していきます。

今回は、「音ゲーに勝手に入れていいコンピ」#RGMES2 より、「ゴリラ大佐」で何故か頭の中で流れる「ゴリラ」を書き出しました。

譜面にしたいものを書き出したら、Arqbeat譜面制作陣が持っている「スマートフォン」らしきもの(以下:スマホ)を読み込ませます。
スマホを使い、に描いたものを細部まで読み込むことで、正確な譜面化が可能になります。
(※スマホのように見えますが、スマホです。)

トリミングや色の調整をスマホ上で行います。

データはスマホに入っているArqbeatの譜面制作ツールで読み込むことで実装が完了し、スキャンのみで譜面を作成することができる画期的な技術となっております。

最新技術による譜面がプレイ可能かもしれません!

今回、この「最新譜面作成技術」によって作成された譜面の楽曲が、2022年4月1日~4月15日の期間限定で「FORBIDDEN CHART」に登場するかもしれません!(本当です)

(追記:開発の遅れにより、予定が大幅に遅れています。リリース後に改めて日程をお知らせします)

運が良ければ、Arqbeatチーム渾身の譜面制作技術をお楽しみいただけるかもしれません!

さらに!最新技術を使用して制作中の譜面をちょっとだけご紹介!(実際の譜面と異なる場合がございます)

これからもArqbeatを、どうぞよろしくお願いいたします!

真面目な解説

元ネタは2016年のチュウニズムのエイプリルフールです。5年前…ウッ

簡単にですが仕組みを説明していきますので、ぜひお手元の譜面制作ツールに実装してみてください。実装報告待ってます。

説明用に「単位」と描かれた画像(32×64)を用意しました。

単位.png

この画像をエディタにて読み込み、読み取り条件を設定していきます。
エディタの構造が見たことある?気のせいじゃないかな

  • ノーツの判定条件(各ノーツ種ごとにRGBの範囲を入力)
    この条件をうまく設定すると、紙に書いたものを色反転させずに読み取ったり、路上のタイルをそのままタップに変換することができます。今回はデフォルト値である以下の値を使用しました。
    TAP : R>200 かつ G>200 かつ B>200
    FLICK : R>200 かつ G>200 かつ B<50
    TRACE(RED) : R>200 かつ G<50 かつ B<50
    TRACE(BLUE) : R<50 かつ G<50 かつ B>200
    HOLD : R<50 かつ G>200 かつ B<50
  • 飛ばし(1以上の整数値)
    ノーツとして判定したいオブジェクトが縦方向に広い場合(タイルとかマークシートとか)、間隔を開けて読み取ることで二重にノーツが生成されることを防ぎます。
  • 幅設定
    画像から読み取ったノーツをどの範囲に置くかを設定します。例えばArqbeatで真正面に幅いっぱいに置きたい場合は-90~90になります。
  • ノーツ間隔
    「何分音符」ごとにノーツを配置するかを設定します。例えば32だと32分ごとにノーツが配置されます。

全ての条件を設定し、「変換開始」を押すと読み取りが開始されます。

画像の一番下の行の、一番左の列から1列ずつ色を読み取り、各ノーツの条件に合致しているかの判定を行います。

この画像だと左から5px目のところでタップと判定されました。

そのまま右の列に移動して色を読み取っていき、直前の条件に合致しなかったところでそのノーツが途切れたと解釈します。この画像だと10列目がタップの条件に当てはまらなかったので、9列目がタップの途切れ、つまり右端と判定されました。

ノーツが終了した場合、左端pxの左端から右端pxの右端の幅をもつノーツを生成します。

これを繰り返し、1行の読み取りが終了したら、「飛ばし」設定した分だけ上の行に移動し、読み取りを繰り返していきます。今回は1なので、1行上に上がって読み取りをしていきます。

読み取りが終了すると、自動的にノーツが配置されます。
再生するとこんな感じ。光らせすぎですね。電光掲示板

使用例

以下、Arqbeatの配色に合わせ、「白=タップ」「黄色=フリック」「赤、青=トレースノート(スマホを傾けるノーツ)」「緑=ホールド」とします。

複雑な配置を絵に描いて配置できる

15に上がりましたね

たとえばこんな画像でContra何sso -inferno-みたいな配置が作れますし、

黄壁大炎上

こんな画像で赤い壁が大炎上するみたいな配置が作れます。黄色いけど

どこかから譜面画像を拾ってきて、そのままそれを再現できる

某譜面保管所とかからこんな画像を用意して(今回は作りました)(制作時間5分)

一体Daisy何tterなんだろう

読み込むとこんな譜面になります。この譜面むずすぎないか????

譜面のコピペが直感的になる

譜面をコピーする際に画像で書き出すことで、直感的に譜面を把握することができます。
引用配置を置くのがとても楽になりますね。

音ゲーの譜面みたいな写真を音ゲーの譜面にできる

適切に飛ばしとしきい値を設定することで、撮影した写真をその場ですぐに譜面に起こせます。

例えばこんな感じのマークシートを撮影して

譜面に変換するとこうなります。

みなさんも試験中に試してみてはいかがでしょうか。バレた際の責任はとりません。

まとめ

今回は5年前のチュウニズムのエイプリルフールネタを全力で実現させてみました。プログラムがクッソ汚いので公開しませんが、アルゴリズムは書いたとおりなので実装は簡単だと思います(ほんまか?)。全人類実装して軽率に譜面でお絵描きしよう!!