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