更新日: 2020年8月23日

【VoxEdit/MagicaVoxel】Sandboxのアセットをデザインをする!~アニメーション編~

今回はモデルを動かす作業をします!使うアプリケーションはVoxEditです!

前回までは、イラストを描いてそれをもとにモデリングをしたところまででした!今回はそのモデルをつなぎ合わせてアニメーションを作っていきます!

↓↓↓↓前回の記事↓↓↓↓

早速やっていきましょう!

VoxEditの使い方

まずは簡単な使い方を紹介します!

VoxEditを立ち上げるとこんな画面が開きます!

VoxEdit初期画像

編集モードが3種類あり上のmodelerと下のBlockが前回説明したMagicaVoxelのようなモデルを作るためのモードですBlockの方はブロックのデザインがしやすくなったモードです。真ん中のAnimatorがアニメーションを付けるためのモードです。

今回はAnimatorモードのみを使います!

基本操作

カメラを回転
右クリック

オブジェクトにカーソルを合わせて行うとオブジェクトを中心に回転

カメラを移動
ホイールクリック

Shift押しながら実行すると移動速度上がります

拡大縮小
マウスホイール

VoxEditを開くとこんな感じの画面になります。

VoxEditで作るアニメーションは何秒の時にノード(結び目。モデルのパーツをノードに設定します。)がどこにあるかというのをつなげ合わせてアニメーションにします。

それぞれのノードには親ノードがあり、親ノードが動くと子ノードである自分も親に合わせて動きます。しっぽなんかは先に行くにつれ子ノード根元に行くにつれ親ノードとなります。

言葉で説明してもわかりにくいので、実際にやりながら確認しましょう!

アニメーション

まず前回作ったモデルをインポートしましょう!画面右側に注目。

インポートするときの画像

黄色い枠で囲っているlibrary横のハンバーガーバー内にあるimport VOXをクリック。前回作ったモデルのパーツをすべてインポートします!

次にノードの追加をします!

ノード追加画像

Root横の点々からCreate Child Nodeを選択。ノードを追加しましょう!先ほども言いましたが、子ノードとして追加したノードは親ノードが動くとそれについて行く動きをします!基本的に追加したいノードが生えている元のノードを親ノードとします。(例:腕→手→指→爪)

腕や目などのノードも追加していきましょう!目に関して、左右全く同じモデルを使うのであとでleft eye bou 1 からDuplicate Nodeを選択し右側を複製します!

ノード画像

こんな感じになりました!

インポートしたモデルをノードに割り当てましょう!

割り当て画像

右側から左側にドラッグ&ドロップでノードに割り当てることができます。全部に割り当てていきましょう!

モデルを割り当てたときの画像

ノードがぐちゃぐちゃして見にくい時は横にあるマイナスボタンを押すとすっきりします!

アニメーションを作っていくときに操作していくものは

  • プレビュー画面
  • Tool
  • Skeleton
  • Timeline
  • Inspector

です。

順番に説明していきましょう!

プレビュー画面

プレビュー画面

今作っているモデルの全体が表示されている画面です!ここに表示されているモデルをクリックすることで、位置、角度などを調節することができます。

プレビュー画面のアニメーションがそのままゲームで使われることになるので見て変でないようにしましょう!

Tool

Tool 画像

一番上にあるメニュー的な奴!左から順に

  • トップに戻る
  • セーブ
  • ノード選択
  • ノード移動
  • ノード回転
  • グローバルスペース
  • パブリックスペース
  • リグ表示/非表示
  • ボックス表示/非表示
  • IK機能
  • モデルの光有無
  • カメラリセット

上のFileとEditからセーブやアンドゥ、リドゥ(Ctrl+Z、Ctrl+Y)も使用できます。アンドゥの回数は10回しかないので注意!

ノード選択はほとんど使いません。ノード移動とノード回転を多用します。

グローバルスペースとパブリックスペースは、ワールドを中心に見て編集するか選択しているノード中心に編集するかを選ぶことができます。

IKについてはInspectorのところで説明します!

モデルの光の有無ですがMagicaVoxelからモデルをインポートしてきた人には関係ありませんがVoxEditでモデルを作ると任意の場所を光らせることができます!

Skelton

スケルトン画面

 

ノードを作った画面です!

名前の横にあるマイナスをクリックするとそれ以降の子ノードを隠すことができます。

マイナスと名前の間にある点々をクリックすると

  • 名前変更
  • 子供ノード作成
  • ノードの複製
  • ノードの消去
  • 割り当てられたモデルリセット

の機能を選択することができます。ちなみにノード複製は選択したノードの子ノードも複製されます!

点々の下にあるペンのマークをクリックすると、設定されているモデルを編集することができます。光らせたい部分があるならここから編集してみましょう!

Timeline

Timeline 画像

一番上のrunとなっているところ(デフォルトではIdle)にモデルの状態(走っている、隠れている、平常など)を追加して何種類かのアニメーションを作成します!

上の黄色い矢印とバーで時間指定をし、その時のモデルの位置を定めて作っていきます。1,2,3と数字が表示されているところが1,2,3秒になります。1秒までに設定できる数は24個と固定されています。全部埋める必要はなく設定した動作になるように徐々に動いて行きます。

時間指定をした後、モデルを動かせば自動的にひし形を追加できます。

Timeline編集画像

ひし形をShift押しながら左クリックすることで選択できます。右クリックを押したら、次のモーションに行くまでの動きの設定ができます。一番下にチェックを入れると最短距離ではなく遠回りをしてくれます。

再生ボタンで作ったアニメーションを確認できます。

Inspector

Inspector画像

まず上のTransformから、ノードを選択したらpositionとRotationに数字が表示されます。数字が表示されているときに、値を変更するとそれに従ってノードが移動、回転します。

Inverse Kinematicsはいくつかのノードを連動させる機能になります。

一番根元に来る親ノードをAnchorに設定し、その先に来る子ノードをIKに設定します。Tool内(一番上にあるメニューバー)にあるIKを有効にしたら一番下の子ノードを移動させると親のノードたちも子につられるように動きます!

IKに設定したノードはそれぞれに動きの制限を付けることができます。Constraints、Constraint Anglesで設定できます。

制作

今回は隠れているときのアニメーションのみを作ります。イメージとしては宝箱に擬態しているけど外の様子が見たくて少しだけ口を開けて周りを確認しているアニメーションです。

動かすノードは目、黒目、目までの棒、蓋のみなので簡単にできると思います!

まずはアニメーションの名前を付けましょう。

名前を付けている画像

私はわかりやすいというのもあって基本00:06毎に動きを付けます。

作っていくときは、他のノードの動きを制限するかもしれないものからやっていきましょう!この場合は、蓋ですね!

0.5秒で蓋が開き、2.5秒当たりで少し上に開きすぐに閉まる動きを付けます。

蓋の編集画像

それができたらその動きに合わせるように鍵の動きを付けていきます。鍵は反復する鹿威しのような動きを付けるとそれっぽくなります。

あとは蓋が開いたとき間から目をグネグネと動かすだけです!(9割カット!)

↓↓↓↓完成品↓↓↓↓

完成品GIF

まとめ

ということで今回はVoxEditでアニメーションを付けてみました!

実はこの記事を書くにあたってアプリケーションを最新版にしたら仕様がだいぶ変わっていて焦ったものの、以前よりだいぶ使いやすいものになったと思います!まだ、Betaなので使ってみてちょっと分かりづらいことや変な動きをするときもありましたが、以前に比べたらだいぶ進化している!これからに期待ですね!

今までThe SandboxのASSETのデザインを記事にしてきましたが今回がその最終回です!(アニメーションの追加した等の記事は出すかも)今後もVoxEditやMagicaVoxel単体での記事は書いて行く予定です!

また、近々α版のゲームメーカーがLAND保有者限定で公開されます!それについても記事にしていく予定なのでお見逃しなく!!!

コメントを書く

メールアドレスが公開されることはありません。