3Dモデルの構成と.fbxへのExport

 PlayCanvasのビジュアルエディターを開く前に、まずはBlender上で、3Dモデルがどのように構成されているかを見てみましょう。

Blender2.8 viewport

 キャラクター[sandyちゃん]が戦車[tank]に乗っている状態です。構成内容は以下の通りです。

オブジェクトの構成

スタティックな状態のキャラクターです。キャラクター自体にはボーンやアニメーションは設定されていません。	戦車の操縦桿。戦車本体の窓ガラスをアルファで透過する際に、同じオブジェクトだと一緒に透過されてしまうので別オブジェクトにしてあります。

戦車本体。窓ガラス部分に透過(アルファ)を含むテクスチャが適用されている。	排気管。

戦車キャタピラのベース部分、戦車本体、キャタピラの親になります。	キャタピラの軸部分。

キャタピラ。キャタピラ軸の子になります。キャタピラ1枚をBlender上で配列で円筒上に並べ、パスアニメーションでキャタピラの回転アニメを作っています。

Blender上でのモデル作成の注意点はモディファイヤを使用している場合、適用(Aplly All)しておかないとPlayCanvas上にインポートした際にエラーが発生する恐れがあります。

ボーンとウェイトの設定

今回のタンクゲームでは、キャタピラの回転、砲撃時の反動っぽい動きを作成しています。これらのアニメーションを作成するために、戦車とキャラクターにシンプルなボーンとウェイト設定を行っています。

アニメーションの作成

キャタピラの回転と戦車の上下の揺れは、タンクの移動時用、砲撃の反動は攻撃時のみ発生させたいので、ボーンウェイト設定がされたtank.blenderをコピーして、移動用(tank_mov.blender)と(tank_shot.blender)攻撃用に分けて作成しました。また、アニメーションキーフレームに関して、アニメーションキーが打たれている最終フレームでキーフレームが終わる状態にしてください。PlayCanvasへインポートした際に最終キーより後にもキーフレームがあるとそのフレームも読み込んでしまいます。

Blender上でのテクスチャとマテリアル設定 

 Blender2.8の標準マテリアルは"プリンシプルBFDS"です。PlayCanvasに正確にインポートできるのは基本的に各3Dソフトウェアのデフォルトのマテリアルになります。ここではタンクとUFOに使用している各テクスチャとマテリアルへの適用を見てみましょう。

これで、blender上での３Dモデルの作成は完了です。次に.fbxへの保存とPlayCanvasへのインポート方法を見ていきます。

FBXのExport設定

デフォルトの設定ではマテリアルの情報が無視されてしまうので、下記の画像の様に設定を変更します。

メイン、ジオメトリ、アーマチェア、アニメーションの項目の中で"メイン"の設定
選択したオブジェクトに☑
パスモードを"自動"から"コピー"にし、右端の箱マークをクリック。
これで、マテリアルがオブジェクトとリンクした状態になります。

アニメーションも同様にデフォルト設定だとPlayCanvas上で正しく再生されませんので、下記の画像の様に設定を変更します。

全てのボックスの☑が入っていますが、このままだとPlayCanvasにインポートした際に、アニメーションが1フレーム目でリピートしてしまいます。
"NLAストリップ"と"全アクション"の☑を外します。

これで、Export設定は完了です。PlauCanvasのビジュアルエディターのAssets欄にドラッグ＆ドロップするか＋ボタンをしてUploadするかで.fbxから自動的に.jsonが書き出されます。

チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 

チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 1/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 2/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 3/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 4/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 5/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 6/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 7/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 8/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 9/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 10/10