【Cocos Creator实战教程(8)】——UI组件(2)ProgressBar 组件

lili

发布日期: 2018-12-20 12:11:26 浏览量: 1610
评分:
star star star star star star star star star star
*转载请注明来自write-bug.com

1. 知识点讲解

ProgressBar(进度条)经常被用于在游戏中显示某个操作的进度,在节点上添加 ProgressBar 组件,然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。

点击 属性检查器 下面的添加组件按钮,然后从添加 UI 组件中选择ProgressBar,即可添加 ProgressBar 组件到节点上。

1.1 ProgressBar 属性

属性 功能说明
Bar Sprite 进度条渲染所需要的 Sprite 组件,可以通过拖拽一个带有 Sprite组件的节点到该属性上来建立关联。
Mode 支持 HORIZONTAL(水平)、VERTICAL(垂直)和 FILLED(填充)三种模式,可以通过配合 reverse 属性来改变起始方向。
Total Length 当进度条为 100%时 Bar Sprite 的总长度/总宽度。在 FILLED 模式下 Total Length 表示取 Bar Sprite 总显示范围的百分比,取值范围从 0 ~ 1。
Progress 浮点,取值范围是 0~1,不允许输入之外的数值。
Reverse 布尔值,默认的填充方向是从左至右/从下到上,开启后变成从右到左/从上到下。

1.2 详细说明

添加 ProgressBar 组件之后,通过从 层级管理器 中拖拽一个带有Sprite组件的节点到 Bar Sprite属性上,此时便可以通过拖动 progress 滑块来控制进度条的显示了。

Bar Sprite 可以是自身节点,子节点,或者任何一个带有Sprite组件的节点。另外,Bar Sprite 可以自由选择 SimpleSlicedFilled 渲染模式。

进度条的模式选择 FILLED 的情况下,Bar SpriteType 也需要设置为 FILLED,否则会报警告。

2. 步骤

创建新的ProgressScene,创建ProgressBar控件名为progressBarView,然后在progressBarView上添加脚本文件ProgressBarScript

创建脚本文件,当然我们在创建脚本文件的时候,需要自定义properties属性来让脚本这个类来接收UI控件并关联

  1. cc.Class({
  2. extends: cc.Component,
  3. // 脚本自定义的属性,当前自定义的属性会在属性检查中查看到
  4. properties: {
  5. speed: 1,
  6. progressBarView: {
  7. type: cc.ProgressBar,
  8. default: null
  9. }
  10. },
  11. //当我们将脚本添加到节点 `node`上面的时候
  12. onLoad: function () {
  13. this._ping = true;
  14. this.progressBarView.progress = 0;
  15. },
  16. //如果该组件启用,则每帧调用 update
  17. //dt:Number the delta time in seconds it took to complete the last frame
  18. update: function (dt) {
  19. this._updateProgressBar(this.progressBarView, dt);
  20. },
  21. _updateProgressBar: function(progressBar, dt){
  22. var progress = progressBar.progress;
  23. if(progress < 1.0 && this._ping){
  24. progress += dt * this.speed;
  25. }
  26. else {
  27. progress -= dt * this.speed;
  28. this._ping = progress <= 0;
  29. }
  30. progressBar.progress = progress;
  31. }
  32. });

当我们在写完这些的时候,将脚本文件添加到节点上面,拖拽创建的控件ProgressBarView到我的属性progressBarView上,这样程序就会发现进度条在走。

3. 总结

在现实中,我们可能需要从服务器预加载资源,这时就需要进度条来表示进度。比如使用cc.loader加载资源,同时监控加载进度,之后再用update显示。

本资源部分素材来源于网络。

上传的附件 cloud_download cocos creator 第八课.zip ( 212.11kb, 12次下载 )
eject