Vibe Codingの素振りも兼ねて、EVO-X2上で動かしてるQwen3-Coderの力を借りてレバーレスコントローラのボタン配置図の画像ファイルを作成できるウェブツールを作成してみた。
Vibe Coding作業がどうだったとかの技術面の話は別に書くとして、今回はひとまず作ったものの紹介をば。
追記: 書いた
何のためのツール？
従来の格闘ゲームのアケコンタイプのコントローラでは、４列２行のボタンが並んだ（移動を除くと）８ボタン構成が一般的だった。
ストリートファイターシリーズでは弱・中・強のパンチとキックの６ボタンが基礎としてあって、残り２ボタンにお好みでボタン同時押し機能を付与するという使われ方をしていたのだが、あくまでオプショナルなものであり同時押しボタンはそこまで重要度が高いものではなかった。
だが、最新作のストリートファイター６ではドライブインパクト（DI）・ドライブパリィ（DP）の役割が大きいこともあり、精密な動作に不向きな小指位置以外にボタンを配置しようという試みがなされるようになった。（＋それ以外にも使用キャラによって欲しくなる同時押しボタンがあったりする）
デバイスメーカー各社が競うように様々なレイアウトの製品をリリースし各プレイヤーもそこに工夫を凝らしたボタン設定を行っているのが現状であり、プレイヤーコミュニティーでも他人がどんなボタン配置にしているかというのは一つの大きな関心事だったりする。
ただ、文字ベースで配置を説明するのは意外と難しかったりするし、コントローラの写真を撮って文字を載せても見辛い。
そこで、フォームに入力することでボタン配置図の画像ファイルを作成できるツールを作成してみた。
使い方
最初にボタンレイアウトを選択。
メジャーどころの機種はテンプレートとして選べるようにしておいた。
適合するものがないとか、あるいは独自に増設している場合は下部の「Add Button」ボタンを押すことで追加できる。
ボタンサイズとX・Yの位置調整を行おう。
ボタン名の部分をクリックすることで設定項目を開くことができる。
不要なボタンであれば「Remove」ボタンで取り除くことができる。
「Label」項目にボタンの役割を入力するとプレビュー画面にも反映される。
満足いく形にできたらプレビューの下の「Download as PNG」ボタンから画像ファイルとしてダウンロードできる。
実際に使ってみた
Rushboxで使ってる（クラシック操作時の）配置。
