🖥️

VRChatアバターの動く壁紙の作り方

2024/05/19に公開

Unity

VRChat

tech

先日、こちらのポストを拝見しまして、私も作ってみたい！と思いましたので、
自分でも作ってみました。

本家様のポストのリアクションを見ていると、作り方が知りたいと思っている方が何人かいるようでしたので、私なりの作り方をまとめてみようと思います。

アバターを表示する
背景モデルを表示する
マウスカーソルに頭が追従する

ものを目標に作ります。

動く壁紙とは？

作り始める前に、まずは動く壁紙について軽く説明をしておこうと思います。

壁紙は、通常は一枚画像または複数画像の静止画だと思いますが、
動く壁紙はその名の通り、常時またはマウスカーソル、音楽等により動きがある壁紙になります。(ライブ壁紙とも呼ばれる)

動く壁紙にする方法やツールはいくつかあると思いますが、今回はWallpaperEngineを使います。

WallpaperEngineとは、Steamで販売されている、Windowsのデスクトップに動く壁紙を設定できるアプリです。

499円で購入できます。(2024/05/19時点)

今回は、WallpaperEngineで設定できる壁紙を作成します。

Unityをインストールする

WallpaperEngineで設定できる壁紙は、動画ファイルの他に、exeファイルも指定できます。

exeファイルの作り方もいろいろあるかと思いますが、
今回はUnityで壁紙を作成し、Unityからexeファイルを作成します。

Unityとは、ゲームエンジンの一つであり、ゲーム開発ソフトの側面が強いですが、ゲーム以外のアプリも作成できます。

まずはUnityをインストールします。

すでにインストールされている場合は、そちらを使うでも問題ありません。

Unityのバージョンはどれでも問題ありませんが、今回は最新(2024/05/19)である
「Unity 6 Preview (6000.0.2f1)」を使うことにします。

バージョン名の横の「Install」を押します。

Add modulesの画面では、「Windows Build Support (IL2CPP)」にチェックを付けておいてください。(exeファイルを作る際に必要です)

他の項目にはチェックは不要です。

インストールが終わったら、プロジェクトを作成しましょう。

左の「Projects」タブを押したあと、右上の「New project」を押します。

テンプレートを「Universal 3D」にして、「Create project」を押します。

VRChatではBuilt-In Render Pipelineが使われていますが、今回はURPで作ることにします。

これで、プロジェクトを作成できました。

アバターを導入する

各自お好きなアバターをプロジェクトに入れましょう。

今回は、カリンちゃんを導入します。

カリンちゃんをプロジェクトにインポートしました。

全身ピンクになってしまっています。

これは、VRChat用のアセットはBuilt-In Render Pipeline用のシェーダーを使っているのに対し、今回はURPのプロジェクトだからです。

なので、シェーダーをURP用のものに変更します。

URP用のトゥーンシェーダーを導入する

今回は、URP用のトゥーンシェーダーである、UnityURPToonLitShaderExampleを使います。

「Code」を押したあと、「Download ZIP」を押します。

zipの中身をプロジェクトにインポートします。

今回は、Assets/Shaders/UnityURPToonLitShaderExample以下に入れました。

カリンちゃんのマテリアルのシェーダーを、先ほどインポートしたシェーダーに変更します。

カリンちゃんのマテリアルを全選択し、シェーダーを「SimpleURPToonLitExample(With Outline)」に変更します。

ここからマテリアルのパラメータを好みに調整していくのですが、今回はこのままいきます。

MissingScriptを削除する

VRChat用のアバターは、VRChat用のスクリプトがアタッチされていることが多いです。

ですが、今回はVRCSDKは導入しておらず、Missingになっています。

このままではビルドができませんので、MissingScriptを削除します。

手動でやってもいいのですが、数が多く大変なので、こちらの記事のスクリプトを使用させていただきます。

注意点として、このスクリプトはUnityEditor上でのみ動くスクリプトであり、ビルドに含まれることを防ぐため、「Editor」フォルダー以下に配置しましょう。

これで、MissingScriptをすべて削除できました。

揺れものを設定する

髪やスカートなどが揺れるように設定していきます。

今回はMagica Cloth2を使用します。

導入および設定方法は、公式ドキュメントが充実しているので、割愛します。

髪、耳、スカート、しっぽに揺れもの設定を、腕、脚にコライダーを設定しました。

アイドルモーションを設定する

このままだとTポーズなので、自然な立ちモーションを設定します。

これも好みになりますが、今回はユニティちゃん3Dモデルデータのモーションを使用します。

インポートしたあと、アバターのアニメーターのControllerをUnityChanLocomotionsにするだけで、アイドルモーションが変わります。
※アバターによっては、これだけではうまくいかないかもしれません

視線追従機能を実装する

マウスカーソルの方向に顔が向く機能を実装します。

こちらも実装方法はいろいろあるかと思いますが、今回はFinalIKを使用します。

インポートしたら、アバターに「LookAtIK」コンポーネントをアタッチします。

そして、Headにアバターの頭の部分をアタッチします。

シーン上に、空のオブジェクトを作成します。(ここでは「LookAtTarget」という名前にしました)

これを、Targetのところに設定します。

これだけで、アバターがLookAtTargetの方を向くようになります。

※説明のため、LookAtTargetにSphereオブジェクトを入れています

あとは、この空オブジェクトの位置がマウスカーソルに位置になるようにします。

ここから、少しだけコードを書きます。

まず、スクリプトを作成します。

Projectビューを右クリックまたはCreateボタンから、MonoBehaviour Scriptを選択します。

名前は「MouseToWorldPositioner」にしました。

これをLookAtTargetにアタッチします。

コードエディターはなんでもよいですが、今回はVisual Studio Codeを使用します。

VSCodeを使う場合、Unity用の拡張機能を入れておくとよいでしょう。

開くと、このような画面になります。

※もしIt was not possible to find any installed .NET SDKs.というエラーが表示された場合は、.NET SDKをインストールしましょう。

以下のように変更します。

using UnityEngine;

public class MouseToWorldPositioner : MonoBehaviour
{
    void Update()
    {
        // マウスの位置を取得する.
        var screenPosition = Input.mousePosition;

        // マウスの位置は２次元なので、Z座標に値を入れておく.
        screenPosition.z = 1.0f;

        // スクリーン座標をワールド座標に変換する.
        var worldPosition = Camera.main.ScreenToWorldPoint(screenPosition);

        // 座標を適用する.
        transform.position = worldPosition;
    }
}

これだけで、LookAtTargetの位置がマウスカーソルの位置と同期します。

※カメラとアバターとの距離、screenPosition.zの値で、追従度合いが変わります

背景モデルを配置する

最後に、背景となるモデルを配置します。

好きなオブジェクトを置くことにより、自分好みの背景にできます。

今回は、Japanese Apartmentを使ってみます。

Built-In Render Pipeline用のアセットでシェーダーエラーになる場合は、
エラーになっているマテリアルを選択した状態で、Edit→Rendering→Materials→Convert Selected Built-in Materials to URPを選択すると、互換性のあるシェーダーに一括変更できます。

※基本的に、Universal Render Pipeline/Litに変更されます