本記事では、Robloxで2022年4月に実装された、あらゆるアバターの体型に自動でフィットするデジタル衣服『Layered Clothing』の実装方法をまとめています。
そもそも、Robloxって何？
Robloxとは、ユーザーがゲームを作成、共有したり、他のユーザーが作成したゲームをプレイしたりできる、ゲーム版Youtubeと言われるオンラインゲーミングプラットフォームです。ゲームの制作には、独自ゲーム開発環境『Roblox Studio』を使用します。無料で使え、Drag&Dropによる直感的なインターフェースが特徴です。
日本での認知度は低いですが、2021年に世界で二番目にダウンロードされたモバイルアプリで、2022年時点では全世界のMAUが2億人を超えたメガプラットフォームです。ユーザーの約8割は１6歳以下ながら、950万人を超える開発者を擁するため、2023年以降も安定的に成長することが見込まれています。
ユーザーは、自身で作成したゲームやアイテムをRoblox上で販売することで、ゲーム内通貨であるRobuxを稼ぐことができます。Robuxは、一定の条件の下で現金に換金することもでき、これまでに300億円以上が開発者に還元されています。この記事では、販売可能なアイテムの中でも、より自由度が高いデザインや重ね着が可能な『Layered Clothing』について、MayaやBlenderなどの3Dモデリング環境で制作した既存モデルをRoblox Studio上で動かすプロセスを解説します。
Layered Clothing アクセサリーとは
従来、Robloxで販売することができた服は、アバターの表面に画像として貼り付ける2Dタイプに限定されていました。シンプルで制作しやすく、ゲームエンジン側でも処理しやすい仕様ですが、その分クリエイティブの幅に制限がありました。
一方、2022年4月にリリースされたLayered Clothingは3Dモデルに対応しており、Roblox上の様々な体型のアバターやアニメーションに自動でフィットします。3Dで、かつ仕様の縛りも従来ほどきつくないため、作れるデザインの幅が格段に広くなりました。また、従来の服ではできなかった重ね着にも対応しているので、その分デザインを作り込むこともできます。
Layered Clothingについて、詳細はこちらをご覧ください。
前提
今回は、MayaやBlenderなど3Dモデリングツールで制作した既存の3Dデジタルアイテムを、Layered ClothingとしてRoblox Studio上で動かすプロセスを解説します。そのため、アイテムのモデリングとテクスチャリングまで終わった状態をスタート地点とさせて頂きます。また、Roblox Studioはこちらからダウンロードできる最新版を使用しています。
この記事では、Mayaで作成したポンチョの3Dモデルをサンプルとして説明していきます。
また、本記事に書いてある方法は、Layered Clothingを実装する唯一の方法ではなく、初心者でも取り組みやすいプロセスとして記載しています。今後、より良い方法を見つけ次第、逐次更新する予定です。
プロセスの全体像
Layered Clothingは、大まかに4つのプロセスで実装することができます。まずは全体像を示し、その後に各プロセス毎の詳細な説明や注意点を解説します。
-
Roblox公式サイトから、Cageのテンプレートファイルをダウンロードし、モデリング環境へインポートする
Cageとは、Robloxにある様々な形状のアバターに対し、インポートした3Dモデルを自動でフィットさせるための目安となるメッシュです。まずは、Robloxが無料で提供しているテンプレートファイルを使うことをお勧めします。 -
モデリング環境で、Cageと3Dモデルの形状を調整する
テンプレートファイルには、OuterCageとInnerCageという二種類のCageメッシュがあります。OuterCageは3Dモデルの外側を覆うように、InnerCageは3Dモデルの内側に張り付くように、Cageと3Dモデルの形状を調整していきます。 -
3DモデルとCageファイルをRoblox Studioへインポートし、動作を確認する
ファイルをRoblox Studioにインポートした後、アクセサリーフィッティングツールを使い、3Dモデルが様々なアバターの形状に適切にフィットするか、アニメーションさせても崩れないかなど確認します。その際、スキニングの自動転送をONにします。 -
問題なく動作するまで、2と3を繰り返す
Cageや3Dモデルの形状によって、Roblox Studioでの動作にばらつきが生じます。目指すクオリティの動作が実現できるまで、アクセサリーフィッティングツールやモデリングツールを使ってCageや3Dモデルの形状を調整しましょう。
1.Roblox公式サイトから、Cageのテンプレートファイルをダウンロードし、モデリング環境へインポートする
Layered Clothingとは、Robloxで使用される様々な形状のアバターに自動でフィットする服です。アニメーションにも対応しており、例えばアバターが腕を上に振ると、現実での物理現象と同じように服の袖も自動で変形します。それを実現するために必要なのが、Cageメッシュとアーマチュアです。
OuterCageとInnerCageはRoblox Studio上では見えませんが、アバターの形状や動きに応じて形が変化する特殊なメッシュです。アーマチュアとCageメッシュをバインドし、更にそのメッシュで3Dモデルを挟み込みRoblox Studioにインポートすることで、アーマチュアの変形に合わせて3Dモデルも変形します。
Cageメッシュは、こちらのページの「Reference Files」からダウンロードできます。以下の通り4つオプションがありますが、まずは『Additional FBX Samples』をダウンロードすることをお勧めします。
MannequinCageTemplateファイルでも作成は可能ですが、既にRoblox Studioへインポートできる状態になっている『Additional FBX Samples』をベースに作業を進めた方が、エラーなども発生しにくく楽です。
ダウンロードすると、様々な種類の衣類のテンプレートファイルが格納されていると思います。ご自身がインポートしたい3Dモデルに一番近い形状をしているテンプレートファイルを選んでください。テクスチャも一緒に格納されているので、FBXファイルをご自身のモデリングツールにインポートします。
今回例としてあげるポンチョは、とりあえず半袖Tシャツのテンプレートファイル(TShirt_TyeDye_001)を使用し、Mayaへインポートしました。
2.モデリング環境で、Cageと3Dモデルの形状を調整する
上で説明した通り、アバターの形状やアニメーションに合わせて3Dモデルを自動変形させるには、Cageメッシュで3Dモデルを挟み込む必要があります。Cageには、OuterCageとInnerCageという二種類のメッシュが存在し、OuterCageで3Dモデルの外側を覆い、同時にInnerCageを3Dメッシュの内側に貼り付けることで、3Dモデルを挟み込みます。
以下の画像では、OuterCageをHideした状態と、Unhideした状態を比較しています。Hideした状態（=InnerCageと3Dメッシュのみが見えている状態)では、InnerCageの上に3Dモデルが張り付き、Unhideした状態では、OuterCageが3Dモデルを覆っていることが確認できます。
ただし、インポートしたい3Dモデルの形状が、必ずしもテンプレートに合うとは限りません。その場合、3Dモデルの外郭だけ挟み込んでいればOKです。ここで重要なのが、無理に挟み込もうとして、Cageの形状を変更しすぎないことです。Cageは、Roblox Studioの様々なアバターの形状や動きに応じて変形する特殊なメッシュです。そのため、あまりにもCageの形状を大きく変えると、Roblox Studioでアバターの形状や動きについていけなくなってしまいます。3Dモデルの外郭だけ挟み込むことを優先し、どうしても入りきらない場合、3Dモデルの形状をCageに合わせることをお勧めします。
形状の調整が完了したら、Cageと3Dモデルの紐付けと、Cageとアーマチュアのバインドを行います。
まずは、Cageと3Dモデルの紐付けです。3Dモデルのメッシュ名が「XXX」だとすると、Cageの名前を「XXX_InnerCage」「XXX_OuterCage」とし、XXXの箇所を合わせます。メッシュの名称で紐付けるわけですね。ポンチョのメッシュ名は「Poncho」だったので、Cageの名前は「Poncho_InnerCage」「Poncho_OuterCage」としました。
次に、アーマチュアをCageメッシュにバインドします。
今回はテンプレートのアーマチュアをそのまま使用するため、アーマチュア自体を調整する必要はありません。Mayaをご使用の場合、以下のプロセスに沿ってバインドしてください。Blenderをご使用の場合、こちらの記事がわかりやすいと思います。
- メニューセットをリギングにする
- アーマチュア配下にあるジョイントを全て選択する
- ジョイントを選択した状態で、OuterCageとInterCageを選択する
- スキンから、「スキンのバインド」を適用
なお、バインドした後にCageメッシュを再調整した場合、既存のバインドを一度解除してバインドし直す必要があります。Mayaをご使用の場合、OuterCageとInnerCageを選択した状態でヒストリを削除した後、再度上記1-4のプロセスを実施してください。
ここまでで、Cageと3Dモデルの準備が終了しました。なお、Robloxが公式で提供しているClothing Validation Toolを使うことで、Roblox Studioにインポートする前の段階で、Cageと3Dモデルが適切な仕様になっているか確認することができます。こちらのページから、ツールをダウンロードする事ができます。
3.3DモデルとCageファイルをRoblox Studioへインポートし、動作を確認する
Roblox Studioへインポートする前に、モデリング環境から3DモデルとCageファイル、アーマチュアをエクスポートする必要があります。Mayaの場合、以下の項目が満たされていることを確認し、FBX形式で出力してください。Blenderをご使用の場合、こちらのページで仕様をご確認ください。
- 「ジオメトリ」で、"スムーズメッシュ"と"リファレンスアセット"の内容を有効にします
- 「アニメーション」では、アニメーションをStudioにインポートする必要がない限り、アニメーションを無効にします
- テクスチャをpngで取り込む必要がある場合は、「組み込みメディア」で、組み込みメディアを有効にします
- 「詳細オプション」で
- [単位]に移動し、[自動]を有効にします
- [軸変換]に移動し、[アップ軸]をYに設定します
- [FBXファイルフォーマット]に移動し、[タイプ]をバイナリに、[バージョン]をFBX 2020に設定します。
次に、Roblox Studioでアクセサリーフィッティングツールを有効化します。左上にあるFILEからBeta Featureをクリックし、Accessary Fitting Toolにチェックを入れてSaveしてください。すると、『AVATAR』というタブ内に「Accessary Fitting Tool」という項目が出現すると思います。
ここまできたら、「Import 3D」から、先ほど出力したFBXファイルをアップロードしてください。Warning Markが出ることもありますが、気にせず進めて問題ありません。
3Dモデルがインポートできたら、自動スキニング転送の設定をしてきます。この機能を使えば、3Dモデルを手動でスキニングすることなく、Roblox Studioが自動でアバターのアニメーションを3Dモデルに転写してくれます。ただし、自動スキニング転送が対応しているアニメーションは限られているので、アバターにテンプレート以外の複雑な動きをさせる場合、別途手動でスキニング処理をする必要があります。詳細は、こちらのページをご覧ください。
Roblox Studioの右側に表示されているExplorerで、インポートした3Dモデルの配下にある、「(3Dモデル名)WrapLayer」をクリックしてください。すると、Explorer下部に「Properties」が新しく出現すると思います。少しスクロールダウンすると、Behaviorという項目がありますので、その中のAutoSkinを[Disabled]から[EnabledOverride]に変更します。これで完了です！とっても簡単ですね。
なお、インポートする3Dモデルのタイプによっては、[EnabledOverride]が機能しない場合もあります。詳細はこちらのページの「Different Accessory Types」をご確認ください。
これで前準備は完了しました。いよいよアバターに3Dモデルを着せていきます。「Accessory Fitting Tool」をクリックしてください。アクセサリーフィッティングツールが開いた状態で3Dモデルをクリックすると、「Part:」に3Dモデルの名前が反映されると思います。Nextを押してください。『Asset Type』では、アップロードした３Dモデルに一番近い形状のアクセサリー名を選択します。さらにNextをクリックすると、3Dモデルを着用したマネキンが自動で出現すると思います。
とりあえず、「Preview」から他のアバターの形状を選択してみましょう。選択したアバターの体型に合わせて、3Dモデルが自動で変形してくれるはずです。
また、「Animations」から、デフォルトで設定されているアニメーションを試してみましょう。アニメーションの動きに合わせて、3Dモデルが変形してくれるはずです。うまくいくアニメーションもあれば、うまくいかないものもあると思います。例えば、ポンチョの場合、[Cartoony Jump]を選択すると、肩の部分が服を突き抜けてしまいます。
こういった不具合には、基本的にCageを調整して対応することになります。モデリングつ０ルへ戻りCageを調整するのも良いですが、Roblox Studio上でクイックにCageを調整することもできます。「Accessory Fitting Tool」の「Edit」で、[Point Tool]をクリックしてください。すると、Cage上に水色のポイントが出現すると思います。ポイントをクリックすると、その周辺にあるポイントも合わせて選択することができます。その状態で、Roblox Studio上部にある「Move」を使えば、選択したポイントを移動させ、Cageを調整することができます。なお、Falloff Distanceの値が大きければ大きいほど、周辺にあるポイントの選択範囲が広がります。
デフォルトではOuterCageが調整対象となっていますが、[Editing]で[InnerCage]を選択することで、InnerCageも調整することができます。また、[Mesh]や[OuterCage]のスライダーを動かす事で、透過することもできます。Cageメッシュの微調整に便利なので、ぜひご活用ください。
満足いくまでCageを調整できたら、Layered Clothingの実装は完了です。お疲れ様でした。
なお、この仕様は2022年の4月にリリースされたばかりですので、Roblox Studio側での仕様もまだ完璧ではなく、モデラーサイドでの調整にも限界があるというのが私見です。
例えば、1でダウンロードしたReference FilesのAdditional FBX Samplesに格納されている[Tshirt_TyeDye]というモデルをRoblox Studioにインポートしてアニメーションをつけてみました。明らかに、肩周辺に不具合がみられます。Robloxが公式で出しているファイルでもこのクオリティなので、Roblox Studio側の仕様も発展途上と言えるでしょう。
今後、Roblox Studioのアップデートで修正されたり、モデラー側で実施可能な改善方法を見つけ次第、本記事を改良しますので、お楽しみください。
以上、Layered Clothingの実装方法を解説しました。私自身、まだまだ学習途中ですので、ここに書いた方法がベストだとは思いませんし、間違っている箇所もあるかもしれません。しかし、本記事の内容に従えば、最低限3DモデルをLayered ClothingとしてRoblox Studioで動かすところまではいけると思います。
ちなみに、Layered ClothingをRobloxで販売するには、UGCプログラムへ参加する必要があります。Layered Clothingのサンプルはもちろん、制作過程のスクリーンショットやポートフォリオの提出も必須なので、誰でも簡単に参加できるというわけではなさそうです。私も、現在審査の結果連絡待ちです。UGCプログラムには、こちらのページから申し込むことができます。
Robloxは、世界はもちろん今後日本でもユーザーがどんどん増えるゲーミングプラットフォームなのは間違えありません。その中でも、Layered Clothingはクリエイターの表現の幅を広げる最も重要な機能の一つです。皆様にもぜひお試し頂き、その魅力をご体感頂けますと幸いです！ここまでお読み頂きありがとうございました。