メインコンテンツまでスキップ

Engineをスタンドアロンで使用する

PlayCanvas Engineでアプリケーションを構築する際に、エディタを使用せずに構築することが可能です。Engineを直接使用して構築されたアプリケーションの例をいくつか示します。

このページでは、開始方法を説明します。

注記

始める前に、Node.jsがインストールされていることを確認してください。

クイックスタート

ViteとTypeScriptを使用するプロジェクトでは、公式のcreate-playcanvasツールを実行してEngine形式を選択します。

npm create playcanvas@latest my-app -- -f engine

生成されたプロジェクトには、実行可能なスターターと、対応するAIコーディングエージェント向けのPlayCanvas Skillsが含まれます。

プロジェクトをセットアップする際には、考慮すべき主要な2つのオプションがあります。

オプション1: ビルドツールとNPM​

これは、ほとんどの開発者に適した推奨されるセットアップです。

ビルドツールは、アプリケーションを幅広いブラウザで実行できる最適化されたパッケージにバンドルできます。webpack、Rollup、esbuildなど、多くのビルドツールがあり、PlayCanvasはそれらすべてで動作します。ここでは、モダンなウェブプロジェクト向けに、より高速で無駄のない開発体験を提供することを目指す人気のビルドツールであるViteを使用します。

まず、JavaScriptとTypeScriptのどちらで開発するかを選択します。

  1. ターミナル/コマンドプロンプトを開き、アプリ用のフォルダを作成してその中にcdします。

  2. playcanvasとviteをインストールします。

    npm install playcanvas
    npm install vite --save-dev

  3. index.htmlを作成し、これを貼り付けます。

    index.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
                body { margin: 0; overflow: hidden; }
            </style>
        </head>
        <body>
            <script type="module" src="main.js"></script>
            <canvas id='application'></canvas>
        </body>
    </html>

  4. main.jsを作成し、これを貼り付けます。

    main.js
    import * as pc from 'playcanvas';

    // create a graphics device, preferring WebGPU over WebGL 2.0
    // WebGPUを優先してグラフィックスデバイスを作成します
    const canvas = document.getElementById('application');
    const device = await pc.createGraphicsDevice(canvas, {
        deviceTypes: [pc.DEVICETYPE_WEBGPU]
    });

    // create an application with the systems and handlers it uses
    // 使用するシステムとハンドラーを指定してアプリケーションを作成します
    const options = new pc.AppOptions();
    options.graphicsDevice = device;
    options.componentSystems = [
        pc.RenderComponentSystem,
        pc.CameraComponentSystem,
        pc.LightComponentSystem
    ];
    options.resourceHandlers = [
        pc.TextureHandler,
        pc.ContainerHandler
    ];

    const app = new pc.AppBase(canvas);
    app.init(options);
    app.setCanvasResolution(pc.RESOLUTION_AUTO);
    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
    app.start();

    // resize the canvas when the window is resized
    // ウィンドウのサイズが変わったらキャンバスのサイズを変更します
    window.addEventListener('resize', () => app.resizeCanvas());

    // create a camera
    // カメラを作成します
    const camera = new pc.Entity();
    camera.addComponent('camera', {
        clearColor: new pc.Color(0.3, 0.3, 0.7)
    });
    camera.setPosition(0, 0, 3);
    app.root.addChild(camera);

    // create a light
    // ライトを作成します
    const light = new pc.Entity();
    light.addComponent('light');
    light.setEulerAngles(45, 45, 0);
    app.root.addChild(light);

    // create a box
    // ボックスを作成します
    const box = new pc.Entity();
    box.addComponent('render', {
        type: 'box'
    });
    app.root.addChild(box);

    // rotate the box
    // ボックスを回転させます
    app.on('update', (dt) => box.rotate(10 * dt, 20 * dt, 30 * dt));

  5. Vite開発サーバーを実行します。

    npx vite

    これにより、http://localhost:5173でサーバーが起動します。ブラウザでこのURLにアクセスすると、以下が表示されます。

    Spinning Cube

    ヒント

    ソースファイルを保存するたびに、タブが自動的に再読み込みされます。

オプション2：インポートマップとCDN​

インポートマップは、JavaScriptモジュール内のモジュール指定子を解決できます。このインポートステートメントを考えてみましょう。

import * as pc from 'playcanvas';

インポートマップは、「playcanvas」をブラウザによって動的にロードできるCDNでホストされたエンジンのビルドに解決できます。これは、オプション1で説明したビルド手順をスキップできることを意味します。

まず、JavaScriptとTypeScriptのどちらで開発するかを選択します。

  1. Terminal/Command Promptを開き、アプリのフォルダを作成し、その中にcdします。

  2. index.htmlを作成し、以下を貼り付けます。

    index.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
                body { margin: 0; overflow: hidden; }
            </style>
            <script type="importmap">
            {
                "imports": {
                    "playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas/+esm"
                }
            }
            </script>
        </head>
        <body>
            <script type="module" src="main.js"></script>
            <canvas id='application'></canvas>
        </body>
    </html>

  3. main.jsを作成し、以下を貼り付けます。

    main.js
    import * as pc from 'playcanvas';

    // WebGPUを優先してグラフィックスデバイスを作成
    const canvas = document.getElementById('application');
    const device = await pc.createGraphicsDevice(canvas, {
        deviceTypes: [pc.DEVICETYPE_WEBGPU]
    });

    // 使用するシステムとハンドラーを指定してアプリケーションを作成
    const options = new pc.AppOptions();
    options.graphicsDevice = device;
    options.componentSystems = [
        pc.RenderComponentSystem,
        pc.CameraComponentSystem,
        pc.LightComponentSystem
    ];
    options.resourceHandlers = [
        pc.TextureHandler,
        pc.ContainerHandler
    ];

    const app = new pc.AppBase(canvas);
    app.init(options);
    app.setCanvasResolution(pc.RESOLUTION_AUTO);
    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
    app.start();

    // ウィンドウのサイズが変わったらキャンバスのサイズを変更
    window.addEventListener('resize', () => app.resizeCanvas());

    // カメラを作成
    const camera = new pc.Entity();
    camera.addComponent('camera', {
        clearColor: new pc.Color(0.3, 0.3, 0.7)
    });
    camera.setPosition(0, 0, 3);
    app.root.addChild(camera);

    // ライトを作成
    const light = new pc.Entity();
    light.addComponent('light');
    light.setEulerAngles(45, 45, 0);
    app.root.addChild(light);

    // ボックスを作成
    const box = new pc.Entity();
    box.addComponent('render', {
        type: 'box'
    });
    app.root.addChild(box);

    // ボックスを回転させる
    app.on('update', (dt) => box.rotate(10 * dt, 20 * dt, 30 * dt));

  4. serve を実行します:

    npx serve

    これにより、http://localhost:3000 でサーバーが起動します。ブラウザでこのURLにアクセスすると、次の表示が表示されます:

    回転するキューブ

アプリケーションの構成​

サンプルは、2つの手順でアプリケーションを作成します。

  1. createGraphicsDeviceでグラフィックスデバイスを作成します。deviceTypesにDEVICETYPE_WEBGPUを指定するとWebGPUが要求され、WebGPUが利用できない場合、EngineはWebGL 2.0にフォールバックします。
  2. アプリケーションが使用するコンポーネントシステムとリソースハンドラーを列挙したAppOptionsオブジェクトで、AppBaseを初期化します。それ以外は登録されないため、ビルドツールは残りの部分をバンドルから除外できます。

アプリケーションの機能を増やすときは、必要なものを登録します。

  • コンポーネント: コンポーネントの種類ごとに、そのコンポーネントシステムが必要です。たとえば、scriptコンポーネントを使用するにはpc.ScriptComponentSystemを追加します。Applicationのコンストラクターに、すべてのコンポーネントの種類とそのシステムが記載されています。システムが登録されていない場合、addComponentはnullを返し、Engineのデバッグビルドはエラーをログに出力します。
  • アセット: アセットの種類ごとに、そのリソースハンドラーが必要です。サンプルでは、テクスチャ用のpc.TextureHandlerとGLBモデル用のpc.ContainerHandlerを登録しています。
  • その他の機能: サウンド、バッチ処理、ライトマップ、XRは、AppOptionsの他のプロパティで有効にします。たとえば、soundコンポーネントにはoptions.soundManager = new pc.SoundManager()も必要です。
注記

Applicationクラスは、これらをすべて自動的に設定します。ただし、コンストラクターではWebGPUデバイスを作成できず、すべてのコンポーネントシステムとリソースハンドラーがバンドルに含まれます。また、将来のリリースで非推奨になる予定です。