2022-07-26

【Unity】VideoPlayerを使ってmp4ファイルを透過動画として再生する

夏服購入

夏服を買いに行ってショップ店員に「ちょっとこれはウェストが大きめですけど・・・」と言われて渡されたズボンのサイズがピッタリだった皆さんこんにちは。今年は早目の梅雨明けで汗をかく日が多いはずですがウェストサイズには反映されないようです。

動画を埋め込む

ゲームのチュートリアルやアプリの操作説明の場面でユーザ操作が必要でないケースではリアルタイムに処理をするのではなく、予め用意した動画を再生する方が実装が単純で工数の削減になります。

Unityで動画を再生したい場合は.mp4、.mov、.wmvといったファイル形式であればVideoPlayerというコンポーネントを使用して簡単に実装することができます。

まず最初に、再生したい動画ファイルをProjectウィンドウの任意のフォルダへdrag & drop(インポート)します。
今回は下のようなmp4形式の動画をインポートしました。

次にスクリーンとなるオブジェト(PlaneやQuad)をシーン内に作成します。この時、オブジェトのアスペクト比は動画のアスペクト比と同じになるように変更します。

このスクリーンオブジェトに対してAdd Componentから、VideoPlayerコンポーネントを追加します。

追加したVideoPlayerの「Render Mode」の値が「Material Override」となっている事に注目してください。

最後にVideoClipにアタッチすれば、準備完了です。
ゲームを実行するとスクリーンオブジェトに動画が映し出されます。

ここからが本題

VideoPlayerでは動画を指定したRender Textureへ描き出すことも可能です。
この指定の場合、動画をオブジェトに映し出すにはRender Textureを使用したMaterialを作成し、それをスクリーンオブジェトのMaterialとして指定する必要があります。

　VideoPlayer
　⇒RenderTextrureへ描き出し
　⇒MaterialがRenderTextureをTextureとして使用
　⇒オブジェトに反映

前述のMatrialを上書きして直接オブジェトに反映する指定(Material Override)と比べて一手間増える事になりますが、この指定の利点は動画の映像にMaterialが使用するシェーダーの効果を付与できる点にあります。

今回の場合はシェーダーに特定の色を透過させるクロマキーシェーダーを指定します。こちらは凹みTipさんが公開されてるシェーダーを利用させて頂きました。

tips.hecomi.com

InspectorからVideoPlayerの「Render Mode」の値を「Render Texture」に変更、Target Textureに描き出すRenderTextureを指定します。

次にクロマキーシェーダを利用したMaterialのTextrureに先ほどのRenderTextureを指定、透過色に動画の背景色を指定します。

実行結果はこちら、mp4ファイルを透過動画として再生することができます。

使用例

これまでUnityで透過動画を再生したい場合は.webmという形式の動画でないと対応できなかったので.mp4形式の動画は変換する必要があったのですが、変換なしに透過動画として再生することができました。

まぁ、あまり使う場面はないのかもしれませんが、現在制作中のゲームでモニターのガラス面に映る映像としてこの透過動画を使っています。

ガラス面の背後が透けて見えるので少し奇妙な装置としてプレイヤーに捉えてもらえるのでは、と思っています。

2022-07-12

【進捗報告】ロジカル脱出ゲーム「W.T.」

政治タグ

もういい加減、政治家でもないただの素人がSNSで政治活動しても何の意味もない事を知ってほしい皆さんこんにちは。ここ2週間は選挙期間中だったこともあり、TwitterはトレンドもTLも政治タグの汚染が酷くてウンザリしました。あまり自らフォローを外すことはないんですが、特定政党関連の投稿をリツイートをしまくるアカウントはフォローを外させてもらいました。

地味に制作中

さて、足掛け二年ぐらい、途中で中断も挟みながらPC向けに脱出ゲームを作っています。

一人称視点の3D脱出ゲームですが、アドベンチャーゲームでなく脱出ゲームと銘打っているのはこのゲームのメインがストーリー＆探索ではなく、ゲーム内に仕掛けらえた多種多様なパズルを解くことがメインとなっているからです。

一応ストーリーもありますが、キャラクターが出てきて場面や心情をしゃべったりするのではなく、アイテムを拾った際に表示されるフレーバーテキスト内で語られる程度なので、プレイヤーはそれを全く無視して進めることも可能です。

白い世界

ビジュアル面の特徴としてはゲーム内のオブジェトは基本的に色のないオブジェトで構成されているという事で、パズルに関連する物だけ色つきのオブジェトとなっています。

また、ステージ内の色んな箇所がループしており、提示されているパズルを解かない限りは同じ場所をグルグル廻って先へ進めない仕様となっています。

上のような長い廊下も実はループしており、眼前の問題を無視して先に進んでも結局は同じ場所に戻ってきます。

進捗状況

去年の今頃のブログを見返すと「完成度は50%～60%ぐらい」と書いていましたが、イヤイヤ、今の現状が「50%～60%ぐらい」と言いたい気分です。

今のところ休日クリエイターな身分なので一足飛びに作業を進めらないのですが、今年も半分を過ぎてようやくステージの一つが完成しそうです(完成したとは言ってない)

こんな感じのステージで、左右にシャッターで閉じられた部屋が配置されています。

パズルの方も一部が出来上がりました。

出来れば今年のハロウィンにアーリーアクセス版をリリースしたいんですがね・・・どうなるやら

2022-07-05

【Unity】アセット紹介：Shell Texture技術を利用したグラスシェーダーBrute Force Grass Shader

通信障害

auの携帯を使っているのに通信障害の影響を微塵も受けなかった皆さんこんにちは。だって誰からも電話は掛かってこないからね。会社でもひとしきり話題になっていましたが会話に参加できなかったです。

草生える

ゲーム内で山などの地形に草を生やそうとした場合、テレインを使って地面から生成したり草の3Dモデルをチマチマ設置するのではなく、シェーダーを使って一気に表示する方が効率的です。

Unityアセットストアにはそういったグラス(草)シェーダーが多数出品されていますが、つい先日、その中の一つを購入したので今回はそのアセットのご紹介

「グラス(草)シェーダー」という名の通り、色んな地形アセットや3Dモデルに草を生やすことができます。

試しにシーン内にPlaneを作って、

アセットに付随しているマテリアルをPlaneのマテリアルとして設定すると

こんな感じで芝生が出来上がります。

使い方

他のグラスシェーダーアセットではマテリアルのシェーダーをグラスシェーダーに変更するだけですが、このアセットでは一つだけ手間が掛かります。

というのも、このアセットではグラスシェーダーが適用された3Dモデルを上空から撮影し、その画像からレイヤ画像を自動生成して草として表示しています。
その為、草を生やす範囲を撮影するカメラを事前に設置しておく必要があります。

このカメラはコンポーネントの設定等も含めてPrefabとしてアセットに付随しているので、シーン内にドラッグするだけで大丈夫です。

BruteForce-GrassShader>Prefab>CameraEffect配下の「CameraEffect」をシーン内にドラッグします。

カメラはOrthographic(平行投影)で撮影しており、カメラコンポーネントのsize値を変更して芝生を生やす範囲をカバーします。

ただし、このカメラは回転させないでください。

先ほども説明した通り、レンダリングに使用されるカメラには「BF_SetInteractiveShaderEffects」がアタッチされており、これはターゲットテクスチャ「GrassRT」にレンダリングされます。
芝生の解像度を上げるには、プロジェクトで「GrassRT」を選択して、「サイズ」を2048x2048または4096x4096に設定します。
ただし、この値を変更すると、メモリ消費量が大幅に増加します。

カメラを設定した後、芝生を生やす地形アセットをカメラの真下に配置して

グラスシェーダーを適用したマテリアルを設定すると、綺麗に草を生やすことができます。

プロパティ

芝生の草の色や植生の範囲、地面の色、影の色等々、シェーダーのプロパティで設定できます。
風に吹かれて揺れる動きもプロパティで設定できます。

各プロパティの中で重要なものを説明すると

-Grass Shading：レイヤーの暗さを制御します。値を低くすると、最下層が非常に暗くなります。

-No-Grass Texture：草と地面の位置を制御するための白黒テクスチャ

-Grass Pattern：草の形を制御するための白黒テクスチャ。白の値はより多くの草を描画します

-Number of Stacks：草の層の数、値が高いほどパフォーマンスが高くなります（最大は17）

-Offset Normal：面法線に基づく草の位置のオフセット（草の高さを変更する場合は、これを変更します）

-Offset Vector：Vector3に基づく草の位置のオフセット

-Fade Distance Start/End：パフォーマンスを節約するために草がカリングされる距離

-Minimum Number of Stacks：フェード距離によってカリングされたときに表示されるレイヤーの最小量

-Grass Thinness：草の密度、値が高いほどブロック状になります

-Grass Thinness Intersection：草のないテクスチャ（地面）の周りの草の密度の遷移

-Tiling of Grass：草のパターンのUVスケール、UVタイリングの代わりにこれを使用します

-Grass Cut：地面のカットアウト値。値を大きくすると地面が消えます。

-Use RenderTexture Effect：インタラクティブな効果が必要ない場合は無効にします

-Use Procedural Tiling：タイルブレーカー機能を使用して、草の塊を遠くから見栄えよくします

カメラエフェクト

このシェーダーはレイヤ画像を使って草を表現しているので近距離で見ると少し違和感を覚えるかもしれません。

至近距離でみるとこんな感じ

この為、それを誤魔化す？用なのかブラーを利用したカメラエフェクトのスクリプトも付随しています。

サンプルシーンを参考にしてMainCamera側に上のカメラエフェクトのコンポーネントを付けてみるとこんな感じになります。

先程の画像と比べてどうでしょうか？リアル感が少し増した気がします。

2022-06-28

【Unity】CinemachineのClear Shotを利用して障害物に隠れたオブジェトを写す

梅雨明け？

駐車場に停めている車が汚れているので洗車しようかと思ったけど「梅雨時期だからどうせ雨が降るし」と理由付けてそのままにしていたら一向に雨が降らず、しょうがないからと洗車をしたらその日の午後に夕立が降って洗車代が無駄になった皆さんこんにちは。今年は梅雨らしい天候にあまり遭遇しないまま猛暑の季節を迎えそうですが水不足等は大丈夫なんでしょうかね？電力供給もひっ迫しているらしいし。

見下ろし型

TPS、FPS視点のゲームと違いクォータービュー見下ろし型ゲームの場合、どうしても操作するキャラクターが建物等の障害物の裏に隠れるといった事象からは逃げることはできません。

こんな感じで障害物の裏に隠れてしまう。

そういった場合、隠れている部分のシルエットを表示するという手法を取ることもできますが、それ用のシェーダーが障害物とキャラクターそれぞれで必要となりちょっと面倒です。

www.karvan1230.com

なのでもっと単純に考えて、キャラクターが障害物の裏に隠れた時は裏側に別に用意したカメラでキャラクターを撮影して、隠れていない場合は元のカメラで撮影する、といった事ができれば、キャラクターが移動して障害物に隠れて見えなくなる、といった問題の解決になりそうです。

Clear Shot

CinemachineにはClear Shotという機能が用意されています。この機能を使うと対象が障害物に隠れた時、別のカメラに切り替えるカメラワークを実装できます。
Clear Shotを使うにはまず上部メニューからGameObject > Cinemachine > ClearShot Cameraを選択します。

するとシーン内にClearShotのオブジェトとその子オブジェトとしてVirtual Cameraが作られます。

ClearShotは自身の子オブジェトとなっているVirtual Cameraの切り替えを行います。
その為、切り替えるカメラの数だけVirtual Cameraを複製し、それぞれ位置やターゲットを設定しておきます。

ClearShot作成前に作ったVirtual Cameraも切替対象にしたい場合は、Virtual Cameraコンポーネント最下部にあるExtensionsからCinemachine Colliderを選択してアタッチした後、ClearShotの子オブジェトとしてください。

遷移順の設定

上記の設定後、ClearShotオブジェトをInspectorで確認すると自身の子オブジェトとなっているVirtual Cameraがリスト形式で表示されています。このリスト内でPriorityの値→リスト順の順番で切替順番が決定されます。

カメラの切り替え時のアニメーションについてはCinemachine Clear ShotのDefault Blendから指定します。
今回はアニメ無しに切り替える為「Cut」を選択しました。

最後に、撮影対象のキャラクターが障害物の裏に隠れたかどうかの判定はColliderを使って行われるため、障害物の方にColliderがアタッチされていることを確認してください。

ここまで確認できたら実行します。

カメラの対象が障害物に隠れたら別のカメラに切り替わるようになりました。

2022-06-21

【Unity】Unity標準のObject Poolを使ってみる

流行りにのる

あいみょんの「Apple Watch使っている奴だいたい意識高い系」って歌詞が好きな皆さんこんにちは。「意外と便利だよ」とか言いながらアレコレと機能を紹介してくれるのですが、だいたい一週間ぐらいで飽きて普通の時計と化している姿をよく目にします。そりゃ、四六時中スマホをいじって画面を見ているのにわざわざメールの通知を腕時計に飛ばす必要ないですもんね。心拍数が測れて嬉しいのも最初の二、三日だけでしょうし、頻繁に充電が必要なデジタル時計という印象を持っている方も多いと思いますが私はPixel Watchが欲しいです。

オブジェトプール

Unity2021からオブジェトプール(Object Pool)が標準ライブラリに搭載されています。
オブジェトプールとは、例えばSTGの銃弾やモブの敵キャラなど、ゲーム内で繰り返し登場するオブジェクトを事前に保持しておいて必要なときにアクティブ／非アクティブを切り替えて利用する処理の事を指します。

オブジェクトプールを使った処理のイメージ図

事前にオブジェトを生成・保持しておく為、その分メモリを消費しますが、毎回オブジェクトを生成（Instantiate）And破棄（Destroy）する処理に比べてCPU負荷が掛からず、最適化(高速化)する手法の一つとして知られています。
今回はその標準ライブラリに搭載されているオブジェクトプールの簡易的な使い方と実際の動作について紹介します。

使い方

前述のようにオブジェトプールで必要な処理は

オブジェトの生成と保持
プールからの取り出し
プールへの返却

となるので、ObjectPoolのコンストラクタではそれらの処理を行うための関数を指定する必要があります。

private ObjectPool<GameObject> m_objectPool; // オブジェクトプール

private void Start()
{
    // オブジェクトプールを作成します
    m_objectPool = new ObjectPool<GameObject>
    (
        createFunc: funcCreate,          
        actionOnGet: funcOnGet,          
        actionOnRelease: funcOnRelase,   
        actionOnDestroy: funcOnDestroy,  
        collectionCheck: true,           
        defaultCapacity: 10,             
        maxSize: 10                      
    );
}

各引数の意味は以下の通り

createFunc：生成を行う関数
actionOnGet：プールから貸し出す時の処理
actionOnRelease：プールに返却する時の処理
actionOnDestroy：プールの許容量を超えた時の削除処理
collectionCheck：既にプールにあるオブジェトを追加した場合に例外とするか
defaultCapacity：初期の許容量
maxSize：最大許容量

他スクリプトからObjectPoolに対して貸出(Get)がコールされるとプール内にオブジェトが不足している場合はcreateFuncで指定した関数が呼ばれ、その関数でオブジェトの生成を実施、その後、プール内から取り出す際にactionOnGetで指定した関数が呼ばれます。

作成と貸し出しのイメージ図

逆にObjectPoolに返却(Relase)する際にはactionOnReleaseで指定した関数が呼ばれます。

返却のイメージ図

上の図の説明の通り、ObjectPoolはオブジェトの保持と容量管理しか行わないのでオブジェトの生成やアクティブ化／非アクティブ化はそれぞれの関数内で行う必要があります。

使用例

今回は鬼ごっこゲームを想定して以下ようなステージを用意

プレイヤーは画面中央の白い女の子で鬼(黒いstickman)から逃げる、という単純なゲームです。
鬼はObjectPoolで保持されており一定時間経つとObjectPoolから貸し出されて白円の部分に出現します。

プレイヤーは鬼に触れないように逃げるのですが、上のどくろマークのエリアに鬼が接触するとその鬼は消える(ObjectPoolへ返却する)ルールです。

鬼は一度の出現で8体必要ですが実際のゲームでの動作を見ると非アクティブ状態の鬼がアクティブ化され、不足分の鬼が生成されている事が分かると思います。
また逆に、どくろマークに触れた鬼は非アクティブ化されて画面から消えていきます。

以上、オブジェクトプールの簡単な使用例でした。

2022-06-14

【小ネタ】カメラのClipping Planesを使った場面展開

シン・ウルトラマン

シン・ゴジラは楽しく観れたのにシン・ウルトラマンはちょっと寒く感じた皆さんこんにちは。いや、全体的には面白かったんですがね、シン・ゴジラと同じノリで官僚やら政治家やらが話に割り込んでくるわりに、矛先をあっさりと納めて聞き分けが良いので肩透かしを食らう感じ、竜頭蛇尾、私の苦手な言葉です。

Death's Door

エルデンリングをクリアしてしまい、期待していた「Trek to Yomi」が余りに"Not for me"な仕上がりだったので、PSストアで半額だった「Death's Door」というゲームを購入しました。

ゼルダライクなクォータービューのアクションRPGで、爽快なアクションと探索＆謎解きが融合した秀逸なゲームでした。
難易度はそれほど高くなく10時間程度でクリアできるボリュームですが、森林、墓地、庭園、雪山等フィールドの種類は豊富で、そこに登場するダンジョンもギミック満載で飽きることがありません。
ボスがちょっと固めで単調になりがちですが、洗練された操作感と程良い謎解き、トゥーン調でコミカルなグラフィックと演出、美しいBGMもレベルが高く、インディーゲームとしてかなり高品質なゲームだと思います。
いつかこのレベルのものを作ってみたいですね。

複数台カメラ

Unityでは同じシーン内に複数台のカメラを設置することができます。

その場合、Depth値が低い順にカメラの映像は描画される為、結果、高い側の映像で上書きされる事になります。

なので、カメラA,Bそれぞれが別の映像を取っている場合、Depth値が高い側のカメラに対してアクティブの有効／無効を切り替えるだけで簡単にカットインのような映像を作ることができます。

Clipping Planes

一方、Unityのカメラには「Clipping Planes」というプロパティがあり、これはカメラが撮影を開始・停止するカメラからの距離を設定しています。
この「Clipping Planes」で指定された撮影範囲はシーンビュー内でカメラを選択すると確認することができます。

逆に、この範囲外にあるオブジェトは画面に描画されないので、Farの値を極端に小さくして設定して何も描画されない状態にして

それを徐々に大きく変えていけば、Depth値が低い方のカメラ映像から高い方のカメラ映像へ徐々に変化する映像ができそうです。

DOFarClipPlane

Clipping Planesの値をスクリプトで動的に変えたい場合はDOTweenを使うと便利です。
DOTweenにはCameraコンポーネントに対するTweenメソッドも用意されており、以前、このブログにて紹介しています。

www.karvan1230.com

今回はDOFarClipPlaneというメソッドを使用して
カメラA(Depth値が低い方)の映像から

カメラB(Depth値が高い方)の映像へと変えていきます。

最初にカメラBのFar値を低い値に設定し、DOFarClipPlaneで元の値に戻していきます。

いい感じに切り替えることできました。

とは、いえ・・・

今回の手法はカメラのClipping Planesを使うため、映像はカメラの奥行方向にしか変化させられません。
なので汎用性は低く使い道はあまりないと思いますが、ゲーム内の一つの演出としては面白いと思います。

こんな感じで

2022-06-07

【Unity】物陰に隠れたオブジェトのシルエットを表示する

規制解除

外出自粛やマスク制限などコロナ禍による様々な規制が解除されていくのを見て、そろそろ自社の飲み会が復活しそうで戦々恐々な皆さんこんにちは。これまでは自粛という名のサボタージュで逃れていたのですが今年の忘年会にはそれが通用しなさそうで怖いです。

マテリアル

Unityでは表示する3Dオブジェクトには必ずRenderer (MeshRenderer /SkinnedMeshRenderer)コンポーネントが付与されていますが、このコンポーネントでは複数のマテリアルを紐付け(アタッチ)することができます。
アタッチされたマテリアルはリスト化され、重ねて描画(レンダリング)をすることができます。

例えばメッシュにテクスチャを表示するマテリアルと