🔗 项目仓库: https://github.com/No-needto-recall/NoesisDemo
这是一个 Unreal Engine 5.4 的示例项目,旨在演示:
uclass_extends
特性,彻底告别蓝图开发。核心理念:XAML 和 ViewModel 都是代码 → AI 完全理解 → 自动生成和修改 → 开发效率 dramatically improved
✅ 完美复刻官方示例:成功使用 TypeScript 复刻了 NoesisGUI 官方的 Buttons 和 QuestLog 示例。
🚀 TypeScript 代码化 ViewModel:使用 PuerTS 的 uclass_extends
直接继承 UE 类并自动生成蓝图。
🔧 动态 DataContext 设置:自定义 UNoesisViewModeInstance
,调整 DataContext 的赋值时机。
🤖 AI 友好:XAML 和 ViewModel 均为代码,易于 AI 理解和生成。
📦 版本控制友好:完全基于代码,告别蓝图合并的噩梦。
⚡ 属性自动通知:NoesisProxy
自动处理 PropertyChanged
,并原生支持 TArray
和 TMap
。
本方案采用完全代码化的工作流:
✅ XAML 文件是纯文本格式 - AI 可以轻松理解和生成。
✅ ViewModel 使用 TypeScript 编写 - 这是 AI 的强项。
✅ 数据绑定逻辑清晰可读 - AI 能够进行推理。
这使得本项目与 AI 辅助开发工具(如 Claude Code, GitHub Copilot, Cursor 等)完全兼容。
自动生成 ViewModel 代码
只需描述你的需求,AI 就能生成完整的 ViewModel:
// 输入:"创建一个设置界面,包含音量和画质选项" // AI 自动生成: class TS_SettingsViewMode extends UE.Object { @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) Volume: number = 80; @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) Quality: string = "High"; @ufunction(ufunction.BlueprintCallable) ApplySettings(): void { console.log(`Applying: Volume=${this.Volume}, Quality=${this.Quality}`); } }
自动修改和重构代码
告诉 AI “增加一个音效开关” → 自动修改 TypeScript 和 XAML 。 AI 能理解数据绑定逻辑,自动添加相应的属性和命令。 AI 还能自动处理复杂的集合绑定 (TArray
, TMap
)。
快速生成完整界面
“创建一个包含用户列表的界面” → AI 自动生成 XAML + ViewModel 。 “增加搜索和筛选功能” → AI 自动补全相关代码。 “实现拖拽排序” → AI 生成完整的事件处理逻辑。
使用 Claude Code 等 AI 工具,只需描述 UI 需求和交互逻辑,AI 就能自动生成 XAML 和 ViewModel 代码。 开发者只需审查和微调,极大地提升了开发效率,实现了近乎自动化的 UI 代码开发体验。
"再也不用手动拉蓝图连线了——AI 直接生成代码!" - 某开发者
uclass_extends
- 自动生成蓝图类通过 TypeScript 装饰器定义属性和方法,PuerTS 会自动生成对应的蓝图类:
class TS_ButtonsViewMode extends UE.Object { static Path(): string { return "/Game/BluePrints/TypeScript/ViewMode/Buttons/TS_ButtonsViewMode_C"; } @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) TestValue: string = "Hello NoesisGUI"; @ufunction(ufunction.BlueprintCallable) StartCommand(): void { console.log("Button clicked!"); } }
UNoesisViewModeInstance
- 解决 DataContext 限制自定义的 UNoesisInstance
子类,在 XamlLoaded
回调中自动设置 DataContext
,解决了官方类不支持动态设置的问题。
NoesisProxy
- 属性自动通知利用 Javascript Proxy API 自动拦截属性修改,并触发 NoesisGUI 的更新:
const proxy = createNoesisProxy<TS_ButtonsViewMode>(viewMode); // 任何属性修改都会自动通知 NoesisGUI proxy.TestValue = "New Value"; // 支持 TArray 自动通知 proxy.items.Add(newItem); // 自动调用 NotifyArrayPostAdd proxy.items.RemoveAt(0); // 自动调用 NotifyArrayPreRemove + PostRemove // 支持 TMap 自动通知 proxy.map.Add("key", value); // 自动调用 NotifyMapPostAdd
数据绑定流程:
TypeScript 类定义 (@uproperty, @ufunction) ↓ PuerTS 生成蓝图类 ↓ TypeScript 创建实例 (UE.NewObject) ↓ 绑定到 UNoesisViewModeInstance (PendingDataContext) ↓ XAML 加载完成 (XamlLoaded 回调) ↓ 自动设置 DataContext ↓ 数据绑定生效 (XAML Binding → ViewModel 属性) ↓ 属性更新 (NoesisProxy → NotifyPropertyChanged → UI 刷新)
演示了基础的 MVVM 数据绑定:
演示了复杂的数据绑定:
TArray
集合绑定 - 任务列表AddQuest
方法,自动触发 UI 更新// QuestLog ViewModel 示例 class TS_QuestLogViewMode extends UE.Object { @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) Quests: UE.TArray<TS_Quest>; @ufunction(ufunction.BlueprintCallable) AddQuest(Title: string, Image: UE.Texture2D, ...): TS_Quest { const Quest = UE.NewObject(TS_Quest); Quest.Initialize(Title, Image, ...); // 使用 Proxy 自动触发 TArray 更新通知 let Proxy = createNoesisProxy<TS_QuestLogViewMode>(this); Proxy.Quests.Add(Quest); return Quest; } }
环境要求:
获取项目:
git clone https://github.com/No-needto-recall/NoesisDemo.git
⚠️ 重要提示:
NoesisDemo.uproject
即可打开,开箱即用。详细的安装步骤、配置说明和使用教程,请访问项目的 GitHub 仓库查看完整文档。
这个项目为 Unreal Engine 中的 NoesisGUI 开发提供了一种全新的思路:
✅ 使用 TypeScript 替代蓝图编写 ViewModel
✅ 完全代码化,版本控制友好,无蓝图合并冲突
✅ 全面兼容 AI 辅助开发工具,实现近乎自动化的 UI 代码生成
✅ 复刻官方示例,证明了方案的完整性和可行性
✅ 自动属性通知,支持复杂的 TArray
和 TMap
绑定
如果这个项目对你有帮助,请给它一个 Star ⭐! 欢迎提交 PR 来复刻更多官方 UI 示例,一起完善这个方案! 🎉
Made with ❤️ for the NoesisGUI Community
]]>现在此滤镜已经 ready,使用的是 opencv/pytorch,用 python 编写(当然也可以改为 c++),请问通过怎么样一种方式集成到 UE4 中去?由于滤镜是 2D 滤镜,所以仅要求贴完滤镜后的的人脸只对某一个特定 camera 投影 OK 就行。
想询问下实现思路,感激不尽。 请大神们可以给点建议,即使不是 end to end solution 也行。
]]>刚刚收到了邮件,得知UE4已经永久免费了。
具体参见官网: https://www.unrealengine.com/what-is-unreal-engine-4
附邮件原文自翻,直译勿怪:
今年对于Unreal Engine 4是特殊的一年。我们成长了很多,我们学习了很多,因为有大家的反馈和协助,使得UE4引擎变得从未有过的易用和强大。现在,我们将Unreal Engine 4免费的提供给世界各地的开发者。
在这之前,我们想要真诚的向每一位陪伴我们至今的人表示感谢。我们为您的活力,热情和使用UE4所做的惊人的一切而感动。因为有您,我们将会工作的更加努力,因此,当我们携手的时候,我们均可以创造我们期待着的,想要塑造的,我们钟爱着的未来。
如果您在1月30日或之后订阅了UE4,您将会按比例获得您最后一个月的退款。您将可以继续免费获得未来全部的更新。
同时,由于您曾是我们的付费订阅者,我们将额外赠予您$30美元,您将可以在Marketplace商店中消费,或保存以备将来使用。
PS: 5%分成的规则依旧不变,但是游戏开发,虚拟现实,教育,建筑和电影领域的使用是完全免费的。
]]>