设置按钮不可见_《Cocos Creator游戏实战》实现下拉框按钮ComboBox控件

最新推荐文章于 2023-02-07 15:27:04 发布
最新推荐文章于 2023-02-07 15:27:04 发布
阅读量507 收藏
点赞数
文章标签： 设置按钮不可见
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29332779/article/details/112575805
版权

f894e87bdc8d4f02fdf821ead1fa24c5.png

官方目前并没有在Cocos Creator中提供ComboBox控件，不过我们自己完全可以做一个，实现起来并不难。

运行效果如下：

dd7f884aa09ccfe8deb80bc816ce6172.gif

​Cocos Creator版本：2.2.0

公号后台回复"下拉框"，获取完整项目源码。

创建节点

72e9d2ef49f00855448a31ed80131cc5.png

1. bg只是一个Sprite节点，用来当做画布背景。

2. 重点是combobox节点。它其实是一个按钮，background子节点为按钮背景，triangle子节点类型同样为Sprite，而label就是按钮上的文本了。

bb7bfb2e0215a9baaae13a1ee129ce81.png

我们将combobox节点上的按钮组件Transition属性设置为None(之后笔者将通过三角形图片的旋转来体现玩家点击操作)：

03259f17c78115e430b60c67cf8042d2.png

注：关于所有节点的坐标、锚点和大小设置，笔者这里就不再截图，大家可以直接打开项目查看(大家当然也可以根据自己喜好来调整)。

我们给triangle和label节点挂上Widget组件，让他们在按钮上的相对位置固定：

triangle

最低0.47元/天 解锁文章
大郎神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CocosCreator 属性面板设置(下拉菜单/显示隐藏)
gamedaybyday
09-14 1952
版本:2.4.2 参考： cocos教程：属性参数参考 Cocos技术派 | TS版各种属性声明详解 Cocos技术派 | TS版属性面板定义高级篇 下拉菜单 + 显示隐藏 定义一个性别的下拉菜单，当选择男人时，显示男人年龄；当选择女人时，显示女人年龄。 const {ccclass, property} = cc._decorator; export enum SexyType...
CocosCreator3.x实现游戏跑马灯全服游戏通知功能
02-18
在CocosCreator3.x中，实现游戏跑马灯全服游戏通知功能是一项重要的用户体验设计，它可以帮助游戏开发者向玩家实时推送重要信息，如活动更新、系统公告等。下面将详细介绍如何利用CocosCreator3.x来实现这一功能。 ...
cocos creator 的表单中使用单选、多选、复选、下拉框、输入框等组件的实例
任聪聪的博客
02-07 3328
本篇文章主要讲解：使用cocos creator 是如何使用表单中单选、多选、复选、下拉框、输入框等组件的方法。作者：任聪聪日期：2023年2月7日cocos 引擎版本2.4.3提示: 如果是新手同学，建议结合附件中的demo，来进行学习，这样会有一个整体的操作认知,掌握表单制作的能力也会快一点。
cocos creator 按钮隐藏显示
大菠萝一号
07-31 7518
TypeScript写法： this.startBtn.node.active = true; //显示 this.startBtn.node.active = false; //隐藏           来瓶百威~~~~~                                                                        ...
comboBox控件下拉选项中添加图片
lijianhua6120的博客
02-02 1851
comboBox下拉选项中添加图片 1、将需要添加的图片加入到imageList中 2、循环图片清单，加入绘入comboBox中，代码如下： foreach (string key in imageList1.Images.Keys) { comboBox1.Items.Add(key); } ...
Qt Style Sheet实践（二）：组合框QComboBox的定制
翻肚鱼儿的博客
09-28 1188
导读 组合框是一个重要且应用广泛的组件，一般由两个子组件组成：文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下，组合框能够很好的满足我们的需求。如我们经常使用的聊天软件QQ登录框，便是一个很好的应用例子： 显然，用户既可以自己手动输入新的QQ号码，也可以在列表框中选择历史输入记录。对于提高用户体验是一个不错的手段。这篇博文重点讲述如何用QSS对组合框进行定制。 基本自定义 组合框的使用非常简单，为了加快叙述速度，我们直接在Qt Desi...
cocos creator怎么隐藏组件（setVisible）
weixin_34112900的博客
05-21 1532
以 label 为例： this.label.node.active = fasle 隐藏节点this.label.ndoe.active = true显示节点 转载于:https://www.cnblogs.com/luorende/p/9066478.html
《Cocos Creator游戏实战》实现下拉框按钮ComboBox控件
热爱代码
12-24 3346
实现下拉框按钮ComboBox控件 创建节点 编写脚本 官方目前并没有在Cocos Creator中提供ComboBox控件，不过我们自己完全可以做一个，实现起来并不难。 运行效果如下： Cocos Creator版本：2.2.0 公众号后台回复"下拉框"，获取完整项目源码： 创建节点 1. bg只是一个Sprite节点，用来当做画布背景。 2. 重点是c...
laji_垃圾分类游戏_laji_cocoscreator_
09-30
《cocoscreator制作的垃圾分类小游戏》是一款以环保为主题，利用CocosCreator开发的教育类游戏。这款游戏旨在通过轻松的游戏方式，提升玩家对垃圾正确分类的知识和意识，促进社会的环保行动。 CocosCreator是一款...
Tank-War-master_CocosCreator_cocos经典坦克大战FC_
10-01
《CocosCreator经典坦克大战FC复刻》是基于CocosCreator游戏引擎开发的一款致敬经典FC游戏"坦克大战"的作品。CocosCreator是一款强大的2D游戏开发工具，它提供了直观的可视化编辑器、高效的性能优化以及丰富的组件...
Cocos Create 实现下拉框效果
11-07
在本文中，我们将深入探讨如何使用Cocos Create实现下拉框效果。Cocos Create是一款强大的2D游戏开发工具，它提供了丰富的UI组件和动画功能，使得开发者能够轻松创建交互式的游戏和应用。在这个自创的下拉框样式中，...
cocos creator 不规则形状按钮
04-20
在Cocos Creator游戏开发中，创建不规则形状的按钮是一个常见的需求，这可以让游戏界面更加独特和富有创意。本文将详细介绍如何结合Gizmo工具来实现这一目标。 首先，了解Cocos Creator。Cocos Creator是一款全栈式...
【cocos creator】在编辑器显示下拉菜单
烧仙草奶茶的博客
10-12 642
const { ccclass, property } = cc._decorator; export enum Api_Type { null = 0, ZJTD = 2, Vivo = 3, Oppo = 4, QQ = 5, WX = 1, }; @ccclass export default class Loading extends cc.Component { protected static _instance: Loading =..
【Cocos新手入门】 cocos creator 制作 select下拉框且可以选择获取选中参数数值的方法
任聪聪的博客
02-07 1837
本篇文章主要讲解使用cocos creator 制作 select下拉框且可以选择获取选中参数数值的方法。作者：任聪聪日期：2023年2月7日cocos 引擎版本：2.4.3在我们实现select框的时候，我们可以通过按钮+显示隐藏某个元素来达成这个目标，如下是整体的select框自定义及传参获取的方法教程。
【Cocos Creator】 编辑器自定义 ——下拉列表属性、滑动条属性等
烧仙草奶茶的博客
04-13 2051
https://blog.csdn.net/qq_35307027/article/details/107693951 一、 声明属性 js: 要声明属性，需要在 cc.Class 定义的 properties 字段中，填写属性名字和属性参数。在此处声明的属性在Cocos Creator编辑器属性检查器面板中可以读取和编辑。如下： TS： // 声明一个带说明的Sprite属性 @property({ type: cc.Sprite, displayNam
cocos creator使按钮无法被点击、不可用
Sclifftop - 保安大队长
07-15 8785
cocos 使按钮在不隐藏的情况下，无法被点击 TouchEnable 因为有的特殊功能可能只有一次点击的机会，点击的效果也能特殊，所以点击完设置this.bStart.node.off(cc.Node.EventType.TOUCH_END,this.onBtnStart,this);没用，只会功能不响应，设置active是直接隐藏掉了，不是该效果但按钮点击会有效果（缩放，图等），看起来很...
ASP外观专利图像检索平台(源代码+论文).rar
最新发布
07-21
ASP外观专利图像检索平台(源代码+论文)
成语json_cocos creator实战(2)成语小秀才ts版
06-01
非常感谢您的提问！在这里，我将为您详细介绍成语小秀才的 TypeScript 版本实现过程。 首先，我们需要明确成语小秀才的功能需求： 1. 随机生成一个四字成语 2. 在输入框中输入猜测的成语 3. 判断猜测的成语是否符合规则（四个字，每个字都必须是汉字） 4. 判断猜测的成语是否是正确的成语 5. 根据猜测结果进行相应的反馈和操作 接下来，我们将一步步实现这些功能。 1. 随机生成一个四字成语 我们可以事先准备一个成语列表，然后使用 Math.random() 方法从列表中随机选择一个成语。这里我们使用 TypeScript 的枚举类型来定义成语列表，并且使用随机数生成器函数 getRandomIntInclusive() 来实现随机选择功能。 ```typescript enum Idioms { "天渊之别" = 0, "堂皇冠冕" = 1, "百里挑一" = 2, // 其他成语... "远见卓识" = 999, } function getRandomIntInclusive(min: number, max: number): number { return Math.floor(Math.random() * (max - min + 1) + min); } const randomIdiom: string = Idioms[getRandomIntInclusive(0, Object.keys(Idioms).length / 2 - 1)]; ``` 2. 在输入框中输入猜测的成语 我们可以使用 HTML 的 input 元素来实现输入框，然后使用 TypeScript 的 DOM 操作函数来获取输入框中的值。 ```typescript const inputElement: HTMLInputElement = document.querySelector('input'); const input: string = inputElement.value.trim(); ``` 3. 判断猜测的成语是否符合规则 我们可以使用正则表达式来判断猜测的成语是否符合规则。这里我们使用 Unicode 中文字符集来匹配汉字。 ```typescript const regex: RegExp = new RegExp(/^[\u4e00-\u9fa5]{4}$/); if (!regex.test(input)) { console.log('请输入一个四字汉语成语！'); return; } ``` 4. 判断猜测的成语是否是正确的成语 我们可以使用 includes() 方法来判断猜测的成语是否在成语列表中。由于成语列表是一个枚举类型，我们需要转换成数组进行判断。 ```typescript const idioms: string[] = Object.keys(Idioms).map(key => Idioms[key]); if (!idioms.includes(input)) { console.log('猜错了，再试一次吧！'); return; } ``` 5. 根据猜测结果进行相应的反馈和操作 根据猜测结果，我们可以输出相应的信息，并且进行相应的操作。这里我们使用 TypeScript 的 DOM 操作函数来实现输出信息的功能。 ```typescript const outputElement: HTMLDivElement = document.querySelector('div'); if (input === randomIdiom) { outputElement.textContent = '恭喜你，猜对了！'; // 猜对了的操作... } else { outputElement.textContent = '猜错了，再试一次吧！'; // 猜错了的操作... } ``` 综上所述，以上就是成语小秀才的 TypeScript 版本实现过程。希望这篇文章能够帮助到您！如有任何疑问，请随时与我联系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值