超级浣熊的最近黑科技!?太有用了
前言 / Introduction
有社区的伙伴想开发 Cocos Creator 插件,但需要学习HTML、CSS以及各种Web前端库,对游戏开发程序员真的是太难了......
社区大佬『超级浣熊』早就看穿了这一点,一直在潜心研究如何以Cocos Creator的开发方式,去开发 Cocos Creator 插件,并一直在不断实践与迭代。
近期『超级浣熊』最近研究的黑科技 SSRExtensionKit 再次刷新了我的 Cocos Creator 开发的认知:Creator + WebElement 混合开发,并以 Cocos Creator 组件化的方式使用。
首先,SSRExtensionKit 对一些基础 DOM
元素进行了封装
然后,又对基础的 css
进行了封装
同时,又对基础的 property
尝试了封装。
现在我们想一下,对于这些 DOM
元素,就使用上来说,可以大致分为两类:
独立使用的元素:
button
,a
,link
, 等等组合使用的元素:
table + tr + th
,select + option
,ul + ol + li
等等
这一节,我们来探索下,这些组合式的 DOM
元素在Cocos Creator 中的封装和使用,包含:
下拉框 / Dropdown
按钮 / Button
列表 / List
表格 / Table
下拉框 / Dropdown
首先我们来尝试一下,实现一个 下拉框
的效果,下面是用HTML元素实现的标准例子:
可以看到,下拉框的实现是通过 <select>
+ <option>
组合使用实现的。
基于我们目前为止封装的模块,这里我们有几种实现方式:
Node
添加一个SSRSelect 组件
和多个SSROption
组件Node
添加一个SSRSelect
,Node
添加多个子节点,每个子节点有一个SSROption
组件
这里选择的是第二种方式,因为这种 parent-child
的实现方式,更符合 CocosCreator 风格
。
我们参照前面几节的例子,新建两个新的元素类
:
// ssr/dom/element/select.ts
export class SSRElementSelect extends SSRElementCore {protected _createDOM () {this.dom = document.createElement('select');}
}// ssr/dom/element/option.ts
export class SSRElementOption extends SSRElementCore {protected _createDOM () {this.dom = document.createElement('option');}protected _addDOM () {let elementCore = this.node.parent.getComponent(SSRElementCore);if (elementCore && elementCore.dom instanceof HTMLSelectElement) {elementCore.dom.appendChild(this.dom);}else {game.container.appendChild(this.dom);}}
}
可以看到 <select>
和 <option>
在代码上的差异。
其实实现方式还是很直观的:
对于 父级 元素的 <select>
和之前一样创建,没什么区别。
对于 子级 元素的 option
在创建的时候,如果 parent
具有了 select
组件,那么就添加到其节点下。
我们来使用看看。
首先是一个节点加上 select
组件。
接着为其加三个带有 option
组件的子节点:
每个子节点都有一个 innerText
的属性组件,用来为选项加上文本内容。
编辑器中预览,可以看到小小的三角形下拉框按钮,说明元素其实已经创建好了:
接着是网页中的测试:
点击下拉框后,可以看到各个选项内容:
最后是在插件系统
中的测试:
不错,看起来一切正常。
更好的事件监听 / Better Event Listener
因为下拉框总是要配合事件来使用的。
这一次,我们正好也借助这个机会,来封装并完善下事件监听的机制。
和上几节一样,暂时想要监听 下拉框选取选项事件,我们要这么写:
this.elementSelect.dom.on('change', () => {console.log((<HTMLSelectElement>this.elementSelect.dom).selectedIndex);
});
先看下效果:
可以看到,这么写,是完全没有问题的。
接着我们来想一下,是不是有办法可以让我们的 SSRElement
直接进行事件监听,而不需要再过渡到 DOM 对象呢。
答案当然是可以的,而且很简单:
// SSRElementCore
public on(type: string, callback: Function): void {HTMLElement.prototype.addEventListener.call(this.dom, ...arguments);
}public off(type: string, callback: Function): void {HTMLElement.prototype.removeEventListener.call(this.dom, ...arguments);
}
这样一来,我们就可以直接像 CocosCreator
中的普通 Node
对象一样,进行事件的监听了:
this.elementSelect.on('change', (event) => {console.log((<HTMLSelectElement>this.elementSelect.dom).selectedIndex);
});
我们接着来看,这里的回调函数中的 event
主要有两个问题:
获取到的对象和
SSRElementCore
没有关系用户需要自己查文档,找合适的事件名称,比如这里的
change
事件
那么我们是否可以把这种监听回调方式,也改成 CocosCreator 风格
呢,这样一来:
回调内容是 CocosCreator 风格的,自定义的内容,自然也就可以是
SSRElementCore
对象SSRElementCore
负责监听所有可能事件,提供枚举接口,用户直接挑选使用即可,这也是封装的意义所在
首先我们来看下自定义事件的实现:
import { Event } from 'cc';
import { SSRElementCore } from './core';export class SSRElementEvent extends Event {constructor(name: any, element?: SSRElementCore, bubbles?: boolean) {super(name, bubbles);this.element = element;}public element: SSRElementCore = null;
}
接着,我们在 select
类中,注册好需要的事件:
export class SSRElementSelect extends SSRElementCore {protected _initEventListener() {this.dom.on('change', this._onDOMEventChange.bind(this));}
}
在事件处理中,我们使用 CocosCreator 风格 来发送事件,同时附加上我们想要传递的对象:
export class SSRElementSelect extends SSRElementCore {private _selectedIndex: number = -1;// ......private _onDOMEventChange(event: Event) {this.selectedIndex = (<HTMLSelectElement>event.target).selectedIndex;this.node.dispatchEvent(new SSRElementEvent(SSRElementEventConst.OPTION_CHANGE, this));}
}
这样修改后,我们的事件的监听就变成了:
// test.ts
this.elementSelect.node.on(SSRElementEventConst.OPTION_CHANGE, (event: SSRElementEvent) => {console.log((<SSRElementSelect>event.element).selectedIndex);
});
测试一下:
没有任何问题。
那就趁热打铁,我们试试为 button
也用这个套路,实现一下点击事件看看:
export class SSRElementButton extends SSRElementCore {protected _initEventListener() {this.dom.on('click', this._onDOMEventClick.bind(this));}private _onDOMEventClick(event: Event) {this.node.dispatchEvent(new SSRElementEvent(SSRElementEventConst.BUTTON_CLICK, this));}
}
这次测试的时候,我们加点难度:
在点击按钮的时候,为下拉框,动态的增加一个 option
这一切,我们完全使用 CocosCreator 风格
的代码来实现:
// Test.ts
this.elementButton.node.on(SSRElementEventConst.BUTTON_CLICK, (event: SSRElementEvent) => {// 创建 Nodelet optionNode = new Node();// 加入 Select 所属节点optionNode.parent = this.elementSelect.node;// SSRElementOption 组件let elementOption = optionNode.addComponent(SSRElementOption);// SSRPropertyInnerText 组件let propertyInnerText = optionNode.addComponent(SSRPropertyInnerText);propertyInnerText.innerText = "option4";}
);
最后来测试一下效果看看:
点击按钮后,我们就能看到动态添加的 Option
了。
当然,选中新加的 Option
的话,之前的监听函数,也会有所响应。
最后,测试一下插件中的效果:
不错,也没有任何问题。
列表 / List
有了上面的经验,我们就可以非常迅速的实现其他一些组合类型的元素,比如说有序列表,无序列表。
同样的,也是 <ul/ol> + <li>
的 parent-child
构成形式。
因此实现起来也是一样的。
表格 / Table
再来就是表格,虽然比前面的几个略微复杂,但是原理仍然是一样的 table + tr + th
。
使用 CocosCreator 风格
进行创建,再配合上合适的 css
组件:
就能制作出想要的效果:
这一节,我们主要探索了组合类型 的元素的实现方式和可能性。
同时我们还优化了 SSRElementCore
的事件机制,让它更加的贴近 CocosCreator 风格
,从而降低使用者的学习成本。
那我们下一节继续 ……
游戏开发,技术变现!本周 Cocos Store 迎来了一次历史突破,有Store开发者,一次性提取收益4.2W,代扣个人所得税超过8000元!
Cocos Store 经过一年多的发展,已经成为 Cocos 开发者们展示才华的绝佳舞台。除了收益上的回报,在这里还能收获:
技术上的成长与沉淀
志趣相投的伙伴与用户
产品商业化的认知与迭代
在这里,开发者们一路开花结果,欢迎您也来加入!
超级浣熊的最近黑科技!?太有用了相关推荐
- 手机测血氧Android应用,手机也能监测血氧饱和度?华为这个黑科技太实用了
原标题:手机也能监测血氧饱和度?华为这个黑科技太实用了 血氧饱和度作为衡量身体健康指数的指标,越来越受到现代人的关注,监测血氧指标可以更好了解呼吸系统.免疫系统是否正常.目前部分智能穿戴产品已经配备了 ...
- 10 款超级实用的Chrome 黑科技插件
总所周知,IE浏览器市场份额曾经占据了PC端半壁江山,如今谷歌推出的Chrome浏览器已经遥遥领先的登上了杠把子的位置,IE的市场份额在全球仅排行第三.毋庸置疑,Chrome浏览器已经成为了全球最受欢 ...
- 美国“超级碗”大秀黑科技,数百架无人机点亮夜空
无人机这是要开拓应用新领域的节奏啊~ 北京时间2月6日,素有"美国春晚"之称的NFL(美式橄榄球联盟)顶级赛事超级碗(Super Bowl)激战已打响.在固定 12 分钟的中场休息 ...
- 不谈黑科技的段子才是有用的文章
(出差的人士看过来,酒店的伙伴们过来看) 11月初的上海,秋意渐起. 正是出差好时节,皮箱在手,说走就走. 逃离了帝都的重重雾霾,被魔都的外滩靡靡之风吹的颠三倒四. 匆忙的下榻到酒店,把随身带的行李归 ...
- 硬核又实用,4款人气爆棚的电脑软件,每一款都堪称黑科技
相信大家的手机和电脑上,都保留着几款,不管多久没打开,一打开,就会倍感亲切的良心黑科技软件. 它们作为我们的活力源泉,源源不断地给我们提供动力,让我们在自己擅长的领域,开疆扩土. 笔者的电脑上,就存在 ...
- 笔记本电脑怎么清理灰尘_手机声音越用越小怎么办?一段黑科技音波就能清理扬声器灰尘...
大家好,欢迎收看科技狐,我是小狐.我们都知道,随着手机的使用时间越来越长,手机扬声器里面会积赞一些灰尘. 因此手机的声音就会变得越来越小.有时候连电话铃声都听不清楚,说实话我就是这个样子,为此我困扰了 ...
- 你可知vivo手机5大黑科技?如果连这都不知道的话,那可太浪费了
说起vivo大家肯定不陌生,曾经的它与OPPO一样在"高价低配"这个问题上被人诟病,但是如今的它同样与OPPO一起"脱胎换骨",越来越多的人喜欢使用OV的手机, ...
- GitHub 又一黑科技项目面世!网友惊呼:这也太强了
本文转载自GitHub技术社区 不知道如何表白?送花吃饭太没新意又太露骨? 今天小G给大家介绍一个 AI 黑科技,能够完美融合任意两张人脸,并带有丰富的表情,让你不仅凡尔赛地炫个技,还能巧妙风趣地表个 ...
- 【程序猿的黑科技】一些有趣且有用的的工具整理
[前言] 本期将介绍几个PC软件.为大家分享有趣的工具及资源是我创建此专栏的初衷.我也会定期收集一些好玩的"黑科技"供大家研究. 1.一款简约桌面整理插件-dock 密码:6666 ...
最新文章
- [mvc] 简单的forms认证
- matlab 读取nc
- Committee和Virtual Project Team的关系
- Android开发之Gradle多渠道打包总结
- python调用公共方法_common: 这是一个Python的公共工具类,集成了各种主要的python常用方法...
- 好物推荐|下载超过 23w 次的 IDE 插件,让效率飞速提升
- deepin下深度终端使用ssh-agent(xshell中的xagent功能)
- java数组随机数不重复_java产生不重复随机数
- 【NOIP2005】【Luogu1051】谁拿了最多奖学金
- GitHub疯传!北大学霸的LeetCode刷题笔记火了
- 测度论与概率论基础(程士宏)学习笔记(二)
- 安卓集成网易云信SDK实现登录功能
- Hikari连接池——java.lang.Exception: Apparent connection leak detected
- Hadoop -- hadoop介绍
- 京东商品详情API、通过商品ID获得京东商品详情
- 问卷链接怎么做二维码?如何使用二维码做问卷调查?
- NowCoder LCMs(莫比乌斯反演)
- 大地SEO网络优化视频教程
- 对Transformer中的MASK理解
- obs录制成mp4格式