青瓷引擎UI组件怎么用之进度条

青瓷引擎UI组件怎么用之进度条，由绿盟小编精心整理，从进度条构成、Inspector面板说明及相关案例等方面为您详细讲解：

进度条qc.ProgressBar分为两种：确定进度和不确定进度
同时从外观上，我们提供了水平进度条、垂直进度条、角度进度条（圆）

进度条构成

从主菜单(游戏对象/进度条)或工具条上创建进度条对象，得到如下的进度条对象结构：

ProgressBar - qc.ProgressBar对象，继承于UIImage类型，作为背景图片
progressArea - qc.Node对象，作为滚动条的显示区域，默认其完全填充满父节点ProgressBar的矩形区域
sliders - qc.UIImage对象，作为前景图片滑块对象，设置到ProgressBar.sliders属性上
通过如下代码可实现和编辑器上创建的进度条同样的效果（当然，你应该在编辑器中直接创建，不用自己写代码实现）：

// 创建滚动条对象
var progressBar = new qc.ProgressBar(game, parent);

progressBar.width = 160;
progressBar.height = 20;

// 创建滚动区域对象
var progressArea = game.add.node(progressBar);
progressArea.name = 'progressArea';
progressArea.setAnchor(new qc.Point(0, 0), new qc.Point(1, 1));
progressArea.setStretch(0, 0, 0, 0);
progressArea.pivotX = progressArea.pivotY = 0.5;

// 创建滑块对象
var sliders = game.add.image(progressArea);
sliders.name = 'sliders';
sliders.setAnchor(new qc.Point(0, 0), new qc.Point(1, 1));
sliders.setStretch(0, 0, 0, 0);
sliders.pivotX = sliders.pivotY = 0.5;
// 设置滚动条的滑块对象属性
progressBar.sliders = sliders;

// 设置滚动条背景图片
progressBar.texture = game.assets.find('__builtin_resource__');
progressBar.frame = 'button.png';
progressBar.imageType = qc.UIImage.IMAGE_TYPE_SLICED;
progressBar.value = 0.5;

// 设置滑块对象图片
sliders.texture = game.assets.find('__builtin_resource__');
sliders.frame = 'button.png';
sliders.imageType = qc.UIImage.IMAGE_TYPE_SLICED;

// 滑块一般设置成和progressBar一样的图片，通过设置colorTint达到灰化效果
sliders.colorTint = new qc.Color('#E0E0E0');
Inspector面板说明

Sliders: UIImage类型滑块对象，node.sliders = sliders;
Style: 目前支持三种进度条风格，node.style = ProgressBar.STYLE_HORIZONTAL;
水平进度条 - ProgressBar.STYLE_HORIZONTAL
竖直进度条 - ProgressBar.STYLE_VERTICAL
圆形进度条 - ProgressBar.STYLE_CIRCLE
Indeterminable: 使用不确定类型，进度条将循环播放，node.indeterminable = true;此时，value值设置无效
Min Value: 进度最小值，node.minValue = 0.0;
Max Value: 进度最大值，node.maxValue = 1.0;
Value: 当前进度值，node.value = 0.3;
Fixed Size: 滑块所占父亲节点矩形区域百分比，1.0为整个区域，小于0.0表示不固定大小，node.fixedSize = 0.3;
Loop Time: 循环时间，仅当indeterminable为true时有效，单位毫秒，node.loopTime = 3000;
Clip Sliders: 是否对进度条滑块进行裁切，一般为圆形进度条时勾选，node.clipSliders = true;
Show Mode: 显示方式，滑块用来表示已处理的部分，还是表示未处理的部分，node.showMode = ProgressBar.SHOW_PROCESSED;
ProgressBar.SHOW_PROCESSED
ProgressBar.SHOW_REMAINED
Reverse: 是否反方向走进度条，node.reverse = false;
Start Radian: 圆形进度条时起效，表示起始弧度，node.startRadian = Math.PI;
End Radian: 圆形进度条时起效，表示结束弧度，node.endRadian = Math.PI;
Start Angle: 圆形进度条时起效，表示起始角度，node.startAngle = 90;
End Angle：圆形进度条时起效，表示结束角度，node.endAngle = 90;
案例：

文章来自绿盟(xDowns.com)转载请注明来路。

青瓷引擎 1.0.7 官网最新版 - HTML5小游戏开发工具

青瓷引擎UI组件怎么用之进度条

文章正文

相关文章

相关软件