メタバース「The Sandbox」が提供するNFTクリエイトツール「VoxEdit」を使ってちょっとしたアニメーションを作成

2022年5月15日 21:44

VoxEditを起動

Sandboxに登録後、「VoxEdit」をダウンロードしてインストールしました。
登録の仕方はウォレットと連携するなどわかりにくい部分があります。
詳しい説明ページがいくつもできていますので、検索してそちらをご参考ください。

今回、簡単な家をモデリングし、玄関が開くアニメーションまで作成してみました。

「モデラー」をクリックして、制作画面に入ります。
新しいASSET名（保存ファイル名）を指定するとモデリングを開始できます。

プレートを配置

とりあえずプレートを配置します。
左パネルでボックスツール機能を選択し、マウス操作で作成できます。
z軸にドラッグして厚みのあるボックスを作成できますが、今回は1枚のプレートを置きました。
選択した機能は画面左の細長いパネルで色が変わっている箇所になります。

フェイスツールを使い、クリックを続けて１段ずつ追加します。

外観を確認

右クリックでモデルを回転できます（正確には視点/カメラを動かしています）。
マウスのホイールボタンを押しながら操作すると、上下左右など水平に動かせます。
ホイールボタンを回転させると、拡大・縮小表示ができます。

マウス操作に対する反応速度が速い場合、右上の歯車アイコンからカメラの反応速度を調整できます。

また、その上部の（ターゲットスコープ）アイコンをクリックすれば、カメラ位置を元に戻せます。

レイヤー追加&ミラー準備

屋根を作る下準備として、右パネルからレイヤーを追加します。
こうすることでレイヤー単位でモデリングや色の変更などの編集ができます。

モデル表示画面右隅のメニューから２画面モードにして右正面からの視点を追加します。

対称でモデリングできるミラー機能を使います。
今回、z軸に沿ったミラー面を表示させ、まずモデル自体を軸の中心に移動します。

作成したモデルを動かす場合は、右上の三角マークを使います。
（レイヤーを使っている際は動かしたいモデルのレイヤーを選択します）

ラインモデリング＆色変え

追加したレイヤーを選択していることを確認し、ラインツールを使ってボクセルの線を引き、屋根のベースを作ります。
ミラーを使っているので、対称の位置に同じボクセルが配置されます

レイヤーを使い屋根部部分だけを表示します。

屋根の空いている部分をボクセルで埋めて面にします。
効率よい方法があるのかもしれませんが、今回はラインツールを使って埋めました。

ここで色を変えておきます。
左パネルのペイントモードを選択し、右パネルのパレットで色を指定します。
左パネルのフェイスツールを使いモデルの一部をクリックすれば、面全体の色が変わります。

消去モードで長さ調整

表示してなかったモデリングのモードに戻り、フェイスツールで厚みをつけるとともに長さを調整します。

正面からの表示に切り替え、屋根の右側が長いので調整します。

右パネルから消去モードと長方形画面ツールを選びます。
右側の2つのボクセル幅分をドラッグして四角い枠で囲むと削除できます。
（フェイスツールを使って面をクリックしても消去できます）

ブロックを空洞にして部屋を作る

消去モードで長方形画面ツールや、微調整が必要な場合はペンツールを使って空洞にします。
ミラー面があるとうまくコントロールできなかったので非表示にして作業しています。

床がない状態なので、制作モードでボックスツールを使い床を作ります。

窓用の穴を開けます。
制作モード&ペンツールでボクセルを1つずつ消していきました。
（長方形画面ツールで行うと反対側の壁にも穴が開くのでペンツールを使っています）
ライトの方向を変えることで（右上のアイコンクリック）俯瞰図（左側画面）が見やすくなることがあります。

次に新しくレイヤーを作って木枠を作ります（木枠用のボクセルを配置します）。

レイヤー活用のための小技

ペンツールとラインツールを使うのですが、そのまま新しいレイヤーにボクセルを配置すると、各軸の平面にボクセルが置かれるなど、モデリングが行いにくい感じです。
効率よい回避策があるように思えますが、今回はこう対処ししました。
まず、部屋の外観のレイヤーの窓の角部分に、木枠に使う色と同じボクセルを配置します。
目印の役割です。

次に新しく用意した窓用のレイヤーを選択し、右側の正面図に窓の形状にボクセルを置きます。
モデルの裏側（x-y平面）にボクセルが置かれるので左側の俯瞰図をx-y平面を見られるようにして置くとわかりやすくなります。

上の三角アイコンの移動ボタン（前にスクロール）をクリックして窓枠を反対部屋の壁の位置まで移動します。

ガラス用のボクセルを配置したり、同様の手順で玄関（新規レイヤー）を作ってモデリングを終えます。

同じ色を使う場合

なお、複数のレイヤーを使った操作を続けていると、目のレイヤーの色が引き継がれ、次に移動したレイヤーで使いたい色でなくなっていることがあります。
同じ色にしたい場合は、左パネル下のピッカーツールを使います。

アニメーター

冒頭のVoxEdit起動画面のメニューに表示されているアニメーターメニューを使います。
左上のホームアイコンをクリックすれば戻れますが、その前にアニメータで使えるモデル形式「VOX」でも保存しておきます。
わかりにくいのですが、モデリング用の標準フォーマットは拡張子が「vxm」となりアニメーターにインポートできないので、別途「VOX」形式で保存しておく必要があります。

ただ、ここで注意が必要でした。
玄関ドアが開くアニメーションにするには、玄関がない家のモデルと、玄関のみのモデルをそれぞれ別々にVOX形式にエクスポートしないていけません。
玄関付きの家をアニメータで読み込むと、玄関のみをコントロールできませんでした。

改めてアニメーターメニューに入ります。

玄関がない家のモデルと玄関のみのモデルをそれぞれインポートするのですが、ここでも注意点がありました。
動作の起点となる軸の位置の調整です。
今のままでは、玄関の中心を軸にして回転する動作になります。
モデリング画面に戻って調整もできますが、アニメータ画面でインポートしたモデル下の編集アイコンをクリックしてモデリング機能を呼び出すこともできます。