青瓷引擎UI组件怎么用之Dom节点

青瓷引擎UI组件的qc.Dom节点本质上就是一个div元素，拥有所有HTML元素的特性，由于不需要像普通游戏对象那样每帧都渲染，因此较为高效。对于静态的元素，首选使用DOM来实现。

层次

Dom的div元素可置于game.canvas之上或之下，位于game.canvas之上的挂载在game.world.frontDomRoot元素上，位于game.canvas之下的挂载在game.world.backDomRoot元素上。只有当game.cavnas设置为透明的情况下，位于canvas之后的Dom元素才可见。

|
|--- game.world.frontDomRoot (div)
|
|--- game.canvas (canvas)
|
|--- game.world.backDomRoot (div)
|
game.container (div normally)
资源

默认编辑器会自动对游戏资源打包成bin后缀的zip格式，发布工程时只会发布zip格式文件，原始资源文件不会被拷贝，但Dom的div元素往往需要访问图片等原始资源，因此Assets/raw作为特殊目录，专门用于存放无需打包的资源内容。
CSS

Assets/css目录的style.css文件可用于配置所有Dom元素css效果，游戏运行的html页面会自动链接引入该css文件。例如可在Dom的div元素上设置className，然后在style.css上对className进行定义。
代码创建Dom对象

// 创建一个Dom对象
var dom = game.add.dom();

// 设置Dom对象div元素的innerHTMl内容
dom.div.innerHTML = '<img src='test.png' />';

// 设置Dom对象div元素的风格
dom.div.style.color = 'red';
dom.div.style.padding = '10px';

// 创建Dom对象div元素的子元素
var subDiv = document.createElement('div');
dom.div.appendChild(subDiv);
编辑器创建Dom对象

Hit Area：

交互属性，如果在Dom对象中要使用链接，并希望用户点击链接后能跳转，就需要设置Hir Area，打开交互。注意: 当打开交互后，该节点上不能再使用onClick等事件，游戏事件会与页面处理冲突，而导致无法达到想要的效果。

Pos：

位置属性，决定Dom位于game.canvas之上或之下：

qc.Dom.POS_FRONT: 位于game.canvas之上
qc.Dom.POS_BACK: 位于game.canvas之上
node.pos = qc.Dom.POS_FRONT

InnerHTML：

用于设置div元素的innerHTML属性，其中的Serializable属性决定是否进行保存，如果Dom的具体内容由其脚本动态生成，Inspector上只需要查看的情况下，可关闭Serializable属性。

node.innerHTML = 'QICI Engine';
node.serializable = true;

Overflow：

对应div.style.overflow属性，可取值：visible、scroll、hidden或auto

node.overflow = 'hidden';

ZIndex：

对应div.style.zIndex属性，位于canvas之上时zIndex值需大于0，位于canvas之下时zIndex需小于0。

node.zIndex = 1;

ClassName：

对应div.className属性

node.className = 'qici-logo';

文章来自绿盟(xDowns.com)转载请注明来路。

青瓷引擎 1.0.7 官网最新版 - HTML5小游戏开发工具

青瓷引擎UI组件怎么用之Dom节点

文章正文

相关文章

相关软件