界面上如果有太多按钮的话,可能会影响美观度和游戏体验。我们其实可以将这些按钮先隐藏起来,然后让玩家通过一个按钮将剩余的呼出即可。
运行效果如下:
Cocos Creator版本:2.2.2
后台回复"按钮呼出",获取该项目完整文件。
创建节点
1. bg就是Sprite类型的背景节点。
2. Center Btn为按钮节点,该按钮用来呼出其他按钮。
3. Other Btns为空节点,默认状态为隐藏,在该节点下一共有六个按钮节点。
编写脚本
主要逻辑就是:当Center Btn按钮被按下后,Other Btns节点变为显示状态,然后六个按钮向指定方向移动到指定位置即可。
新建一个Spread.js脚本,挂到Canvas上。首先添加如下属性:
// Spread.jsproperties: { centerBtn: cc.Node, // 中心按钮 otherBtns: cc.Node, // 其他按钮们},
onLoad方法编写如下:
// Spread.jsonLoad () { this.isSpread = false; // 是否已经展开 this.firstBtnPos = cc.v2(-150, 0); // 第一个按钮展开后的位置},
1. this.isSpread变量用来判断当前按钮是否已经被呼出了,false表示没呼出,true表示已经呼出。
2. this.firstBtnPos用来确定第一个按钮被呼出后的位置,该值可用来求出剩余其他按钮的位置(之后会讲解)。
编写spread方法用于实现呼出按钮效果:
// Spread.jsspread () { this.otherBtns.active = true; let len = this.otherBtns.children.length; for(let i=0; i if (i==0) { let move = cc.moveTo(0.5, this.firstBtnPos); this.otherBtns.children[i].runAction(move); } else { // 将角度转为弧度之后,调用rotate方法旋转向量 let averageAngle = 360 / len; let averageRadian = Math.PI / 180 * averageAngle * i; let pos = this.firstBtnPos.rotate(averageRadian); let move = cc.moveTo(0.5, pos); this.otherBtns.children[i].runAction(move); } }},
1. 既然玩家点击了中心按钮要呼出其他按钮,我们肯定要先将otherBtns节点转为可见状态。
2. 接着循环otherBtns下的所有按钮,第一个按钮的话我们就让它移动到我们指定的位置,而其他按钮则可以根据角度和弧度来计算出相应位置。大家可以去官方文档上查看rotate的用法:
https://docs.cocos.com/creator/api/zh/classes/Vec2.html#rotate
有展开当然也得有折叠,collapse方法用于实现折叠效果:
// Spread.jscollapse () { let len = this.otherBtns.children.length; for(let i=0; i if (i-1) { let move = cc.moveTo(0.5, cc.v2(0, 0)); this.otherBtns.children[i].runAction(move); } else { let move = cc.moveTo(0.5, cc.v2(0, 0)); let hide = cc.callFunc(()=>{this.otherBtns.active=false}); let sequence = cc.sequence(move, hide); this.otherBtns.children[i].runAction(sequence); } }},
折叠后我们肯定要将otherBtns节点隐藏,但是注意不能一开始就隐藏,否则折叠效果就看不到了。我们应该在最后一个按钮折叠之后再进行隐藏。
最后编写下Center Btn的事件函数,用来调用spread和collapse方法:
// Spread.jscenterBtnEvent () { if (!this.isSpread) { let rotate = cc.rotateTo(0.5, 180); this.centerBtn.runAction(rotate); this.isSpread = true; this.spread(); } else { let rotate = cc.rotateTo(0.5, 0); this.centerBtn.runAction(rotate); this.isSpread = false; this.collapse(); }}
这里笔者还同时实现了中心按钮的旋转效果,由于Other Btns在Center Btn节点下,所以当Center Btn旋转时,Other Btns也会相应地旋转,这样就实现了旋转绽放的效果。如果单单只想展开的话,我们可以将Other Btns移出,使其成为Canvas的子节点。
那这节教程就到这,希望大家喜欢~