PlayCanvasチュートリアル: Tween.jsを使ってエンティティの反復運動を実現する方法

今回のPlayCanvasチュートリアルでは、エンティティを上下左右に反復運動させる方法をご紹介します。スムーズなアニメーション制作にはTween.jsが欠かせません。このガイドを通じて、PlayCanvasにTween.jsを導入し、反復運動のスクリプトを簡単に記述する方法を学びましょう

Tween.jsの導入
スクリプト「upDown.js」の準備
エンティティの反復運動用コード
スクリプトをエンティティにアタッチ
Launchで確認
最後に

Tween.jsの導入

エンティティや、2点の間の任意の値をアニメートすることがよくあります。これはTween(トゥイーン)と呼ばれます。
まずはじめに、Tween.jsをPLAYCANVASに導入します。
Tweenのライブラリは以前はGithubからダウンロードする必要がありましたが、現在はPlaycanvasのプロジェクトから直接インポートができるようになりました！

TweenLibraryを保存するフォルダ(任意のフォルダ)をクリックし、選択状態にします。
編集画面内で、ビューポートとASSETフォルダの境目の右側に”ASSET STORE”の表示がある事を確認します。
ASSET STOREをクリックし、アセットストアを表示させます。
アセットストアのトップに”TWEEN LIBRARY”と描かれたアイコンがあるはずです。
もしもない場合は検索窓に”tween”と入力し、アイコンを表示させます。
アイコンをクリックし、右上にオレンジ色で表示された”IMPORT”をクリックします。
これでプロジェクトにTweenがインポートされました。IMPORTクリック後に画面に特に変化がないので、不安になりますが、ちゃんとインポートされています。
×ボタンでアセットストアを閉じ、プロジェクトに戻ります。

以上でTweenの導入はおしまいです。簡単ですね。

スクリプト「upDown.js」の準備

次に、エンティティを上下左右に反復運動させるためのスクリプトを作成します。

マウスカーソルをASSETフォルダに合わせます
マウスの右クリック→New Asset→scriptをクリック
スクリプトの名前を決めるウィンドウが表示されるので、「upDown」と入力します。
ASSETフォルダ内に「upDown.js」が作られているはずです。
upDown.jsをダブルクリックするとコード編集画面が立ち上がります。

エンティティの反復運動用コード

upDown.jsが開けたら、そこに書いてあるものを全て消し、下記のコードをコピペしてください。

var UpDown = pc.createScript('upDown');

UpDown.attributes.add('duration', {type: 'number', default: 2.0});
UpDown.attributes.add('position', {type: 'vec3', default: [0, 0, 0]});
UpDown.attributes.add('easing', {type: 'string', default: 'Linear'});
UpDown.attributes.add('delay', {type: 'number', default: 0});
UpDown.attributes.add('loop', {type: 'boolean', default: true});
UpDown.attributes.add('yoyo', {type: 'boolean', default: true});
UpDown.attributes.add('repeat', {type: 'number', default: 2});

UpDown.prototype.initialize = function() {
    this.reset();

    this.on('attr:duration', function (value) {
        this.tween.duration = value;
    }, this);
    this.on('attr:position', this.reset, this);
    this.on('attr:easing', this.reset, this);
    this.on('attr:delay', this.reset, this);   
    this.on('attr:loop', this.reset, this);   
    this.on('attr:yoyo', this.reset, this);   
    this.on('attr:repeat', this.reset, this);
};

UpDown.prototype.reset = function () {
    if (this.tween) {
        this.tween.stop();
    }

    var currentPosition = this.entity.getLocalPosition();
    var targetPosition = new pc.Vec3(
        currentPosition.x + this.position.x,
        currentPosition.y + this.position.y,
        currentPosition.z + this.position.z
    );

    this.tween = this.entity.tween(this.entity.getLocalPosition())
        .to(targetPosition, this.duration, pc[this.easing])
        .delay(this.delay)
        .loop(this.loop)
        .yoyo(this.yoyo);

    if (!this.loop) {
        this.tween.repeat(this.repeat);
    }

    this.tween.start();
};

コードはエンティティの位置、時間、イージングタイプなどをカスタマイズし、反復運動を制御します。
各部分の解説を以下に記します。

スクリプト定義: var UpDown = pc.createScript('upDown'); これは、UpDownという名前の新しいスクリプトを作成します。
アトリビュートの追加: 以下のコードは、スクリプトにアトリビュートを追加して、編集画面で設定できるようにしています。
- duration: エンティティが移動するのにかかる時間（秒）です。
- position: エンティティが移動する距離（x, y, z）です。
- easing: イージング関数の種類です。
- delay: エンティティの移動が開始されるまでの遅延時間（秒）です。
- loop: 移動が繰り返し実行されるかどうかを示します。
- yoyo: 移動がyoyo（往復）モードで実行されるかどうかを示します。
- repeat: 移動が何回繰り返されるかを指定します。ただし、loopがtrueの場合は無視されます。
initialize関数: この関数は、スクリプトの初期化時に実行されます。ここでは、reset関数を呼び出してTweenを作成し、各アトリビュートが変更されたときに適切に対応するイベントリスナーを設定しています。
reset関数: この関数は、Tweenをリセットし、新しいTweenを作成するためのものです。まず、現在のTweenがあれば停止します。次に、現在のエンティティの位置にアトリビュートで指定されたpositionを加えて、ターゲット位置を計算します。最後に、新しいTweenを作成して、アトリビュートで指定されたパラメータを使用して開始します。

以上が、このコードの概要です。エンティティにこのスクリプトを追加し、編集画面でアトリビュートの値を調整することで、x, y, z軸の各方向に移動するアニメーションを実現できます。

コピペしたら保存します。

スクリプトをエンティティにアタッチ

あとはupDown.jsをエンティティにアタッチすればほぼおしまいです。

ビューポートまたはヒエラルキーから、動かしたいエンティティをクリックし、選択状態にします。
右側のインスペクター内にある「＋ADD COMPONENT」をクリックし、「script」を選択
編集画面を下にスクロールするとscriptの項目が追加されているはずです。
scriptの空欄をクリックすると「upDown」の表示があるので、クリックします。
upDownが追加されるので、鉛筆マークとonの間にある「パースボタン」をクリック。
durationやpositionなど7つの項目が表示されればOKです。

Launchで確認

あとはLaunchで確認すればOKです。
upDownのpositionの「x」の数値をとりあえず「1」にしてください。
positionは移動方向と移動距離です。
xが1なら、x軸方向に1m移動します。
ちなみにdurationは移動にかける時間で、この数値が1の時は1秒です。
これでLaunchボタンをクリックでLaunch画面で確認します。
エンティティが動いていればOKです。

以上でPLAYCANVASでエンティティを上下左右に動かす方法でした。

おまけ
落下、回転、反復運動の組み合わせでこんな感じ。