微信小游戏制作工具中的键盘插件的使用

简介: 微信小游戏制作工具中的键盘插件的使用

在游戏中经常需要使用到键盘,让玩家能够在游戏中进行输入操作。今天就分享一下如何在微信小游戏制作工具中使用键盘进行输入。


要想使用与键盘有关的功能,首先,需要开启“键盘”插件。


点击“功能区”中的“添加插件”按钮。


在管理插件面板中,开启“键盘”插件。


开启之后,你就能够在积木区右侧的“插件”类别中看到与键盘有关的积木了。


显示键盘多行输入:使用这块积木就可以开启手机上的键盘了,下拉框中可以选择“开启”或者“禁用”多行输入。


隐藏键盘:这块积木的作用就是隐藏当前显示的键盘。


键盘的值:使用这块积木我们能够获取到用户使用键盘输入的内容。


键盘是否开启:判断当前键盘是开启还是隐藏状态。


除了与键盘有关的积木外,我们还要了解两个与键盘有关的回调事件。在积木区中点击“添加事件”,然后在最下方可以看到两个与键盘有关的事件。


当键盘完成按钮被点击:这个事件会在用户完成输入操作后,进行调用。也就是说我们可以在这个事件回调积木中,通过“键盘的值”积木块,获取到用户使用键盘输入的内容。


当键盘收起:这个事件会在键盘被收起时调用。


接下来,我们在开发工具中看一下这几个积木和事件的具体使用。



如图,是一个简单的场景,包含了四个元素,“基础文字”用于显示用户通过键盘输入的内容。“显示键盘”按钮点击后,会显示键盘(可单行输入),“隐藏键盘”按钮点击后,会隐藏键盘。“多行输入”按钮点击后,会显示键盘(能够输入多行)。


接下来,依次看一下每个元素上的积木块。


显示键盘按钮上的积木块:


隐藏键盘按钮上的积木块:


多行输入按钮上的积木块:


基础文字上的积木块:


其中“基础文字”上使用的是“当键盘完成按钮被点击”的事件积木,然后在其中通过“键盘的值”积木获取到用户的输入,最终显示在文本上。


运行一下,看看效果。注意:对于键盘功能的测试只能在移动设备上进行,在电脑上无法进行测试。所以,这里需要点击功能区中的“预览&分享”,然后通过使用手机扫描二维码进行测试。

,时长00:17


最后,我们来制作一个游戏中的常见场景的示例:玩家第一次打开游戏时,游戏提示,给游戏中的英雄起个名字,名字起好后,游戏向玩家打招呼,作为第一次友好的互动。


首先,布置一个简单的场景。



当玩家点击“好的”按钮后,我们就调用键盘显示积木块,显示键盘,供玩家进行输入操作。


在玩家起名结束后,我们在基础文字上增加下图的积木块,向玩家的英雄打招呼。



最后,在手机上运行一下。



文中演示的示例项目已经开源分享到了社区,有需要的朋友可以去下方的链接自行获取项目工程。

键盘示例项目地址: https://gamemaker.weixin.qq.com/#/game?game_id=lbZGU0YTBiZDEtODBlNi00YWViLThmYmUtYmJhN2FkYjEwNTQ0

注意:微信小游戏制作工具所提供的键盘组件目前是有 bug 的,社区版游戏中可以正常使用,但是当你发布到微信小游戏平台时,会发现键盘的事件不会被调用,另外如果想要发布到微信小游戏平台,并且在游戏中使用键盘插件允许用户进行内容输入的话,必须要对接微信的内容输入安全检查接口,否则的话,游戏无法过审。


相关文章
|
1月前
|
Docker 容器
Star 1.8k! 推荐一款更优雅的微信文章订阅工具,让阅读更便捷!
Star 1.8k! 推荐一款更优雅的微信文章订阅工具,让阅读更便捷!
|
1月前
|
前端开发 开发者
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
53 0
|
1月前
|
小程序 开发者
关于UniApp启动到微信小程序工具提示找不到app.json
关于UniApp启动到微信小程序工具提示找不到app.json
164 0
|
1月前
|
小程序 开发工具 开发者
解决微信开发者工具不能使用云开发的资源
解决微信开发者工具不能使用云开发的资源
|
1月前
|
小程序 Java 编译器
性能工具之JMeter 微信小程序 WebSocket 脚本入门
【5月更文挑战第12天】性能工具之JMeter 微信小程序 WebSocket 脚本入门
39 1
|
1月前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
106 1
|
1月前
|
小程序 开发者
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
24 0
|
1月前
|
小程序 开发者 Windows
【微信小程序】微信开发者工具 内容错误 pages/cart/cart.json: [“usingComonent“][“van-card“]: “@vant/weapp/card/indx“ 未找到
【微信小程序】微信开发者工具 内容错误 pages/cart/cart.json: [“usingComonent“][“van-card“]: “@vant/weapp/card/indx“ 未找到
46 0
|
1月前
|
开发者
微信开发者工具真机调试连接状态在正常和未连接之间反复横跳
微信开发者工具真机调试连接状态在正常和未连接之间反复横跳
55 1
|
1月前
|
前端开发 开发者
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
60 0

热门文章

最新文章