UnityでOculus GO開発をするための準備（初心者向け）
Android開発向けの準備
Unityをインストールする際に、Choose ComponentsでAndroid Build Supportをチェックする。
JDKをセットアップ。Java SE Development Kitを以下のサイトからダウンロードしてインストール。
Java SE Development Kit 8 - Downloads
インストールの際に、どこにインストールされるかをメモっておく。
Android SDKのセットアップ
以下のサイトからAndroid Studioをダウンロードする。
Download Android Studio and SDK Tools | Android Developers
インストールの際に、どこへインストールしたかをメモる。
インストールが終わったら、Android Studioを起動するとセットアップウィザードが始まる。
そのまま、セットアップを終了させる。
SDK Platform toolsの設定
以下のブログを参考に、SDK Platform toolsを設定する
もっと簡単！adbコマンドを使えるようにする方法－ダウンロードして解凍してパスを通すだけでOK | orefolder.net
記事中にあるpathの設定も行うこと。
Android NDKのダウンロード
以下のアドレスからダウンロードする
https://dl.google.com/android/repository/android-ndk-r13b-windows-x86_64.zip
これを解凍する。ファイルが大きいので、解凍にはかなり時間がかかる。
解凍すると、android-ndk-r13b というフォルダができるので、ここへのアドレスを記録しておく。
Unity側の設定
Unityエディター上でEdit => Preferencesを選ぶ
External Toolsのタブを選んで、以下の通りAndroidの設定を行う。
Browseのボタンを押し、SDK, JDK, NDKの設定を行う。
SDKの場合、C:/Users/ユーザー名/AppData/Local/Android/Sdk を選べばよいが、AppDataフォルダは隠しフォルダのため、以下のように「隠しファイル」のチェックを入れて見えるようにする。
JDKの場合、C:/Program Files/Java/jdk1.8.0_171 になる。数字はバージョンによって少し異なる。
NDKの場合、C:/AndroidNDK/android-ndk-r13b など android-ndk-r13bへのアドレスを入れる。
Oculus GO用の設定
Oculusアプリで開発者モードをオンにする。
ドライバーのインストール
こちらのアドレスから、ドライバーを入手する
ダウンロードしたら、ファイルを解凍して中のインストーラーを使ってインストールする。
Oculus GOへ接続
すでに、うえでplatform-toolsへのpathを設定しているなら、Oculus GOをUSBでつなげた状態で、コマンドプロンプトで adb devicesと入力する。そうするとunauthorizedと出てくるが、その時にOculus GOの中をのぞくと、接続許可を求めるダイアログが出てるので、そちらで許可する。
そうすると、USB経由でファイルを転送できるようになる。ちなみに、この状態でadb devicesをもう一度入力すると、今度はこうなる。
こうなっていれば、接続準備はOK.
パフォーマンスを上げるために
Everything You Need to Know To Develop for Oculus Go | Oculus
GIMPを使って、Live2Dのテクスチャと背景画像の色調を合わせる。
はじめに
絵巻物から画像を切り抜いてLive2Dでモデルを作った後、絵巻物の色調を変更するおt、後でUnity上で絵巻物にLive2Dモデルを重ねる際、色調が異なっているので違和感が出てしまいます。それを修正する方法について説明します。
前提
こちらの記事の後半で、Unity用にLive2Dモデルを書き出す方法を書いているので、それに従ってUnity用に書き出しを行ってください。
書き出しの準備の際に新規テクスチャアトラスを設定しますが、サイズは2048pxでお願いします。
書き出したファイルの中に
のように ....2048などの数字で終わるフォルダがあります。その中にpngファイルがあるので、それを使います。こちらを「モデルファイル」と呼びましょう。
それと、背景用のファイルを用意します。スマラボメモ の上巻画像のなかから、自分のモデルがあるものを選んでください。
こちらを「背景ファイル」と呼びましょう。
GIMPをインストール
色調の補正にはGIMPを使います。
からインストールしてください。
GIMPに画像を準備する
まず、GIMPを起動して、モデルファイルをドラッグアンドドロップしてください。
次に、ファイル→レイヤーとして開く を使って、背景ファイルを新しいレイヤーに取り込みます。
モデルファイルと背景ファイルが別々のレイヤーとして取り込まれたことを確認してください。
背景ファイルの中で、必要な部分だけを切り抜く
次に、背景ファイル（今回はGroup3(3).tif）の中で、自分が必要な部分だけを切り抜きます。今回はこの中の検非違使C3の頭の部分だけ使うことにして、そこだけ切り抜きます。
まず、レイヤーウィンドウで、背景ファイルの方のレイヤーが選択されていることを確認してください。選択されているレイヤーは灰色です。
つぎに、ウィンドウ→新しいツールボックス でツールボックスを開きます。
ツールボックス左上の「矩形選択」を選んで、切り抜きたい範囲を選択してください。
矩形の対角線上をドラッグすれば、選択できます。
次に、レイヤー→選択範囲で切り抜き を使って、選択した範囲を切り抜きます。
以下のように切り抜けるはずです。
これでもよいのですが、このままだとモデルファイルの方の画像とサイズが異なるため、色調を比較するときに少し不便です。そこで、レイヤー→レイヤーの拡大縮小 を使って、サイズを変更します。
以下の画面で設定しますが、何度かサイズを試してみて、モデルファイルとだいたい同じスケール感ならOKです。
モデルファイルと背景ファイルが比較しやすいように、切り抜いた画像を移動させましょう。ツールボックスから「移動」を選択して、切り抜いた画像をドラッグアンドドロップしてください。
これで、だいぶわかりやすくなりました。
サンプルポイントを設定する
次に、モデルファイルと背景ファイルの間で同じ場所に相当する場所の色調を比較するために、サンプルポイントを設定します。サンプルポイントを設定するには、上および左に存在するルーラーをctrl+左ボタンでドラッグします。
そうすると、十字の線が現れるので、それをモデルファイルの中で、色調比較に使いたい場所へ移動させて、ボタンを離してください。
すると、円に十字がついたようなサンプルポイントが設定されます。「１」という番号に注意してください。もし、誤った場所に置いてしまった場合は、サンプルポイントをGIMPのウィンドウの外へドラッグすれば、消えます。
次に、背景ファイルの方でも、モデルファイルと同じような位置にサンプルポイントを配置します。こちらは番号「２」になるはずです。
これで、モデルファイル、背景ファイル両方で、同じ人物の同じような位置にサンプルポイントを設定できました。最後に選択→選択を解除 を選んで、何も選択されてない状態にしてください。
モデルファイルの色調を調整する。
つぎに、二つのサンプルポイントの色調を比較して、モデルファイルの方を修正します。まず、レイヤーウィンドウで、モデルファイルのレイヤーを選択してください。
ウィンドウ→ドッキング可能なダイアログ→サンプルポイントで、サンプルポイントの情報を出します。
サンプルポイントウィンドウの左にポイント１、右にポイント２のRGBA情報が出ます。現在、二つの点は色が違うので、RGBの値が異なります。これらを、トーンカーブの修正によって近くします。
次に、色→トーンカーブ を選択して、トーンカーブを出します。
更に、チャネルを「赤」変更してください。
次に、カーソルを点１の近くに持って行って、クリックしてください。
トーンカーブに縦線が引かれて、クリックした場所のR値がわかります。次に、このカーブを縦線のあたりで上下にドラッグして、色調を補正し、点1、点2でのRの値が等しくなるようにします。
同じことを、G,Bでも行ってください。最終的には、RGBすべて同じになるようにすることで、二つの色調がそろいます。
ここで、トーンカーブウィンドウでOKを押さずに、点1、点2ドラッグし、人物上の位置を同じ位置を再び選んで（できれば、最初より明るさの違うところ）、同じことを繰り返し、調整してください。
満足したら、トーンカーブウィンドウでOKを押せば完成です。
最後にレイヤーウィンドウで背景ファイルのレイヤーを削除します。
ファイル→○○に上書きエクスポートを選ぶことで、元画像が修正されます。
UnityのTimeline Editorを使ってLive2Dのキャラクターを動かす
はじめに
アニメーションを付けたLive2Dモデルを二つ用意しましょう。ここでは、桃瀬ひよりのモデルと初音ミクのモデルを使います。桃瀬ひよりのモデルは http://res.live2d.com/res/sample_data/momose4/momose_tutorial04.zip から、初音ミクのモデルは http://res.live2d.com/res/sample_data/miku/miku.zip からダウンロードしてください。初音ミクのモデルは、miku_sample.cmox という旧式のモデルなので 注意してください。それぞれのモデルで、Live2D Cubism AnimatorでScene1というシーンを作っておきましょう。
Unityのほうですが、Timeline EditorはUnity 2017以降でないと使えません。注意して下さい。
Unityのプロジェクトを準備する
まず、Unityの新規プロジェクトを作り、Live2D Cubism SDK, Live2Dモデルをインポートしてください。以下のように、桃瀬ひよりのファイルと初音ミクのファイルは分けておきましょう。
シーンにモデルを配置する。
桃瀬ひより、初音ミクのモデルファイルをHierarchyウィンドウにドラッグアンドドロップします。モデルファイルは、以下のもので、UnityではPrefabと呼びます。
今のままだと、Gameウィンドウに見えるモデルが遠すぎます。
そこで、初音ミクと桃瀬ひよりの位置を以下の通り変更します。
すると、両方のモデルがGameウィンドウ内に見えます。
モデルの表示が崩れているので、両方のモデルのCubism Render ControllerのModeをBack To Front Orderに変更します。
すると、モデルの表示が正しくなります。
Timelineの設定
画面上のWindowメニューからTimeline Editorを選んで下さい
Hierarchyウィンドウで桃瀬ひよりのモデルを選んだ状態で、Timeline EditorのCreateボタンを押してください。
Playableファイルを保存するようウィンドウが出るので、そのまま保存してください。
すると、以下のようなタイムラインが作られます。
このタイムラインに、桃瀬ひよりのAnimation Clipをドラッグアンドドロップしましょう。
このように、タイムラインにAnimation Clipが挿入されます。
タイムラインの実行ボタンを押して、タイムラインを実行してみましょう。
桃瀬ひよりの方でアニメーションが実行されます。
次に、初音ミクのアニメーションを設定します。同じように、初音ミクのAnimation ClipをTimeline Editorにドラッグアンドドロップしてください。
左のところにNone(Animator)と表示されています。このままだとアニメーションが実行できないので、ここへHierarchyから初音ミクのモデルをドラッグアンドドロップします。
すると、"Create Animator on ..."と出るので、それを選んでください。
すると、初音ミクのモデルにAnimatorが追加されて、アニメーションするようになります。Timeline Editorを再生してみましょう。
Live2Dのモデルのアニメーションを、Unityで動かす
準備
Live2D SDKをダウンロードする
SDKダウンロードボタンが二つありますが、
Download Cubism 3.0 SDK For Unity R2
のように"for unity"のついている方をダウンロードしてください。
UnityPackage形式のファイルがダウンロードされるので、それをUnityからインポートしましょう。インポート先のプロジェクトを事前に作っておいてください。
すると、Assetsフォルダ内にLive2Dというフォルダができます。
[Windowsを使っている人は、以下の作業が必要]
Windowsの場合、SDKをインポートすると”DllNotFoundException: Live2DCubismCore”というエラーが出ることがあります。
この場合は、Unityを再起動してください。
これで、Live2Dモデルを使う準備ができました。
Live2Dモデルをインポートする
以前の記事で書いたように、UnityにLive2Dモデルを持っていくときは、以下のファイルが必要です。
これらを、Unityにドラッグアンドドロップしてください。
すると、Unity内で謎の処理が行われて、下図でハイライトしたファイルができます。
このうち、miku_sample.prefabがLive2Dモデルです。これを、Hierarchyにドラッグアンドドロップすると、Live2Dモデルが現れます。
実は、このままだとモデルの表示がおかしくなってしまいます。
これを修正するには、miku_sampleのCubism Render ControllerコンポーネントのSortingの設定で、Modeを”Back To Front Order"に変更すればOKです。
Unityのアニメーション機能でLive2Dモデルを動かす
Live2DのAnimatorで作ったScene1, Scene2が、Unityでは同じ名前のAnimation Clipになっています。
これらを使ってLive2Dモデルを動かすには、まずAnimation Clipを再生するためのAnimator Controllerを作ります。
名前は適当に決めてください（ここではTest)
このTestコントローラーを選択して、AnimatorウィンドウにScene1, Scene2のAnimation Clipをドラッグアンドドロップすると、それらがAnimatorのステートになります。
このままだと、Scene1からScene2に遷移できないので、Scene1からScene2に遷移を追加します。Scene1を右マウスボタンでクリックして出てくるメニューからMake Transitionを選択し、出てきた矢印をScene2につなげてください。
次に、Live2Dモデル（ここではmiku_sample）にAnimatorコンポーネントをアタッチします。Hierarchyからmiku_sampleを選んで、Inspectorの一番下にある"Add Component"ボタンを押し、Miscellaneous→Animatorを選んでください。
次に、アタッチしたAnimatorに先ほど作ったAnimator Controllerを適用します。Test.controllerをAnimatorのControllerという項目にドラッグアンドドロップしてください。
これでUnityを実行すると、Scene1（目が閉じる）,Scene2（目が左を見る）のアニメーションが再生されます。
Live2Dモデルにアニメーションを付ける
Live2D Cubism Editor Animatorでの作業の準備
まず最初に、エディターの左上のボタンを押して、ModellerからAnimatorモードに切り替える
次に、メニューの「ファイル」→「新規作成」→「アニメーション」を選択
新しい「シーン」が作成され、タイムラインも編集できるようになる。
つぎに、Modellerで作ったLive2Dモデル（cmo3形式）をドラッグアンドドロップする。
すると、タイムラインにトラックが追加され、パラメータなどをアニメーションすることができるようになる。
タイムラインでのアニメーションの作り方
タイムラインには、Ctrl + 左クリックでキーフレームを追加する。キーフレーム上でのパラメータの値を設定することで、アニメーションが作れる。
再生ボタンでアニメーションを確認できる。
アニメーションができたら保存。can3という形式になる。
シーンウィンドウの下記のボタンを押すと、シーンを追加でき、別のアニメーションを作れる。これらは、Unityにインポートした時、別のAnimation Clipとして認識される。
Unityへエクスポートする。
Live2DモデルをUnityで使うには、モデルとアニメーションの両方をUnity用に出力する必要があります。
モデルを出力するには、エディタをModelerモードにして、アニメーションに使っているモデルを開きます。次に、ウィンドウ上中央の「テクスチャアトラス編集」ボタンをクリックします。
すると、「新規テクスチャアトラス設定」ウィンドウが出るので、テクスチャの名前を指定しましょう。
次に「自動レイアウトを行いますか？」と聞かれるので、OK
すると、テクスチャを、下のようにお互いが重なり合って整理されていない状態から
以下のように、テクスチャが大きさに合わせてサイズ変更され、重なり合ってない状態に整理されます。
うまく整理されたらウィンドウの下のOKボタンを押します。
次に、メニューから「ファイル」→「組込み用ファイル書き出し」→「mocファイル書き出し」を選びます。
書き出し設定の画面が出ますが、とりあえずそのままOK
すると、保存用のウィンドウが出てくるので、名前を決めて保存。
すると、以下の下線を引いたファイルが作られます。
次に、エディタをAnimatorモードにして、アニメーションファイルを開きます。次に、メニューから「ファイル」→「組込み用ファイル書き出し」→「モーションファイル書き出し」を選びます。
すると、モーションデータ設定の画面になります。ここでは、「書き出しシーン設定」を「全シーンを出力」にしておきましょう。
次にファイルを保存する場所の選択になりますが、ここは先ほどのモデルのファイルを保存した場所と同じところを指定してください。
すると、シーンに対応するjsonファイルが作られます。
Unityには、以下でハイライトしたファイルを取り込ませれば、UnityでLive2Dモデルをアニメーションさせられます。
Live2D Cubism 3 で顔を動かす。
開発者インタビュー
Live2Dの開発の意図などがわかります
インストール
こちらからインストール。Cubism Editorをダウンロードすること。
チュートリアル
TOP | Live2D Manuals & Tutorials
こちらのチュートリアルを必ず見てください。
その他参考資料
眉
02. 動きをつける（親子関係のある動き） - Live2D Cubism 2 マニュアル
目と口
#05 パラメータで動きをつけよう - Live2D Cubism 2 マニュアル
Live2Dで顔を動かすために必要な顔の部品を準備する
はじめに
Live2Dで顔をうごかすには、顔のパーツを分割する必要があります。基本的な分割方法は
#01 インポート用のPSDを用意しよう - Live2D Cubism 2 マニュアル
こちらを参考にしてください。
絵巻の人物に必要な部品
眉毛 mayuge
上まぶた（まつ毛含む）ue_mabuta
下まぶた shita_mabuta
目頭 megashira: まぶたと分けないと、瞬きが不自然になることがある。
黒目 kurome: 足りない部分は書き足す
白目 shirome: 黒目に隠れている部分も書き足す
上唇 ue_kuchibiru
下唇 shita_kuchibiru
顔全体 face
背景 background 上記のもの以外のすべて。
レイヤーの名前は、上記のローマ字で統一する。
各々の最後にR, Lを加える。画面内の左がR（右側）、画面内の右がL（左側）であることに注意する。
作成時の注意
①オリジナルのコピーを作る
元となる画像を開いたら、そのレイヤーのコピーを作り、画像の変更はコピーの方に行いましょう。元の画像のレイヤーはOriginal, コピーの画像のレイヤーはCopyとしましょう。
②作業していないレイヤーをロックする
特に、絵を消している作業の際に、意図していないレイヤーを変更してしまうと取り返しがつかないので、作業していないレイヤーは「鍵」の形をしたアイコンをクリックしてロックし、作業しているレイヤーだけロックが外れた状態にしましょう。
③はじめは大きめに切り取り、後で修正する。
絵巻物の画像は境界が不鮮明なので、どこまで切り取るかを見極めるのが難しいです。そのため、最初は周囲を残して大きめに切り取って、Live2Dで違和感がないか確かめまましょう。PSDファイルは、Kritaで上書きするとLive2D側でも更新されます。周囲が残り過ぎているとほかのオブジェクトと重なった時に違和感があるので、最終的にはギリギリまで削ってください。
④白目の領域は、黒目など、目をつぶった時に消えるべきものを含むこと
Live2Dで目を開閉させるときには、上まぶたや下まぶたを動かすのですが、そのままだと、下の黒目などはそのまま残ってしまいます（まぶたが閉じるときに、まぶたの裏に隠れてくれない）。これを防ぐため、黒目を白目の領域に「クリッピング」します。これを行っていると、白目が存在しないところでは、黒目も見えなくなります。これにより、白目の領域を拡大縮小することで、目の開閉を表現できます。
この機能をうまく使うため、Kritaで白目の領域を設定するときは、黒目など「めが閉じるときにまぶたの後ろに消えてほしいもの」を含むようにしましょう。これも、初めは広めに設定して、Live2Dで確認しながら狭くしていきましょう。
