MagicaVoxelで作ったアバターをTERAVITで販売しよう2/3

前回は、オンライン対応サンドボックスゲーム「TERAVIT(テラビット)」で販売できるアバターを、無料ボクセルエディタ「MagicaVoxel」で作る際に特に便利だと思う機能について紹介しました。

前回の記事:MagicaVoxelで作ったアバターをTERAVITで販売しよう1/3 | Compota-Soft-Press

TERAVIT 公式サイトより販売して現金やジュエルに交換できる説明図の抜粋
みせる! | TERAVIT(テラビット)
MagicaVoxel 同じパレット枠(カラーインデックス)の色を変えると一括でボクセルの色が変わります
同じカラーインデックスを割り当てたボクセルの色をいっきに変えることができます。
MagicaVoxel Mirror(ミラー)X軸を選択すると左右対称なデザインを片側だけの編集で行えます。
Mirror X により片側だけの編集で左右対称にデザインできます。

今回は、未着手の表情差分を face0 をベースにして 3 つ作成し、TERAVIT(テラビット)でアバターのデータ(vox ファイル) を読み込んで動作確認を行います。
※ MagicaVoxel のバージョンは 0.99.6 です。TERAVIT のバージョンは 001.08 です。

表情差分 face1, 2, 3 を face0 をもとに作成する

ツイッターアイコンに使っているオリジナルキャラクターのアバターを MagicaVoxel の便利機能などを使いながら作り、TERAVIT で読み込んで動作確認をしました。

オリジナルキャラクターアバターを TERAVIT で動作確認
オリジナルキャラクターアバターを TERAVIT で動作確認(mp4→ bmp → gif(ウェイト3/100) にしているので速度や画質はゲームの映像と若干異なります)

表情差分の face1, 2, 3 がまだ未編集なので、途中から髪の短い、サンプルアバター boy.vox の頭部になってしまっています。
アップロードに必須の face0 の表情ではたまに「まばたき」をする際に他の標準差分を使います。

face0 は上図のように編集済みの頭部ができているので

  • face0 オブジェクトをコピー
  • サンプルアバターの face1, 2, 3 の表情部分のボクセル群をコピー
  • face0 を複製したオブジェクトのボクセルに表情部分をペースト

の手順で、オリジナルキャラクターの face1, 2, 3 を作成します。

face0 オブジェクトをコピー

編集済みの face0 オブジェクトをコピーします。

最初に右側の Outline パネルの 「+」 ボタンを押して、 <vox> という新規のオブジェクトを作成します。
※オブジェクト名を右クリックするとリネーム用のテキストボックスが表示されます。

MagicaVoxel Outlineパネルの+ボタンを押して空のオブジェクトを追加します。
MagicaVoxel Outline パネルのリストの中でリネームしたオブジェクトの名前を右クリックすると変更する欄が表示されます。

face0 をダブルクリックなどで選択した後、Edit パネルの Copy ボタンを押します。
これで、 face0 の全てのボクセルがコピーされました。

MagicaVoxel OUtline パネルでオブジェクトを選択して、その Model Editor に切り替えた後 Copy ボタンで、そのオブジェクトの全てのボクセルをコピーします.

次に先ほど新規作成したオブジェクト(筆者の場合は tmp1)をダブルクリックで開き、Edit パネルの Paste ボタンを押せば、コピーできます。

MagicaVoxel Outline パネルで新規作成した空のオブジェクト内に先ほどコピーしたボクセル群を Paste ボタンで貼り付けます.
MagicaVoxel オブジェクトを選択後、Copy してから、新規作成したオブジェクトを選択して Paste することでコピーできます。
オブジェクトの全ボクセルをコピーして、新規作成した空のオブジェクトに貼り付けます。

サンプルアバターの表情部分のコピー&ペースト

右側の Outline パネルで、未編集の face1 オブジェクトを選択します。
※公式サンプルアバターの表情をコピーしないで自身のオリジナルの表情を Paint で描くこともできます。

他の face0, 2, 3 の頭部を表示したくない場合は、オブジェクト名の左側の「〇」をクリックして表示/非表示を切り替えてください。

MagicaVoxel の Outline パネルの未編集の face1 を選択します.他の頭部を表示させたくなければ他のオブジェクトの〇をクリックします.

Brush パネルの Marquee を選択したあと、下側で Brush を選択します。
Box モードで、コピーしたい目の部分をホールド&ドラッグすると、その範囲の面のボクセル群が選択されます。
※ Shift キーを押しながら再び範囲選択すると選択範囲が追加されます。

MagicaVoxel BrushパネルでBoxモードで範囲選択(ブラシアイコン)を選択して、表情の部分のボクセルを矩形選択してから Copy します.

選択したら、Edit パネルの Copy ボタンを押してコピーして、貼り付け先の tmp0 オブジェクト( face0 をコピーしたオブジェクト)に移動したあと、 Edit パネルの Paste ボタンで同じ位置にボクセル群を貼り付けます。

Marquee Select (Brush, Box Mode)で目が描かれているボクセルの面をコピーし、face0 をコピーした tmp0 オブジェクトの同じ位置に貼り付けます。

貼り付ける前の表情の一部が残っている場合は、スポイトで肌色のボクセルを選択した後、Paint + Voxel モードで塗りつぶしましょう。

MagicaVoxel 肌色のボクセルをスポイトで選択した後 Paint に変えて、肌色で上部を塗りつぶします。

face3 だけ少し特殊

face3 だけオブジェクトの範囲(白い線で囲まれた直方体)が頭部にフィットしています。
face1, 2 は face0 と同じだったのですが、 face3 はアクション「ショック」で使われるときに顔が動き回るためか、範囲を頭部にフィットさせているようです。

2023/05/06 12:30 追記 自作アバターの face3 で不具合を確認

!注意事項! face3 の設定に不具合が見つかりました。素体で確認するとショックのアクションで顔は飛び出しません。

原因は face3 だけオブジェクト範囲が頭部にフィットするように小さくしているためでした。
サンプルアバターを調べている際に誤って face3 のオブジェクト範囲をボクセル群を含む最小限にフィットさせてしまい、それを手本にしていたために起きたミスです。

TERAVIT のサンプルアバターの face3 と自作アバターの face3 はオブジェクトの範囲が異なっていました.

対策として、読者の方々のサンプルアバター(boy.vox)の face3 のオブジェクト範囲は、他と同じく全身を囲っていると思います。
それに対して face1, 2 で先ほどと同様に、編集済みの face0 をコピーしたのち、サンプルの face3 の表情部分のボクセルをコピーして tmp3 にペーストすれば問題ありません。

もしも、オブジェクトの範囲をフィットさせてしまった場合は、後述するオブジェクトのリサイズによって修正してください。

コピー元とコピー先でオブジェクトの範囲が異なると貼り付け位置がずれます。

サンプルアバターは全てのオブジェクトの範囲が同じでしたが、もしもコピー元とコピー先のオブジェクトの範囲が異なると貼り付け位置も異なってしまいます。

そのような場合は、ペースト直後はそれらのボクセル群が選択状態にあるので、Transform を選択して Paste されたまだ範囲選択された状態のボクセル群を移動させて調整しましょう。

MagicaVoxel オブジェクトのサイズが異なる場合異なる場所に Paste されるので Transform を選択して移動します。

オブジェクトの範囲の調整とフィット

オブジェクトはそれぞれ編集可能な範囲を設定できます。
オブジェクトの範囲は、オブジェクトを選択中は白い直方体を構成する線で表されます。

もしもその範囲を変えたい場合は Model Editor の上部のサイズを指定するテキスト欄の左側のアイコンをクリックすると、範囲を表す直方体に、リサイズと移動のハンドルが追加されて編集できます。

MagicaVoxel でオブジェクトの範囲を調整する際は、サイズ入力欄の左側のアイコンを押して移動とリサイズのハンドルを表示し操作します.

そのオブジェクトが持つボクセル群を囲む最小の直方体にしたい場合は、サイズを指定するテキスト欄の右側のアイコンをクリックしましょう。

同じサイズに変更したい場合は、サイズを指定するテキスト欄にサイズを入力し、そのあとそのテキスト欄の左側のアイコンを押して、移動のハンドルで位置調整すると楽かもしれません。

MagicaVoxel ModelEditorの右上のサイズ右側のボタンでオブジェクトの範囲を全部のボクセルを含む最小の直方体にフィットさせます.

コピー元の face1,2,3の削除と tmp1, 2, 3 のリネーム

サンプルアバターの face1, 2, 3 から表情をそれぞれ tmp1, 2, 3 のオブジェクトへコピーしたので、face1, 2, 3 を削除します。
オブジェクトを削除するには World Editor モードに切り替えて(▲を▼に変更)、右側の Outline パネルのオブジェクトを選択して delete キーを押します。

その後、tmp1, 2, 3 それぞれのオブジェクトを右クリックして先ほどと同じように入力欄に face1, 2, 3 とそれぞれ入力してリネームしましょう。

Teravit のオブジェクト構成

右上の「名前をつけて保存(ダウンロードのマーク)」ボタンで完成したアバターを vox で保存しましょう。

作ったアバターを TERAVIT(テラビット)で読み込んでみよう

アバターができたら、動作確認をしましょう。
TERAVIT(テラビット)を起動して、左中央のキャラクター画像のボタンを押します。

「キャラクター」ページの左側のボタンの中から「.vox 読み込み」を選択します。

右側の「.vox ファイルを選択」を押した後、 MagicaVoxel で作成したアバターの vox ファイルを選択しましょう。

無事に「立ち」「ダッシュ」「武器ふり」「手を振る」「座る」「ショック」の各アクションの動作が確認できました。
※アクションは下の左右ボタンで切り替えられます。キャラをホールド&ドラッグすると視点を変えて確認できます。

以下は、 face3 のオブジェクト範囲をボクセルを含む最小範囲にフィットさせているため、顔が飛び出しています。

表情差分1~3も編集した後にTERAVITで読み込んで動作確認
オリジナルキャラクターアバターを TERAVIT で動作確認(mp4→ bmp → gif(ウェイト4/100) にしているので速度や画質はゲームの映像と若干異なります)

正しくは以下のようになります。

TERAVIT-オリジナルアバターの-face3-オブジェクト範囲を他と同じ範囲に修正後(ショックのアクションを修正)サイズ半分
https://convertio.co/ja/ によって mp4 を gif に変換しています。実際のゲーム画面の画像とは異なります。

これで各アクションのアニメーションが正常なことを確認できました。

今回はここまで

今回は、オンライン対応サンドボックスゲーム「TERAVIT(テラビット)」で販売できるアバターに、表情差分を作る手順を、無料のボクセルエディタ「MagicaVoxel」を用いて紹介しました。
編集済みの face0 オブジェクトをコピーし、 face1, 2, 3 の表情部分のボクセル群をコピーします。
face3 は少し特殊だったため、貼り付け位置の調整やオブジェクトの範囲をボクセル群にフィットさせる処理も行いました。

次回は、動作確認までできたアバターを TERAVIT(テラビット)で販売したり、自身で作ったオリジナルアバターでいろいろなワールドを冒険する手順を紹介します。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました