IT ゲーム

【The Sandbox】VoxEdit使い方③アニメーター編〜リグ・ノードとは?〜

広告

VoxEdit使い方 アニメーター編

  • The SandboxのVoxEditの使い方を勉強したい!
  • VoxEditのアニメーターについて知りたい!
  • リグ、ノード、動きの付け方について知りたい!

今回はこのようなことを考えている人向けの記事です。

どうも!The SandboxのLAND保有者の てぃかし です!

前回の記事では、The Sandboxの3Dモデリング・アニメーションツールである、VoxEditのモデラーについて解説しました。(まだ読んでない方はそちらもご参考ください。)

VoxEditのモデラーの使い方
【The Sandbox】VoxEdit使い方②モデラー編〜モード・ツール・メニュー解説〜

広告 今回はこのようなことを考えている人向けの記事です。 前回の記事では、The Sandboxの3Dモデリング・アニメーションツールである、VoxEditの全体像を解説しました。(まだ読んでない方は ...

続きを見る

VoxEditには、モデラー、アニメーター、ブロック、テンプレートといった機能があります。

今回は、アニメーターの基本的な使い方について解説します。(機能の名称は、英語を翻訳したものを記載しています。)※動画で見たい方は、記事の最後をご覧ください。

VoxEditのアニメーターとは

VoxEditのアニメーターは、様々なモデルを組み合わせたり、組み合わせたモデルに独自のアニメーションを設定することができる機能です。

前回の記事で解説した「モデラー」で制作したモデルを「アニメーター」で組み合わせて、動きを付けることができます。

The Sandboxはゲームですから、作ったモデルが動かないと成立しませんよね。

どんな動きを付けるかも自分で自由に設定することができます。それがアニメーター役割なのです。

VoxEditを起動し、左側のメニューにアニメーター(animator)があるので、それをクリックすると、

モデラーの時と同様に、「新しいASSETを作成」「ファイルを開く…」「VOXのインポート…」が表示されます。

アニメーター選択画面

「新しいASSETを作成」をクリックすると、アニメーターの新しいフォルダおよびファイルが作成されます。

「ファイルを開く…」をクリックすると、既存のアニメーターのファイルを開き、編集できます。

「VOXのインポート…」をクリックすると、MagicaVoxelで作成されたデータをインポートして、VoxEditで編集できます。

VoxEditのアニメーターファイル作成方法

流れは、モデラーのファイル作成方法と同じですが、アニメーターのファイル作成方法を解説します。(ここからは、実際にVoxEditのアニメーターを開いて、操作して確認するとわかりやすいと思います。)

最初に「新しいASEETを作成」を選択します。(※画面はソフトのバージョンによって見える内容が異なる場合があります。

アニメーター新しいアセット作成

ファイル名を入力して、Saveをクリックすると、アニメーターの画面が表示されます。

VoxEditのアニメーターの画面構成

アニメーターの6つのセクション

VoxEditのアニメーター画面には、6つのセクションがあります。

ライブラリパネルとインスペクターパネルは、タブをクリックすることで、切り替わります。

それでは、それぞれのセクションについて、解説していきます。

VoxEdit アニメーターの「3Dワークスペース」

3Dワークスペースには、制作物が表示されます。

3Dワークスペース

上部の「透視 ▼」をクリックすると、透視、正投影を選択できます。

透視、正投影

下部のスクリーンショットをクリックすると、制作物のスクリーンショットが撮影されます。

軸をクリックすると、X、Y、Z軸の表示・非表示を切り替えられます。

VoxEdit アニメーターの「スケルトンパネル」

スケルトンパネルからリグの構造を構築できます。

リグとは、アニメーションを動かすための仕組み・コントローラーのことです。

リグを動くようにすることをリギングと言います。

モデルに動きを付けるには、リグが必要です。

そのリグを作るには、リグに付けるオブジェクトが必要です。

スケルトンパネルには、「ノード」と呼ばれるものがあります。(ノードは日本語で「節」=「ものの結びついているところ」)

ノードは、モデルを動かすための起点となるので、必要です。

イメージしづらいと感じる人もいると思うので、テンプレートの「中型の人間」のノード構造を確認してみましょう。

中型の人間 テンプレート

Rootノードの下に、Controllerノードがあります。Controllerノードの下にHipノードがあり、Hipの下にBellyとRight_ThighとLeft_Thighがあり、…となっています。

お尻には、腹、右太もも、左太ももが繋がっているので、このような構造になっています。

このマークノードはノードです。

このマークオブジェクトはオブジェクトです。

オブジェクトは後から取り付けることができます。

ノードの作成方法

では、何もない状態からノードを作ってみましょう。まずアニメーターから「新しいASSETを作成」を選び、ファイル名を入力し、アニメーターの画面を開きます。

ノード作成

上記の画像ように最初は「Root」というノードしかないので、Rootの左のノードのボタンをクリックして、「子ノードを作成」を選択します。

ノードの名称

新しいノードの名前を入力するよう促されるので、入力し、「ノードを作成する」をクリックします。

ノード生成

今回は例として、Aというノードを作成しました。

これでRootノードの下にAというノードが作成されている状態になりました。

このAに配下にさらにノードを作ることができます。

ノードの中にノードを作る

今回は例として、新たにRootの下にBを、Aの下にCのノードを作成しました。

VoxEdit アニメーターの「ライブラリ」

アニメーターのライブラリについて解説します。

ライブラリは、画面右側に位置し、「新しいVXM」「VXMをインポート」「VOXをインポート」「未添付の削除」を選択できます。

モデルの取り付け方

アニメーションを与える前準備として、まずノードにモデルを取り付けます。(モデルは予め用意しておくか、作成が必要です。)

画面右上のライブラリの「三」のマークをクリックし、「新しいVXM」を選択します。(すでにモデルがある場合はインポートも可能)

新しいVMX

モデルの名前を入力し、「モデルの作成」をクリックします。(例として、「MODEL_A」とします。)

モデルの名前

すると、モデラーの画面になります。ここでは、紫色の直方体を作成しました。

モデル作成

左上の「←」ボタンをクリックすると、保存するか、しないかの選択が出てくるので、「はい」をクリックします。

モデル保存

すると、アニメーターの画面に戻り、ライブラリに作ったモデルが表示されます。

モデル完成

このモデルを取り付けたいノードにドラックアンドドロップします。(下記は動画です。「▶️」をクリックすると、動画が再生されます。)

上記の動画では、AのノードにMODEL_Aのモデルを取り付けています。

同様にして、B、Cのモデルも作成し、B,Cのノードに対してもモデルを取り付けました。

モデル取り付け

ちなみに1つのノードに1つのモデルを取り付けることができます。複数のモデルをノードに取り付けることはできません。

VoxEdit アニメーターの「メニューバー」

VoxEdit アニメーターのメニューバーは、左から

戻る、保存、ノード選択、ノード移動、ノード回転、グローバルスペース、ローカルスペース、X反転、Y反転、Z反転、ポジションの固定、逆運動、軸を合わせる、リグを表示/非表示、ノード境界ボックスを表示/非表示、放射率の切替、カメラ位置をリセット があります。

古いバージョンの画面

アニメーターのメニューバー

[追記]新しいバージョンの画面

アニメーターのメニューバー

「戻る」「保存」は、前回のモデラーの解説記事で説明しましたが、同じ機能です。

ノードの選択・移動・回転

ノード選択・移動・回転は、文字通り、ノードを選択、移動、回転できます。

Aノードを移動してみます。

「ノード移動」をクリックすると、選択中のノードからx,y,z軸方向に矢印が表示され、それぞれの矢印を引っ張るとそれぞれの方向に移動します。

「ノード選択」にすると、下記のようにノードを選択できます。

「ノード回転」では、下記のようにノードを回転できます。

直接繋がっているノードは、一緒に回転します。(上記動画の場合は、グローバルスペースをオンにしているので、Aを回転すると、子ノードのCノードも回転します。)

グローバルスペースとローカルスペース(現在は削除されている機能です。)

グローバルスペースグローバルスペースは、オンにしている時にノードを移動・回転させると、子ノードも一緒に動きます。

ローカルスペースローカルスペースをオンにすると、ノード単体で移動・回転できます。ローカルスペースがオンの時は子ノードは動きません。

世界・親・オブジェクト

新しいバージョンでは、グローバルスペースとローカルスペースが削除され、世界、親、オブジェクトといった機能が追加されています。

機能の名称は英語を直訳しているようなので、よくわからないネーミングかと思います。

世界、親、オブジェクトは、それぞれを基準とした移動ができるようになる機能です。

「世界」世界を選択すると、X、Y、Z軸を基準に移動ができるようになります。

「親」親を選択すると、親を基準に移動ができるようになります。

「オブジェクト」オブジェクトを選択すると、世界、親関係なく、そのオブジェクト自身を基準に移動できるようになります。

「ノードを移動」を選択中に、世界、親、オブジェクトを切替えてみると一目瞭然です。

水色のmodel_Cをよく観察してください。世界、親、オブジェクトを切り替えると移動可能な軸が変化しています。

上記の場合、model_Cの親はmodel_Aになっているので、親に切り替えた時は、model_Aの向きに合わせた移動軸(矢印)が表示されています。

自動SLERP

Slerpは二点間を滑らかに移動させるための関数のことです。二点間を補間することによって滑らかに移動させられます。

自動SLERP自動SLERPが有効になっていると、X、Y、Z軸のアニメーションをまとめて設定できます。

逆に無効になっていると、X、Y、Z軸の動かした軸だけアニメーションを設定できます。

…と、言葉で書いてもよくわからないと思うので、下記の動画をご覧ください。

上記動画は、自動SLERPを有効にし、Z軸で回転させています。

Z軸でしか回転させていませんが、自動的にX軸、Y軸もキーフレーム(赤色のバー)が設定されました。

続いて、自動SLERPを無効にして同じことをしてみます。

上記動画は、自動SLERPを無効にし、Z軸で回転させています。

Z軸でキーフレーム(赤色のバー)が設定されました。X、Y軸はキーフレーム(赤色のバー)は作成されていません。

X・Y・Z反転

X反転、Y反転、Z反転は、それぞれの軸でリグとモデルを反転させます。

ポジションの固定

ポジションの固定は、リグおよびモデルを回転させるとき、

モデルを中心としてモデルを回転させるのか、

原点を中心としてモデルを回転させるのか、

を切り替えることができます。

オンにすると、このように回転できます。

オフにすると、以下のように回転できます。

IK(Inverse Kinematics)

「IK」は、Inverse Kinematics(逆運動学)の略です。

モデルを動かすためのスケルトン構造を制御する方法の1つです。

モデルの先端を決めて、そこから関節の位置や動きを設定します。

例えば、普通、手を動かすと同時に手首や肘、肩も動きます。

通常は、親ノードを動かすと、子ノードが動くという仕組みですが、IKを利用すると、子ノードを起点に、親ノードを動かせるようになります。

そのような自然な動きになるように自動で関係する部位も回転する仕組みとなっています。

下記はシンプルな1本のヒモを作り、IKで動きを付けたものです。

IKの仕組み・設定に関しては、奥が深いので、別の機会に改めて説明できたらと思っています。

IKをうまく使いこなせるようになると、アニメーションを作る時間が短縮できます。

IKは、インスペクターパネルの「逆再生」の項目で色んな設定ができます。

インスペクターパネルの逆再生

「アンカー」にチェックを入れると、ノードの動きを固定することができます。

「エフェクター」のドロップノードの「+」をクリックすることで、選択中のノードが起点になって、動きます。

Yaw、Pitch、Radiusの角度を変更することで、可動域を変化させることができます。

また、2022年8月時点のバージョンでは、IKは縦方向(Y軸方向)にしか設定できないようです。縦方向以外にIKを設定しようと思っても、パーツが崩れてしまいます。(下記参照)

縦方向に伸びたヒモにIKを設定した先ほどの動画は正常に適用されています。この辺は、VoxEditも改善が必要だと思います。

VoxEdit アニメーターの「インスペクターパネル」

インスペクターパネルは、IKの解説で少し触れましたが、「トランスフォーム」「ローテーション」」「逆再生」の設定ができます。

VoxEditインスペクターパネル

トランスフォームでは、モデルの位置を座標単位で設定することができます。

ローテーションでは、モデルの向きを設定できます。

逆再生では、IKの設定ができるようになっています。

VoxEditのアニメーターの「タイムラインパネル」

アニメーターのタイムラインパネルでは、アニメーションの作成ができます。

タイムパネルの1目盛は1フレームです。24フレームは1秒です。

では、下記のMODEL_B(ピンクのモデル)を移動させる手順を紹介します。

アニメーション作成

まず、新しいアニメーションを新規で作成するために、画面右下の「+ New」をクリックして、アニメーションの名称を入力して、「アニメーションを作成する」をクリックします。

ズームエリアをドラックアンドドロップで拡大し、MODEL_Bを選択します。

再生ヘッドを01sの位置に移動させ、MODEL_BをX軸の正の方向に移動させます。

▶️再生ボタンをクリックしてみると、1秒の間にMODEL_Bが移動します。(ちなみに最大20秒のアニメーションを作成可能)

自動的に元の位置に戻り、ループします。⏸停止ボタンをクリックすると止まります。

1秒後に回転させておくと、回転することもできますし、移動しながら回転することもできます。

MODEL_Bは他のノードに繋がっていないので、単体で動きましたが、MODEL_A、MODEL_Cは繋がっているので、同時に動かすこともできます。

以上がアニメーション作成の基本となります。

初心者があれもこれも学習するのは混乱の元なので、混乱を避けるため、基本が理解しやすいように解説しました。

今回の基本を押さえていれば、アニメーション作成が取り掛かることができ、操作しているうちに理解が深まり、上達できるかと思います。

次回はVoxEditの「ブロック」を解説

今回は、VoxEditの「アニメーター」について、解説しました。

アニメーターは他の機能と比べて覚えることが多いですが、高度な知識は不要なので、子供でも勉強したら操作は可能だと思います。

色々触ってみると、使い方が自然と身につくので、この記事でやったことを真似してみたりしてみてください。

次回は、「ブロック」について解説します。

VoxEdit「ブロック」の使い方
【The Sandbox】VoxEdit使い方④ブロック編〜モデラーとの違いは?〜

広告 今回はこのようなことを考えている人向けの記事です。 前回の記事では、The Sandboxの3Dモデリング・アニメーションツールである、VoxEditのアニメーションについて解説しました。(まだ ...

続きを見る

<動画版>

YouTubeチャンネルはコチラ

The Sandbox関連の記事紹介

The SandboxやVoxEdit関連の記事は他にもあります。

興味のある方は下記の記事もぜひご参考ください。

VoxEdit使い方の全体像
【The Sandbox】VoxEdit使い方①全体像編〜インストール、ボクセルアセット販売方法〜

広告 今回はこのような願望を持っている人向けの記事です。 メタバースとは、インターネット上の仮想空間に自分の分身であるキャラ(アバター)で参加し、他者とコミュニケーションできるものです。 メタバースは ...

続きを見る

テンプレートの使い方
【The Sandbox】VoxEdit使い方⑤テンプレート編〜アニメーションロック解除方法〜

広告 今回はこのようなことを考えている人向けの記事です。 前回の記事では、The Sandboxの3Dモデリング・アニメーションツールである、VoxEditのブロックについて解説しました。(まだ読んで ...

続きを見る

The Sandboxとは?
The Sandboxとは?登録・始め方と仮想通貨SANDと土地の購入方法【サンドボックス】

広告 今回はこのようなことを考えている人向けの記事です。 昨今、メタバースやNFT関連のゲームが人気になってきています。 BCG(ブロックチェーンゲーム)と呼ばれたりもしますが、これまでのゲームと違う ...

続きを見る

The Sandboxの登録がまだの人は下記から登録できます。

The Sandbox登録はコチラ

YouTubeでも役立つ情報を配信しています!

ボタンをクリックしてチャンネル登録お願いします!

  • この記事を書いた人
てぃかし プロフィール画像

てぃかし

当ブログの運営責任者。 エンジニア、プログラマー、YouTuber、ブロガー、Webマーケター。 1987年生まれ。 滋賀県出身。 同志社大学 工学部 エネルギー機械工学科 卒業。 滋賀に18年、京都に4年、大阪に3年半、東京に7年ほど移り住む。 その後、滋賀に戻り、これまでの経験をもとにフルリモートで様々な仕事をこなしている。 経験した仕事は、数学の塾講師、マーケティングコンサルタント、エンジニア、SEOコンサルタント。個人では、ブログ運営、YouTubeの企画・撮影・動画編集を1人で行なっている。 YouTubeでは主にプログラミングスクールの体験談やエンジニア転職の方法を実体験をもとに配信することから始め、人生で役立つハウツーを発信。 blogでは、YouTubeでは話さない役立つ内容やお得情報を執筆。 プログラミングスクール「テックキャンプ」のアンバサダーに認定され、テックキャンプアンバサダーとして、テックキャンプ関連の情報発信や相談も行なっている。

-IT, ゲーム
-, , , , , , ,