Puerts WebGL Unity

introduction | 简介

• With this project. Unity Puer's JS Code will run in the v8 of browser instead of v8/quickjs in WebAssembly.
• 通过该项目的支持，Unity puer的JS代码会运行在宿主JS引擎里，而不是运行在编译为WASM的JS解释器里。

Advantage | 优势

• High Efficiency | 开发很快

  • all the JS file can run in browser directly. you dont have to rebuild the unity project after JS script is modified.
  • 所有JS逻辑文件都可以直接在宿主JS环境跑，因此你不需要在每次改完脚本代码后重新构建unity项目了。

• Fast | 执行很快

  • with the JIT in browser's v8. Puer Webgl has a huge execute performance advantage.

  • 因为在这套架构下，JS是运行在宿主JS环境下的，有JIT的支持，因此相比Lua脚本方案，在执行性能上有碾压性的性能优势。

    	100k fibonacci(12)
    xLua WebGL	6200ms
    Puerts WebGL	165ms

更深入的优化请参见: 这篇知乎文章

QuickStart | 开始

learn puerts | 建议先了解PuerTS本体

• PuerTS is not only developed for WebGL game development. It allows you to write Typescript in Unity native game too.

• PuerTS并不是只针对WebGL游戏开发的框架，它本身支持你在原生Unity中编写Typescript

• So. the guidance below is assumed that you already know something about puerts. Or you can learn about it in Tencent/puerts

• 下列指引都是假设你已经有对PuerTS本身足够的了解。您可以先在 Tencent/puerts 获得一些知识再往下进行。

have a try in your browser | 在浏览器体验一下效果

• start a http server (such as by serve) in build directory. you can quickly try these 4 demo which is built by Unity2021.
• 在build目录启动一个httpserver（比如使用serve），通过网页访问即可看到4个demo的效果，它们是Unity2021.3.19编译产生的。

1. Simple Rotate Demo | 简单旋转demo
2. Basketball Game Demo | 篮球小游戏demo
3. UnitTest
4. Compare with XLua WebGL | 和 xLua WebGL / C# 进行fibonacci 性能对比测试demo

How to rebuild | 如何重新构建？

1. Open any project in projects | 打开projects下的任意项目
2. Click puerts-webgl/install in the Menu | 点击puerts-webgl/install
3. Do Unity WebGL Build | 执行Unity的WebGL Build
4. (Except Sample1) Click PuerTS/TSLoader/Release TS to Resources because ts-loader is used | （除了Sample1）因为使用了ts-loader，需要点击PuerTS/TSLoader/Release TS to Resources
5. Click puerts-webgl/build for browser following the tips by step3 in console | 根据第3步出现的命令行提示，点击puerts-webgl/build for browser将JS拷贝到构建目录 6。 append these code before </head> in index.html built by Unity: | 将下述代码放到index.html的前

  <script src="./puerts-runtime.js"></script>
  <script src="./puerts_browser_js_resources.js"></script>

install in your own project | 在你自己的项目中安装

1. Install puerts first | 首先安装puerts本体 ：

2. Install puerts-webgl | 安装PuerTS-WebGL支持：

   Add from OpenUPM | available in 2018+

   你可按照OpenUPM所支持的方式安装该包：https://openupm.com/packages/com.tencent.puerts.webgl/

   Add from Git

   带有upm的unity版本，可以使用这种方式安装

   • git clone https://github.com/zombieyang/puerts_unity_webgl_demo.git
   • open Package Manager
   • click +
   • select Add from File
   • select [your cloned path]/packages/webgl/upm/package.json
   • click Add

3. Install puerts-webgl-jsbuild（in first time） | 安装jsbuild组件（首次运行需要）：

   Add from Git

   带有upm的unity版本，可以使用这种方式安装

   • git clone https://github.com/zombieyang/puerts_unity_webgl_demo.git
   • open Package Manager
   • click +
   • select Add from File
   • select [your cloned path]/packages/webgl-jsbuild/upm/package.json
   • click Add

You can also copy all the code into your Assets directory. But I don't recommend it.

Jsbuild is only for example, in most case you will need to customize it by yourself

你也可以将所有代码都复制到你的Assets目录，但我不建议这么做

Jsbuild包基本只用于示例，大部份情况下最终你都需要自己定制jsbuild代码

About WeChat minigame | 关于微信小游戏？

点我

---

How to contrib

• 运作原理(how this work?)

Puerts的WebGL版本是利用Unity官方提供的Unity代码与浏览器脚本交互的功能，对Puerts中使用到的PuertsDLL.cs里的API通过JS一一进行实现。关键代码位于Assets/Plugins/puerts.jslib以及puerts-webgl/PuertsDLLMock。

---

FAQ

1. I got this error: | 我遇到了这个错误

Unable to parse Build/H5.framework.js.gz! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header "Content-Encoding: gzip" present. Check browser Console and Devtools Network tab to debug.

• set Player Settings > Publish Settings > Compression Format to Disabled. delete your previous build and rebuild.
• 将 Player Settings > Publish Settings > Compression Format 设为 Disabled。删掉你上一次的构建产物，然后重新构建。

2. the memory rise to 2GB+ during the early launching | 游戏一启动内存就暴涨到2GB+

• generally, you can check the resources loading in your game. make sure that you disable the Unity builtin caching.
• 一般来说，你可以检查一下你游戏的资源加载流程，确认关掉了资源加载的cache。

3. I'm going to migrate my old PuerTS Game to this. How can I do this ? | 我需要将我过往的PuerTS游戏迁移过来，有什么需要注意的吗？

• If you are on 1.4+ of PuerTS, nothing is needed to do for migrate.
• 如果你使用的是1.4+版本的PuerTS，那么没什么太多需要注意的。但如果是1.3以下，请关注 这篇wiki

4. ILoader does not work | Loader在webGL下不工作

• wiki

5. brotli compression may not be supported

• set Player Settings > Publishing Settings > Compression Format to Disabled

---

Discord

QQ群：942696334