cocoscreator editbox 只允许数字_《Cocos Creator游戏实战》做一个数字调节框
当玩家购买道具的时候,一个个买可能会比较麻烦,用数字调节框的话玩家一次性就可以买好几十个了(钱够的话)。
运行效果如下:
Cocos Creator版本:2.2.0
公号"All Codes"后台回复"数字调节框",获取该项目完整文件。
创建节点
以下是层级管理器截图:
- bg就是一个Sprite类型节点,作为屏幕背景,不用管。
- SpinBox是一个Layout类型节点,用来布局输入框和按钮,方向为水平,Resize Mode为CONTAINER。
- editbox节点就是编辑器自带的输入框(笔者将PLACEHOLDER_LABEL给删除了),这里给
- buttons也是一个Layout类型节点,用来布局up和down两个按钮,方向为垂直,Resize Mode为CONTAINER。
- up和down是两个按钮(Label节点已被删除),分别用来调高和调低数字。
给输入框和调高调低按钮加上背景图片后,场景编辑器显示如下:
编写脚本
在资源管理器中创建一个名为SpinBox.js的脚本文件,将其挂到SpinBox节点上。
在properties中添加如下属性:
// SpinBox.js
笔者的想法是开发者能够自己设置调节框所允许的最大最小值:
不过笔者这里将输入框最大允许输入的字符个数设为了2,也就是说最大值也就是99了。当然大家可以按照自身情况进行修改:
输入框一开始应该显示最小值:
// SpinBox.js
因为输入框下的TEXT_LABEL节点默认是不可见的,所以这里要对该节点先进行显示。
以下是调高和调低按钮的事件函数:
// SpinBox.js
- 如果玩家按下调高按钮,那么首先判断该按钮是否超出最大值,是的话则无效,否则数字加1。
- 如果玩家按下调低按钮,那么首先判断该按钮是否超出最小值,是的话则无效,否则数字减1。
最后是输入框的两个事件函数:
// SpinBox.js
输入框允许玩家输入任何文本,所以我们应该对文本进行过滤。
- 当输入开始时(当玩家点击输入框),我们将当前输入框的文本保存在this.temp中。
- 输入结束后(按下回车或者触摸屏幕其他地方),我们首先判断玩家输入的是不是数字。如果不是,则将文本还原为之前的样子;如果是数字,那么判断是否超出了最大值和最小值,超出的话就将文本直接设置为最大最小值。
记得在属性检查器中添加这两个函数:
以上代码只是笔者对数字调节框功能的一种想法,大家当然可以自行修改,做出自己想要的功能。
今天教程就到这,希望大家有所收获~
cocoscreator editbox 只允许数字_《Cocos Creator游戏实战》做一个数字调节框相关推荐
- 《Cocos Creator游戏实战》滚动数字
滚动数字 创建节点 滚动原理 编写脚本 该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成滚动数字. 插件地址:https://sto ...
- 《Cocos Creator游戏实战》实现下拉框按钮ComboBox控件
实现下拉框按钮ComboBox控件 创建节点 编写脚本 该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成下拉框ComboBox控件. ...
- 《Cocos Creator游戏实战》摘星星进阶版
摘星星进阶版 添加开始按钮 实现按钮功能 显示"Game Over" 限制主角移动范围 让跳跃动作更加细腻 加入星星收集动画 编写动画脚本 加入触屏控制 添加游戏提示 Cocos ...
- 《Cocos Creator游戏实战》关卡功能实现
关卡功能实现 创建节点 设置关卡信息 实现关卡界面 为预制添加脚本 完善Game.js逻辑 在上一节教程中我们讲解了打砖块的主要功能与逻辑实现,在这一篇教程中,笔者会在它的基础上增加关卡功能(建议先阅 ...
- 《Cocos Creator游戏实战》游戏转场时如何保留节点信息
游戏转场时如何保留节点信息 使用常驻节点 使用全局变量 使用本地存储 引擎同时只会运行一个场景,当切换场景时,默认会将场景内所有节点和其他实例销毁(本句来自Cocos Creator文档). 在这一节 ...
- 《Cocos Creator游戏实战》虚拟摇杆实现
虚拟摇杆实现 摇杆布局实现 摇杆功能实现 用摇杆控制主角 该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成摇杆. 插件地址:http ...
- 《Cocos Creator游戏实战》贪吃蛇平滑移动
贪吃蛇平滑移动 贪吃蛇平滑移动 初始化蛇头和蛇身 调整蛇头方向 贪吃蛇移动 蛇头和蛇身的节点顺序 添加食物 添加碰撞逻辑代码 从pointsArray中剔除无用的坐标点(更新) 在本教程中我们重点来学 ...
- 《Cocos Creator游戏实战》棋类游戏中的棋子摆放逻辑
棋类游戏中的棋子摆放逻辑 创建节点 代码编写 其实要点就一句话:我们看到的不应是棋盘,而是坐标. 现在通过下面的五子棋(或围棋)实例来看下如何理解这句话. 运行效果如下: Cocos Creator版 ...
- 《Cocos Creator游戏实战》你画我猜中的画板功能
你画我猜中的画板功能 创建节点 完成脚本 本节我们来做一个画板,该画板一共有三个小功能: 调节笔刷大小 改变笔刷颜色 橡皮擦 运行效果如下: Cocos Creator版本:2.2.0 后台回复&qu ...
最新文章
- 移动apn接入点哪个快_移动4g网速最快接入点_2020移动最佳APN接入点
- DWZ与百度编辑器的IE8以下上传图片兼容问题
- 服务器开机提示修复,电脑开机提示自动修复怎么办?win10电脑开机提示自动修复教程...
- 表现SOTA!DetCo算法:目标检测无监督对比学习
- 【基础】深度学习最常用的10个激活函数!(数学原理+优缺点)
- 超好用的Redis管理及监控工具,使用后可大大提高你的工作效率!
- steam邮箱服务器设置,Steam游戏通用进服教程
- 三妈式初音miku_【MMD模型】三妈式初音 Appearance Miku 原版
- 清翔51单片机开发板及原理图-去年购买的
- 咪蒙注销后,我用Python对其1013篇历史文章做了一次深度的数据分析...
- Photoshop教程_PS渐变工具找不到,怎样导入ps渐变样式?ps渐变使用教程
- 一键获取喜马拉雅音频文件(Python3爬虫)
- 从零开始实现放置游戏(十一)——实现战斗挂机(2)注册登陆和游戏主界面
- 糗事百科 android源码,仿糗事百科Android客户端源码
- 数学分析讲义习题解答:(一)
- 计算机一级msoffice考哪个版本,2021计算机二级office考哪个版本 如何备考
- Linux系统平均负载是如何计算的?
- 简析京东、当当、红孩子平台B2C的品牌策略
- 掀开CC攻击的头盖骨
- Python3.7版---双人联机雷霆战机(2D特效+音效+道具+Linux系统)
热门文章
- Microsoft发布新工具,简化JavaScript Web应用的创建
- ArcGIS 10.2加载在线影像底图
- 如何快速学习freemarker以及使用经验
- fpga map测试_一种基于SELECTMAP的可配置且高速的FPGA配置电路及实现方法与流程
- css实战手册第四版 pdf_你真的了解CSS继承吗?看完必跪
- python 工资管理软件_智慧职教云课堂2020Python程序设计(深圳信息职业技术学院)题目答案...
- 第7章 C控制语句:分支和跳转
- 圆柱形成的动态演示图!超直观
- 这种动作片还需要汽车特效?
- 私房钱就藏在老婆眼皮底下