Playcanvasの使い方#9 WASDキーでエンティティを動かす

2024.03.31

PlayCanvasを使用して矢印キーとWASDキーでエンティティを動かす方法を学び、あなたの3Dゲームやインタラクティブなデモ制作をさらに進化させましょう。
このガイドでは、初心者でも簡単に実装できるステップをご紹介します。

準備

  • プロジェクトの作成: PlayCanvasエディタで新しいプロジェクトを始めましょう。
    新しいプロジェクトの作成方法はこちら。
  • エンティティの追加: シーンにboxエンティティを追加し、collisionとRigidBodyコンポーネントを設定して、位置を(0, 5, 0)に設定します。
  • 床の設定: Planeエンティティを選択肢、Scaleを（50,1,50）にます。
  • 床のPhysics: PlaneにもCollisionとRigidBodyをアタッチします。
    Collisionのhalf extensを(25,0.5,25)にします。

これで準備は完了です。

スクリプトの作成

次に、translateMove.jsという名前の新しいスクリプトを作成し、以下のコードを貼り付けます。

var TranslateMove = pc.createScript('translateMove');

TranslateMove.attributes.add('moveSpeed', { type: 'number', default: 5 });

TranslateMove.prototype.initialize = function() {
    this.moveDirection = new pc.Vec3();
};

TranslateMove.prototype.update = function(dt) {
    this.moveDirection.set(0, 0, 0);

    if (this.app.keyboard.isPressed(pc.KEY_UP) || this.app.keyboard.isPressed(pc.KEY_W)) {
        this.moveDirection.z += 1;
    }
    if (this.app.keyboard.isPressed(pc.KEY_DOWN) || this.app.keyboard.isPressed(pc.KEY_S)) {
        this.moveDirection.z -= 1;
    }
    if (this.app.keyboard.isPressed(pc.KEY_LEFT) || this.app.keyboard.isPressed(pc.KEY_A)) {
        this.moveDirection.x -= 1;
    }
    if (this.app.keyboard.isPressed(pc.KEY_RIGHT) || this.app.keyboard.isPressed(pc.KEY_D)) {
        this.moveDirection.x += 1;
    }

    if (this.moveDirection.length()) {
        this.entity.translate(this.moveDirection.clone().scale(this.moveSpeed * dt));
    }
};

このコードは、PlayCanvasエンジンを使って、エンティティを矢印キー（↑、↓、←、→）とWASDキーで動かすためのスクリプトです。

  1. TranslateMoveスクリプトを作成します。
  2. moveSpeedという設定項目を追加し、デフォルト値を5に設定します。これは、エンティティの動く速さを表します。
  3. initializeメソッドで、moveDirectionという方向を示す値を初期化します。これは、エンティティの動く方向を表します。
  4. updateメソッドでは、毎フレーム実行される処理を定義します。まず、moveDirection方向を示す値を0で初期化します。
  5. 矢印キーやWASDキーが押されているかどうかをチェックし、それに応じてmoveDirection方向のxおよびz成分を更新します。
    • ↑キーまたはWキーが押されている場合、z成分を+1します。
    • ↓キーまたはSキーが押されている場合、z成分を-1します。
    • ←キーまたはAキーが押されている場合、x成分を-1します。
    • →キーまたはDキーが押されている場合、x成分を+1します。
  6. moveDirection方向の値が0でない場合、エンティティを動かします。
    • moveDirection方向をコピーし、動く速さ（moveSpeed）と経過時間（dt）の掛け算で調整します。
    • この調整された方向を使って、エンティティを動かす（translateメソッド）。

このスクリプトをエンティティに追加することで、矢印キーとWASDキーでエンティティを動かすことができます。

スクリプトの適用

最後に、ボックスエンティティに先ほど作成したtranslateMove.jsスクリプトをアタッチします。これで、矢印キーとWASDキーでボックスエンティティを動かすことができます。

まとめ

これで、PlayCanvasでキーボード操作によるエンティティの動きが実装できました。簡単な3Dゲームやデモ制作にこの知識を活かしてください。

PlayCanvasやバーチャル空間の制作で専門的なサポートが必要な場合は、弊社までお気軽にお問い合わせください。豊富な事例を基に、お客様一人ひとりのニーズに合わせた提案を行い、プロジェクトの成功を全面的にサポートします。メタバースの世界で何を実現したいか、私たちと一緒に探求しましょう。

お問い合わせはこちら。共に未来のバーチャル空間を創り上げましょう。

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