Docs | Examples | Forum | Blog
PlayCanvasは、オープンソースのゲームエンジンです。
HTML5とWebGLを使用してゲームやインタラクティブな3Dコンテンツをモバイルやデスクトップのブラウザで実行できます。
PlayCanvasエンジンを使って多くのゲームやアプリ 公開されています。ここではその一部をご紹介します。
他のゲームは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 tsd |
TypeScript型定義ファイルをビルドする | build\playcanvas.d.ts |
npm run docs |
APIリファレンス をビルドする | docs |
また、ビルド済みのエンジンも利用できます。
最新版のビルド(masterブランチのHEADリビジョン)
- https://code.playcanvas.com/playcanvas-latest.js
- https://code.playcanvas.com/playcanvas-latest.min.js
最新安定版のビルド
- https://code.playcanvas.com/playcanvas-stable.js
- https://code.playcanvas.com/playcanvas-stable.min.js
特定のバージョンのビルド
- https://code.playcanvas.com/playcanvas-1.38.4.js
- https://code.playcanvas.com/playcanvas-1.38.4.min.js
エンジンのデバッグがしやすいようにソースマップを構築するには、任意のエンジン構築コマンドに-- -mを追加します。例えば、以下のようになります。
npm run build -- -m
これによりbuild/output/playcanvas.js.mapが出力されます。
注意: ソースマップを生成する際、プリプロセッサはマッピングを破壊するため無視されます。つまり、ソースマップの生成時には、すべてのデバッグコードとプロファイリングコードがエンジンのビルドに含まれます。
PlayCanvasではユニットテストにKarmaを使用しています。テストを実行する方法は2つあります。
| コマンド | 説明 |
|---|---|
npm run test |
ビルドされた playcanvas.js に対してユニットテストを実行します。 |
npm run test:watch |
変更が検出されたときにユニットテストを再実行する - open http://localhost:9876/debug.html |
PlayCanvas エンジンは、HTML5 アプリやゲームを作成するためのオープンソースのエンジンです。エンジンに加えて、PlayCanvasエディターがあります。
エディター関連のバグや問題については、Editor's repoを参照してください。