Skip to content

Latest commit

 

History

History
172 lines (130 loc) · 9.12 KB

README-ja.md

File metadata and controls

172 lines (130 loc) · 9.12 KB
Raw

PlayCanvas WebGL Game Engine

Docs | Examples | Forum | Blog

PlayCanvasは、オープンソースのゲームエンジンです。

HTML5とWebGLを使用してゲームやインタラクティブな3Dコンテンツをモバイルやデスクトップのブラウザで実行できます。

NPM version Minzipped size Language grade: JavaScript Average time to resolve an issue Percentage of issues still open Twitter

English 中文 日本語 한글

ショーケース

PlayCanvasエンジンを使って多くのゲームやアプリ 公開されています。ここではその一部をご紹介します。

Seemore After The Flood Casino
Swooop Master Archer Flappy Bird
Car Star-Lord Global Illumination

他のゲームはPlayCanvasのウェブサイトで見ることができます。

利用実績

PlayCanvasは、ビデオゲーム、広告、ビジュアライゼーションの分野で大手企業に採用されています。 Animech, Arm, BMW, Disney, Facebook, Famobi, Funday Factory, IGT, King, Miniclip, Leapfrog, Mojiworks, Mozilla, Nickelodeon, Nordeus, NOWWA, PikPok, PlaySide Studios, Polaris, Product Madness, Samsung, Snap, Spry Fox, Zeptolab, Zynga

機能

PlayCanvasはフル機能のゲームエンジンです。

  • 🧊 グラフィックス - WebGL 1.0 & 2.0で構築された高度な2D + 3Dグラフィックスエンジン。
  • 🏃 アニメーション - キャラクターやシーンに対する強力なステートベースのアニメーション
  • ⚛️ 物理 - 3Dリジッドボディ物理エンジン ammo.js
  • 🎮 インプット - マウス、キーボード、タッチ、ゲームパッド、VRコントローラのAPI
  • 🔊 サウンド - Web Audio APIを利用した3D位置情報サウンド
  • 📦 アセット - glTF 2.0、Draco、Basis の圧縮技術を利用した非同期型ストリーミングシステム
  • 📜 スクリプト - TypeScriptとJavaScriptをサポート

使用方法

シンプルなHello Worldの例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Hello Cube</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src='https://code.playcanvas.com/playcanvas-stable.min.js'></script>
</head>
<body>
    <canvas id='application'></canvas>
    <script>
        // create a PlayCanvas application
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas);
        // fill the available space at full resolution
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);
        // ensure canvas is resized when window changes size
        window.addEventListener('resize', () => app.resizeCanvas());
        // create box entity
        const box = new pc.Entity('cube');
        box.addComponent('model', {
            type: 'box'
        });
        app.root.addChild(box);
        // create camera entity
        const camera = new pc.Entity('camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.1, 0.1, 0.1)
        });
        app.root.addChild(camera);
        camera.setPosition(0, 0, 3);
        // create directional light entity
        const light = new pc.Entity('light');
        light.addComponent('light');
        app.root.addChild(light);
        light.setEulerAngles(45, 0, 0);
        // rotate the box according to the delta time since the last frame
        app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));
        app.start();
    </script>
</body>
</html>

このコードを自分で試すにはCodePenをクリックします。

ビルドの手順

Node.jsがインストールされていることを確認します。 次に、必要なNode.jsの依存関係をすべてインストールします。

npm install

これで、様々なオプションでビルドを実行できるようになりました。

コマンド 説明 出力ファイル
npm run build リリース用、デバッグ用、プロファイラー用エンジンをビルドする build\playcanvas[.dbg/.prf].js
npm run build:types TypeScript型定義ファイルをビルドする build\playcanvas.d.ts
npm run docs APIリファレンス をビルドする docs

また、ビルド済みのエンジンも利用できます。

最新版のビルド(devブランチのHEADリビジョン)

最新安定版のビルド

特定のバージョンのビルド

Generate Source Maps

エンジンのデバッグがしやすいようにソースマップを構築するには、任意のエンジン構築コマンドに-- -mを追加します。例えば、以下のようになります。

npm run build -- -m

これによりbuild/playcanvas.js.mapが出力されます。

PlayCanvasエディター

PlayCanvas エンジンは、HTML5 アプリやゲームを作成するためのオープンソースのエンジンです。エンジンに加えて、PlayCanvasエディターがあります。

Editor

エディター関連のバグや問題については、Editor's repoを参照してください。