日々、Switchの画面に暴言を吐くスプラティストの皆様。リアルに塗りあったらどうだろうかとか、ARだったらどうだろうかなどとお考えになったことはありませんか？
作ってみました。この動画の程度のものであれば、先人の用意してくれたパーツを組み合わせるだけで、とても簡単に作れます。
僭越ながら備忘録も兼ねて、作り方を以下に書かせていただきます。
Unityのインストールが終わったら、プロジェクトを作ります。
テンプレートがいろいろありますが、デフォルトの「3D」のままでOKです。
プロジェクト名、保存先を決めて「作成」を押したら、プロジェクトの作成が始まります。
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アプリのファイルを書き出す準備が整いました。
色塗り機能を自分で作るとなると高いスキルが必要になるので、先人が用意してくれたアセット（Ink Painter）を使わせてもらいます。
Unityにはこうした便利なアセットがたくさんあり、組合せ次第でいろんなものが作れます。
Unityの画面で「シーン」が選ばれているところで「アセットストア」を選ぶか、メニューバー＞ウィンドウ＞アセットストアを選ぶ。
アセットストアのサイトに飛ぶので、そこで「Ink Painter」と検索。
フリーのアセットが出てくるので、画像をクリックし、「Open in Unity」をクリックする。
「UnityEditorを開きますか」と言うアラートが出るので許可。
パッケージマネージャーの画面が開き、InkPainterが追加されているので「インポート」を押す。
プロジェクトウィンドウ＞Assets＞InkPainter＞Sample＞SampleSceneから「Sample01-Paint-」を探し、ダブルクリック。
ヒエラルキーウィンドウのシーン名「Sample01-Paint」の上で右クリックし、シーンを別名で保存を選択。
Scenesフォルダ内に任意の名前で保存。
※ここで▶ボタンを押したら実際にオブジェクトに色を塗ることができます。他のサンプルシーンだとどんな風に塗れるのか試してみるのも楽しいです。
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に興味はあるものの難しそうだと思っている方は入り口として作ってみて、誰かに見てもらったら面白いのでは？と思う。
【宣伝】
当社では、エンジニアを募集しています。
転職をお考えの方はご検討をお願いします。
