cocoscreator实现 跑马灯 / 滚动公告 |
您所在的位置：网站首页 › 使用cocos开发文字游戏 › cocoscreator实现 跑马灯 / 滚动公告 |
|
WX20201021-111034.png744×628 97.9 KB
几乎所有的游戏中 都会有这么一个功能。 来告诉玩家 有啥新鲜事发生了，有啥活动出台了等等 ，这个功能就是跑马灯。也就是 一个 滚动的公告功能 需求实现一个 滚动的消息 ，从右往左循环展示。 实现思路 首先要让消息是移动的。肯定需要两个点。起始点和终点,当消息体位置到达终点时。重置消息题的 位置为起点位置，如此循环 其次消息不能滚动到设定显示的范围外。所以需要一个遮罩 当 消息体某部分 到达终点位置时 隐藏该部分消息。可以用cocoscreator自带的 Mask组件实现 实操1.界面结构如下图 WX20201021-114508.png1299×308 57.3 KBMask组件 用于规定子节点可渲染的范围，带有 Mask 组件的节点会使用该节点的约束框，也就是 属性检查器 中 Node 组件的 Size 规定的范围。创建一个渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。 Mask组件添加：创建一个node，选择添加渲染组件 找到mask组件添加 mask.png1980×447 162 KB然后把Label的锚点设置为（0，0.5），最好是将锚点X设置为0，这样的话，Label节点的水平位置会以节点的左边界为基准，最左边的位置 就是 label的当前位置。便于后面的位置计算。或者不改变锚点用 x位置*锚点也可以。 tips: label建议用富文本 richtext. 因为richtext可以用BBCode（标签格式）让滚动消息突出重点部分 区分内容等 RichText 组件参考链接 冇电.png1950×368 114 KB2.代码如下 start () { let str = "关注公众号 亮亮同学TT 获取更多精彩内容" this.noticeLabel.string = str; let contentSize = this.noticeLabel.node.getBoundingBox(); this.startx = this.mask.width * this.mask.anchorX; this.endx = -this.mask.width * this.mask.anchorX - contentSize.size.width; this.noticeLabel.node.x = this.startx; } setSpeed(speed:number){ this.speed = speed; } update (dt) { //移动循环展示消息的位置 if (this.noticeLabel.node.x 100){ this.clearAll(); } this.notices.push(notice) this.notices.sort((a,b)=>b["priority"]-a["priority"]) this.index = 0; } nextOne(){ if(this.notices.length == 0){ return ; } this.noticeLabel.node.x = this.mask.width / 2 if(this.index >= this.notices.length ){ this.index = 0; } this.noticeLabel.string = this.notices[this.index]["content"] ; this.index++; } clearAll(){ this.index = 0; this.notices = []; } update (dt) { this.noticeLabel.node.x -= this.speed * dt; if (this.noticeLabel.node.x |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |