README-ja.md

PlayCanvas WebGL Game Engine

API Reference | User Manual | Examples | Forum | Blog

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

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

English 中文 日本語 한글

ショーケース

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の例です。

import * as pc from 'playcanvas';

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

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.2, 0.3)
});
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();

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

PlayCanvas Engine をベースにしたローカル開発環境の設定に関する完全ガイドはこちらで見つけることができます。

ビルドの手順

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

npm install

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

コマンド	説明	出力先
npm run build	すべてのエンジンビルドターゲットと型宣言をビルドする	build
npm run docs	エンジンのAPIリファレンスドキュメントをビルドする	docs

PlayCanvasエディター

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

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