Skip to content

zombieyang/puerts_unity_webgl_demo

Folders and files

NameName
Last commit message
Last commit date
Apr 27, 2022
Jun 6, 2024
May 7, 2024
Apr 18, 2022
Mar 14, 2025
Jun 6, 2024
Mar 13, 2023
May 23, 2022
Nov 21, 2024
Jun 16, 2023
Jun 6, 2024

Repository files navigation

Puerts WebGL Unity

puerts_webgl minigame




  • The runtime part of this project now become a part of PuerTS's main repository,>>link
  • if you want to issue or PR please submit to Tencent/puerts
  • this project will keep for sample project showing.
  • 本项目runtime部分现已进入PuerTS主仓维护,>>跳转
  • 如有issue、PR请提至主仓Tencent/puerts。
  • 本项目仅留作Demo示例项目用



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下不工作
5. brotli compression may not be supported
  • set Player Settings > Publishing Settings > Compression Format to Disabled

QQ群:942696334