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

ゲーム

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

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

Security check




完成品

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

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ゲームを作りながら都度学んでいこうと思います。

コメント

タイトルとURLをコピーしました