《Cocos Creator游戏实战》做一个数字调节框

做一个数字调节框

创建节点

编写脚本

该功能已收录在Many Widgets插件中，使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成数字调节框Spin Box。

插件地址：https://store.cocos.com/app/detail/3147

演示地址：https://www.bilibili.com/video/BV16q4y1S7RH/

当玩家购买道具的时候，一个个买可能会比较麻烦，用数字调节框的话玩家一次性就可以买好几十个了(钱够的话)。

运行效果如下：

Cocos Creator版本：2.2.0

后台回复"数字调节框"，获取该项目完整文件：

创建节点

以下是层级管理器截图：

1. bg就是一个Sprite类型节点，作为屏幕背景，不用管。
2. SpinBox是一个Layout类型节点，用来布局输入框和按钮，方向为水平，Resize Mode为CONTAINER。
3. editbox节点就是编辑器自带的输入框(笔者将PLACEHOLDER_LABEL给删除了)，这里给
4. buttons也是一个Layout类型节点，用来布局up和down两个按钮，方向为垂直，Resize Mode为CONTAINER。
5. up和down是两个按钮(Label节点已被删除)，分别用来调高和调低数字。

给输入框和调高调低按钮加上背景图片后，场景编辑器显示如下：

编写脚本

在资源管理器中创建一个名为SpinBox.js的脚本文件，将其挂到SpinBox节点上。

在properties中添加如下属性：

// SpinBox.js
properties: {
    textLabel: cc.Label,    // 输入框显示文本    
    min: cc.Integer,        // 最小值
    max: cc.Integer,        // 最大值
},

笔者的想法是开发者能够自己设置调节框所允许的最大最小值：

不过笔者这里将输入框最大允许输入的字符个数设为了2，也就是说最大值也就是99了。当然大家可以按照自身情况进行修改：

输入框一开始应该显示最小值：

// SpinBox.js
onLoad() {
    // 刚开始显示设置的小值
    this.textLabel.node.active = true;
    this.textLabel.string = String(this.min);
},

因为输入框下的TEXT_LABEL节点默认是不可见的，所以这里要对该节点先进行显示。

以下是调高和调低按钮的事件函数：

// SpinBox.js
up() {
    // 调高数字
    let temp = (Number(this.textLabel.string) + 1);
    if (temp > this.max) {
        return;
    }
    else {
        this.textLabel.string = String(temp);
    }
},

down() {
    // 调低数字
    let temp = (Number(this.textLabel.string) - 1);
    if (temp < this.min) {
        return;
    }
    else {
        this.textLabel.string = String(temp);
    }
},

• 如果玩家按下调高按钮，那么首先判断该按钮是否超出最大值，是的话则无效，否则数字加1。
• 如果玩家按下调低按钮，那么首先判断该按钮是否超出最小值，是的话则无效，否则数字减1。

最后是输入框的两个事件函数：

// SpinBox.js
inputBegin() {
    // 输入开始
    this.temp = this.textLabel.string;
},

inputDone() {
    // 输入结束
    if (isNaN(this.textLabel.string)) {
        this.textLabel.string = this.temp;                     // 如果输入非数字则数字不变
    }
    else if (Number(this.textLabel.string) > this.max) {       // 输入数字不能超过最大值
        this.textLabel.string = String(this.max);
    }
    else if (Number(this.textLabel.string) < this.min) {       // 输入数字不能小于最小值
        this.textLabel.string = String(this.min);
    }
}

输入框允许玩家输入任何文本，所以我们应该对文本进行过滤。

• 当输入开始时(当玩家点击输入框)，我们将当前输入框的文本保存在this.temp中。
• 输入结束后(按下回车或者触摸屏幕其他地方)，我们首先判断玩家输入的是不是数字。如果不是，则将文本还原为之前的样子；如果是数字，那么判断是否超出了最大值和最小值，超出的话就将文本直接设置为最大最小值。

记得在属性检查器中添加这两个函数：

以上代码只是笔者对数字调节框功能的一种想法，大家当然可以自行修改，做出自己想要的功能。

今天教程就到这，希望大家有所收获~