Theme
↑Back to Home

キー/マウス入力を可視化するNohBoardの紹介

ゲームのプレイ動画や配信で見かけるキーボード/マウスの入力を可視化したインジケータを表示するツール、NohBoardを紹介します。OBS等の録画・配信ソフトウェアと組み合わせて使用します。

ダウンロードとインストール

NohBoardには「NohBoard-ReWrite」と「NohBoard」の2種類があり、無印の方は現在は更新が終了しています。
最新版のNohBoard-ReWriteはgithubのリリースページからダウンロードできます。

インストールは任意の場所に展開するだけです。

用語

  • 要素(Element)
    • メインウィンドウに配置される各キー/ボタンに対応した個々の表示単位を指します。
    • 3箇所以上の任意の数の頂点で表される多角形です。頂点の位置はメインウィンドウの左上を原点とした絶対座標で指定します。
  • 定義(Definition)
    • 要素の位置・形状や対応するキー/ボタンなどの設定を指します。JSON形式で「keyboard.json」のファイル名で保存されます。
  • スタイル(Style)
    • 要素の色やフォント・背景画像など見た目に関する設定を指します。JSON形式で「(任意のスタイル名).style」のファイル名で保存されます。
      一つの定義に複数のスタイルを紐付けておける他、全ての定義から利用できる共通スタイルも作成可能です。

設定項目

設定にはメインウィンドウのコンテキストメニュー(右クリックメニュー)からアクセスできます。

共通/通常モード

Setitngs

ツールの共通設定を行います。

  • Mouse sensitivity
    • マウスの移動量を取得する際の感度(高いほど敏感)
  • Scroll hold time
    • マウスホイールの回転を連続した回転と見なす間隔(恐らくミリ秒/この値以下ないし未満の時間内に次の回転を検知すると連続した回転と見なされる)
  • Caluculate mouse speed from center of screen
    • マウスの移動量を画面の中央からの移動量を元に算出する
  • Follow Caps-Lock and Shift
    • CapsロックおよびShiftキーの押下に連動してキートップの表示を切り替える
  • Show all buttons capitalized
    • 全てのキーを大文字の設定内容で表示
  • Show all buttons lower-case
    • 全てのキーを小文字の設定内容で表示
  • Still follow shift for: Caps Lock insensitive keys
    • Element Propertiesで「Change capitalization on Caps Lock key」が無効な要素のみShiftに連動させる
  • Still follow shift for: Caps Lock sensitive keys
    • Element Propertiesで「Change capitalization on Caps Lock key」が有効な要素のみShiftに連動させる

Load Keyboard

定義とスタイルを選択して設定を読み込みます。
設定ファイルはNohBoardの実行ファイルと同じ階層にある「keyboards」フォルダの中に保存されており、以下のように階層構造とファイル名がカテゴリー・定義・スタイル名にそれぞれ対応しています。

Start Editing(通常モードのみ)

編集モードに入ります。

Save Definition

その時点で表示されている定義の内容を現在開いている定義に上書きするか、新しく名前をつけて保存します。
CategoryとName(Keyboard Definitionを指す)はLoad Keyboardの項で説明した通りです。

Save Style

その時点で表示されているスタイルの内容を現在開いているスタイルに上書きするか、新しく名前をつけて保存します。
全ての定義から利用できるglobal styleとして保存することもできます。

編集モード

編集モードではコンテキストメニューが拡張され、要素自体や要素の辺・頂点をクリックで選択できるようになります。メニュー項目は要素等の選択状態に応じて変化します。
要素の移動・要素への頂点の追加・要素の変形(辺や頂点の移動)も可能です。移動はカーソルキーで1pxずつ微調整することができます。
「Ctrl+Z」で変更のUndoが可能です。

Stop Editing

編集モードを終了して通常モードに戻ります。

Update Text Position

要素を編集した場合にテキスト座標を自動で補正するかどうかを切り替えます。

Add Element(要素非選択時のみ)

各種要素を新規に追加します。
「Keyboard Key(キー)」「Mouse Key(マウスボタン)」「Mouse Scroll(ホイールスクロール)」「Mouse Speed Indicator(マウス移動量インジケータ)」の4種類があります。

Move(要素右クリック時or要素選択時のみ)

要素の表示優先順位(重なりの順序)を調整します。

Remove Element(要素右クリック時or要素選択時のみ)

要素を削除します。

Add Boundary Point(要素辺右クリック時or要素辺選択時のみ)

頂点を追加します。(クリックした位置に追加されます)

Remove Boundary Point(要素頂点右クリック時or要素頂点選択時のみ)

頂点を削除します。

Keyboard Proroperties

ウィンドウサイズを「幅:高さ」で設定します。
編集モードでは直接ウィンドウサイズをドラッグ&ドロップで調整することも可能です。

Element Proroperties(要素右クリック時or要素選択時のみ)

要素の設定を行います。
要素の形状は任意の数の頂点の多角形です。頂点の位置はメインウィンドウの左上を原点とした絶対座標で指定し、頂点リスト上の順番に結ばれます。
また要素には画像(通常時/押下時それぞれ設定可)を使用することができ、メインウィンドウの背景色と合わせておけばクロマキー合成で透過させることができます。(画像関連は理解が中途半端なため現時点では解説しませんが、標準で同梱されている「joao7yt」のファイル構成を参考にするとよいでしょう)

  • Keyboard Key(キー)

    • 「表示テキスト(通常時)」「表示テキスト(Shift押下時)」「テキスト座標」「頂点座標」「Caps Lock時にShift押下時の表示に切り替えるかどうか」「対応キーコード」を指定します
    • キーコードはこちらのリスト等を参照のこと
    • 対応キーコードを複数指定した場合は指定された全てのキーが押された場合に反応するようになります
  • Mouse Key(マウスボタン)

    • 「対応ボタン」「表示テキスト」「テキスト座標」「頂点座標」を指定します
  • Mouse Scroll(ホイールスクロール)

    • 「対応する方向」「表示テキスト」「テキスト座標」「頂点座標」を指定します
  • Mouse Speed Indicator(マウス移動量インジケータ)

    • 「中心座標」と「半径」を指定します

Keyboard Style

標準のスタイルを設定します。
ここで設定したスタイルは全部また一部を要素毎のスタイル設定で上書きできます。

  • Keyboard
    • 要素の背景色または背景画像を設定します。OBS等でクロマキー合成を行う場合は色を合わせます。
  • Loose Keys/Pressed Keys
    • 要素の背景色・背景画像・フォント・文字色・外枠の有無と色/太さを設定します。Looseが非押下時、Pressedが押下時です。
  • MouseSpeedIndicator
    • マウス移動量インジケータの色と外周のリングの太さを設定します。Color1は基本色、Color2は移動量が大きい場合の移動量ゲージと方向ブリップの色です。移動量ゲージと方向ブリップは移動量に応じてColor1と2がブレンドされた色で表示されます。

Element Style(要素右クリック時or要素選択時のみ)

要素のスタイルを設定します。Overwrite default styleチェックボックスをオンにすると標準のスタイルを上書きします。
内容はKeyboard Styleの各Keysの設定項目と同じです。

留意点

  • ゲームによっては一部または全ての機能が動作しない場合があります。
  • Robocraftではマウス移動量インジケータが正常に動作しません。

OBSを使用したクロマキー合成の手順

  1. ソース欄の左下の「+」ボタンからウィンドウキャプチャ等でNohBoardをソースに追加します。
  2. ソース欄に追加されたNohBoardの項目を右クリックし、コンテキストメニューから「フィルタ」を開きます。
  3. フィルタウィンドウの左下の「+」ボタンから「クロマキー」を選択します。
  4. クロマキーの設定項目から「色キーの種類」をNohBoard側で指定した透過色に合わせます。また必要に応じて不透明度やその他の値を調整します。
  5. 「閉じる」ボタンを押して設定を抜け、メインウィンドウで位置・サイズを調整します。
Share on Twitter