【PlayCanvas】スプライト機能のテスト

2021年6月12日

PlayCanvasでスプライト機能を使ってみました。

参考にしたのはこちらのチュートリアルです。

完成品

できあがったのがこちらです。

WASDキーでキャラクターが移動します。

※キャラクター画像素材はこちらのサイトからお借りしました。

スプライトアセットの作成

透過つきのpngファイルをアセットエリアにドロップ
追加した画像ファイルを右クリック→Create Texture Atlas
Texture Atlasを選択→インスペクタ画面「SPRITE EDITOR」ボタンを押す
FrameCountの値を設定してGENERATE FRAMES
追加したいフレームを選択→NEW SPRITE FROM SELECTION

シーンへの配置

生成されたスプライトをシーンにドロップ
SPRITEのTypeをAnimatedに変更
ADD CLIPを選択してクリップを追加
クリップにスプライトをドロップ

動かす

スプライトに以下のスクリプトコンポーネントを設定しています。

Sprite.prototype.update = function(dt) {
    var x = 0;
    var y = 0;
    
    this.entity.rigidbody.linearVelocity = new pc.Vec3(0,0,0);
    if(this.app.keyboard.isPressed(pc.KEY_LEFT)){
        x = -this.speed;
        this.entity.sprite.play("left");
        this.entity.sprite.resume();
    } else if(this.app.keyboard.isPressed(pc.KEY_DOWN)){
        y = -this.speed;
        this.entity.sprite.play("down");
        this.entity.sprite.resume();
    } else if(this.app.keyboard.isPressed(pc.KEY_UP)){
        y = this.speed;        
        this.entity.sprite.play("up");
        this.entity.sprite.resume();
    } else if(this.app.keyboard.isPressed(pc.KEY_RIGHT)){
        x = this.speed;
        this.entity.sprite.play("right");
        this.entity.sprite.resume();
    } else {
        this.entity.sprite.frame = 0;
        this.entity.sprite.pause();
    }
    this.entity.rigidbody.applyImpulse(x, y, 0);
};

壁との当たり判定は、Collision/RigidBodyコンポーネントによって自動で行われます。