スプラトゥーン的なARで部屋を塗ってみた

Share on facebook
Share on twitter
Share on pocket
このエントリーをはてなブックマークに追加

日々、Switchの画面に暴言を吐くスプラティストの皆様。リアルに塗りあったらどうだろうかとか、ARだったらどうだろうかなどとお考えになったことはありませんか?
作ってみました。この動画の程度のものであれば、先人の用意してくれたパーツを組み合わせるだけで、とても簡単に作れます。
僭越ながら備忘録も兼ねて、作り方を以下に書かせていただきます。

アセットの組合せでノーコーディングアプリ作成

【開発環境】
Unity2020.3.16f1
ARFoundation4.1.7
InkPainternv1.2.1
【実行環境】
Android10(ARCore対応機

まず、Unity上で開発します。
Unityをお持ちでない方は、こちらからUnityHubをダウンロードして、UnityHubからUnityのバージョンを指定してインストールしてください。

ARFoundationの設定

Unityプロジェクトを作成する

Unityのインストールが終わったら、プロジェクトを作ります。
テンプレートがいろいろありますが、デフォルトの「3D」のままでOKです。
プロジェクト名、保存先を決めて「作成」を押したら、プロジェクトの作成が始まります。

UnityNewProject
クリックで拡大表示できます

ARCoreを使うための設定をする

Unityの画面が開いたら、まずはARを使うための設定からしていきます。
メニューバー>ウィンドウ>パッケージマネージャー
を開き、
・AR Faundation
・ARCore XR Plugin
・XR Plugin Management
をインストールします。

プロジェクトの設定をする

ここからプロジェクトの設定をしていきます。
メニューバー>編集>プロジェクト設定>Player
を開き、
Androidアイコン>その他の設定>レンダリング>Graphics APIs
から「Vulkan」を削除します。
その他の設定>識別>最低APIレベル
を「Android8.1 ‘Oreo'(API level27)」に設定します。

メニューバー>編集>プロジェクト設定>XR Plug-in Management
を開き、「ARCore」にチェックをいれます。

ビルド設定をする

メニューバー>ファイル>ビルド設定
を開き、初期のシーン「SampleScene」を追加、Androidを選択して「Switch Platform」を押します。

これでARのアプリを作る準備と、Androidアプリのファイルを書き出す準備が整いました。

InkPaintアセット

色塗り機能を自分で作るとなると高いスキルが必要になるので、先人が用意してくれたアセット(Ink Painter)を使わせてもらいます。
Unityにはこうした便利なアセットがたくさんあり、組合せ次第でいろんなものが作れます。

アセットを探す

Unityの画面で「シーン」が選ばれているところで「アセットストア」を選ぶか、メニューバー>ウィンドウ>アセットストアを選ぶ。

アセットストアのサイトに飛ぶので、そこで「Ink Painter」と検索。
フリーのアセットが出てくるので、画像をクリックし、「Open in Unity」をクリックする。
「UnityEditorを開きますか」と言うアラートが出るので許可。
パッケージマネージャーの画面が開き、InkPainterが追加されているので「インポート」を押す。

オブジェクトの配置・設定

改造するサンプルシーンを選ぶ

プロジェクトウィンドウ>Assets>InkPainter>Sample>SampleSceneから「Sample01-Paint-」を探し、ダブルクリック。
ヒエラルキーウィンドウのシーン名「Sample01-Paint」の上で右クリックし、シーンを別名で保存を選択。
Scenesフォルダ内に任意の名前で保存。

※ここで▶ボタンを押したら実際にオブジェクトに色を塗ることができます。他のサンプルシーンだとどんな風に塗れるのか試してみるのも楽しいです。

ARを使う準備をする

Unityのヒエラルキーウィンドウから、以下の2つを削除(または無効化)
・Main Camera
・Planel
・Cube(2つとも)

ヒエラルキーウィンドウで右クリックして、以下の2つを追加
・AR Session Origin
・AR Session

色を塗る機能をつける

次は、AR Session Originの下にあるAR Cameraに手を加えます。
ヒエラルキーウィンドウでAR Cameraを選択すると、画面右側にインスペクターウィンドウが開きます。その上部に「タグ」項目があるので、それをMainCameraに変更します。

AR Cameraのインスペクターウィンドウ最下部の「コンポーネントを追加」を押し、「Mouse Painter」を検索して追加。
追加したMouse Painterを以下のように設定。
・Brush TextureにBrush
・Brush Normal TextureにBrushNormal
・Brush Scaleを0.1
・Brush Normal Blendを0.1
・ブラシ色を任意の色
※RGBAのA(アルファ:不透明度)の項目がゼロになっているので必ず変更してください。インクが透明になります。ここハマりました。

平面認識機能をつける

ヒエラルキーウィンドウでAR Session Originを選択し、インスペクターウィンドウの「コンポーネントを追加」から、以下を追加する。
・AR Plane Manager
・AR Raycast Manager

ヒエラルキーウィンドウで右クリックし、XR>AR Dafault Planeを選択。ヒエラルキーウィンドウに作られたAR Default PlaneをプロジェクトウィンドウのAssetsにドラッグ&ドロップ(prefab化する)。ヒエラルキーウィンドウのAR Delault Planeを削除する。

ヒエラルキーウィンドウでAR Session Originを選択し、インスペクターウィンドウのAR Plane ManagerのPlane Prefabに、先ほどAssetsに置いたAR Default Planeをドラッグ&ドロップする。

画像のような状態になっていればOK。

認識した平面に色を塗れるようにする

Assetsに置いたAR Default Planeを選択。
インスペクターウィンドウから「コンポーネントを追加」、Ink Canvasスクリプトを選択。
Use NormalMap Paintチェックボックスにチェックを入れる。
AR Default PlaneのインスペクターウィンドウのMesh Renderer>Materialsを「Sample」に変更。
Line Renderer>Materialsを「Sample」に変更。
メッシュに「Cube」を選択。

認識した平面を塗るために透明のテクスチャをつける

透明の画像(透過PNG)を用意して、Unity画面のプロジェクトウィンドウのAssetsにドラッグ&ドロップで置く。
※Photoshop等のペイントツールや透過PNG作成サイト等で作成可能です。面倒な方はこちらからダウンロードしてください。
画像のインスペクターウィンドウの「アルファ値を透明度として使用」にチェックをつける。
Assets内の画像ファイルが透明になります。

透明のテクスチャをつけたマテリアルを作る

プロジェクトウィンドウのAssetsから、AR Default Planeを選択。
インスペクターウィンドウのMesh RendererのMaterialsに設定している「Sample」をダブルクリックしてSampleマテリアルを開く。
Sampleマテリアルのインスペクターウィンドウを以下のように変更。
・Rendering Mode → Fade
・アルベドの左側のアイコンをクリックし、先ほど作成した透明ファイルのテクスチャを選択。
・アルベドのカラーパレットのRGBAのAを255にする。

ここまで来たら、作ったシーンをビルドする。.apkと言う拡張子のファイルが作られるので、それをAndroid端末で実行。
これで、とりあえず平面を認識して色を塗ることはできます。
認識の精度は端末の処理能力によって異なりますので、良いものを目指す場合はここから改善してみてください。

おまけ

ARで平面に色を塗ることは可能であることが分かった。
が、今回使用した端末では、精度・品質に問題があり、これを対戦ゲームで使うとなると超えなければいけないハードルはたくさんありそう。
そうは言っても、平面を塗って見せたらちょっと驚いてもらえるので、それだけでも面白い。
今回はフリーのアセットを使わせていただいたため、お金もかかっていないし、1行のプログラムも書いていない。
UnityやARに興味はあるものの難しそうだと思っている方は入り口として作ってみて、誰かに見てもらったら面白いのでは?と思う。

Job application

応募フォーム

求人のご応募を右のフォームにて受け付けております。
必要事項をご記入、個人情報の取扱規定をご確認の上、「送信」を押してください。
あらためて担当者から、応募書類の送付、面接についてご連絡させていただきます。