Cocos进度条和批处理渲染

本文介绍了Cocos2d-x中进度条的实现方式,包括使用ProgressTimer组件来创建条状或时钟状的进度条,并详细说明了如何设置进度条的属性。此外,还探讨了批处理渲染的概念及其工作原理,解释了为什么批处理精灵能够提高渲染效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

进度条

进度条实际上就是用ProgressTimer挡住一个精灵,之后随着时间逐渐展开

Sprite* bg = Sprite::create("ccs-res/cocosui/loadingbar.png");//背景

Sprite* fore = Sprite::create("ccs-res/cocosui/slidbar.png");//前景

ProgressTimer* timer = ProgressTimer::create(fore); //前景放入timer

bg->addChild(timer); //必须把进度条放入背景中

timer->setPosition(bg->getAnchorPointInPoints());//让进度条和背景重合,进度条的锚点也在中心,通过getAnchorPointInPoints获取坐标

addChild(bg);

之后,必须修改一下进度条的属性:

timer->setType(ProgressTimer::Type::BAR); //进度条类型,有条状BAR,有时钟状RADIAL

timer->setMidpoint(Vec2(0, 0)); //进度条的起始点,从左到右(0,y),从右到左(1,y),从下到上(x,0),从上到下(x,1),最大取值1,如设(0,0)即从左下角开始。

timer->setBarChangeRate(Vec2(1, 0)); //设置进度条推进策略,(1,0)表示沿x轴推进,y轴每次都是100%。

timer->setPercentage(0); //设置进度条的进度,按百分比。我们是通过这个函数来控制进度的。


批处理渲染

同一个纹理的精灵一起来渲染——增加效率。称之为批处理精灵

SpriteBatchNode* node = SpriteBatchNode::create("CloseNormal.png");

addChild(node);

如果我想添加1W个这样的精灵:用循环将精灵添加入批处理精灵中

for (int i = 0; i <10000; ++i)

{Sprite* sprite = Sprite::createWithTexture(node->getTexture());

node->addChild(sprite);}

3.6的cocos提供了自动批处理,但是其效果差强人意。

 

为何批处理精灵这么快?

因为BatchNode重载了visit函数,该函数并没有遍历所有子节点,而是将节点信息组织成一个draw(也被重载)命令发送给绘制线程。故此提高了效率。

### 创建自定义进度条功能 在 Cocos 引擎中,无论是使用 Cocos Creator 还是 Cocos2d-x,都可以通过多种方式实现并定制进度条的功能。以下是详细的说明: #### 使用 Cocos2d-x 实现进度条Cocos2d-x 中,可以利用 `ProgressTimer` 类来创建各种类型的进度条。例如,可以通过以下代码实现一个圆形进度条[^3]。 ```cpp // 圆形进度条的创建过程如下: auto sp1 = Sprite::create("yuan.png"); // 加载用于表示进度条的图片资源。 auto pt1 = ProgressTo::create(3.0f, 85); // 设置进度条的变化速度以及最终的目标百分比。 auto ptm1 = ProgressTimer::create(sp1); // 将精灵对象传递给 ProgressTimer 来生成进度条实例。 ptm1->setType(ProgressTimerType::RADIAL); // 定义进度条类型为径向(圆环状)。 ptm1->runAction(RepeatForever::create(pt1)); // 让进度条持续运行动画效果。 ptm1->setPosition(Point(100, 500)); // 设定进度条的位置。 this->addChild(ptm1); // 添加到当前场景节点中。 ``` 此方法支持线性、径向等多种样式,并允许开发者调整其外观属性以满足特定需求。 #### 利用 Cocos Creator 的 UI 组件制作进度条 对于 Cocos Creator 而言,则更倾向于采用内置的 UI 控件完成此类任务。具体来说,可通过 Slider 或 ProgressBar 等组件轻松构建交互式的进度指示器[^5]。 ##### 方法一:基于 Mask Image 构建动态遮罩型进度条 这种方法涉及到了蒙版技术的应用,在实际项目里较为常见也相对灵活。 ```javascript let maskNode = this.node.getChildByName('Mask'); // 获取名为'Mask'的子节点。 let imageComponent = maskNode.getComponent(cc.Mask); // 取得该节点上的 cc.Mask 组件。 imageComponent.enabled = true; // 启用蒙版功能。 const progressImage = maskNode.children[0]; // 假设第一个孩子是用来展示进展部分的内容。 progressImage.width *= percent / 100; // 根据百分比缩放宽度从而模拟前进状态。 ``` 上述脚本片段展示了如何依据指定比例修改被掩盖区域内的图像尺寸进而达成视觉反馈的目的。 ##### 方法二:结合 Slider EventListener 处理用户输入驱动更新逻辑 当希望让玩家能够手动拖拽控制杆改变数值时可选用这种方式。 ```typescript @ccclass('ProgressBarController') export default class ProgressBarController extends Component { @property({ type: cc.Slider }) sliderRef!: cc.Slider; start() { const listener = new cc.Component.EventHandler(); listener.target = this.sliderRef.node; listener.component = 'ProgressBarController'; listener.handler = 'onSliderValueChanged'; this.sliderRef.events.push(listener); } onSliderValueChanged(event: any) { console.log(`Current Value:${event.progress}`); // TODO: Update other visual elements based on the current value. } } ``` 这里注册了一个事件监听器用来捕捉滑块位置变动的消息以便同步反映至其他关联界面元素之上。 --- ### 总结 综上所述,无论是在原生环境还是跨平台框架下都能够找到适合的技术手段去打造个性化的加载提示特效。而针对不同版本间 API 差异较大的情况则需参照官方文档进一步确认细节参数设定等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值