Puerts & ReactUMG 环境搭建（二）

nvzitea · 发表于 2023-9-10 17:43

筹备好 Puerts 以及 ReactUMG 包
合入插件包

新建 UE4 C++ 空工程，并合入插件包
下载好的 Puerts 目录中的 unreal 下的 Puerts 和 ReactUMG 拷贝到游戏工程下 Plugins 文件夹，如果没有本身创建一个（和 Content 同级目录）。然后找到工程文件，从头生成一次 VS 工程。

  然后打开 sln 项目解决方案，看到游戏工程下多出了 Plugins 文件夹，编译工程

编译成功后继续下一步

   cmd 或 powershell 打开项目目录下： Plugins\Puerts  ，并执行如下命令
      node enable_puerts_module.js
该命令感化：

将 Puerts 下的 Content/Javascript 拷贝到工程目录下的 Content 下
创建并初始化 tsconfig 文件（内容来源于 enable_puerts_module.js 中）
创建并初始化 DefaultPuerts.ini 到项目目录 Config 下（内容 AutoModeEnable=True ）
在项目根目录创建 TypeScript 目录
npm 安装 Puerts_Editor 的依赖包

   去到工程根目录 npm init 创建  package.json 创建成功后，向文件中粘贴如下内容
            ”dependencies”: {
                     ”@types/react”: ”^15.6.6”,
                     ”@types/react-reconciler”: ”^0.18.0”,
                     ”@types/mocha”: ”^7.0.1”
               }然后找到工程文件，从头生成一次 VS 工程
到工程根目录  npm install
插手配置 ReactUMG

进入 Content/javascript 目录 npm init 创建  package.json
创建成功后，向文件中粘贴如下内容
  ”dependencies”: {
         ”react”: ”^16.11.0”,
         ”react-reconciler”: ”^0.23.0”
   } 然后  npm install 一次
打开工程根目录的 tsconfig.json，在 typeRoots 中插手 ”Plugins/ReactUMG/Typing”,
打开  UE4 工程，在引擎中点击  ue.d.ts ，将会在如下目录生成对应将 ue 中的 API 反射成 ts 可调用的库文件
Plugins\Puerts\Typing
         Plugins\ReactUMG\Typing
测试是否可以正常使用

   为节约时间，这里直接拿来一些 puerts_unreal_demo 的代码做测试
   向项目中引入如下 cpp 代码：
   TextureImage.cpp ：
TsGameInstance.cpp :
如下 ts 代码：
该目录下的  main-ui react-umg  UsingReactUMG.ts  放到 typescript 目录下：
创建 TS_Player.ts 内容如下

此时在 vscode 中看到 index.tsx 是报错的
在工程的 .Build.cs 中插手依赖模块  PublicDependencyModuleNames.AddRange(new string[] { ”Core”, ”CoreUObject”, ”Engine”, ”InputCore”, ”JsEnv”, ”UMG”, ”Puerts” });
从头编译 C++ 项目，随后  在引擎中点击  ue.d.ts，上述报错消掉
测试 Puerts 是否正常工作：

当你改变并保留 ts 脚本，可以在引擎 log 中看到：

TS_Player.ts  这类脚本还会看到生成了对应的蓝图类。

测试 ReactUMG 是否正常工作：

在引擎中设置 GameInstance 为 TsGameInstance，并将 TsGameInstance 中的  GameScript->Start(”UsingReactUMG”, Arguments);
Start UsingReactUMG
运行游戏后，呈现如图即成功。至此， Puerts & ReactUMG环境搭建成功。

joeme · 发表于 2023-9-10 17:44

UE5 的版本能不能出一个呀

		自动登录	找回密码
密码			立即注册

Puerts & ReactUMG 环境搭建（二）

本帖子中包含更多资源