---
title: Puerts（一）——学习资料归纳
date: 2023-07-24 15:12:29
excerpt: 
tags: Puerts TypeScript
rating: ⭐
---

# 前言
https://github.com/Tencent/puerts
- [安装方法](https://github.com/Tencent/puerts/blob/master/doc/unreal/zhcn/install.md)
- [FAQ](https://github.com/Tencent/puerts/blob/master/doc/unreal/zhcn/faq.md)
- [更新日志](https://github.com/Tencent/puerts/blob/master/doc/unreal/zhcn/changelog.md)

## Puerts
- 相关文章&视频：
	- [UE引擎里头跑个nodejs服务器是怎样一种体验？](https://zhuanlan.zhihu.com/p/428250631)
	- [在你的ios、android应用中嵌入官方版nodejs是什么感觉？](https://zhuanlan.zhihu.com/p/568969543)
	- [[UnrealCircle深圳] puerts-UE下TypeScript编程插件 | 腾讯 车雄生](https://www.bilibili.com/video/BV1oB4y1A7dY/?spm_id_from=333.337.search-card.all.click&vd_source=d47c0bb42f9c72fd7d74562185cee290)
- 案例工程：
	- https://github.com/chexiongsheng/puerts_unreal_demo
- 知乎文章：
	- UE5 PuerTS学习与实践：https://zhuanlan.zhihu.com/p/632862773
	- UE4下基于V8实现的代码热刷新：https://zhuanlan.zhihu.com/p/364505146
	- PuerTS：js调用ue的过程：https://zhuanlan.zhihu.com/p/396751427
	- UE4：PuerTS的js调试相关：https://zhuanlan.zhihu.com/p/406387721 
	- 基于Puerts的编辑器UI开发-Mixin的非最佳实践：https://zhuanlan.zhihu.com/p/551338775
## TypeScript
- http://www.patrickzhong.com/TypeScript/zh/tutorials/typescript-in-5-minutes.html
- https://ts.xcatliu.com/
- https://jkchao.github.io/typescript-book-chinese/#why

# TypeScript Setup
安装：
```bash
npm install -g typescript
```

编译：
```bash
tsc xxx.ts
```

# Puerts
## Setup
1. 编译插件。
2. 进入插件目录`Plugins\Puerts`执行`node enable_puerts_module.js`。
3. 在项目根目录下执行`npm init`，并且添加。之后重新生成一次VS解决方案并且执行`npm install`。
```json
"dependencies": {
		"@types/react": "^15.6.6",
		"@types/react-reconciler": "^0.18.0",
		"@types/mocha": "^7.0.1"
 }
```
5. 代码写在项目目录下的`Content/TypeScript`中。
6. 之后就会在编辑器`Blueprints/TypeScript`目录下出现资产图标。
7. 加入ReactUMG。
	1. 进入 Content/javascript 目录 npm init 创建 package.json。
	2. 创建成功后，向文件中粘贴如下内容
	```json
"dependencies": {
		 "react": "^16.11.0",
		 "react-reconciler": "^0.23.0"
 }
```
	3. 然后 npm install 一次。
	4. 打开工程根目录的 tsconfig.json， 在 typeRoots 中 加入 "Plugins/ReactUMG/Typing"。
8. 打开 工程，在引擎中点击 ue.d.ts 。
### Node环境设置

### 调试方法
具体可以参考：
- Puerts Inspector指南（一）在UE4和Unity里调试Javascript:https://zhuanlan.zhihu.com/p/359598262

调试器的选择有：
1. 在Chrome输入`devtools://devtools/bundled/inspector.html?v8only=true&ws=127.0.0.1:8080`。
2. 在Chrome输入`chrome://inspect`，点击Configure...，输入IP&Port后，点击Inspect。
3. 使用VSCode进行调试。
	1. 在`Launch Program`处点击`add Configuration`。
	2. 选择`Node.js: Attach`。
	3. 设置端口。
	4. 点击绿色箭头即可调试。

#### 方式1：自创建虚拟机模式下调试配置
创建FJsEnv传入调试端口
```c++
//8080是调试端口 GameScript = MakeShared<puerts::FJsEnv>(std::make_unique<puerts::DefaultJSModuleLoader>(TEXT("JavaScript")), std::make_shared<puerts::FDefaultLogger>(), 8080);
```

阻塞等待调试器链接
```c++
GameScript = MakeShared<puerts::FJsEnv>(std::make_unique<puerts::DefaultJSModuleLoader>(TEXT("JavaScript")), std::make_shared<puerts::FDefaultLogger>(), 8080);
GameScript->WaitDebugger();
GameScript->Start("QuickStart", Arguments);
```

#### 方式2：自动绑定模式下调试配置
1.  菜单上选择`Edit->ProjectSettings`，打开设置页面后在`Plugins -> Puerts Setting`页面中开启调试以及设置端口。

# TypeScript
- Express TypeScript化改造:https://www.jianshu.com/p/978628a15027

## Express
#### 使用ts-node将ts文件编译在内存中
在使用`ts-node`之前需要进行全局安装
```shell
$ npm install ts-node -g

# 用ts-node直接运行项目，这个库会将我们的ts文件编译成js文件保存在内存中进行引用
$ ts-node ./bin/www
# 热更新模式
$ ts-node-dev ./bin/www
```
虽然`ts-node`可以帮我们直接运行ts文件，但在开发完成后部署在生产环境时，还是推荐使用`tsc`打包出来的`js`文件会更加稳定。

#### 配置npm脚本
```json
"scripts": {
	"start": "ts-node app.ts",
	"dev": "ts-node-dev app.ts",
	"build": "tsc",
	"server": "node ./dist/app.js"
},
```

# Puerts
Puerts的使用方法主要为
- 继承
	- 继承原生UE C++类：继承并且实现之后就会在
	- Mixin：
- 在C++类中调用TypeScript文件
## puerts_unreal_demo 食用方法
项目默认使用UTsGameInstance，可以在cpp中修改OnStart()中调用的TS脚本文件名，来查看结果。优先查看TS文件：
- QuickStart
- UsingMixin
- UsingMakeUClass
- UI
	- UsingWidget
	- UsingReactUMG 

### 蓝图相关
```javascript
//蓝图加载
//UE.Class.Load方式
//let bpClass = UE.Class.Load('/Game/StarterContent/TestBlueprint.TestBlueprint_C')
//let bpActor = UE.GameplayStatics.BeginDeferredActorSpawnFromClass(gameInstance, bpClass, undefined) as UE.Game.StarterContent.TestBlueprint.TestBlueprint_C;
blueprint.load(UE.Game.StarterContent.TestBlueprint.TestBlueprint_C);
const TestBlueprint_C = UE.Game.StarterContent.TestBlueprint.TestBlueprint_C; //别名
let bpActor = UE.GameplayStatics.BeginDeferredActorSpawnFromClass(gameInstance, TestBlueprint_C.StaticClass(), undefined) as UE.Game.StarterContent.TestBlueprint.TestBlueprint_C;
UE.GameplayStatics.FinishSpawningActor(bpActor, undefined);
bpActor.Foo(false, 8000, 9000);
//如果确定后续不需要使用TestBlueprint_C了，应该unload节省内存
blueprint.unload(TestBlueprint_C);

//蓝图结构体加载
//UE.UserDefinedStruct.Load方式
//let TestStruct = UE.UserDefinedStruct.Load("UserDefinedStruct'/Game/StarterContent/TestStruct.TestStruct'");
//let testStruct = UE.NewStruct(TestStruct) as UE.Game.StarterContent.TestStruct.TestStruct;
blueprint.load(UE.Game.StarterContent.TestStruct.TestStruct);
const TestStruct = UE.Game.StarterContent.TestStruct.TestStruct;
let testStruct = new TestStruct();
testStruct.age = 10;
testStruct.speed = 5;
bpActor.Bar(testStruct);
blueprint.unload(TestStruct);

//蓝图枚举
console.log("-------------------------15---------------------------");
console.log(UE.Game.StarterContent.TestEnum.TestEnum.Blue);
console.log(UE.Game.StarterContent.TestEnum.TestEnum.Red);
console.log(UE.Game.StarterContent.TestEnum.TestEnum.Green);
```

### Delegate
```javascript
//Delegate
function MutiCast1(i) {
    console.warn("MutiCast1<<<", i);
}

function MutiCast2(i) {
    console.warn("MutiCast2>>>", i);
    actor.NotifyWithInt.Remove(MutiCast2);//调用一次后就停掉
}

actor.NotifyWithInt.Add(MutiCast1)
actor.NotifyWithInt.Add(MutiCast2)

console.log("NotifyWithString.IsBound", actor.NotifyWithString.IsBound());
console.log("NotifyWithRefString.IsBound", actor.NotifyWithRefString.IsBound());
actor.NotifyWithRefString.Bind((strRef) => {
    //console.error("NotifyWithRefString");
    console.log("NotifyWithRefString", $unref(strRef));
    $set(strRef, "out to NotifyWithRefString");//引用参数输出
});
console.log("NotifyWithString.IsBound", actor.NotifyWithString.IsBound());
console.log("NotifyWithRefString.IsBound", actor.NotifyWithRefString.IsBound());

actor.NotifyWithStringRet.Bind((inStr) => {
    return "////" + inStr;
});

actor.NotifyWithInt.Broadcast(888999);
let strRef = $ref("666");
actor.NotifyWithRefString.Execute(strRef);
console.log("out str:" + $unref(strRef));
let retStr = actor.NotifyWithStringRet.Execute("console.log('hello world')");
console.log("ret str:" + retStr);
console.log("waiting native call script...........");

//Pass JsFunction as Delegate
function IsJohn(str:string) : boolean {
    return str == "John";
}
obj.PassJsFunctionAsDelegate(toManualReleaseDelegate(IsJohn));
//release after using
releaseManualReleaseDelegate(IsJohn);

//unhandledRejection
on('unhandledRejection', function(reason: any) {
    console.log('unhandledRejection~~~');
});

new Promise(()=>{
    throw new Error('unhandled rejection');
});
```
## 热更新方法
https://zhuanlan.zhihu.com/p/364505146


## UE C++调用Puerts脚本方法
```c++
//h
TSharedPtr<puerts::FJsEnv> GameScript;

//cpp
GameScript = MakeShared<puerts::FJsEnv>();
TArray<TPair<FString, UObject*>> Arguments;  
Arguments.Add(TPair<FString, UObject*>(TEXT("GameInstance"), this));  
GameScript->Start("QuickStart", Arguments);
```

```javascript
//在FJsEnv启动，调用Start时传入的参数可以通过argv获取。如果是继承ue类方式，这里的argv是空的
let gameInstance = (argv.getByName("GameInstance") as UE.GameInstance);
let actor =  UE.GameplayStatics.BeginDeferredActorSpawnFromClass(gameInstance, UE.MainActor.StaticClass(), undefined) as UE.MainActor;
UE.GameplayStatics.FinishSpawningActor(actor, undefined);

console.log(actor.GetName());
console.log(actor.K2_GetActorLocation().ToString());
```

## UE C++访问Puerts
通过UDynamicDelegateProxy，其成员记录了绑定的虚拟机与JS函数。