はじめに

こんにちは。ponponnsanです。最近はジムと着物の着付けを始めて人生が充実しています。
やはり人生を豊かにしてくれるのは趣味ですね。

さて今回は、アドベントカレンダー2024のクソアプリ企画記事です。

目標

推しの画像(png透過済み)と、webカメラを起動させて、unity上で写真を撮るところまでをゴールとします。

宣伝

冬コミでサークル参加します！
ふんわりaiラボ
12/30　東Z 38a

以下お品書き

生成AIを使ったゲームの作り方
生成AIで作成したキャラクターと一緒に写真を撮ろう
当日参加される方はよろしくお願いします！

サークルのアカウント↓

本当はアプリでカメラで背景と推しの画像を撮れればいいのですが、App Storeに開発者として登録するのにお金が一万円くらいかかります。

そこで！冬コミに参加することにしました。あと単純に参加してみたかった。
ここでお金が稼げば次のステップへ行くことができるので、もしよければ立ち寄ってみてください。

え？もう既存のアプリがある？そういうことじゃないんです。作りたいんです、クソアプリ。

初めてのUnity

初めてUnityを触る方は以下の通りに設定すれば大丈夫です。
ちなみに私はmacを用いているので、mac用のインストール方法を説明したいと思います。

インストール

まず、macでUnity6をインストールするための要件を表にまとめました。満たしていない場合、不具合等の原因になるのでPCに合わせてに適切なバージョンをインストールしてください。

項目	要件
オペレーティングシステム	macOS Big Sur 11.0または後世代
CPU	Apple M1または後世代、Intel x64 architecture (SSE2命令セットサポート)
グラフィックスAPI	Metal-capable IntelとAMD GPU
メモリ	16GB以上
ストレージ	SSD推奨、10GB以上の空き容量

インストールする手順としては以下の通りです。

Unity hubをインストールする
Unity IDを作成する
Unityをインストールする

それぞれ追っていきましょう。

Unity hubをインストールする

Unity hubとは、Unityのプロジェクトとバージョン管理を中心にしたツールです。古いバージョンと最新のバージョンのインストールが同じPCで管理できたり、バージョン違いのプロジェクトを簡単に切り替えられたりできます。

Unityはアップデートされることも多いため、バージョンが変わることで開発中に動かなくなるトラブルを防ぐことができます。

こちらのサイトに行き、ダウンロードボタンをクリックすると自動的にmac用のUnity hubがダウンロードできます。

Unity IDを作成する

次はUnity IDの登録です。Unityの使用やアセットストアでの購入、ライセンス登録にも使用されます。

MacにインストールしたUnity hubをクリックすると、下記の画面が表示されます。

初めての場合はcreate accountを押し、アカウントを作成します。
googleアカウントとの連携ができるので、私はgoogleアカウントで作成しました。

Unityをインストールする

UnityIDでログインしたら、続いてUnityをインストールします。
InstallからInstall Editorを選択すると、以下の画面が出てきます。

🍎Silliconと記載のあるUnityエディターを選択してインストールを実施してください。
以下のように表示されていればOKです。

これでUnityのインストールは完了です！

推しCAM

Unityを初めて触る人は大変だったかもしれませんが、ここからが本番です。推しと一緒に写真を撮っていきましょう！

セットアップ

メイン画面のProjectsからNew Projectをクリックします。

そこで、All templatesからUniversal 2Dを選択し、任意のプロジェクト名と保存場所を設定してください。
Unity Organizationはデフォルトで問題ないと思います。

推しの画像の用意

さて、一番楽しい推し画像の選別です。
選りすぐりの推し画像を選んでください！

今回は冬コミに参加するのもあり、サークル公式キャラクター「華操るな」と一緒に写真を撮りたいと思います。通称るなちゃんです。
ちなみに、Stable Diffusionで作成しています！

用意する画像について
pngの背景透過画像であることが前提です。

たまにキャラクターを含めた全ての範囲に対して透過をかけている画像があります。
この場合は、下記の方法で操作してもカメラでキャラクターが表示されなかったりするので、注意してください！
私の場合はこれでなかなか画像が表示されず3日ほど進捗がなかったです。

ウェブカメラの設定

HierarchyウィンドウにRawImageを追加:
- Hierarchyウィンドウで右クリックして、UI > RawImage を選択して、シーンにRawImageを追加します。

WebCamTextureを使用するスクリプトを作成:

新しいスクリプト（例： WebCamController）を作成し、以下のコードを入力します。
スクリプトは、Assetsで右クリックして、Create > Scripting　> Empty C# Scriptから空のファイルを作成します。

 using UnityEngine;
 using UnityEngine.UI;
 
 [RequireComponent(typeof(RawImage))]
 public class WebCamController : MonoBehaviour
 {
     WebCamTexture webcamTexture;
     RawImage rawImage;
 
     void Start()
     {
         WebCamDevice[] devices = WebCamTexture.devices;
         webcamTexture = new WebCamTexture(devices[0].name, 1920, 1080, 30);
         this.rawImage = GetComponent<RawImage>();
         this.rawImage.texture = webcamTexture;
         this.rawImage.enabled = true; // ここではtrueに設定して、カメラ映像を表示します。
         webcamTexture.Play();
     }
 
     void TakeShot()
     {
         // 以下は、写真を撮影してTexture2Dに変換するためのコードです。
         Texture tex = this.rawImage.texture;
         int w = tex.width;
         int h = tex.height;
         RenderTexture currentRT = RenderTexture.active;
         RenderTexture rt = new RenderTexture(w, h, 32);
         Graphics.Blit(tex, rt);
         RenderTexture.active = rt;
         Texture2D result = new Texture2D(w, h, TextureFormat.RGBA32, false);
         result.ReadPixels(new Rect(0, 0, rt.width, rt.height), 0, 0);
         result.Apply();
         RenderTexture.active = currentRT;
 
         // ここで、撮影した画像をゲームオブジェクトに適用します。
         GameObject plane = GameObject.Find("Plane"); // Planeオブジェクトを探す
         if (plane != null)
         {
             plane.GetComponent<MeshRenderer>().material.mainTexture = result;
         }
     }
 
     private void Update()
     {
         if (Input.GetMouseButtonDown(0))
         {
             TakeShot();
         }
     }
 }

このスクリプトをRawImageオブジェクトにアタッチします。

アタッチ済みのRaw Image Inspectorは以下の通りです。

ウェブカメラ映像上に透過画像を表示

ウェブカメラ映像上に透過PNG画像を重ねるには、Canvasを使ってUI要素として画像を配置する方法が一般的です。以下の手順で実装を試してみてください。

Canvasを設定する
- HierarchyでCanvasを右クリックして追加し、Render ModeをScreen Space - Overlayに設定します。
- Canvasに、RawImage（ウェブカメラ映像用）とImage（透過画像用）を子要素として追加します。
```
Canvas
├── RawImage (ウェブカメラ映像用)
└── Image (透過PNG用)
```
透過PNG画像用のImage設定
- Imageオブジェクトを選択し、InspectorでSource Imageに表示したい透過PNG画像を設定します。
- 位置や大きさを調整して、カメラ映像に重ねる形に配置します。
ウェブカメラの映像をRawImageに表示
すでに作成したWebCamControllerスクリプトを使用して、ウェブカメラの映像をRawImageに表示します。
RawImageにWebCamControllerスクリプトがアタッチされているか再度確認してください。

次は、写真撮影です。

透過画像の撮影設定

Unity Recorderのインストール:
- Window > Package Managerを開き、In ProjectからRecorderをインストールします。
カメラの背景設定を変更:
- Main CameraのClear FlagsをSkyboxからSolid Colorに変更し、背景色を透明度MAX（黒や白など）に設定します。これにより、背景が透過されるようになります。
Recorder Windowの設定:
- Window > General > Recorder > Recorder Windowを開きます。
- Add Recorder > Image Sequenceを選択し、以下の設定を行います。
  - Recording ModeをSingle Frameに変更
  - SourceをTexture Samplingに変更
  - Media File FormatをPNGに変更
  - Include Alphaにチェックを入れる。
撮影:
- Main Cameraを選択し、シーンビューで好きな視点に調整します。
- Recorderウィンドウで再生ボタンを押して撮影を開始します。Gameウィンドウをクリックすると、画像が指定したファイルに保存されます。

実行ボタンを押したはいいが、どこに保存されているか確認したいですよね。
Unity Recorderを使用して撮影した画像や動画は、以下の方法で保存先を指定および確認できます。

デフォルトの保存先

デフォルトでは、保存されたファイルはプロジェクトのフォルダ以下のRecordingsフォルダに保存されます。ファイラーでここまで辿って開くことも可能です。

recordingフォルダは、プロジェクトの階層構造で表すと以下に位置しています。
VScodeなどで確認してみてください。
```
ProjectName
├── Assets
├── Library
├── Logs
├── Packages
├── ProjectSettings
├── Recordings # ここ！
├── Temp
└── UserSettings
```

保存先の指定

Recorderウィンドウで、Output FileセクションにあるPathフィールドを使用して保存先のフォルダを指定できます。ここで「…」ボタンをクリックして、任意のフォルダを選択できます。

実際にRecordingsフォルダに保存されていましたが、
撮影した際のpngの画像は以下の通り、何も写っていないというものでした。

Recorderウィンドウで、SourceをGame Viewに変更します。

無事、撮ることができました！

このように風景と一緒に撮ると聖地巡礼とかでも活躍しそうです！！

まとめ

ウェブカメラの映像をRawImageで表示し、撮影ボタンを押すと、TakeShotメソッドが呼ばれて、撮影した画像をTexture2Dに変換し、ゲームオブジェクト（例： Canvas）に適用します。
透過画像の撮影は、Unity Recorderを使用して、背景が透過された状態で撮影します。

参考文献