用户界面(UI)
如何使用 React、Vue、PixiJS 等外部 JavaScript 框架在 Pixi’VN 中构建和集成 UI 界面。
Pixi’VN 不提供用于创建游戏界面(UI)的内置组件,也不会重新发明 JavaScript 生态系统中已有的东西。 它不会将你锁定在某个特定框架中,而是让你可以使用任何你偏好的外部 JavaScript 框架来构建界面,因此你可以借助 React、Vue 等系统来创建复杂、高性能的界面(UI)。
这种灵活性也让 Pixi’VN 非常适合 AI 辅助开发:由于界面(UI)是使用标准且被广泛使用的框架构建的,而不是专有系统,AI 编程助手已经非常熟悉这些工具,能够非常有效地生成、理解和修改界面代码。
Pixi’VN 提供了一些功能,以提升与其他 JavaScript 框架的兼容性:
界面(UI)与画布(canvas)之间的区别
按照 Pixi’VN 的设计理念,界面(UI)与画布(canvas)是两个独立且互不依赖的元素。 界面位于画布上方,用于创建按钮、表单等。 画布用于显示图片、视频等。
关于画布当前状态的所有信息都会包含在存档中,并且可以恢复到之前某个 step 的状态。 界面的当前状态不会被包含在存档中。 因此,你需要自行管理,将所需信息保存到游戏存储(game storage)或浏览器存储中。
在画布中,你可以在每个 step 中添加组件。 而在界面中不能这样做,但你可以创建多个「界面(screen)」并在它们之间导航。
在画布中你只能添加 Pixi’VN 组件。 而在界面中,你可以添加任何 HTML/PixiJS 组件,或使用任何 UI 组件库,因此可以创建更加复杂的界面。