このセクションの記事

3DキャラクターをPlayCanvasのAnimStateGraphで操作する

Avatar
宗形 修司
  • 更新
フォローする

PlayCanvasのAnimStateGraphでキャラクターアニメーションをセットアップしてみる

 

本チュートリアルの動画をYouTubeから試聴しながらの学習をお奨めしております。

 

このチュートリアルでは、AnimStateGraph (アニメーションステートグラフ）を使用し、キャラクターをセットアップし、キーボードでアニメーション操作できるようにすることを目的としたチュートリアルです。AnimStateGraphの詳細については、ユーザーマニュアルのアニメーション項目内に掲載されています。是非、ご覧ください。

また、PlayCanvasのRenderコンポーネントの特徴を活かしたキャラクターカスタマイズも学んでいきます。

スクリプトに関してはアニメーション操作部分のシンプルなコードを記述する程度です。

このチュートリアルで作成するシーンは以下のものです。

 

J:ジャンプ　A:剣攻撃　K:キック

それではコンテンツを作成していきましょう！

 

各Cahpterで学習する内容は下記のものになります。

Chapter01-キャラクターをアニメーションさせる
Chapter02-アニメーションの切り替え
Chapter03-複数アニメ―ションの制御
Chapter04-物理判定を追加する

 

チュートリアル用プロジェクトのフォーク(複製)

本チュートリアルでは、あらかじめセットアップされたモデルデータ、アニメーションデータを使用してシーンを構成していきます。

https://playcanvas.com/project/852126/overview/stategraph_start

 

01.png

Fork （フォーク）ボタンをクリックし、プロジェクトの名前を任意に入力します。

 

02.png

プロジェクト名を入力すると右下のフォークボタンがアクティブになりますので、クリックしてください。

 

03.png

フォークされたプロジェクトができます。EDITORボタンをクリックし、エディターを開きます。

 

mceclip1.png

SCENES(シーン)管理画面から、Main（メイン）を選択してください。

Mainシーンを開くと、ビジュアルエディターに切り替わります。

 

下部のASSETS (アセット)一覧内に各チャプターごとに分けた3Dモデル、アニメーションデータが格納されています。

 

Capter01-キャラクターをアニメーションさせる

キャラクターをシーンビューにdrag＆drop

04.png

アセット内にあるchapter01フォルダのmale01_containerを中央シーンビューにdrag＆dropしてください。

※キャラクターとアニメーションの作成手順に関しては「Vroid→blender→Mixamo→PlayCanvasでオリジナル3Ｄキャラを操作できるようにする！」をご参照ください。

05.png

キャラクターがシーンビューに表示されます。また、左側HIERARCHY（ヒエラルキー）にキャラクターのオブジェクト名が確認できます。DCCツール（3DCG制作ソフト）でFBXへエクスポートした際に、ボーン構造がある場合、PlayCanvas上でもボーン階層をコントロールすることが可能となっています。また、複数オブジェクトを選択した状態でFBXへエクスポートした際も、各オブジェクトを保持した状態で展開されます。

 

アニメーションを再生させるAnimStateGraphアセットを生成する

アセットの右横にある[+]ボタンをクリック、もしくは右クリックで表示される一覧の一番下にある Anim State Graphをクリックします。

06.png

chapter01が選択されているのでchapter01のフォルダ内に作成されます。アセット chapter01内にNew Anim State Graph(ニューアニメーションステートグラフ）が作成されました。これをダブルクリックするとAnim State Graphエディタービューが開きます。

07.png

新規で作成されたAnim State Graphには最初にSTARTから矢印でリンクされたInitial State(イニシャルステート)があります。

08.png

このInitial Stateをカスタムしてアイドリングアニメーションするようにしましょう。

一旦、Anim State Graphエディタービューを閉じます。中央シーンの右上の×ボタンをクリックすると通常エディターに戻ります。

 

キャラクターにAnim State Graphを適用させる

ヒエラルキーからmale01_containerを選択した状態で、右側のINSPECTOR(インスペクター)内のADD COMPONENT(コンポーネントを追加)をクリックします。

09.png

ADD COMPONENTから様々なコンポーネントを選択することができます。

 

__________2023-03-08_14.08.06.png

今回はAnim(アニメーション)を選択します。

 

11.png

ANIMコンポーネントがキャラクターに適用できたら、空きスロットへ先程生成した

New Anim State Graphをドラック＆ドロップします。

これで、male01_containerがNew Anim State Graphを持っている状態になりました。

続いて、下の空きスロットに chapter01/motionフォルダ内にあるidle.glbをドラック＆ドロップします。

12.png

これでOKです！この設定だけでアイドリングアニメーションが再生されます。

 

13.png

シーンビュー右上のLaunch(ローンチ)をクリックして確認してみましょう。

 

14.png

コンポーネントはON/OFFがボタンで可能です。

ANIMコンポーネントをOFFにすると、キャラクターはビューポート上のキャラクターと同様のＴ字ポーズの状態になりアニメーションしません。

 

まずはAnim State Graphでアイドリングアニメーションの再生ができました！

続いて、キーボード操作でアニメーションを切り替えられるようにします。

 

Chapter02-アニメーションの切り替え

複数のアニメーションを切り替えられるようにする

まずは、ジャンプのアニメーションをAnim State Graphに設定していきます。

15.png

Anim State Graphエディタービューを開き、中央ビュー上で右クリックし表示されるAdd new state(ステート新規追加)をクリックします。

 

mceclip1__1_.png

Stateのnameを変更します。先程のアイドリングを入れたInital State(イニシャルステート)はStateのnameを[idle]。新規で生成したStateのnameを[jump]に変更します。

 

16.png

idleのState上で右クリックし、Add transition(トランジションを追加)をクリックし、青い矢印をidleからjumpへ伸ばし接続します。

 

30.png

Anim State Graphエディタービューを閉じ、先程追加したAnimコンポーネントの内容を確認しましょう。Chapter02フォルダ内にあるjumpアニメーションをドラック＆ドロップします。

一度、Launchで確認すると、idleを1回再生してからjumpを再生しているのが確認できます。

Anim State Graphエディタービュー上でjumpのState内にあるLoopにチェックが入っている場合はidleを再生後、jumpを繰り返します。

 

ボタンを押したらジャンプするようにする

idle状態から指定したキーを押すとジャンプするようにします。

Add transitionをクリック、jumpからidleへ矢印を繋ぎます。

mceclip0__1_.png

これで、双方向から遷移することができるようになりました。ただし、この時点ではアニメーションとアニメーションの間隔やアニメーションの再生間隔などが設定できていません。

 

Duration(デュレーション)とExit Time(エグジットタイム)を設定します。

Duration：アニメーション同士の繋ぎの間隔

Exit Time：ステートの終了時間

 

__________2023-03-08_14.40.23.png

idleからjumpへの設定

Duration : 0

Exit Time : 0

 

__________2023-03-08_14.40.39.png

jumpからidleへの設定

Duration : 0.2

Exit Time : 1

 

17.png

続いて、jumpのパラメーターを設定します。左側のメニューにあるPARAMETER(パラメーター)をクリックし、jump用のパラメーターを設定します。

 

Name : jumpへ変更

Type : Trigger(トリガー)へ変更

 

このPARAMETERをidleからjumpへのNEW TRANSITION(ニュートランジション)へ設定します。

New Condition(ニューコンディション)をクリックすると、項目が追加されます。三角マークをクリックし、先程作成したPARAMETERのjumpを選択します。

 

アニメーション制御用の新規のスクリプトを作成

 

18.png

アセットのchapter02内で右クリックし、Scriptを選択します。

 

mceclip3.png

スクリプト名前をanime.jsとします。

 

mceclip4__1_.png

ダブルクリックでコードエディタが開きます。

 

コードを以下のように書き換えます。


var Anime = pc.createScript('anime');

// initialize code called once per entity
Anime.prototype.initialize = function() {

};

// update code called every frame
Anime.prototype.update = function(dt) {

//キーボード[J]を押したらジャンプする
if(this.app.keyboard.wasPressed(pc.KEY_J)){
        this.entity.anim.setTrigger('jump');
    }   
};

ここでは、キーボードの [ J ] が押されると jump アニメーションを再生するように記述しています。

 

続いて、キャラクターにスクリプトを適用させます。

HIERARCHYからmale01_containerを選択、ADD COMPONENTからScriptを選択します。

 

19.png

ANIMコンポーネントの下にSCRIPTコンポーネントが追加されました。

SCRIPTコンポーネント内にあるADD SCRIPT上でクリックすると、現在このプロジェクト内にあるスクリプト一覧が表示されますので、先程作成したanime.jsを選択します。

 

Launch画面で確認してみましょう。アイドリングしているキャラクターが、キーボードの[ J ]ボタンを押すと1度ジャンプします。

Anim State Graphの基本的な使い方は以上です。

 

これだけでは寂しいので、攻撃してボックスを吹き飛ばすことができるようにしていきたいと思います。

Chapter03-複数アニメ―ションの制御

剣を振るう/キックのアニメーションを追加する

idleからjumpと同様の設定をおこないます。

 

mceclip1__2_.png

まず、剣を振るう攻撃：attack_aと、キック：kickのパラメーターを作成します。

 

mceclip0__2_.png

続いて、[Add transition]でアニメーションを[idle]と双方で繋げます。

 

idleからkick
Duration: 0
Exit Time : 0
Condition : kick

 

kickからidle
Duration: 0.2
Exit Time : 1

 

idleからattack_a
Duration: 0
Exit Time : 0
Condition : attack_a

 

attack_aからidle
Duration: 0.2
Exit Time : 1

 

31.png

Anim State Graphエディタービューを閉じ、chapter03の attack_a と kick のアニメーションをANIMコンポーネントの空きスロットルにドラック＆ドロップします。

 

コードを追加する

任意のボタンを押したらアニメーションが再生するように追記します。



var Anime = pc.createScript('anime');

// initialize code called once per entity
Anime.prototype.initialize = function() {

};

// update code called every frame
Anime.prototype.update = function(dt) {

//キーボード[A]を押したらジャンプする
if(this.app.keyboard.wasPressed(pc.KEY_A)){
        this.entity.anim.setTrigger('attack_a');
    } 
    //キーボード[J]を押したらジャンプする
    if(this.app.keyboard.wasPressed(pc.KEY_J)){
        this.entity.anim.setTrigger('jump');
    } 
    //キーボード[K]を押したらジャンプする
     if(this.app.keyboard.wasPressed(pc.KEY_K)){
        this.entity.anim.setTrigger('kick');
    } 
};

Launch画面で確認してみましょう。

キーボードの[ J ]、[ A ]、でアニメーションを切り替えられることが確認できます。

 

 

 

Chapter04-物理判定を追加する

コリジョン(当たり判定)/リジットボディ(物理制御)を設定する

プリミティブな形状から、地面、武器、攻撃対象のボックスを作成します。

まずは、武器を配置する箇所を選択状態にします。

mceclip2__1_.png

HIERARCHYのmale01_containerの[ + ]をクリックし、階層を展開してRight_wristを選択します。

 

HIERARCHY横の[ + ]ボタンをクリックし、Primitive(プリミティブ)→Boxを選択。

 

mceclip1__3_.png

Position(ポジション)のスケールと位置を調整し、nameをSwordに変更します。

 

mceclip2__2_.png

地面を作成します。HIERARCHYでRootを選択した状態で、新規Boxを作成し、スケールを調整し、nameをGroundに変更します。

 

mceclip5__1_.png

攻撃対象のボックスを作成します。地面と同様にHIERARCHYでRootを選択した状態で、Boxを作成し、スケールを調整します。

 

SwordでBoxを吹き飛ばせるようにする

 

25.png

Swordを選択状態にして、ADD COMPONENTから、当たり判定Collision(コリジョン)と、オブジェクトに物理挙動を可能にするRigid Body(リジットボディ)を追加します。

 

mceclip4__2_.png

Sword

COLLISTION
Type : Box 
Half Extents : X:0.761 Y:0.025 Z:0.023

RIGIDBODY
Type : Kinematic

 

同様に、GroundとBoxにもCOLLISIONとRIGDBODYを追加します。

Ground

COLLISTION
Type : Box
Half Extents : X:5 Y:0.005 Z:5

RIGIDBODY
Type : Static

 

Box

COLLISTION
Type : Box
Half Extents : X:0.2 Y:0.2 Z:0.2

RIGIDBODY
Type : Dynamic

 

RIGIDBODYの各タイプは以下の特性を持っています。

Static(スタティック)：移動しない物理オブジェクト

Dynamic(ダイナミック)：加えられた力に応じて移動する物理オブジェクト

Kinematic(キネマティック)：APIを介してのみ明示的に配置できる物理オブジェクト

 

次は、キックも設定してみましょう。

 

キックでオブジェクトを吹き飛ばす

Right toe_endに空のEntityを追加し、ADD COMPONENTからCOLLISIONとRIGDBODYを追加します。

29.png

COLLISION
type : Sphere
Radius: 0.07

RIGDBODY
type : Kinematic

 

これで[ k ]キックでもボックスを吹き飛ばせるようになります。

 

Boxを複製する

Boxが一個だけでは寂しいので、複製して積み上げてみましょう。

 

mceclip0__4_.png

HIERARCHYからBoxを選択し、HIERARCHYの横にあるDuplicate Entity（+の隣のボタン）をクリックします。複製されたオブジェクトの位置を調整します。

 

mceclip1__4_.png

シフトキーを押しながら、まとめて選択して複製をクリックすると、選択分がまとめて複製されます。

 

Launch画面で確認してみましょう。[ A ]キーを押して攻撃アニメーションを再生するとBoxが吹き飛んでいくのが確認できれば完成です。

 

 

以上でチュートリアルは終了です。お疲れさまでした！

関連記事

コメント

0件のコメント

記事コメントは受け付けていません。