初めてのPlayCanvasアプリを作る

PlayCanvasでのアプリケーション開発は簡単で楽しいものです。基本的なことを学ぶために次のシンプルな3Dアプリを作成しましょう。

矢印キーを使って赤いボールを動かします。

まず、PROJECTSページに移動します。

Projects Page

NEWボタンを選択して新しいプロジェクトを作成します。

New Project

プロジェクト名にMy First Appを入力します。説明はオプションで、後で記入することもできます。CREATEをクリックします。

プロジェクトが作成されたら、すぐにエディタに入りましょう。EDITORボタンをクリックします。

Editor Button

エディタを初めて開くと、最小限のシーンが作成されているはずです。

Editor

具体的には、シーンを描画するカメラ (Camera) 、ボックス (Box) 、3Dオブジェクトを照らすライト (Light) があります。

ボックス (Box) を他の形状、たとえばスフィア (Sphere) に簡単に変更することができます。これを行うには、ヒエラルキーパネル (HIERARCHY) でBoxエンティティを選択します。右のインスペクターパネル (INSPECTOR) で、ModelコンポーネントのTypeプロパティをBoxからSphereに変更します。その後、Entityの名前もBoxからSphereに変更しましょう！

Box To Sphere

しかし、私たちのスフィアは少し退屈な灰色です。それを赤色にしましょう！これを行うには、ASSETSパネルの**+**アイコンをクリックしてマテリアルを作成する必要があります。

Create Material

マテリアルを選択すると、そのプロパティが右のインスペクターパネルに表示されます。DIFFUSEセクションを展開し、色見本をクリックして色を赤に編集します。

Red Material

次に、マテリアルをスフィアに割り当てる必要があります。これはシンプルなドラッグアンドドロップ操作で行うことができます。

Drag And Drop Material

次に、カメラエンティティの設定をしましょう。ヒエラルキーパネル (HIERARCHY) でそれを選択します。

Editor Camera Selected

選択したカメラのために小さなプレビューウィンドウが表示されていることに注目してください。カメラの位置と回転を編集して、直接前からキューブを見るようにしましょう。以下の値でカメラの位置と回転を編集します。

Camera Transform

次に、スフィアをキーボードの矢印キーで操作できるようにしましょう。これを行うには、スクリプトを作成する必要があります。Sphereエンティティを右クリックし、Add Component -> Scriptを選択します。

Add Script Component

ScriptコンポーネントがSphereエンティティのインスペクター (Inspector) に表示されます。Scriptコンポーネント上にスクリプトアセットを作成するには、movement.jsという名前を入力します。

Create Script Asset

Enterを押すと、スクリプトが作成されます。

Edit Script

次に、EDITをクリックしてコードエディターを開きます。以下のデフォルトのスクリプトが表示されます。

var Movement = pc.createScript('movement');

// initialize code called once per entity
Movement.prototype.initialize = function() {

};

// update code called every frame
Movement.prototype.update = function(dt) {

};

スフィアを操作可能にするために、update関数にいくつかのコードを追加しましょう。以下のコードをコピーして貼り付けてください。

var Movement = pc.createScript('movement');

// initialize code called once per entity
Movement.prototype.initialize = function() {

};

// update code called every frame
Movement.prototype.update = function(dt) {
    // get which keys are pressed
    const keyboard = this.app.keyboard;
    const left  = keyboard.isPressed(pc.KEY_LEFT);
    const right = keyboard.isPressed(pc.KEY_RIGHT);
    const up    = keyboard.isPressed(pc.KEY_UP);
    const down  = keyboard.isPressed(pc.KEY_DOWN);

    // move this entity based on which keys are pressed
    // dt is the time in seconds since the last frame and stands for 'delta time'
    if (left) {
        this.entity.translate(-dt, 0, 0);
    }
    if (right) {
        this.entity.translate(dt, 0, 0);
    }
    if (up) {
        this.entity.translate(0, 0, -dt);
    }
    if (down) {
        this.entity.translate(0, 0, dt);
    }
};