こちらの記事はVCI Advent Calendar 2023のカレンダーの第17日目の記事です。
2023/12/20にスタジオのモニターカメラの相対的固定位置に配置するluaサンプルを追加しました。
はじめに
何名かの方がバーチャルキャストでゲーム配信をやっていますが、もっと増えてほしいのですよ。
そして配信する方によって画面レイアウトや、やり方も異なっています。
どれが良いとか悪いとかでは無く、個性が出ていて楽しいです。
にゃふ屋のゲーム配信のやり方とか書いておきますので、ゲーム配信やってみたいって方のご参考になればと思います。
ゲーム配信のレイアウト
よく見るゲーム配信者さんのレイアウトはこんな感じでしょうか？
ゲーム画面は権利関係とかいろいろ有るのでサンプル画像になっています。
１．PCの画面を出してVキャス内で見ながらプレイする
２．全画面でゲームを映してアバターをかぶせる
３．OBSなどの配信ソフトでグリーンバックを使用する
ゲームの上手な方、しゃべりの上手な方はどれを選んでも大丈夫だと思います。
にゃふ屋の配信環境は３．のレイアウトを使用しています。
こちらのレイアウトでの配信方法を説明していきたいと思います。
ゲームをどうやって配信に映すか？
バーチャルキャストでは配信にゲームを映す方法はいくつかあります。
どれも一長一短があるので好みで良いかと思いますが、今回はOBSを使用した配信を選びました。
理由はこの二つ。
・キャプチャ画面のどちらでも同じように配信画面に映すことができる
・すでに使用しているので、設定の変更が楽だった
他でもできますが、使っていたので設定をすこしやるだけなのは大きいのです。
Vキャス内にデスクトップを出してリスナーさんと共有することでも同じ感じになりますが、ゲームが吹っ飛んだと気にデスクトップにやばいアイコンなんかが見えちゃいそうで怖いです。
うちには危険なアイコンなんかありませんけどね(｀・∀・´)ｴｯﾍﾝ!!
とにかくやってみる
OBSのグリーンバック機能を使うために、Vキャス上にグリーンバックを出す必要があります。
緑色の画像をVCIに入れてカメラの前に出せばOKです。
簡単ですね。
と思いましたが、緑って何色？（混乱）
最初は適当に作ったグリーンバックをVCIを作成して出してみました。
スタジオで水平、垂直に綺麗に置く、しかもカメラと平行にしないと画面がずれる。
気合で良い感じの位置に置いても、次回の配信でもう一度やり直し。
カメラの向きを変えるとやりなおし。
やってられないですね。 _(:3」∠)_
できないことはVCIで解決する
そこでVCIでグリーンバックの機能を持たせたものを作りました、かなり前に。
機能としては以下のものが入ってます。
・GBを出すとカメラと平行な位置に出てくる
・カメラの中のGBは決まった位置に現れるのでカメラを移動してもOK
・OBSのグリーンバックを使用するとかなり色範囲が広く透明になるので、カラーフィルターを使用
・おまけにコメビュとかネームプレートの並べ替えとか入ってます（本当はコメビュがメインです）
こちらのVCIはスタジオのみ対応です
使い方
・水色のキューブをUseする
・メニュー画面を5/5にする
・GB ONをUseする
・モニターカメラの正面すこしずれた位置にグリーンバックがあらわれます
・OBSの設定をする
OBSのソースの中にVirtualCastの画面、その下にキャプチャしたい画面、最後の画像は背景用です。
グリーンバックを使用するときは、VirtualCastの上で右クリックしてメニューを出しフィルタを選びます。
カラーキーを追加して、画像のような値で設定します。
使い方によってゲーム画面が暗くなったりする場合には変更してみてください。
ポイントはキーの色を#004400に設定することです。
VCIで出しているグリーンバックのカラーコードが#004400なので、その周辺の色だけを透過するようにしたものです。
同じようなものにクロマキーがありますが、デフォルトの設定だとかなりの広い範囲で透過するので、コメントが透明なったりします。
おすすめはカラーフィルターの色指定です。
OBSの画面を確認してみましょう
OBSの画面にはグリーンが透過されて、キャプチャしたい画面が写っていると思います。
このグリーンバックはディスプレイカメラの位置と向きを取り込んで、カメラと相対的に同じ位置に出るように調整しています。
ディスプレイカメラを移動したときは、もう一度GB ONをUseすると位置が補正されます。
これでゲーム配信ごとにグリーンバックの位置決めや、OBSに映るゲーム画面の調整がいらなくなります。
GBの位置ですが、私が適当にやったものでゲームの比率によっては小さいと感じるかもしれません。
私が配信するゲームでは特に困っていないので、このくらいで丁度良いと思ってます。
もし比率を変えたい、GBの位置をもっと前or後ろにしたい等ありましたら、簡単なVCIなので作成に挑戦してみてはいかがでしょうか。
(2023/12/20追加）
いかがでしょうか、ではなくてサンプルコードくらいは入れようね。
ということでサンプルコードと説明を一番したに追加します。
これからゲーム配信をバーチャルキャストでやってみたい方のご参考にでもなればと思います。
あとがき
今回はコルーチンの使い方とかを説明しようと資料を作成していたのですが、バーチャルキャストの旧Wikiと今のwikiでサンプルコード変わっていることに締め切り3日前に気づきました。
結構難しい話だったので修正をあきらめて、ゲーム配信のお話に変更したというバタバタがありました。
書いてみるとバーチャルキャストでゲーム配信は大変だっていうことを改めて感じましたよ。
配信している本人の見た画像はこんな感じにぐちゃぐちゃになっています。(￣▽￣;)
おまけ：ゲームの音はどうする？
ゲーム音を自分で聞きながら配信にのせる方法はいろいろあります。
ただ、機材、ソフトなどの環境によって変わってくるので説明が難しいです。
私はゲーム音をステミキで取り込んでハード側で処理して配信しています。
割と力技ですね。
ネットで調べるといろいろとやり方があるようなので、キャプチャと環境にあったやり方を調べてみてくさい。
モニターカメラと相対的な固定位置に画像を出すVCIを作ってみる
モニターカメラを移動するたびに画像を移動するのが面倒なので、相対的な位置固定用VCIのサンプルです。
グリーンバックを仕込めばグリーンバックになりますし、画像を入れれば常にモニターカメラから同じ位置に画像が出るようになります。
サンプルなのでVCIを出した後にモニターカメラを移動した場合は、VCIを出しなおしてください。
時間で再実行、Useで位置調整のような機能を追加するのも良いですね。
ついでに、VCIで撮影した画像を良い感じの比率で表示できるようにしてみましょう。
(2023/12/20に追加した項目です）
SubItemでPleneを設定すます、駆け足で行きますので詳細はVCIのチュートリアルとかで見てください。
手順１，UnityでVCI作成環境を作りましょう
手順２．HieraruchyでSampleVCIを選んでVCIObjectを作成します
手順３．SubItemに有るCubeは削除
手順４．VCIObjectの下にPlaneを出して、SubItemにします（MeshColliderは削除
手順５. Box Colliderを設定して、チェックボックスは画像を参考にしてください
テクスチャにバーチャルキャストで撮った画像を設定する。
手順１．Assetsにマテリアルを作ります、名前は"Syasin"にしました
手順２．マテリアルのShaderをVRM/MToonに他の設定は下の画像を参照してください。
手順３．バーチャルキャストで撮った画像をAssetsにドラッグ＆ドロップ
手順４．マテリアルのTextureの左の■2個に手順３.の画像をドラッグ＆ドロップ
手順５．マテリアルをHieraruchyの先ほど作ったPlaneにドラッグ＆ドロップ
ここで画像が正方形になっていますが、Luaで比率を調整するのでそのままで大丈夫です。
Luaを入れたVCIを出力して、バーチャルキャストへ投稿
手順１．HieraruchyのVCIObjectを左クリック
手順２．Title,Authorを設定（テストだけならこれだけでもOK）
手順３．ScriptsのSourceに下のLuaを貼り付け
手順４．VCIを出力してバーチャルキャストへアップロード（ToolKitsがおすすめだそうです）
--****************************************************************************
-- スタジオのモニターカメラの相対的固定位置に配置するluaサンプル
--****************************************************************************
-- このluaではVCIを出したときにモニターカメラから見て相対位置に画像を出します
-- モニターカメラを動かしたときはVCIを出しなおしてください
-- 画像の入ったサブアイテムを指定
local Gazou = vci.assets.GetTransform("Plane")
-- モニターカメラの位置角度情報保存用変数の初期化
local Cam_position = Vector3.__new(0, 0, 0) -- カメラの座標保存用
local Cam_rotate = Quaternion.identity -- カメラの角度保存用
local Cam_foard = Vector3.__new(0, 0, 0) -- 正面側の単位ベクトル保存用
local Cam_right = Vector3.__new(0, 0, 0) -- 右側の単位ベクトル保存用
local Cam_up = Vector3.__new(0, 0, 0) -- 上側の単位ベクトル保存用
local WinCam = vci.studio.GetWindowCamera() -- モニターカメラ取り込み用
-- モニターカメラのポジションを取り込む関数
function WinCamPos()
if vci.studio.HasWindowCamera() == false then
-- WindowCameraをとれないときはfalseを返す
print("モニターカメラが見つかりませんでした")
return false
end
-- カメラの位置情報とベクトル情報を収集
Cam_position = WinCam.GetPosition() --カメラ座標
Cam_rotate = WinCam.GetRotation() --カメラ角度
--Cam_foard = WinCam.GetForward() --カメラ前
--Cam_right = WinCam.GetRight() --カメラ右
--Cam_up = WinCam.GetUp() --カメラ上
Cam_foard = WinCam.GetForward().normalized --カメラ前
Cam_right = WinCam.GetRight().normalized --カメラ右
Cam_up = WinCam.GetUp().normalized --カメラ上
return true
end
-- モニターカメラの相対的な位置に画像を移動する
function GazouIdou()
local Gposition -- サブアイテムの座標用
local Gscale -- サブアイテムのサイズ用
--サイズはこのパラーメータで変更できます
-- 1920x1080の画像サンプル
local Size = 25000 -- 画像のサイズ調整パラメータ、大きくしたいときは値を小さく
local SizeX = 1920 / Size --横方向のサイズ
local SizeZ = 1080 / Size --縦方向のサイズ
--表示位置はこのパラメータで変更できます
local Foard_kyori = 1 -- カメラの前方の距離
local Up_kyori = 0.625 -- カメラの上方向への距離
local Right_kyori = -1.11 -- カメラの右方向への距離
-- モニターカメラのポジションを取り込む
if not(WinCamPos()) then
return
end
-- 表示する画像のサイズを設定する
Gscale = Vector3.__new(SizeX, 1, SizeZ)
-- 表示する画像の位置を計算する
Gposition = Cam_position + Cam_foard *Foard_kyori + Cam_up*Up_kyori + Cam_right*Right_kyori
--print("Cam:"..Cam_position.x..", "..Cam_position.y..", "..Cam_position.z)
--print("Pic:"..Gposition.x..", "..Gposition.y..", "..Gposition.z)
-- 画像の角度調整用
local X = 90
local Y = 180
local Z = 0
local Kakudo = Quaternion.Euler(X, Y, Z) --アイテムの角度
-- モニターカメラとの相対的な位置に対象を移動する
Gazou.SetPosition(Gposition) -- サブアイテムの座標を移動
Gazou.SetRotation(Cam_rotate * Kakudo) -- サブアイテムの回転
Gazou.SetLocalScale(Gscale) -- サブアイテムの大きさ
end
-- 画像を指定位置に表示する関数の呼び出し
-- この関数をUseで呼び出したり、定期的に呼び出すと
-- カメラから見て相対的に同じ位置に画像を表示できる
GazouIdou()
どこかのスタジオでVCIを出すとこうなりました。
設定している座標やサイズは画面の左上に出るように調整してあります。
モニターカメラ側からは画像が見えますが、逆から画像は見えません。
両方から見たいときはマテリアルのCull ModeをOffにしてください。
luaのパラメータでいろいろ変更できますので試してみてください。
その他
撮影に使用したルーム：にゃふ屋
使用したアバター：Re:Gistaさまの「フィリ」ちゃん