mixamoを使ってアニメーションを追加する
次に、mixamoを使用して自分の好きなアニメーションを追加します。
mixamoとはAdobeが公開しているサイトで、3Dモデルに対して、様々なアニメーションを適用しダウンロードまでできるサービスです。
現在は、商用利用も可能であり、このサービスを使用してサンディーちゃんにアニメーションを追加します。
mixamoを使用するためにAdobeアカウントを作成します。
PlayCanvasからサンディちゃんの3Dモデルのデータをダウンロード
PlayCanvasのデータから3Dモデルのデータをダウンロードします。
Asset欄のmodel → sandy-chan → sandy-chan.fbxを選択します。
右のINSPECTORのSOURCE SCENEにダウンロードボタン表示されますので、FBX形式の3Dモデルのデータをダウンロードします。
CONTENTSの中には、TextureとMaterialsのデータが表示されますがこちらがPlayCanvasへインポートした際に自動的に展開されるデータになります。
mixamoのアニメーションを使用
mixamoのアニメーションを使用して、3Dモデルにアニメーションを適用していきます。
mixiamoにアクセスをします。このとき、まだログインをしておらず、ログインが必要な場合には、ログイン画面が出ますので、作成したアカウントにてログインをしてください。
ログインが出来たら3Dモデルをインポートします。自作の3Dモデルをインポートする際にはUPLOAD CHARACTERをクリックして3Dモデルをインポートしてください。
UPLOAD A CHARACTERというモーダルが表示されますので、ここに先程ダウンロードしたサンディーちゃんのモデルをアップロードします。
アップロードをするとプログレスバーが出てきますので1~2分程待ちます。
このモデルは3Dモデルの構造をmixamoが解析をしてくれるため設定をしないで使用できますが、他のモデルを使用する場合には、モデルによっては、使用ができない場合や、ボーンの設定が必要になる場合があります。
モデルを正常にアップロードすることができると画面になります。
※ 何らかの理由でモデルのインポートが出来なかった場合には、PlayCanvasのプロジェクト内に予備のフォルダがありますのでそちらのアニメーションを使用してください。
NEXTを押してアップロードを確認することが出来たら、mixamoへのモデルのインポートは完了です。
次にアニメーションをダウンロードしていきます。
まず手を降るアニメーションをダウンロードします。
左上の検索バーから「Waving」と検索をします。
検索をすると様々なアニメーションが出てきますのでその中で、好きなアニメーションを選択して、右側のDOWNLOADボタンをクリックします。
ダウンロードボタンをクリックすると、DOWNLOAD SETTINGSというモーダルが表示されますので、そこの設定として、Without Skinを選択します。
今回はアニメーションを使用することが目的のため、Without SkinとしてFBX形式のアニメーションをダウンロードします。
今回作成するハンズオンでは、下記のアニメーションを再生するものを作ります。
なので事前に、3つのアニメーションもダウンロードしましょう。
| 入力装置 | アニメーション | リンク | |
|---|---|---|---|
| キーボード | 数字の1 | 手を降る | Waving |
| キーボード | 数字の2 | バク転 | Backflip |
| マウス | 画面上のボタンをクリック | ジャンプ | Joyful Jump |
手を降るアニメーションをダウンロードした方法でバク転、ジャンプのアニメーションをダウンロードします。
PlayCanvasでアニメーションを再生する
アニメーションをダウンロードすることが出来たら、PlayCanvasでアニメーションを適用する方法を紹介します。
PlayCanvasにアニメーションをインポートする
PlayCanvasを開き、「Asset」 → 「model」 → 「sandy-chan」 → 「animation」を開きます。
ダウンロードしたアニメーション（手をふる、バク転、ジャンプ）それぞれドラックアンドドロップし、PlayCanvasにインポートします。
インポートをするとそれぞれPlayCanvas上に3つのファイルが生成されます。
今回3つFBXをアップロードした場合には9個のファイルが新規差作成されています。
アニメーションのためにインポートをしたFBXに関しては、生成された3つのファイルのうち、Typeがanimationとなっている.json以外は削除をしても問題がありません
生成された9つのファイルのうち、animation以外の不要なファイルを削除します。
更に扱いやすくするために、インポートをしたときに、アニメーションの名前を変更します。
ASSETSから、Backflip.jsonを選択し、INSPECTORのNameから、名前を変更します。
手をふる、バク転、ジャンプ３つのファイルのそれぞれの名前を変更します。
アニメーションをサンディちゃんに追加をする
アニメーションの名前を変更することが出来たら次に、サンディーちゃんにアニメーションを追加していきます。
現在サンディちゃんはidleというアニメーションを持っていますが、これに加えて3つのアニメーションを追加します。
ヒエラルキーから、sandy-chanを選択します。
サンディーちゃんを選択したら、ADD Assetsを選択してモデルにアニメーションを追加していきます。
ASSETSから、先程追加した3つのアニメーションを選択します。
３つアニメーションを選択したら、右側のINSPECTORのADD SECTIONをクリックします。
ADD SECTIONをクリックし、全てのアニメーションを追加できたらDONEをクリックし、アニメーションをモデルに追加します。
アニメーションを再生する
アニメーションを再生するには、モデルに適用されている、Animationコンポーネントの中にある。アニメーションの名前にマウスをホバーすると出てくる再生ボタンをクリックすることでアニメーションを確認することが出来ます。
ここで正しく4つのアニメーションを作成することができればアニメーションのインポートは完了です。
前
次
リンク
コメント
0件のコメント
ログインしてコメントを残してください。