たくあんポリポリ

勉強したことを載せていきます。最近、技術系の記事はZennに書いています。(https://zenn.dev/chittai)

ソードアート・オンラインをみてHPゲージが常に左上に配置されるようにしてみた

なんとなくずっと敬遠していたソードアートオンラインをこの間の休みで全話見ました。面白い。ただただ面白い。それから毎日Netflixでお気に入りのシーンを見て、原作を9巻から読み始めるザマ。最近、いろいろと良きコンテンツに出会えて幸せみを感じる。。

www.swordart-online.net

今回作ったもの

せっかくなので、なにかSAOの世界観を再現できないかなーと。思い作成をはじめました。今の所、左上に表示されるHPゲージを表示してみました。

youtu.be

使用した環境

  • Unity 2017.3.1f1 (64-bit)

Unityでやったこと

まずはHPの画像を探してきて、それをUnityにドロップ。配置するときは、HierarchyにUIのImageを配置して、そのUIのSource Imageに画像どドロップ。表示はここまででできるのですが、後は以下の2処理を加えます。

他のオブジェクトよりも常に前にくる

これは、

  • Cameraを新規に作成
  • CameraとOVRCameraRigの位置をあわせる※必須ではない
  • 新しく追加したCamera(以後、Camera)のClear Flags をDepth only にする
  • CameraのDepthを他のカメラよりも大きくする

CameraはDepthが小さい順に描画されるので、こうすることでCameraで移されているオブジェクトは一番前に来ます

  • Culling Mask でUIのみを選択

そうするとCameraで映し出されるオブジェクトはHPゲージだけになります

naichilab.blogspot.jp
このサイトをみるとカメラについて理解しやすいです。

Oculusを傾けてもHPゲージは常に地平線に対して水平にする

アニメをみてると、基本的に地面に対して水平な気がしたので、追加しました。ちな、これはスクリプトを書きました。

public class Rotation : MonoBehaviour {

    Quaternion m_rotation;

	// Use this for initialization
	void Start () {
        m_rotation = transform.localRotation;
	}
	
	// Update is called once per frame
	void Update () {

        transform.localRotation = Quaternion.AngleAxis(-transform.parent.eulerAngles.z, Vector3.forward) * m_rotation;
    }
}

f:id:c_taquna:20180519004800j:plain
この APGuage というオブジェクトにスクリプトをAddしています。「Quaternion.AngleAxis(-transform.parent.eulerAngles.z, Vector3.forward)」の記述で、Z軸に対して回転(Oculusを着けて前を向いたまま首を曲げていく方向)した分を逆方向に回転させることで、回転自体を相殺してZ軸に対して回転しないようにしています。

ハマったとこ

一見よさげだったのですが、上・下に首を動かしているとある一定ラインまでいくとゲージが反転してしまう事象が発生。これはおいて次に進んだのでまだ解決せず。

f:id:c_taquna:20180519005544j:plain

感想

次は、ものを掴んだりして剣を触れるようにしよう