基于PuerTS，实现UMG挂接TS脚本

xiangwu502

出于两个使用PuerTS的场景，一个是我现有的老项目，个人斗劲喜欢折腾一些新东西，所以我本身引入了Puer就是为了玩。第二个自然是新项目了。新项目不说随便折腾，老项目想要使用就需要三思了。我的项目不需要热更，所以我第一个想使用的就是脚本语言的轻便、快速开发和各种现成框架。
先说怎么在UMG上挂TS脚本吧！
一、简单的应用TSubclassOf<T>


主要就两个类几十行代码，首先是TSWidgetPrivate：这是我的业务类的基类，也就是我所有UMG的业务类城市从它担任，担任的目的自然是为了拿到UI对象。当umg上面“挂”<TS脚本>（以后都特指ui的业务逻辑实现）时，就会调用成员SetupUI(UUserWIdget* widget)把这个ui类指针传给脚本类。
TSWidgetPrivate是从UObject和FTickableGameObject多担任的，担任自Tickable的目的自然是我想使用Tick了，然后就多了必需实现的两个纯虚函数Tick()和GetStatId()，不想用按时器也可以不担任。
TUserWidget核心成员变量TSubclassOf<UTSWidgetPrivate> TSClass；这个TSClass就是为了在UMG上“挂”脚本，其实就是选择了脚本文件的类类型。UTSWidgetPrivate* UMGTypeScript;成员变量就是TS脚本的指针了，关系就是 ui包含ui逻辑。定名带有Qt的陈迹。
然后在UserWidget构造的时候通过TSClass创建脚本类对象；并调用TSWidgetPrivate的SetuoUI函数，将UMG传给脚本文件
void UTSUserWidget::CreateTSScript()
{
        if (TSClass)
        {
                UMGTypeScript = NewObject<UTSWidgetPrivate>(this, TSClass.Get());
                UMGTypeScript->SetupUI(this);
        }
}
二、编纂器中的使用
在代码仓库里面下载这两个类-四个文件，代码不多就几行有效代码，可以本身写，重要的是思路。
https://github.com/fonlylovey/UEExtension/tree/main/Source/PuerTS
下载之后放到你项目的任意处所，改削头文件中的类的导出宏为你本身项目或者插件的宏 class YOUPROJECT_API xxx。然后在编纂器傍边新建一个用户控件类（PS：我的项目所有UI都担任自我们本身的MyUserWidget类所以，我改了MyUserWidget的父类为TSWidget，这样所有的UI就都可以挂脚本了），然后从TSUserWidget担任，然后点击Puer的GenDTS按钮生成ts类，可以到ue.d.ts里面查找一下生成了没有、




然后在项目的TypeScript文件夹新建脚本类，可以做一个一键生成代码片段
import { blueprint } from &#39;puerts&#39;;
import * as UE from &#39;ue&#39;
type UMGClassName = UE.Game.Blueprints.BP_Test.BP_Test_C;

class TS_BPTest extends UE.TSWidgetPrivate
{
    Constructor()
    {
    }
    SetupUI(ui: UE.UserWidget): void
    {
        this.UI = ui as UMGClassName
        this.UI.Button_0.OnClicked.Add(this, ”OnClicked”);
    }
   
    OnClicked(): void
    {   
    }

    UI : UMGClassName;
}
export default TS_BPTest;
回到编纂器，打开蓝图类，选择UI布局傍边的BP_Test,然后在details傍边“挂”脚本。


然后就可以开始你的UI和逻辑分手，UMG纯挚作为一个UI编纂器，业务全都用ts写，我本身还用到了ts的http等一些框架