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

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

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

Security check

support.playcanvas.jp

完成品

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

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

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

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

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

シーンへの配置

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

動かす

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

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コンポーネントによって自動で行われます。

まとめ

スプライトの表示と当たり判定ができるようになりました。

これで、2Dゲームを作るのに一通りの要素は揃ったかと思うので、あとは実際に簡単な2Dゲームを作りながら都度学んでいこうと思います。