GoogleSpreadSheetを使ったVive対スマホ
執筆者 / イチクマ
はじめに
前回のつづきです。（全３回中２回目）
今回はVR側のゲーム実装を説明していきます。
この記事の内容
VR側で使用するアセット実装と、
スプレッドシートへのデータ共有などをしていきます。
1. スプレッドシートでデータを共有する
2. VR側のゲーム画面を実装する（いまここ）
3. スマホ側のゲーム画面を実装する
用意するもの
今回VR機器としてHTCViveProを使用します。
Unityで使用できるようにSteamVRプラグインをインポートします。
背景素材やキャラクタについてはUniyAssetStoreからフリーなものを使用します。
今回はこちらをピックアップしました。
・Cartoon Temple Building Kit Lite：ブロック感覚で神殿作り
・Mini Legion Rock Golem PBR HP Polyart：見た目が巨人ぽい
・Particle Attractor：攻撃用エフェクト
ステージ作成
インポートしたCartoon Templeから素材をつなぎ合わせいきます。
作りやすいブロック単位になっているのでサクサク組み上げられます。
３０分くらいで以下のようになりました。
巨人を動かせるように
インポートしたMini Legion Rock Golemから「PBR_Golem」を使っていきます。
ステージ中央に配置してスケールもステージに合わせて大きくします。
AnimationControllerにデフォルトで攻撃などが設定されていますが、
今回はidleのみ使用しますので、それ以外は削除します。
次にインポートしたSteamVRから[CameraRig]を巨人の上に配置します。
HMDを付けたときに巨人を少し上から見下ろすような位置におきました。
（ワンダと巨像みたいな雰囲気です。）
次にParticle Attractorから「Particle attractor 000 basic」を配置します。
攻撃エフェクトとして炎を吹くようにしたかったので、
口元に起点を配置し、前方地面にターゲットを設定しました。
ParticleSystemのパラメータは配置後に再生しながら調整しました。
（StartSizeを大きくしたり、色を赤に固定にしたりなど）
またParticleAttractorLinearのSpeedを大きくすることで、
広がりを抑えた直線状の見た目になりました。
最後に「PBR_Golem」に以下のような操作用スクリプトを追加します。
| public Camera _targetCamera; public GameObject laser_effect; public SteamVR_Input_Sources hand; public SteamVR_Action_Boolean grabAction; void Update () { if (grabAction.GetState(hand)) { laser_effect.SetActive(true); } else { laser_effect.SetActive(false); } Vector3 targetRot = new Vector3(0.0f, 0.0f, 0.0f); targetRot.y = _targetCamera.transform.localEulerAngles.y; this.transform.localEulerAngles = targetRot; } |
やっていることは以下２つです。
・巨人の向きをHMDカメラ向きに合わせる
・トリガーボタンが押されたらエフェクトを表示する
コントローラの入力関連はこちらを参考にさせていただきました。
Inspectorでは以下のように設定します。
これで巨人(VR)側は準備できました。
完成イメージは以下のようになります。
スプレッドシートを更新
前回用意したスプレッドシートのデータ設定関数を使っていきます。
更新するデータは１行目（図の赤枠）となります。
座標と角度はカメラの情報を送ります。
今回は動き回ることは想定していないので、実際には座標は使用しません。
| ClearSD(); SetSD_Pos(1, 2); SetSD_Value(0, 0, “play”); SetSD_Value(1, 0, “VIVE”); SetSD_Value(2, 0, “岩巨人”); SetSD_Value(3, 0, “0xFFFFFF”); SetSD_Value(4, 0, CamPos.x); SetSD_Value(5, 0, CamPos.y); SetSD_Value(6, 0, CamPos.z); SetSD_Value(7, 0, CamRot.x); SetSD_Value(8, 0, CamRot.y); SetSD_Value(9, 0, CamRot.z); SendDataAsync(“シート名”,null); |
また炎を出しているときは状態を”attack”にします。
まとめ
AssetStoreの素材を組み合わせただけでしたが、
Unityで行った作業は１日もかからない内容でした。
次回はスマホ側のゲーム画面を実装していきます。