yotiky Tech Blog

とあるエンジニアの備忘録

Unity - ナビゲーション(誘導する)矢印を作成する

こんな感じのやつ。

f:id:yotiky:20211207212400g:plain

GameObjectを作成する

空のゲームオブジェクトを作成してArrowsとする。

f:id:yotiky:20211207221214p:plain

Arrows配下に2つCubeを作成する。

f:id:yotiky:20211207221310p:plain

それぞれ以下のように設定するとL字に組み合わせることができる。

f:id:yotiky:20211207221330p:plain:w250 f:id:yotiky:20211207221346p:plain:w250

続いて2つ目の矢印。 XとYをそれぞれ2ずつずらす。

f:id:yotiky:20211207221558p:plain:w250 f:id:yotiky:20211207221607p:plain:w250

3つ目の矢印も同様にさらに2ずつずらして、最終的に以下のようなツリーを構築する。

f:id:yotiky:20211207221138p:plain

f:id:yotiky:20211207221753p:plain

最後にArrowsオブジェクトでScaleとRotation(方向)を調整する。 左向きにしたい場合はZ軸を-45、右向きは135となる。

f:id:yotiky:20211207221937p:plain

アニメーション

Allowsオブジェクトを選択した状態で、Timelineウィンドウを開いてCreateボタンをクリック。ついでにウィンドウをロックしておく。

f:id:yotiky:20211207222240p:plain

f:id:yotiky:20211207222218p:plain

Arrows配下のCube6個を選択して、Timelineウィンドウの左側のペインにドラッグ&ドロップ。プルダウンが出るので、「Add Animation Track」を選択する。

f:id:yotiky:20211207222420p:plain

recordingを使って、各CubeのMaterialのColorで白と黄のKeyを打つ。

  • Cube、Cube(1)
    • 0~59 : 白
    • 60~89 : 黃
    • 90 : 白
  • Cube(2)、Cube(3)
    • 0~29 : 白
    • 30~59 : 黃
    • 60~ : 白
  • Cube(4)、Cube(5)
    • 0~29 : 黃
    • 30~ : 白

f:id:yotiky:20211207222709p:plain

最後にArrrowsにアタッチされたPlayable DirectorのWrap ModeをLoopに設定する。

f:id:yotiky:20211207223552p:plain

完成

f:id:yotiky:20211207212400g:plain

回転のナビゲーション(応用)

f:id:yotiky:20211207235437g:plain

中心にするGameObjectをCenterの名で作成する。(今回は中央下にあるCubeの位置が中心) その配下にさらにGameObjectをArrowの名で作成する。 Arrowの配下にCube2個を作成し、矢印を形作る。

f:id:yotiky:20211207235851p:plain

f:id:yotiky:20211207235906p:plain:w280 f:id:yotiky:20211207235916p:plain:w280

Arrowを円弧の半径分距離を開けて、Z軸に-45傾ける。

f:id:yotiky:20211208000033p:plain:w280

f:id:yotiky:20211208000119p:plain

CenterをCtrl+Dで9個複製し、Z軸を10ずつ回転させる。

f:id:yotiky:20211208000303p:plain f:id:yotiky:20211208000235p:plain:w280

f:id:yotiky:20211208000352p:plain

横の矢印と同じようにアニメーションを設定する。 今回は15frame刻みで変化するようにした。

f:id:yotiky:20211208000609p:plain

f:id:yotiky:20211207235437g:plain