Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Oculus RiftAdvent Calendar 2016

Day 14
@Gazyu(Kenta Kuwata)

VR紙芝居を作るために

Last updated at Posted at 2016-12-14

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

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

はじめに

先日行われた"VR GameJam in Japan 2016 Autumn"でいらすとやクエストという、いらすとやさんのイラストを使ってペーパーマリオVRもどきのようなものを作りました。

デモ
IMAGE ALT TEXT HERE

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

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

1.2Dアニメーションのかんたんな作り方

慣れたアニメーション制作方法を持たないのであれば、迷わずにOPTPiX SpriteStudioを使うことをおすすめします。

SnowMan_atack.gif

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

この公式チュートリアル動画を見ただけで僕も上のようなアニメーションが作れたので非常にとっつきやすいと思います。
IMAGE ALT TEXT HERE

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

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にアクセス
  2. 最新版のzipファイルをダウンロード&解凍
  3. 解答したフォルダの中の SsPlayerExamples -> Plugins -> SpriteStudio5 -> Shaders フォルダの中身を下記のフォルダにコピー
    スクリーンショット 2016-12-14 22.55.24.png

    Osx: /Users/Shared/UnrealEngine/{engin ver}/Engine/Shaders
    Win:
  4. 解答したフォルダの中の SsPlayerExamples -> Plugins フォルダ自体を自分のプロジェクトのルートディレクトリにコピー
    コピーするとこんな感じ
    スクリーンショット 2016-12-14 23.08.04.png
  5. コピーした後Unreal Engineでプロジェクトを開き、編集 -> Pluginsを確認
    スクリーンショット 2016-12-14 23.09.48.png
  6. 5.で確認した時にEnabledになっていなかったらチェックを付けて再起動
    (再起動時にシェーダーのコンパイルが走るので初回起動が非常に重いので注意)
  7. Unreal Engineのインポートボタンを押し、作成した*.sspjファイルをインポート
    スクリーンショット 2016-12-14 23.21.27.png
    インポートするとこんな感じになる
  8. 後はこれをドラッグ・アンド・ドロップすると・・・・
    スクリーンショット 2016-12-14 23.23.05.png

Unity

  1. GithubのSS5PlayerForUnity wikiにアクセス
  2. 右下のほうにある安定版と書かれたところからunitypackageをダウンロード&インストール1
  3. 正しく完了するとTools -> SpriteStudio -> Import SS5 からインポート
    スクリーンショット 2016-12-14 19.04.00.png
  4. インポートできるとこんな感じで諸々自動で入るので、Prefabフォルダ内の実体を通常のPrefabと同じように使う
    スクリーンショット 2016-12-14 19.08.58.png
  5. が何故か、Unityでは上手く表示されない。。。。現在調査中です

作成途中に気になったこと

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

キャラのアニメーションの指定はアニメーション名で指定

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

スクリーンショット 2016-12-14 23.29.43.png

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

スクリーンショット 2016-12-14 23.33.39.png

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

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

最後に

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

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

16
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?