使用HTML 来开发RMMV的UI

m1615690513

【开发的背景】：

考虑到HTML生态的繁荣和VUE3的优势，我们决定让PIXI.JS专注于游戏画面的渲染，而将UI部分交给HTML处理。以前基于PIXI的UI界面定制开发工作量相对较大，但现在我们可以借助HTML和VUE3的力量，大大减少代码的编写量。

由于RMMV使用的PIXI版本较为老旧，对于CSS的支持较差。因此，在创建渐变特效或动画时，可能需要额外编写大量的代码。不过，值得一提的是，CSS3的动画已经能够满足许多UI使用场景的需求。

另外一个好处是，通过减少PIXI绘制UI的工作，可以在一定程度上提高游戏的帧率。这是因为UI渲染通常会占用一定的计算资源，将其交给HTML处理后，游戏的帧率可能会有所提升。

以前，前端开发人员需要学习PIXI.js来开发界面。然而，现在我们可以将界面的开发完全交给前端开发人员来处理，因为他们不再需要了解PIXI.js，只需要专注于他们已经熟悉的领域，比如VUE等。这样做的好处是前端开发人员可以更加专注于自己擅长的技术栈，提高工作效率。

实现细节：
我们在Graphics上添加了一个UI容器，用于显示UI组件。通过动态加载HTML界面，并执行其中可见的脚本内容，因此可以实现不同场景下的个性化UI场景。通过持续替换UI容器的内容，实现动态变化。

使用的建议：
当前版本仅提供预览，不建议普通用户实际使用。预期使用者是那些具备JS基础和HTML基础的开发人员，因为我们需要重写所有原先采用PIXI实现的UI界面，转而替换成DOM版本。这个工程还有很多工作尚未完成。不过，对于极客开发者来说，他们也可以尝试使用。

对于普通用户而言，我们将在完成UI界面的全部重写之后，提供完整替代方案，并支持多种主题配色方案。请尽情期待这些更加丰富和多样化的功能！

【更新日志-20230701】：
- 我们对游戏标题界面进行了重写，样式参考了MZ的UI标题界面。（Scene_Title.html）
- 我们移除了不必要的代码若干。
- 我们额外提供了themes.css 用于配置主题色

下载地址： 使用实例.zip (382.93 KB, 下载次数: 39)

2023-7-1 05:47 上传

点击文件名下载附件

以下是该版本的预览效果：


themes.css 长这样子：
[pre lang="css"]/* 主题变量 */
:root {
    /**文本阴影**/
    --mv-text-shdow: 2px 2px 4px #555555;
    /**字体颜色**/
    --mv-color: #ffffff;
    /**背景颜色**/
    --mv-bg-color: #000000;
    /** 文字对齐方式 **/
    --mv-text-align: center;
    /**字体**/
    --mv-font-family: Arial, GameFont, sans-serif;
    /** 选项框背景色 **/
    --mv-w-select-bg-color: var(--mv-bg-color);
    /** 选项框透明度 最大255 **/
    --mv-w-select-bg-opacity: 192;
    /** 选项框背景填充5像素 **/
    --mv-w-select-bg-padding: 5px;
    /** 选项框背景色 **/
    --mv-w-select-bg-radius: 10px;
    /** 选项框边框颜色 **/
    --mv-w-select-bg-border: 5px #6f91d1 solid;
    /** 选项字体颜色 **/
    --mv-w-select-item-color: var(--mv-color);
    /** 选项边框 **/
    --mv-w-select-item-boder: 2px black solid;
    /** 选项行高度 **/
    --mv-w-select-item-line-height: 36px;
    /** 选项文字大小 **/
    --mv-w-select-item-font-size: 20px;
    /** 选项文字对齐方式 **/
    --mv-w-select-item-text-align: var(--mv-text-align);
    /** 选项背景颜色 **/
    --mv-w-select-item-bg-color: #6caaa6;
    /** 选项背景颜色2 **/
    --mv-w-select-item-bg-color2: #346371;
    /** 选项禁用背景颜色 **/
    --mv-w-select-item-disabled-bg-color: rgba(0, 0, 0, 0.5);
    /** 选项禁用字体颜色 **/
    --mv-w-select-item-disabled-color: gray;
    /** 选项字体颜色 **/
    --mv-w-select-item-text-shdow: var(--mv-text-shdow);

    /** 标题界面选项框宽度 **/
    --mv-w-title-select-bg-width: calc(240px - var(--mv-w-select-bg-padding) * 2)
}[/pre]


【更新日志-20230630】：

- 本次更新更新了所有界面的待办事项，将所有场景界面由Scene_Base的基类转为Scene_HTML_Base。
- 取消二级目录map/ title
- 默认UI 库选择现代前端Element-UI作为默认UI框架
- Scene_HTML_Base基类新增onTerminate销毁钩子函数。（问题描述：Vue中创建的应用程序实例（通过Vue.createApp()方法）不会自动销毁，而是会持续存在，直到手动调用app.unmount()方法来销毁它们。由于本工程采用动态加载方式，如果是和Vue结合，那么会创建新的app对象，因此我们提供了一个钩子函数来销毁由Vue创建的app对象。）
[pre lang="javascript"]const {createApp} = Vue
const app = createApp({
    data() {
        return {
            message: 'Hello Vue!'
        }
    },
    methods: {
        startGame() {
            scene.commandNewGame();
        }
    }
});
app.use(ElementPlus);
app.mount('#window');
scene.onTerminate = function () {
    app.unmount();
    console.log("已销毁！")
}[/pre]

【更新日志-20230629】：

- 本次更新提供了默认事件禁用状态，也就是点击UIContainer不会触发当前地图的事件。（问题描述：当点击UI组件的时候，人物也得到了事件响应，而实际情况下，我们只是需要人物点击游戏地图时才会做响应，点击UI上的按钮时，希望人物在原地保持不动。）
- 修复Scene_Map.html 中点击地图失效的问题。（问题描述：HTML UI地图：Scene_HTML_Map点击游戏地图时，人物没有响应，无法移动）


[pre lang="html"] <!-- 通过添加data-preventGlobalEvents=“true”，我们可以轻松禁用来自RMMV Input和TouchInput的事件传递到该UI元素。 -->
<a href="#" @click="gameMain" :data-preventGlobalEvents="true">主页</a>[/pre]

【软件的内部的协议】：

1. Element-Plus (https://gitee.com/element-plus/element-plus/blob/dev/LICENSE)
2. Vue（https://cn.vuejs.org/about/faq.html#what-license-does-vue-use）

【Element-Plus原型设计】

Axure Element-Plus资源


【压缩包使用方式】：

1. 解压覆盖到游戏工程目录。（建议新建一个项目测试）

效果展示：

m1615690513

由于立项是采用的RMMV进行开发，所以我们目前只能使用此来进行扩展。
RMMZ会作为我们后续项目开发的一个选项。

小怪兽奇奇侠

单从截图效果看，基于dom的ui和canvas原生绘制的比起来还是有差距，有一种剥离感在里面。不过相信随着优化会越来越好。

闪电超重火炮

不是吧，渲染需要占据资源，那么单纯使用dom就不占用资源了吗？老哥监测过性能吗？事件交互刷新在正常的流程里面可是占用很大一部分资源的哦，可能你认为会比pixi方便，但性能上远不如pixi的webgl

RuanZhongNan

兄弟，github上号。

540666123

大佬666

m1615690513

闪电超重火炮 发表于 2023-6-29 16:19
不是吧，渲染需要占据资源，那么单纯使用dom就不占用资源了吗？老哥监测过性能吗？事件交互刷新在正常的流 ...

使用HTML进行开发是这个工程的看中的重点。

就性能而言，这不是这个工程的重点，它更像是一个附加的东西，它的提升需要满足一定的条件，可能取决于所使用的浏览器，也可能取决于运行的硬件。因此，使用HTML进行开发可能会提高游戏的帧率。

这主要是因为DOM渲染通常使用CPU进行，而WebGL渲染利用GPU的并行计算能力，可以更高效地处理复杂的图形渲染任务，从而提升游戏性能。通过将游戏内容交由WebGL渲染，可以释放更多的CPU资源用于处理UI部分，提高整体性能。（CPU处理DOM，GPU处理游戏逻辑）

其次，DOM仅需渲染一次，随后根据变动进行更新和重新渲染。而RMMV的实现方式是将所有的PXIX.Container对象一次性进行更新。实际上，UI部分很少发生变动，因此这样做可能会提高帧率。

闪电超重火炮

不会，你想多了

m1615690513

闪电超重火炮 发表于 2023-6-30 08:07
不会，你想多了

我深感谢你对这个问题的关注，并对你提出的观点表示尊重。对于UI和游戏逻辑的分离模式的讨论，不同的人有不同的见解和经验，因此也存在各种不同的实践和成功案例。

实际上，对于每个具体的项目和情境，可能需要根据需求和实际情况来确定最佳的开发架构和技术选择。在游戏开发中，UI和游戏逻辑之间的分工可以因情况而异，有时强调分离，有时则紧密耦合。

因此，我要再次强调，将UI和游戏逻辑分离的做法的有效性和性能优势是需要综合考虑众多因素的。我非常感谢你的观点和问题，这促使我对这个话题进行更深入的思考。

因素参考：
应用复杂性：应用的复杂性对于分离UI和游戏逻辑的可行性和效果有很大影响。如果应用有较简单的UI和较简单的游戏逻辑，则分离的收益可能较小；而对于复杂的应用，分离能够更好地管理和优化UI和游戏逻辑。

性能需求：性能需求是决定是否采用分离模式的关键因素之一。如果应用对帧率、动画效果或图形渲染要求较高，分离UI和游戏逻辑可能能够提升性能；而对于简单的应用，分离可能不会带来明显的性能改进。

浏览器支持与兼容性：将UI使用HTML DOM渲染，游戏逻辑使用WebGL/Canvas等技术，需要考虑目标浏览器的支持与兼容性。不同浏览器可能对技术的支持程度有所差异，这可能会影响分离模式的实施和性能结果。

设备能力：不同设备的性能和能力也会对分离模式的效果产生影响。较强大的设备可能更能充分发挥WebGL/Canvas等技术的优势，而较低性能的设备可能无法获得明显的性能提升。

开发与维护成本：分离UI和游戏逻辑可能会带来一定的开发与维护成本。需要投入额外的精力来处理不同技术之间的交互、数据同步和通信等方面的工作，并确保整体的一致性与协调性。

gt50

也算是一种解决方案思路吧，期待后续