【Cocos新手入门】使用 cocos creator 创建单行文本输入框及多行文本输入框

news2024/12/25 2:31:29

本篇文章主要讲解使用 cocos creator 创建单行文本输入框及多行文本输入框,并绑定文本框获取文本输入数据的方法。
作者:任聪聪
日期:2023年2月2日
cocos引擎版本2.4.3

实际效果

单行文本效果、多行文本效果
在这里插入图片描述
说明:如果不清楚按钮如何绑定事件,可以看我前面写的这篇文章(Cocos新手入门】cocos creator 的研发思路和工具操作说明)里的1.5 绑定事件操作章节内容。

Editbox文本框的创建

单行文本创建

步骤一、使用组件控件创建文本说明
在这里插入图片描述
步骤二、设置属性及类型
在这里插入图片描述

多行文本创建

仅仅需要修改input mode中的参数为 ANY 即可。
在这里插入图片描述

文本框属性说明

string :默认的输入框存在的值

placeholder :提示信息,输入即消失

input mode: any为多行,其他都为单行

max length : 最大输入字符数限制

文本框的监听和获取数据方式

1.监听状态说明

如下是一个文本框的四种监听状态类型,分为输入开始、输入改变、输入结束、输入返回
在这里插入图片描述

此处的绑定方式也可在我上方提到的文章内容中找到。

2.监听输入数据并赋值

说明:分别为四种形式的数据获取形式,通过一个函数来做演示,查看我们输入表单后对数据的获取效果。

代码片段:

	// v 值  e 事件对象  s 为customEventData的值
    getInput(v,e,s){
        console.log(v,e,s)
    }

监听效果,四种形式
在这里插入图片描述
故此:我们选择适合自己场景下的方式即可,这里我们选择的是changed 的状态类型

按钮绑定的函数获取数据的方式

1.获取已经赋值的数据

步骤一、先声明

说明:先在脚本代码中声明 所需的变量,如下:

    @property(cc.EditBox)
    title_input: cc.EditBox = null;

未声明的效果:看不到任何的对象
在这里插入图片描述

声明后的效果:我们会看到自己通过代码生成的对象
在这里插入图片描述
tips:这里我是把脚本绑定在canvas中的,所以才会显示,如果是绑定在其他的层级上,则是在绑定脚本的那个层级中查看。

步骤二、通过代码获取对象值

通过如下代码即可获取到相对应的数值

this.title_input.string;

实际代码片段:

    sumitBtn(e){
       let title =  this.title_input.string;
       let desc = this.desc_input.string;
        console.log('获取到的数据:',title,desc);
    }

实际效果,绑定按钮后,按按钮获取到的数值:
在这里插入图片描述
通过绑定的函数打印数值,效果如下:
在这里插入图片描述

注意:
如果出现报错“Uncaught TypeError: Cannot read properties of null (reading ‘string’)” 的情况,请记得点击canvas检查是否在creator中绑定对象
在这里插入图片描述

2.模拟网络请求提交表单

模拟网络请求,可以使用js原生的xhrhttp,也可以使用cocos的api,这里就不做详细的说名,方法有很多。
cocos的文档中的说明:https://docs.cocos.com/cocos2d-x/manual/zh/advanced_topics/networking.html?h=post

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

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

相关文章

jquery:表单请求、序列化+案例

表单请求提交原则name相同的表单提交,name出现多次,对应不同表单的值没有name,含有disabled(禁用)禁止提交多选单选下拉列表需要设置value属性才能取值表单提交事件名称写法描述提交方式method“get”get不安全取数据&…

30. 面向对象高级编程

1. __solts__ 正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性。 from types import MethodTypeclass Student:def __init__(self):passdef set_num(sel…

OSCP_VULHUB_Matrix3

文章目录简介扫描ida汇编ssh登录/提权简介 下载地址: https://download.vulnhub.com/matrix/Machine_Matrix_v3.ova 环境: VMware 16虚拟机软件 Matrix3靶机IP地址:192.168.132.145 Kali的IP地址:192.168.132.139 Matrix3靶机与…

Shiro基础知识与集成应用

1、Shiro可以完成: 【认证、授权、加密、会话管理】、与Web集成、缓存等2、特点: 易于使用、全面、灵活、强力支持Web、兼容性强、社区支持 外部观看内部观看3、 登录认证:1)身份验证:一般需要提供如身份ID等一些标识信息来表明登录者的身份,如提供email…

Druid(德鲁伊)数据库连接池

文章目录一.数据库连接池的必要性(一).传统数据库连接模式的的步骤(二).传统数据库连接模式存在的问题二.数据库连接池技术(一).数据连接池的思想:(二).数据库连接池的任务:(三).数据库连接池的规模:(四).工作原理:(五).数据库连接…

5 -【Faster R-CNN】之 AnchorGenerator 代码精读

【Faster R-CNN】之 AnchorGenerator 代码精读1、anchor 的 size 和 aspect_ratios2、计算以中心坐标为 (0, 0) 的 anchor3、将 anchor 映射到原图上4、代码汇总anchor 的作用:anchor 是用来做辅助计算的,用于和 (上节课说的,由RP…

共享模型之内存(一)

1.Java内存模型 1>.JMM即Java Memory Model,它定义了主存、工作内存抽象概念,底层对应着CPU寄存器、缓存、硬件内存、CPU指令优化等; 2>.JMM体现在以下几个方面: ①.原子性 - 保证指令不会受到线程上下文切换的影响; ②.可见性 - 保证指令不会受cpu缓存的影响; ③.有序…

大型会场活动线上保障方案

背景 为保证活动上线后的质量,大型会场活动上线前通常会预设一些线上可能出现的问题,提前制定保障方案。 这些与活动保障相关的问题可能与App端上的容器环境有关,也可能与大盘用户设备特征有关,问题的处理方案会影响活动的线上效…

《啊哈算法图的遍历》(14张图解)

目录 前言 一,dfs和bfs是什么 二,城市地图--图的深度优先遍历 三,最少转机--图的广度优先遍历 前言 🌼说爱你(超甜女声版) - 逗仔 - 单曲 - 网易云音乐 1月22日一个女孩加了我,她和我聊音…

adb常用指令合集

adb文件管理指令 1.复制设备里的文件到电脑 adb pull <设备里的文件路径> [电脑上的目录] 电脑上的目录 参数可以省略&#xff0c;默认复制到当前目录 例&#xff1a;adb pull /data/tsplogtool /home/jxq/文档/场景魔方 2.复制电脑里的文件到设备 adb push <电脑上的…

浅谈未来10年IT行业的变局与抉择,一文带你认识元宇宙

一. 困局据国家就业部门最新统计数据报告&#xff0c;2022年应届毕业生的数量首次突破1000万大关。其中研究生达到130万&#xff0c;985、211等名校毕业生75万&#xff0c;普通本科毕业生470万&#xff0c;专科生460万&#xff0c;另外还有几十万的归国留学生&#xff01;但这还…

《从0开始学大数据》之Spark性能优化案例

基于软件性能优化原则和 Spark 的特点&#xff0c;Spark 性能优化可以分解为下面几步。 性能测试&#xff0c;观察 Spark 性能特性和资源&#xff08;CPU、Memory、Disk、Net&#xff09;利用情况。分析、寻找资源瓶颈。分析系统架构、代码&#xff0c;发现资源利用关键所在&a…

【前端】Vue项目:旅游App-(17)home:页面滚动显示搜索栏、节流、时间同步

文章目录目标过程与代码页面滚动到目标位置显示搜索框优化&#xff1a;节流搜索栏显示时间同步效果总代码修改或添加的文件search-bar.vueuseScroll.jsstore的main.jsformatDate.jshome.vue参考本项目博客总结&#xff1a;【前端】Vue项目&#xff1a;旅游App-博客总结 目标 …

HDFS文件浏览器功能OOM排查

现象描述 涉及HDFS文件浏览器的某个功能运行一段时间后会出现OOM的情况 错误日志如下&#xff1a; service.log.2023-02-01-0.log:java.lang.OutOfMemoryError: Java heap space排查过程 需要查看dump文件排查一下造成OOM的原因 查看jvm参数如下&#xff1a; java -Duser.t…

一文讲明Docker的基本使用,常见Docker命令使用 、Docker的安装使用等【详细说明+图解+概念+实践】

一个混迹于Github、Stack Overflow、开源中国、CSDN、博客园、稀土掘金、51CTO等 的野生程序员。 目标&#xff1a;分享更多的知识&#xff0c;充实自己&#xff0c;帮助他人 GitHub公共仓库&#xff1a;https://github.com/zhengyuzh 以github为主&#xff1a; 1、分享前端后端…

【Python合集系列】2023兔年吉祥,新的一年希望放烟花的人跟看烟花的人都能平平安安哦~(附多种源码)

前言 希望放烟花的人跟看烟花的人都能平平安安。 &#x1f440; NICE TO MEET YOU :)&#x1f319; 所有文章完整的素材源码都在&#x1f447;&#x1f447; 粉丝白嫖源码福利&#xff0c;请移步至CSDN社区或文末公众hao即可免费。 ​哈喽&#xff01;我是木子&#xff0c;新…

设计模式之适配器模式,以C++为例。

今天来盘一盘适配器模式。适配器&#xff1a;顾名思义&#xff0c;就是让原本不合适的变为合适的&#xff0c;好似一对男女&#xff0c;没有中间的媒婆是不会互相了解的&#xff0c;好像不太恰当&#xff0c;就这么解释吧&#xff0c;只有有了这个中间人他们才会产生联系&#…

智能驾驶开启高精定位新赛道,这家供应商正加码布局海外市场

高工智能汽车研究院监测数据显示&#xff0c;2022年1-11月中国市场乘用车前装标配搭载NOA交付达到18.38万辆&#xff0c;同比增长91.86%&#xff1b;同时&#xff0c;NOA搭载的车型配置价格还在不断下滑&#xff0c;正在把NOA的配置拉至15万元价格区间。 而作为高精定位&#x…

面向对象——static(静态)Math类自定义工具类代码块

目录 static&#xff08;静态&#xff09;关键字 static的注意事项 static的优点和缺点 应用场景 自定义工具类 代码块 static&#xff08;静态&#xff09;关键字 static是一个修饰符&#xff0c;用于修饰成员&#xff08;成员变量 、成员方法&#xff09;static的特点…

Redis处理client连接数过多,大量空闲链接无法释放问题

打开redis命令终端&#xff0c;输入&#xff1a; client list 查看连接数&#xff0c;用于返回所有连接到服务器的客户端信息和统计数据 参数解析&#xff1a; id: 唯一的64位的客户端ID(Redis 2.8.12加入)。 addr: 客户端的地址和端口 fd: 套接字所使用的文件描述符 age…