この章について

この章ではおそらくあるであろう質問や技術的な詳細、個人的な独り言をQ&A形式で綴っています。

おわび

色々雑で内容も十分ではないです。十分でないところは後で加筆します。

Q.エラーが出る

A.エラー内容によって対応が異なります。

既知のエラーに関しては以下の通りです。

  • 「このゲームは対応していません」
    • 対応するゲームに関する処理がみつからないとこのエラーが出ます。これは私の不手際なので不具合報告してください。
  • 「入力に誤りがあります」
    • 情報の入力が必要なゲームで誤った入力をしてしまう(例:DJMAXでプレイサイドの設定を忘れるなど)とこのエラーが出ます。入力を確かめたうえでもう一度実行してください。
  • 「ファイルの読み取りに失敗しました」
    • ファイルがお使いのブラウザで読み取れなかった時に出るエラーです。動画ファイルを選択したうえでブラウザがその動画のフォーマット・コーデックがあっているか確認してください。対応してない場合はファイルを使える形式に変換してください。大体の場合mp4、H264に変換しておけば動くはずです。
  • 「開始位置を検出できませんでした」
    • 譜面の始まる箇所を検出できなかったことによって発生するエラーです。様々な原因が考えられます。
      • ユーザー側の環境や使い方によるもの
        • 選択した動画が誤っている
        • ゲームの選択や入力に誤りがある
          →正しいものを入力してください。
        • 動画の解像度が低い・品質が悪い
          →フルHD以上の解像度、目で見てノイズや劣化がほぼ目立たないような設定にして動画をとりなおしてください。ただしこれによって著しくフレームレートが落ちる、カクつく場合は端末が限界なのであきらめてください。
        • 検出に利用している特徴にゲーム外のインターフェースが重なっている
          →検出に利用している特徴の上に、画面録画ツールのウォーターマークやナビゲーションバー、AssistiveTouch等が重なると検出ができない場合があります。映り込まないような設定などにしたうえで再度撮りなおしてください。
        • 動画編集によってクロップされている
          →元の動画から動画編集等によってクロップすると検出できないことがあります。無編集のものを利用してください。
        • 録画の開始位置が途中から
          →最初から映るように撮りなおしてください。
          • 指定された設定・モード・撮影方法になっていない
            →本ガイドで指定しているような設定にしないと正しく検出・処理できません。ガイドを読み直してください。
        • 古いバージョンのゲームを利用している、または古いバージョンの動画を利用している
          →最新バージョンのものを利用して動画を撮影してください。古いバージョンには対応してないことがあります。
      • ゲームの仕様変更によるもの
        →極力気づけたタイミングで対応させておくつもりですが気づいて無さそうなら教えてください
      • ゲームの特殊演出や把握していない特殊なモードによるもの
        →すべてのゲームに精通してるわけではないので説明書きに書いてなくても使えないモードや特殊演出等があるかもしれません。その場合私に教えてください。ただしそのモードや演出を把握しても対応させずガイドへの追記で終わる可能性があることがあります、ご了承ください。

上記以外の不明なエラーに関しては多分私の不手際だと思うのでエラー内容を添えて不具合報告してください。

Q.既知の不具合について

A.
(修正済は表から消します)

不具合内容対応状況詳細
終了して続けて別の動画を処理した際エディタのズームがバグる積極的に修正ズームしなおすことで戻る
エディタの設定ボタンが無反積極的に修正-
iOSでPicture in Pictureを出してるときにエディタをスクロールすると挙動がバグる修正予定調査中
一部ブラウザのナイトモード等でトップビューの動画がバグる修正予定無し-
プロセカ関連の不具合-別記
Android Firefoxで低速モードで処理した際進行不可になる修正予定無しブラウザのバグに起因するため修正不可、Mozillaさんによる修正待ち
一部ブラウザで起動時にセルフ譜面保管所を開いていると「問題が発生しました」などと表示される、あるいは勝手にリロードが入る修正予定無し修正方法の検討がつかないため予定無し、ブラウザのタブを閉じることで対処可能

Q.プロセカ関連の不具合について

A.慎重に修正を進めます

プロセカでのみ、画像のクオリティに関する不具合を多く抱えています。これはほかのゲームと異なる合成方法をしていることが原因で、具体的には重複部分を含むスティッチングをしていることに起因します。
これの理由はプロセカのフリックの矢印にあります。 フリック挙動サンプル
プロセカのフリックの矢印は
下側から不透明な状態で出現→上に移動しながらだんだん透明になる→消滅(→最初に戻る)
これを0.5秒のスパンで繰り返す挙動をします。厄介なことにこれが動くのです。それだけならまだしも、完全に消える・ほぼ消えている瞬間があるのです。これを考えずにほかのゲームと同じように処理するとこうなります。
フリック挙動サンプル ノーツの見た目はきれいですが、本来あるはずのフリックの矢印の一部が消滅してしまっています。フリックの矢印がないと方向が分からないのはもちろん、金フリックの場合は金タップ・終点、あるいは金トレースとの見分けがつかなくなります。このままではいけませんねぇ...
問題はこれだけではなく、ノーツは手前から奥に傾いて見えるような平面、つまり我々から見て奥に傾いてる平面上を流れる訳ですが、フリックの矢印(とトレースや中間点の粒)だけ我々が見ている面と水平な面に存在するのです。要は矢印だけ違う平面を生きてるわけです。なのでノーツのある平面から全てを捉えようとするとフリックの矢印だけ正しくない捉え方になってしまい、本来の矢印の角度とは異なる見え方になってしまうのです。厄介ですねぇ...

譜面保管所さんも同じ問題に直面していたようです

譜面保管所 (@sdvx_in)  ポスト

プロセカオートプレイ出来るようになったから動画抽出
フリックが場所によって描写されない問題をなんとかしたい

画像

この問題について様々なアプローチで解決を試みました。開発期間の3,4割はこれをどうするか考える期間だったといっていいほど悩みました。しかし端末の環境差やソフラン・仕様や処理コストなどの要因によってすべてのアイデアは塵と化しました。これ以上考えても時間が過ぎるだけだと考え、最低限フリックがあることを視認できればいい、向きがおかしかったり形がいびつだったりしてもしょうがないという考えのもと、重複する部分を含め見えたものを全て合成するという方法をとりました。(譜面保管所さんにこの問題をどうしてるかとても聞きたいなどと思っており)
しかしこの方法にもまた別の問題があり、移動距離の計測誤差によってノーツが二重になってしまう、特有の演出用のソフランや疑似停止等でロングが余分に描写される等の別の問題が発生し、その対策も手つかずのまま今に至ります。

長ったらしい言い訳をしましたが不具合をまとめるとこんな感じです

(修正済は表から消します)

不具合内容対応状況詳細
フリックの矢印が正しい方向を向かない慎重に修正前述のとおり
フリックの矢印の形がおかしい慎重に修正前述のとおり
ノーツが重なって合成されてしまう慎重に修正前述のとおり
演出用のソフランや疑似停止で合成がうまくいかない慎重に修正前述のとおり

慎重に修正するとはしているもののアイデアがないとほぼ修正されないと思います。アイデア募集してるのでいい感じの思いついたら送ってほしいです...

Q.不具合報告や質問はどこにすればいいか

A.X宛にDMかメンションしてください
専用のフォーム等は設けません

Q.今後の改善・機能追加について

A.
(全て実装されるとは限りません)

  • BPMや拍子にかかわらず小節線や拍線を自由に追加・削除・移動できるように
  • 特殊な状況に対応できるような詳細オプション等の導入(現在自動化している処理の一部を手動でできるようにするなど)

Q.AIの使用について

A.部分的に使用しています(ChatGPT,Gemini)。技術力的な問題でどうしようもなかったところと面倒だったところの数か所。大体は手書きです。

Q.このプロジェクトに加わりたい・派生プロジェクトを制作したい

A.無断コピーやハック等は禁止ですが派生プロジェクトの制作は認可したいと思います(要相談)
本プロジェクトはオープンソース、ライセンスフリーではありません。無断でコピー・クローン・改変する等の行為はお控えください。
一方で相談したうえでの派生プロジェクトの作成は条件付きでOKにするつもりです。コードの提供もします。
このプロジェクトに加わりたい場合、それはできません。
本サイトにインスピレーションを得て新規に作成する場合、私への許可不要で作成して構いません。

Q.仕組みや技術的な詳細

A.

  • 動画のフレーム抽出
  • 開始位置検出
  • レーン検出
  • (レーンを平面に引き伸ばす)
  • 移動距離を計算
  • 透過・合成

これらを全てブラウザ上で行っています。
moduleやWeb Worker、Class、Node.jsとかいうよくわからないものは使いたくないので使ってません。開発環境はVSCode、Chrome。 動画の処理にMediabunnyを使っています。スーパー感謝
コードは小学生の工作クオリティなので人に見せられたものではありません。見ないでください(願望)

Powered by Doctave