奎特尔星球|雷神之锤(上)

news/2024/11/8 19:46:25/

奎特尔星球上有一件绝世神兵,就像是一把雷神之锤,在它的号令之下指挥着节点、组件和触摸事件,从而大量减少冗余代码与编辑器上的设置,他就是uikiller。uikiller指挥着英雄与魔灵杀敌无数,他的前身曾经在cocos2d-js星球上服役,名为UILoader。经过我潜心的改进,来到了奎特尔星球。

一、雷神之锤


uikiller只有一行需要要被主动调用的函数:uikiller.bindComponent,他就像一把雷神之锤,为组件下所有的节点和组件注入了魔力。

cc.Class({...onLoad() {/*绑定当前组件节点以及基下所有以“_”开头的节点*/uikiller.bindComponent(this); }
});    

二、 杀、杀、杀—体验UI编程的快感

image.png

节点killer

在编辑器中以下划线“_”开头的节点,在雷神之锤的作用下,将会被自动绑定成当前组件实例的属性。

例如节点名:_labelName、_buttonOk

uikiller.bindComponent(this);  //使用bindComponent后即可访问子节点
this._labelName.active = true; //隐藏控件
this._buttonOk. x += 10; //设置 x 坐标

有没有一种很爽快的感觉,省去了定义和设置节点属性的动作,就上面三行代码来说,据我目测至少可以为你减少20个字节、两次的节点拖拽、30~60秒工作时间。

组件killer

在节点访问的基础上,使用“$” + “组件名”访问节点上挂载的组件对象。

例如节点名:_labelName 、_buttonOk

...
this._labelName.$Label.string = 'xxx'; //设置 Label的文本
this._buttonOk.$Button.interactable = false; //禁用按钮

访问组件属性同样很轻松,原来使用的getComponent(cc.Label)$Label所取代,再次为你省去5秒钟时间,代码量减少22个字节。

触摸事件killer

以下划线“_”开头的节点可以自动关联触摸事件

目前支持五个触摸事件:

TouchStart、TouchMove、TouchEnd、TouchCancel、TouchLong

命名规则

_on + 节点名(去下划线,首字母大写) + 触摸事件名
例如节点:_labelName
事件函数:_on***LabelName***TouchEnd

cc.Class({..._onLabelNameTouchStart(sender, eventTouch) {//sender 参数为发出事件的节点对象 cc.asset(this._labelName === sender); },_onButtonOkTouchEnd(sender, eventTouch) {//eventTouch 参数为触摸事件,可获取触摸坐标位置let location = eventTouch.getLocation(); },
});    

无需在编辑器上拖拽配置事件函数,也无需在代码中使用node.on注册事件监听。不论节点挂载的是Button还是Label或者其它组件,只要是节点使用上述方法都可以监听其触摸事件。

附赠很多人心仪以久的,触摸长按事件的支持

  onLoad() {...//控制长按触摸触发时间0.5秒,不要这句代码,默认1秒触发this._buttonOk.touchLongTime = 0.5; }_onButtonOkTouchLong(sender) {//在此响应长按事件}

如果同时监听了TouchEnd事件, 长按事件发生后,手指抬起,不会再触发TouchEnd事件。

轻轻睁开你的眼睛,看着自己书写的代码像一篇散文或似一首诗歌,闭上双眼,它又像一清新婀娜的少女,这时你就和你的作品恋爱了。

三、割草般的编程体验—无双乱舞

1. 三国无双

不知道大家玩过《三国无双》没有,相信很多人会说《三国无双》就是一个割草游戏。敌人像一片片的杂草数量众多,蜂拥而来,你一阵潇洒的连招下去杀死一大片,此刻无双能量暴满,一阵让自己都会陶醉的无双乱舞,只听见敌军一阵狼嚎,像爆米花一样在天空上起起落落,我想大多数人还是会很享受这种一骑当千的快感。

2. uikiller无双技

在UI上使用$名命节点,积攒无双能量

    // use this for initializationonLoad: function () {uikiller.bindComponent(this);//8连击,还带for循环的哦for(let i = 1; i <= 8; i++) {//节点名为"_image1~_image8"let name = '_image' + i; let node = this[name];/*节点下的num是一个Label用Name就可以直接访问*//*但是Label没“_”开头,不能用$访问节点下的组件*/node.num.getComponent(cc.Label).string = i;}},/***触发无双技能*_image1~_image8的事件响应函数,都会来这里*通过sender.$可以获取在编辑上的$后的字符串**/_onImageTouchEnd(sender) {cc.log(`你点击了${sender.$},他的节点名字为"${sender.name}"`);},

用上面的列子为你详解一下无双技要点:
1. 在节点名字中使用 符号之前为事件名:_image
1 82.访+this.image1 this.image83.node.
this._image1.$ === ‘1’,注意他是字符串哦!
4. 事件函数:_on + 事件名 + 触摸事件名
_onImageTouchStart
_onImageTouchMove
_onImageTouchEnd
_onImageTouchLong

3. 连锁闪电

细心的朋友可能已经发现,上面一阵无双乱舞中出现一行怪招

node.num.getComponent(cc.Label).string = i;

其中的num节点没有“_”开头,怎么也能直接访问呢?这里我是不小心触发了uikiller雷神之锤的连锁闪电的魔力,所有被雷神之锤(bindComponent)绑定后的UI节点,被闪电链接在了一起,节点下的节点可以像使用路径一样访问。
1. a节点下有个b节点,b节点下有个c节点,a、b、c节点都不带下划线
2. _a节点下有个b节点,b节点下有个c节点,b、c节点都不带下划线

发动连锁闪电
  this.node.a.b.c.name //注意a节点没有"_"开头,从node上开始闪电this._a.b.c.name //直接从"_"开头的节点开始闪电

连锁闪电是以节点路径方式传导,可以访问任意子节点,且节点不需要用“_”开头。

想像一下,每个人都手持雷神之锤,一起释放无双乱舞是何等的体验,让你在代码编写过程中也能体验到以一当千的快感,而且这不是在做梦!其实uikille早已是奎特尔星上人人必备的装备(回顾一下四周,囧,貌似奎特尔星球上目前还没几个居民),不然如何能坚持到现在,还在这里写教程。

四、写在最后

按一般常理来说从感受快感体验高潮,接下来多半会一泄千里,洗洗睡了,但在奎特尔星球上这想那是非常不正确的,好的体验不仅仅只是在文字上,更重要的是在体验本身,在此奉献上源码供大家把玩。

github: https://github.com/ShawnZhang2015/uikiller

下一次再跟大家分享奎特尔星球上的故事
- uikiller—乾坤大挪移功法


http://www.ppmy.cn/news/141633.html

相关文章

Science最新:DeepMind部署自学AI,攻陷FPS“雷神之锤”

大数据文摘编辑部出品 用AI攻占了国际象棋和围棋高地之后&#xff0c;DeepMind在第一人称射击游戏&#xff08;FPS&#xff09;上也有了新进展。 1997年5月“深蓝”击败国际象棋世界冠军卡斯巴罗夫&#xff0c;有玩家在庆幸&#xff0c;我不下象棋&#xff0c;只下围棋。 2017年…

如何在树莓派上运行雷神之锤III

昨天在树莓派上尝试运行了一下雷神之锤III&#xff0c;流畅运行&#xff0c;效果不错~~~ RPI这个小身板的东东总是可以给你带来惊喜&#xff0c;这里记录一下步骤以备后续再用 先确保RPI的程序和固件都已经更新 sudo apt-get update sudo apt-get dist-upgrade sudo rpi-upda…

雷神之锤招数大放送

今天是国庆长假的最后一天&#xff0c;明天就要上班了&#xff0c;经后不能每天陪大家嗨了。今天来次猛的&#xff0c;奉上uikiller的招数大集合&#xff0c;录象、剪辑、修改折腾了一整天&#xff0c;为的是尽量把视频缩短&#xff0c;不浪费大家的时间&#xff0c;但最后还是…

《雷神之锤III》平方根倒数算法 学习笔记

今天刷到个算法视频&#xff0c;觉得很有意思&#xff0c;所以打算把它记录下来。 平方根倒数算法 源代码二进制浮点数运算对数技巧平方根倒数牛顿迭代 源代码 float Q_rsqrt(float number) {long i;float x2, y;const float threehalfs 1.5F;x2 number * 0.5F;y number;i …

《雷神之锤 Ⅲ》平方根倒数速算法魔术数字的另一种求法(2)

上图代码是出自雷神之锤3计算一个正实数的算术平方根的倒数的算法&#xff0c;一般我们去计算一个数的平方根采用最好的方法是牛顿迭代法 不会牛顿迭代法&#xff0c;可以去看下这位大哥的帖子 www.cnblogs.com/houkai/p/3332520.html 比如我们要求 x 的平方根倒数&#xff…

linux运行雷神之锤,RTX改造版《雷神之锤II》现已开放下载

原标题&#xff1a;RTX改造版《雷神之锤II》现已开放下载 早些时候&#xff0c;英伟达宣布了要携手贝塞斯达&#xff0c;为 1997 年推出的经典游戏《雷神之锤 II》提供 RTX 光线追踪支持的消息。原版用户可以通过补丁来获得全新的体验&#xff0c;如果找不到安装光盘&#xff0…

牛顿迭代法——雷神之锤

牛顿迭代法——雷神之锤 震惊&#xff01;&#xff01;&#xff01; https://blog.csdn.net/wangxiaojun911/article/details/18203333

GPT现状终于有人讲清楚了!OpenAI大牛最新演讲爆火,还得是马斯克钦点的天才

量子位 | 公众号 QbitAI 继Windows Copilot发布后&#xff0c;微软Build大会热度又被一场演讲引爆。 前特斯拉AI总监Andrej Karpathy在演讲中认为思维树&#xff08;tree of thoughts&#xff09;与AlphaGo的蒙特卡洛树搜索&#xff08;MCTS&#xff09;有异曲同工之妙&#…