VR紙芝居を作るために

この記事はOculus Rift Advent Calendar 2016の14日目の記事です。

VR系の記事なのにあえてVR空間内で2Dキャラ表示をすることについて書きます。

# はじめに
先日行われた"[VR GameJam in Japan 2016 Autumn](http://vrgj2016.peatix.com/)"で**いらすとやクエスト**という、いらすとやさんのイラストを使ってペーパーマリオVRもどきのようなものを作りました。

デモ
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/ekzyxYngmns/0.jpg)](http://www.youtube.com/watch?v=ekzyxYngmns)


今まで自分の中では、VRなのだから3Dキャラがデフォだろうという思い込みが有ったのですが、以外と VRの3D空間内でペラペラのキャラが立体的に動くのもかなりアリだと思いました。

なので、まずは習作として素人がVR紙芝居を作ってみた知見をまとめてみます。

# 1.2Dアニメーションのかんたんな作り方
慣れたアニメーション制作方法を持たないのであれば、迷わずに[OPTPiX SpriteStudio](http://www.webtech.co.jp/spritestudio/)を使うことをおすすめします。

![SnowMan_atack.gif](https://qiita-image-store.s3.amazonaws.com/0/45441/12eafb54-7fb5-f7e5-d533-268792aa51e2.gif)

上記の**いらすとやクエスト**の制作の際にも使いましたが、上記のようなアニメーションが慣れると十分程度で簡単にできるようになります。

この公式チュートリアル動画を見ただけで僕も上のようなアニメーションが作れたので非常にとっつきやすいと思います。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/SswcPDw9j98/0.jpg)](http://www.youtube.com/watch?v=SswcPDw9j98)

趣味性の高いアプリを作る時に一番ハードルが高いのは、中で使うコンテンツの制作なので、お手軽に自分で制作できる手段は非常にありがたいです。

# 2.作った2Dアニメーションを使うための用意
現在VRアプリを作るのであれば、 Unity か Unreal Engine の2択になるかと思います。
SpriteStudioは Unity でも Unreal Engine でもすぐにSpriteStudioで作成したデータを取り込めるプラグインが用意されています。
ただ、現在のところUnity 5.4及び5.5では上手く動作を確認できず、また、Unreal Engineでは用意が少し面倒です。

### Unreal Engine

1. Githubの[SS5PlayerForUnrealEngine4 Release](https://github.com/SpriteStudio/SS5PlayerForUnrealEngine4/releases)にアクセス
2. 最新版のzipファイルをダウンロード&解凍
3. 解答したフォルダの中の SsPlayerExamples -> Plugins -> SpriteStudio5 -> Shaders フォルダの中身を下記のフォルダにコピー<br><img width="990" alt="スクリーンショット 2016-12-14 22.55.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/975987d7-9c61-5c77-1c0c-1b649296232e.png"><br><br>Osx: /Users/Shared/UnrealEngine/{engin ver}/Engine/Shaders<br>Win:
4. 解答したフォルダの中の SsPlayerExamples -> Plugins フォルダ自体を自分のプロジェクトのルートディレクトリにコピー<br>コピーするとこんな感じ<br><img width="360" alt="スクリーンショット 2016-12-14 23.08.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/f75cab20-8e37-a792-440a-dfec7d266e13.png">
5. コピーした後Unreal Engineでプロジェクトを開き、編集 -> Pluginsを確認<br><img width="938" alt="スクリーンショット 2016-12-14 23.09.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/8c7d3db5-ba6c-497d-c32d-13db4112bf51.png">
6. 5.で確認した時にEnabledになっていなかったらチェックを付けて再起動<br>(再起動時にシェーダーのコンパイルが走るので初回起動が非常に重いので注意)
7. Unreal Engineのインポートボタンを押し、作成した*.sspjファイルをインポート<br><img width="329" alt="スクリーンショット 2016-12-14 23.21.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/4bca370f-3e08-d36c-fa52-bbc7fb77b787.png"><br>インポートするとこんな感じになる
8. 後はこれをドラッグ・アンド・ドロップすると・・・・<br><img width="582" alt="スクリーンショット 2016-12-14 23.23.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/3bbd9934-1297-3249-9d75-0716f2a6d146.png">







### Unity

1. Githubの[SS5PlayerForUnity wiki](https://github.com/SpriteStudio/SS5PlayerForUnity/wiki)にアクセス
2. 右下のほうにある**安定版**と書かれたところからunitypackageをダウンロード&インストール[^1]
3. 正しく完了するとTools -> SpriteStudio -> Import SS5 からインポート<br><img width="334" alt="スクリーンショット 2016-12-14 19.04.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/9c9f0427-1255-9ea4-5419-639e564e762d.png">
4. インポートできるとこんな感じで諸々自動で入るので、Prefabフォルダ内の実体を通常のPrefabと同じように使う<br><img width="206" alt="スクリーンショット 2016-12-14 19.08.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/92b8529d-7327-a9d2-0165-4fafe3edac86.png">
5. が何故か、Unityでは上手く表示されない。。。。現在調査中です


[^1]:そのすぐ下に**最新の開発版**がありますが、2016/12/14現在なぜか安定版の方が新しいプラグインがDLできるので注意です。

# 作成途中に気になったこと
とりあえず、上の手順を踏むと、Unreal Enginではすぐに作成したアニメーション付き2Dキャラを表示することが出来ます。しかし、いくつか注意点が有りました。

### キャラのアニメーションの指定はアニメーション名で指定
キャラが簡単にアニメーションするようになりましたが、実際には、その時々で行わせたいアニメーションを指定する必要が出てきます。その際の指定方法がアニメーション名となっています。
具体的には、オブジェクトをクリックして詳細をみるとこんな設定項目が有ります。

<img width="266" alt="スクリーンショット 2016-12-14 23.29.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/9b14fd03-5b3a-d24c-379b-cf21d452d867.png">

この上から４番目に再生したいアニメーション名を入れると、該当のアニメーションが始まるのですが、このアニメーション名が何かというと

<img width="201" alt="スクリーンショット 2016-12-14 23.33.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/45441/deae8df3-d796-c6c1-6235-83e70cd7bdc7.png">

SpriteStudioで生成したアニメーションの文字列になります。

1,2個のアニメーションしかなければ問題ないですが、１つのキャラに多数のアニメーションを設定していると、途中でこのアニメーションの名前なんだっけとなるので、アニメーション名一覧表とかをもっておいたほうが良さそうです。

# 最後に
今のVRアプリは、基本的に3D空間内に3Dキャラが存在するものが一般的で、どちらかというと今作っているVR紙芝居は外道な感じだと思います。ただ、3Dゲーム全盛期にペーパーマリオの初代が出たように、あえてVR 3D空間内をペラペラのキャラが動き回るのも面白いと個人的には思ってるので、流行るといいなー