Skip to content

Latest commit

 

History

History
180 lines (131 loc) · 8.4 KB

README-zh.md

File metadata and controls

180 lines (131 loc) · 8.4 KB

PlayCanvas WebGL 游戏引擎

开发者站点 | 例子 | 论坛 | 博客

PlayCanvas 是一款使用 HTML5 和 WebGL 技术运行游戏以及其他 3D 内容的开源游戏引擎，PlayCanvas 以其独特的性能实现了在任何手机移动端和桌面浏览器端均可以流畅运行。

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 website.

我们的客户

许多行业龙头公司在不同领域（广告，电子游戏以及产品可视化等）均适用了 PlayCanvas：

Animech, Arm, Disney, Facebook, IGT, King, Miniclip, Leapfrog, Mozilla, Nickelodeon, Nordeus, PikPok, PlaySide Studios, Polaris, Product Madness, Samsung, Snap, Spry Fox, Zeptolab, Zynga

特点

PlayCanvas 是一款优秀的全功能游戏引擎。

  • 🧊 图形 - 基于 WebGL1&2 的超前 2D + 3D 图形引擎
  • 🏃 动画 - 基于状态的强大动画功能，有效展现动画角色和随机场景属性
  • ⚛️ 物理 - 一体化的 3D 刚体物理引擎 ammo.js
  • 🎮 输入 - 支持鼠标，键盘，触控，游戏控制器以及众多 VR 控制器 API
  • 🔊 声音 - 基于 Web Audio API 的 3D 音效
  • 📦 资源 - 使用 glTF 2.0, Draco 以及 Basis 的异步流媒体系统
  • 📜 代码 - 支持 Typescript 以及 JavaScript

如何使用

以下为一个简单的使用案例 - 实现一个旋转的立方体！

<!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>
      // 创建一个PlayCanvas应用
      const canvas = document.getElementById("application");
      const app = new pc.Application(canvas);

      // 在全屏模式下填满可用空间
      app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
      app.setCanvasResolution(pc.RESOLUTION_AUTO);

      // 确保在窗口尺寸变化同时画布也同时改变其大小
      window.addEventListener("resize", () => app.resizeCanvas());

      // 创建一个立方体
      const box = new pc.Entity("cube");
      box.addComponent("render", {
        type: "box",
      });
      app.root.addChild(box);

      // 创建一个摄像头
      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);

      // 创建一个指向灯
      const light = new pc.Entity("light");
      light.addComponent("light");
      app.root.addChild(light);
      light.setEulerAngles(45, 0, 0);

      // 根据立方体的时间增量旋转立方体
      app.on("update", (dt) => box.rotate(10 * dt, 20 * dt, 30 * dt));

      app.start();
    </script>
  </body>
</html>

想要自己动手试试？点击 CodePen.

如何搭建项目

确保已安装 Node.js ，并安装 Node.js 相关依赖组件。

npm install

现在您就可以运行不同的搭建选项了：

Command Description Outputs
npm run build Build release, debug and profiler engines build\playcanvas[.dbg/.prf].js
npm run build:types Build engine Typescript bindings build\playcanvas.d.ts
npm run docs Build engine API reference docs docs

您也可以使用 PlayCanvas 的预搭建版本

最新的开发版本：

最新的稳定版本：

特定引擎版本：

生成 Source Maps

您可以在任何构建指令之后添加 -- -m 来生成 Source map 更好更方便地对引擎进行调试和排错：

npm run build -- -m

此条指令将会将结果输出到 build/playcanvas.js.map

PlayCanvas 平台

PlayCanvas 引擎是一款可以基于浏览器的用于制作游戏以及 3D 可视化的开源引擎。除此之外，我们还开发了PlayCanvas 开发平台， 为我们的用户提供了可视化编辑器，资源管理，代码编辑，代码托管以及发布等服务。

Editor

License

The PlayCanvas Engine is released under the MIT license. See LICENSE file.