More than 5 years have passed since last update.

VR空間でやる夫作品を読んでみる (β)

Last updated at 2016-08-21Posted at 2016-08-21

昨日、今日とハッカソンがあり初参加してきたのですが、
そこで VR空間でやる夫作品を読む というプロダクト?を作成してきました。
※完成度は超絶低いです

備忘録的に手順をメモしておこうと思います

環境

OSX 10.11
Unity 5.4.0f3 Personal
CardBoard SDK

作成の流れ

1. Unity のインストール

公式から

2. CardBoard SDKの入手

今回VR化するにあたってGoogle Cardboard SDK というのものを使用しました。

Google Cardboard とは

Google Cardboardとは折りたたみボール紙製の本体に手持ちのスマートフォンと組み合わせてことで完成するHMD。レンズが部品として付属し、目の周辺に装着することでバーチャルリアリティ体験ができる[1]。
wikipediaより

こちらのSDKとUnityを用いることで非常に安価にVRコンテンツの作成ができるようです。
今回はこのスマートフォンを組み合わせることができるHMDを
持ってる方がいらっしゃったのでお借りしました。

入手先は公式サイトより
Unity用のSDKを適当なディレクトリへクローンします

$ git clone https://github.com/googlevr/gvr-unity-sdk.git

3. Unity でプロジェクトの作成

Unityで適当なプロジェクトを作成

4. Cardboard SDK のインポート

　プロジェクトが開いたら先ほどダウンロードしたSDKをインポートします

Assets > Import Package > Custom Package...

先ほどcloneしてきたディレクトリにあるGoogleVRForUnity.unitypackageを指定します

するとインポートするものの選択画面?になります。
何が必要かわからないので全てインポートしました()

5. HeadSet DemoScene を開く

画面下の Projectタブにて
Assets > GoogleVR > DemoScenes > HeadsetDemo を選択

Headトラッキングが体験できるデモが入っています。
今回はこちらをベースに開発を進めました

6. IPAモナーフォントのダウンロード, インポート

AAを崩れないようにするためにIPAモナーフォントをダウンロードします

ダウンロードしたら Unity にインポートするために Resources フォルダを作成します

画面下の Assets を右クリックして、現れたメニュからフォルダを作成します

Assets の下に Resources フォルダを作成することで外部リソースファイルに
スクリプトからアクセスが可能となるようです

フォルダを作成したらコンテキストメニューから
Import New Asset を選択し、インポートします

解凍したフォルダの中の fontsディレクトリ以下の ipagp-mona.ttf を選択します

7. やる夫のAAをテキストファイルにしてインポート

やる夫のAAをスクリプトから読み込むためにテキストファイルにして,
Resources フォルダ以下に AAフォルダを作成し、そこにインポートします

今回は以下を3つのファイルに分けてインポートします

Resources/AA/aa_1.txt

　 　 　　　＿＿＿_ 
　 　　　／　　 　 　＼ 
　　　／　 _ノ 　ヽ､_　 ＼ 
　 ／ oﾟ(（●）) (（●）)ﾟo ＼ 　ほんとは現実世界でもっとやる夫を読みたいんだお… 
　 |　　　　 （__人__）　　　　| 
　 ＼　　 　 ｀ ⌒´ 　 　 ／

Resources/AA/aa_2.txt　

　 　　　＿＿＿_ 
　 　　　／　　 　 　＼ 
　　　／　 _ノ 　ヽ､_　 ＼ 
　 ／ 　oﾟ⌒　　　⌒ﾟo　 ＼ 　でも現実世界は仕事で忙しくてそんな暇ないんだお･･･ 
　 |　　　　 （__人__）　　　　|　　 
　 ＼　　 　 ｀ ⌒´ 　 　 ／

Resources/AA/aa_3.txt　

　 　 　　　＿＿＿_ 
　 　　　／⌒　　⌒＼ 
　　　／（ ●） 　（●）＼ 
　 ／::::::⌒（__人__）⌒::::: ＼ 　　だからVRでやる夫をよむお!! 
　 |　　　　　|r┬-|　　　　　| 
　 ＼ 　　 　 `ー'´ 　 　 ／

8. 空のGameObjectを追加

GameObjectを管理するための空のGameObjectを追加します

左の Hierarchy のところで右クリックし、 Create Empty を選択

画面上には見えない、空のオブジェクトが追加されました
名前を適当なものに変更しておきます

9. 追加したGameObjectに 3DText オブジェクトを追加

先ほど追加したGameObjectの子に 3D Text を追加します

オブジェクトの名前, オブジェクトの位置, フォントサイズ, フォントを変更します
　TextのところにAAを貼り付け,GUIで見た目を調整しました

10. スクリプト追加

AAオブジェクトのアニメーション、次のAAの表示などを実装します

Assetsファルダ以下にMyScriptsフォルダを作成し、そちらにスクリプトを追加します

作成したスクリプトをダブルクリックすると、MonoDevelop-Unity というツールが立ち上がりますのでそちらでコードを書いていきます

test.cs

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.Linq;

public class AAObjectManager : MonoBehaviour {

 private GameObject _viewAAObject = null;

 private List<TextAsset> _textAssetList;

 private int _currentPage = 0;

 private bool isFinish = true;

 // Use this for initialization
 void Start () {
 	Debug.Log (Resources.LoadAll("AA",typeof(TextAsset)).Length);
 	// Loading AA 
 	_textAssetList = Resources.LoadAll("AA",typeof(TextAsset)).Cast<TextAsset>().ToList();

 	Debug.Log (_textAssetList);

 	// Binding GameObject to variable
 	_viewAA     = transform.FindChild ("ViewAA").gameObject;

 }

 private int _count = 0;
 // Update is called once per frame
 void Update () {
 	_count++;

 	if(_count == 300 && !isFinish) {

 		FadeOut ();
 		_count = 0;
 	}
 }

     // FadeOut
 void FadeOut(){
 	Vector3 dist_pos = _viewAAObject.transform.position + (new Vector3(0,1000,0));
 	Debug.Log (dist_pos);

 	var moveHash = new Hashtable();
 	moveHash.Add ("position", dist_pos);
 	moveHash.Add ("time", 1f);
 	moveHash.Add ("easeType", "easeInOutBack");
 	moveHash.Add ("oncomplete", "FadeIn");
 	moveHash.Add ("oncompletetarget", this.gameObject); 
 	iTween.MoveTo (_viewAAObject, moveHash);

 	_currentPage++;
 	if (_currentPage > _textAssetList.Count) {
 		isFinish = true;
 	}

 }

     // FadeIn
 public void FadeIn(){
 	Debug.Log ("FadeIn");

 	_viewAAObject.transform.position = new Vector3 (-470, -660, 480);
 	_viewAAObject.GetComponent<TextMesh> ().text = isFinish?"Fin.":_textAssetList[_currentPage].text;

 	var dist = _viewAAObject.transform.position + (new Vector3 (0, 1000, 0));

 	var moveHash = new Hashtable();
 	moveHash.Add ("position", dist);
 	moveHash.Add ("time", 1f);
 	moveHash.Add ("easeType", "easeInOutBack");
 	iTween.MoveTo (_viewAAObject, moveHash);


 }

 public void AAStart(){
 	isFinish = false;
 	_count = 0;
 	_currentPage = 0;

 	FadeIn ();
 }
 	
}

~~ちょっと色々と残念...~~
~~コーディング力がたりない~~

アニメーションの実装には iTween という Assetを用いました
こちらは以下の記事を参考にさせていただきました
参考：http://doggy.hatenablog.com/entry/2016/02/11/121327

11. スクリプトをオブジェクトにアタッチ

スクリプトを作成したら、オブジェクトにアタッチします
オブジェクトにアタッチするにはアタッチしたいオブジェクトを
選択状態にして、画面下のエリアからドラッグ&ドロップします

~~普通ドラッグって書くような~~

12. AAアニメーションスタート用のスクリプト追加

AAのアニメーションが開始するトリガーとして
下のパネルを見たら AAアニメーションがスタート
としたいと思います

今回ベースとしたデモでは床部分にパネルとボタンが設定されているので、
こちらをつかいます

一番上の Reset のオブジェクトを選択し、
Textを変更します

ついでに他のボタンを非表示にしておきます

次に以下の様なスクリプトを作成します

AAAnimationStartScript.cs

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;

public class AAAnimationStartScript : MonoBehaviour, IPointerEnterHandler {

  private AAObjectManager _script;
  private bool _singleFlg = true;

  public void Start(){
  	var go = GameObject.Find("AAObjectManager");
  	_script = go.GetComponent<AAObjectManager>();

  }

  public void OnPointerEnter(PointerEventData eventData)
  { 	
  	if (_singleFlg) {
  		_script.AAStart ();
  		_singleFlg = false;
  	}	
  }

}