【CocosCreator入门】CocosCreator组件 | EditBox(文本输入)组件

news2024/10/7 4:37:29

       Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中的EditBox组件是一种用于实现用户输入交互的重要组件。它可以让用户在游戏中输入文字、数字等内容,并且可以对输入内容进行格式校验和处理。


目录

一、组件介绍

二、组件属性

三、脚本示例


一、组件介绍

       EditBox组件是Cocos Creator提供的一种用户输入组件,主要用于实现用户输入和交互。通过设置EditBox组件的属性和事件,可以实现各种不同的输入效果,例如密码输入、数字输入和表单输入等。

二、组件属性

属性功能说明
String输入框的初始输入内容,如果为空则会显示占位符的文本
Placeholder输入框占位符的文本内容
Background输入框背景节点上挂载的 Sprite 组件对象
Text Label输入框输入文本节点上挂载的 Label 组件对象
Placeholder Label输入框占位符节点上挂载的 Label 组件对象
KeyboardReturnType指定移动设备上面回车按钮的样式
Input Flag指定输入标识:可以指定输入方式为密码或者单词首字母大写(仅支持 Android 平台)
Input Mode指定输入模式: ANY 表示多行输入,其它都是单行输入,移动平台上还可以指定键盘样式。
Max Length输入框最大允许输入的字符个数
Tab Index修改 DOM 输入元素的 tabIndex,这个属性只有在 Web 上面修改有意义。
Editing Did Began开始编辑文本输入框触发的事件回调。
Text Changed编辑文本输入框时触发的事件回调。
Editing Did Ended结束编辑文本输入框时触发的事件回调。
Editing Return当用户按下回车按键时的事件回调,目前不支持 windows 平台。

Editing Did Began 

属性功能说明
Target带有脚本组件的节点。
Component脚本组件名称。
Handler指定一个回调函数,当用户开始输入文本的时候会调用该函数
CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入。

Text Changed

属性功能说明
Target带有脚本组件的节点。
Component脚本组件名称。
Handler指定一个回调函数,当用户正在输入文本的时候会调用该函数
CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入。

Editing Did Ended

属性功能说明
Target带有脚本组件的节点。
Component脚本组件名称。
Handler指定一个回调函数,当用户输入文本结束时会调用该函数。
CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入。

Editing Return

属性功能说明
Target带有脚本组件的节点。
Component脚本组件名称。
Handler指定一个回调函数,当用户输入文本按下回车键时会调用该函数。
CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入。

三、脚本示例

       下面是一个使用EditBox组件实现用户输入交互的示例代码:

cc.Class({
    extends: cc.Component,
    properties: {
        editBoxNode: cc.Node, // EditBox节点
        inputText: '', // 输入的文本
        maxLength: 10, // 最大输入长度
        inputMode: cc.EditBox.InputMode.ANY, // 输入方式
        keyboardType: cc.EditBox.KeyboardType.DEFAULT, // 键盘类型
        inputFlag: cc.EditBox.InputFlag.DEFAULT, // 输入标志
    },
    onLoad () {
        let editBox = this.editBoxNode.getComponent(cc.EditBox);
        editBox.maxLength = this.maxLength;
        editBox.inputMode = this.inputMode;
        editBox.keyboardType = this.keyboardType;
        editBox.inputFlag = this.inputFlag;
        editBox.node.on('editing-did-ended', this.onEditEnd, this);
        editBox.node.on('text-changed', this.onTextChanged, this);
    },
    onEditEnd (event) {
        this.inputText = event.detail.string;
        console.log('Input Text:', this.inputText);
    },
    onTextChanged (event) {
        this.inputText = event.detail.string;
        console.log('Input Text:', this.inputText);
    },
});

       通过以上代码,我们可以动态地创建一个EditBox节点,并添加EditBox组件。在实际开发中,可以根据需要修改和扩展代码。


       使用Cocos Creator的EditBox组件可以帮助我们实现用户输入交互,并且可以对输入内容进行格式校验和处理。通过设置EditBox组件的属性和事件,可以让用户输入各种不同类型的内容,例如文字、数字、密码等。        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/443381.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Unity渲染】URP透明物体自身渲染穿插异常问题

背景: 对于URP中的某个物体,我们如果希望他正反面都可以被渲染。 通常会有两种解决方案: 1.将网格设置为双面网格。(此种情况Mesh.RecalculateNormals计算结果可能会异常,解决可参考网格法线生成异常解决&#xff0…

震惊!为了4680锂电池溯源,竟然做出这种事情

电池溯源,一直都是国家尤为重视的话题。 中国电子技术标准化研究院更是一再强调了:锂电编码标准编制和溯源平台初步建设方案。参会代表围绕锂电编码溯源体系建设有关问题开展了研讨,表示依托行业通用编码标准,建立完善的锂电全生…

【Linux学习】多线程——页表详解 | 线程概念 | 线程理解

🐱作者:一只大喵咪1201 🐱专栏:《Linux学习》 🔥格言:你只管努力,剩下的交给时间! 线程概念 🥞 页表详解🍞页目录和页表项 🥞线程🍞轻…

2023/4/18往日题目总结

搜索路径状态记录 1076. 迷宫问题 - AcWing题库 //以最简单的迷宫问题为例,如何记录走迷宫的路径,其实只需要记录一下状态即可 //也就是记录一下这个点是从哪个点来的,最后从终点开始输出即可(此时输出的是逆序) #in…

PHP+python+nodejs+springboot+vue 大学生提问论坛系统

在各学校的教学过程中,大学生提问论坛是一项非常重要的事情。随着计算机多媒体技术的发展和网络的普及。 本文首先介绍了大学生提问论坛的发展背景与发展现状,然后遵循软件常规开发流程,首先针对系统选取适用的语言和开发平台,根…

微信小程序的生命周期函数有哪些,以及执行过程?

目录 1、应用的生命周期 2、页面的生命周期 3、组件的生命周期 4、执行顺序 小程序中,生命周期主要分成了三部分: ① 应用的生命周期 ② 页面的生命周期 ③ 组件的生命周期 1、应用的生命周期 在 app.js 里面调用,通过…

【hello Linux】理解文件系统

目录 创建文件的过程: 删除文件的过程: 创建目录的过程: 查看inode编号: 硬链接 软链接 Linux🌷 我们知道文件所有数据 文件内容 文件属性信息; 未打开的文件是被存放到磁盘/固态硬盘中的; …

0201概述-网关Gateway-微服务架构

文章目录 1 前言2 项目引入3 术语4 工作原理5 配置示例5.1 简洁配置5.2 展开配置 6 Predicate7 GatewayFilter7.1 StripPrefix GatewayFilter7.2 RequestRateLimiter GatewayFilter① pom 依赖② 配置按照请求IP 的限流 6 Global Filters7 网关超时配置7.① 配置全局路由超时时…

用java 实现二叉树创建

二叉树是数据结构中的一个重要的概念,二叉树的概念最早由 Linus Torvalds在1958年提出。他给出了一个树形数据结构,可以用来存储二叉树。每个节点的左子树和右子树都是空,中间层是子树。在一个给定的空间中,每一个节点都有两个左右…

Adobe认证证书含金量

当今数字时代,Adobe软件已经成为了许多人工作和创造的必备工具。为了证明自己在使用Adobe软件方面的专业能力,许多人选择参加Adobe认证考试并获取Adobe认证证书。 那么,这些证书的含金量究竟如何呢? 首先,需要指出的…

C++:Article:链接器(二):符号决议

链接器 1. C源文件都有些什么1.1 . 目标文件里有什么 2. 符号表 Symbol table2.1. 符号表的位置2.2. 符号的决议2.3. 符号决议过程 3. 实例说明3.1. 意外出现3.2 总结排查 在上篇文章中,我们介绍了 链接器基本概念,我们知道所有的应用程序否是连接器将所…

基于Python长时间序列遥感数据处理及在全球变化、物候提取、植被变绿与固碳分析、生物量估算与趋势分析

植被是陆地生态系统中最重要的组分之一,也是对气候变化最敏感的组分,其在全球变化过程中起着重要作用,能够指示自然环境中的大气、水、土壤等成分的变化,其年际和季节性变化可以作为地球气候变化的重要指标。此外,由于…

Cesium基础教程

一、概述 Cesium是国外一个基于javascript的地图引擎,支持3D、2D、2.5D形式的展示,可以自行绘制图形、高亮区域,并提供良好的触摸支持,并支持大多数的浏览器和移动端。 Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 ja…

【PWN刷题__ret2text】[CISCN 2019华北]PWN1

ret2text~ 前言 依旧是简单的ret2text 一、checksec查看 No canary found 没有开启栈溢出保护 二、IDA反汇编 双击进入func() 发现后门函数system("cat/flag");根据语义,函数提供了修改v1,判断v2是否等于11.28125,如…

【倒计时4天】金融服务用户体验专场沙龙开启预约

易观:数智化浪潮下,金融业务用户运营从线下向全渠道延伸。用户体验已成为⾦融机构打造差异化的重要抓手。此外,随着⽤户体验的全⾯数字化和精细化,⽤户体验贯穿于整个客户旅程中,做好用户体验管理,体现差异…

okio篇 1.Buffer

总览: Okio的两个基本概念:Source和Sink。Source对标基础io库中的InputStream,负责读数据。Sink对标OutputStream,负责写数据。 Source和Sink的内部实现,都是一个Buffer。Buffer从字面意思理解就是一个缓冲区,跟Buff…

『pyqt5 从0基础开始项目实战』12. 实现多线程循环检测数据的开始和停止(保姆级图文)

目录 最终效果导包和框架代码 main.py避免重复执行开始与停止事件表格更新事件 scheduler.py初始化开始线程停止线程在线程列表中删除线程TaskThread新建线程StopThread停止线程完整代码main.pythreads.pyscheduler.py 总结 欢迎关注 『pyqt5 从0基础开始项目实战』 专栏&#…

C. Anadi and Domino(思维 + 枚举)

Problem - C - Codeforces 阿纳迪有一副多米诺骨牌。每张多米诺骨牌都有两个部分,每个部分都包含一些小点。对于每一个a和b,如1≤a≤b≤6,1≤a≤b≤6,正好有一块多米诺骨牌的一半是a点,另一半是b点。这组多米诺骨牌正好…

手动实现 Tomcat 底层机制+ 自己设Servlet

目录 手动实现 Tomcat 底层机制 自己设Servlet 完成小案例 运行效果 此项目用maven至于怎么配置在下一篇文章 创建cal.html CalServlet.java web.xml WebUtils 问题: Tomcat 整体架构分析 测试分析: 抓包情况 手动实现 Tomcat 底层机制 自己设计 Serv…

十个高质量工具网站推荐,AI自动抠图换背景,任意背景自动融合

AI 背景更换是一种利用生成式人工智能创建新图像背景的软件工具。与传统方法需要移除原有的背景并更换新的不同,AI背景生成器使用先进的算法生成与前景完美融合的全新背景。这项技术彻底改变了图像编辑的方式,为设计提供了更多的创造自由和灵活性。 特点…