はじめてのPrprNode
目次
- PrprNodeとは
- この記事のターゲット
- ノードグループ一覧画面
- ノードグループを作成する
- ノード編集画面
- ノードの配置・接続をする
- ノードの値をセットする
- 実行する
- 改造してみる
- マウス座標を取得する
- 再度実行する
- PrprLive上で実行する
- 最後に
- 注意点
- おまけ１：基本操作
- おまけ2：ノード詳細
PrprNodeとは
PrprNodeとはPrprLive（フェイストラッキングによりLive2Dキャラクターを動かすソフト、要はFaceRigのようなもの）のDLCとして1700円ぐらいで販売されているノードベースプログラミングシステムです。
これによりPrprLive実行中にキー操作による画像表示や音声の再生などができるようになります。
この記事では作例としてキー操作で画像表示する処理を作成し、PrprNodeの基本的な使い方を説明していきます。
この記事のターゲット
PrprNodeを買ってみたけど使い方がわからん・・・。又はPrprNodeの導入を検討している人です。
ノードグループ一覧画面
PrprNodeを使用するにはPrprLiveの左側のメニューの下から2番目のボタン（下の画像参照）をクリックします。
ノードグループ一覧画面は以下のような構成となっております。
１．ノードグループ：作成したノードプログラムのひとかたまり。ここで作成されたファイルは「Steam\steamapps\common\PrprLive\PrprNode」フォルダに保存されています。
２．有効化ボタン：このチェックを入れることで作成したノードグループをPrprLive内で使用することができます。
３．新規作成：新しいノードグループを作成します。
４．ノードグループファイルをインポートできるはずですが。現在不具合なのか機能していません。
５．PrprNodeエディタを終了します。
ノードグループを作成する
一覧画面の新規ボタンを押して新しいノードグループを作成します。グループ名は分かりやすい名前を付けておきましょう（一覧画面から変更することもできます）
ノード編集画面
作成したノードグループをクリックすると編集画面に入ります。ノード編集画面は以下のような構成となっております。
１．ノード：
処理やデータを表すブロックです。処理を行うためのノードには矢印のマークが、データを表すノードには丸いマークがブロックの左右に付いています（両方あるノードもあります）
２．ライン：
ノードの接続を表すラインです。
３．リソースエリア：
クリックすると画像や音声ファイルを選択するエリアが表示されます。
４．ブラックボード：
変数に値がセットされるとここに表示されます。今回の記事では扱いません。
５．再生・一時停止・停止ボタン：
作成中のノードグループの実行・停止をすることができます。
６．保存ボタン：
作成中のノードグループを保存します。自動保存はされないのでこまめに保存しましょう。
７．削除ボタン：
配置されているノードをすべて削除します（ノードグループ自体の削除は一覧画面から右クリックで行います）
８．戻るボタン：
ノードグループ一覧画面に戻ります。
ノードの配置・接続をする
編集画面で右クリックすると出てくるメニューから「Create Node」を選択してリストから「蝕发节点（イベントノード）＞ KeyCodeNode」を選択するとKeyCodeNodeが配置されます（リストの上部にある検索窓でKeyCodeNodeと入力して探しても良いです）
同様の手順で
「媒体节点（メディアノード）＞ TextureNode」
「媒体节点（メディアノード）＞ ShowTextureNode」
「数据节点（データノード）＞ PositionNode」
を画面に配置し、それぞれの接続点を画像のように繋げましょう。
ノードの値をセットする
いま設置したPositionNodeにはそれぞれXYZの座標を設定できるので。Xに600、Yに400ぐらいの値を設定します。もしくは「获取」ボタンを押してから画面をクリックするとその座標がセットされます。
次にTextureNodeに画像をセットします。 画面下部のリソースエリアをクリックしてSelect Folderアイコンをクリックし、画像ファイルのあるフォルダを選択するとフォルダ内の画像ファイルが表示されるようになるので、表示させたい画像をTextureNodeまでドラッグします。
実行する
作成中のノードグループを実行するには画面上部の再生ボタンをクリックします。
実行状態になったらキーボードのスペースキーを押すと画面にTextureNodeにセットした画像が表示されます。
停止するには画面上部の停止ボタンをクリックします。
改造してみる
おめでとうございます！！あなたはPrprNodeの第一歩を踏み出しました！！ オートセーブは無いので作ったノードグループを作ったら忘れずに保存しておきましょう。
これで完成でもよいのですが、せっかくなのでひと手間加えて見ましょう。ここでは一定時間ごとに画像がマウスカーソルの位置に移動するようにします。
まずは以下の画像のようにノードを追加して接続しましょう。
追加した各ノードの説明は以下の通りです。
MoveNode：
功能节点グループの中にあります、オブジェクトを移動させるためのノードです。ここでは2秒間かけて先ほど表示させた画像を移動させるようになっています。
TriggerNode：
蝕发节点グループの中にあります、指定した時間経過後、または一定時間ごとにイベントを発生させるノードです。ここでは1秒ごとにMoveNodeの処理をするように設定しています。
マウス座標を取得する
次に新規ノードを追加し以下のように接続します。
各ノードの説明は以下の通りです。
MousePositionInverseLerp：
数据节点グループの中にあります、画面の左下を(0.0, 0.0)、右上を(1.0, 1.0)として、現在のマウスの位置を出力します。
Split(Vector3)：
逻撂节点（Vector3）グループの中にあります、Vector3のX,Y,Zの値をFloat値として出力します。ここではマウス座標のXとYを分離するために使っています。
LerpNode：
逻撂节点（Float）グループの中にあります、Tには0.0～1.0の値を入力し、From～To間の値をTの値に応じて出力します。例えばFromに0、Toに1000、Tに0.8と入力した場合は800を出力します。
ここではそれぞれToの値に1280と720を入力してMousePositionInvertLerpで取得したX,Yの値をPrprLiveのウィンドウサイズに合わせて変換するために使っています。
Combine(Vector3)：
逻撂节点（Vector3）グループの中にあります、X,Y,Zに入力したFloat値をVector3型に変換して出力します。
ノードの配置が出来たらマウスドラッグでこれらのノードを選択し、右クリックメニューから「GroupNode」を選択すると、以下の画像の様にノードがまとめられ名前や説明が付けられるようになります。
まとまった処理はこのようにグループ化するとノードの整理がやりやすくなります。
再度実行する
先ほど作成したグループのCombine(Vector3)のValueを以下の画像のようにMoveNodeのPositionに接続します
再度実行ボタンを押してスペースキーを押すと以下画像の様に、表示された画像が一定時間ごとにマウスの位置に移動するようになります。
ちゃんと動くことを確認したら保存してノード編集画面から抜けましょう。
PrprLive上で実行する
ノードを実際に使うためには、ノード一覧画面で以下の画像のようにノードグループ右上のチェックボックスをクリックしてチェックを入れます。
PrprLiveの画面に戻りスペースキーを押すと、作成したノードグループが実行され画面上に画像が表示されます
最後に
以上でPrprNodeの作成は一通り完了となります。今回使用したもの以外にも様々なノードが用意されているのでそれらを使えば音や映像を流したり、より複雑な動きをさせることも可能になります。
ただし、後述しますがいくつか不具合があるようなので現時点でPrprNodeModを購入することは強くお勧めできるものではありません。
上記了承したうえでLive配信画面にちょっとした変化を持たせたいのならばPrprNodeを使ってみるのも良いかと思います。
注意点
・prprNodeのキー取得イベントはPrprLiveがアクティブな時でないと動かない、キー送信ソフト（WinKeySend）を使ってバックグラウンド状態の時にキー送信してもダメだった。
※2021/3/26のV1.4.6アップデートにて、非アクティブ時でもキーボードイベントを受信できるようになりました。
・prprNodeのノードはビリビリ動画に連携していること前提の物がそこそこあるため。連携していない状態ではキーボードを押して画像表示、音声再生するぐらいしかできない。
・編集中にノードの接続ができなくなる、保存に失敗するなどそもそも動作が不安定
・保存したノードグループが表示されなくなるなどのトラブルも発生した（作成したノードグループの一つが悪さしていたようでそれを消したら解消した）
おまけ１：基本操作
クリック：ノードやメニューの選択
ドラッグ：ノードの移動や接続
右クリック：メニュー表示
ホイール：カメラのズームイン/アウト
ホイールドラッグ：画面移動
CTRL+C：コピー
CTRL+V：ペースト
CTRL＋Z：アンドゥ、リドゥはなさげ
ALT＋右ドラッグ：横断したラインを消す（右クリックメニューのCutLineと同じ）
右メニュー
Create Node：新規ノード作成
Paste：貼り付け
CutLine：選択後に右ドラッグで通り過ぎたノードの線を消す
ノード選択時の右メニュー
Copy：コピー
Remove：削除
GroupNode：複数選択時にグループ化する
UnGroupNode：グループ解除
BlackBoardについて
BlackBoarとはSetVariableノードでセットした変数が表示される場所。
変数をCTLR+ドラッグでGetVariableノードを、ALT+ドラッグでSetVariableノードを作れる
おまけ2：ノード詳細
各ノードの説明をGoogleスプレッドシートにまとめています（作成途中） 以下のリンクより開いてください。
Googleスプレッドシート：prprNodeについて