微信小游戏制作工具中的滚动列表插件如何使用?

简介: 微信小游戏制作工具中的滚动列表插件如何使用?

嗨!大家好,我是小蚂蚁。


今天来分享一下小游戏制作工具中的滚动列表插件的使用方法。滚动列表在小游戏或者小程序中经常的会被用到,例如关卡选择列表,背包列表,信息展示列表等。滚动列表主要的作用是可以在一个有限的指定的范围内,展示大量的信息。


使用滚动列表其实很简单,首先添加一个滚动列表的插件。打开素材库,选择“插件”,然后选择“滚动列表”,添加。



添加后的滚动列表是这个样子的。



选中滚动列表,然后看一下它的属性都有哪些。


滚动方向:设置上下滚动还是左右滚动。

宽度/高度:设置列表的显示区域。

列数:一共有多少列。

垂直/水平间距:每个元素之间的间隔。

子元素:选择要在列表中显示的元素。

总个数:显示的元素的数量。

除此之外,滚动列表也会增加 3 块积木块。



第一块积木块用于设置指定属性的值,第三块积木块用于获取指定属性的值。第二块积木块用于设置当前滚动到第几个元素的位置,有的时候可能会遇到这样的需求:每当打开列表时,将列表滚动到上一次选中的那个元素的位置。此时,就可以使用这个积木块来设置。


接下来,我们来看一下如何为滚动列表添加子元素。



如图,我们增加一个长方形,作为列表的子元素。


选中“滚动列表”,然后点击子元素右侧的下拉箭头,选中这个“正方形”。



这样我们就把这个精灵当作子元素加入到滚动列表中了,点击预览一下场景。



这是一个只有 1 列的包含 10 个元素的列表。


想要制作像游戏中的背包栏那样多行多列的列表,该如何做呢?


我们把子元素调整成正方形,然后在滚动列表的属性中设置一下“列数”和“总个数”。



再次预览一下。



上方例子中滚动列表中的元素都是空白图片,但是实际上滚动列表中的元素都是有内容的,接下来我们就使用滚动列表插件来实现一个关卡选择列表,以此来了解这个插件的具体应用。


首选,将一个精灵一个数字打包成一个容器,叫做“关卡按钮”。我们将把这个容器,当作滚动列表子元素



接着调整一下滚动列表的属性,增大水平/垂直间距,将子元素的数量设置为 50 个,这将是一个包含 50 个关卡按钮的列表。



目前所有的关卡数字都是 0,接下来,我们来实现一下在对应的关卡按钮上显示当前的关卡数字。


在开始之前,需要先了解一个重要的积木块,就是位于“侦测”中的“自己的x”积木。



在下拉菜单的最后一个选项是“列表索引”,这个值表示的是当前的元素在列表中的索引。

在滚动列表中,所有的子元素都会被分配一个索引,从 1 开始,假设当前的滚动列表中共包含 50 个元素,那么这个索引就是 从 1~50,每个元素都有一个唯一的索引。

了解了这个索引之后,实现起来就简单了,我们只需要获取到子元素的索引值,然后把这个值设置到“关卡按钮容器”中的数字上就可以了。


选中“关卡按钮”容器,为其增加如下的积木块。



非常的简单,只需要两块积木。滚动列表中的子元素是在游戏启动后克隆出来的,所以这里需要使用“当作为克隆体启动时”积木,然后只需要获取当前子元素的列表索引,然后设置到数字上即可。


预览一下。



最后,当玩家点击一个关卡按钮时,我们如何知道当前选中的是哪一关呢?还是使用列表索引。



可以设置一个全局变量,用于记录玩家当前选择的是哪个关卡,之后再根据这个全局变量设置对应的关卡即可。



相关文章
|
1月前
|
安全 API 开发者
微信开发者工具里面没有企业微信模式
企业微信与普通微信在应用场景和开发体系上存在本质区别,主要体现在身份认证、功能丰富性和开放能力等方面。企业微信开发需使用特定的API和工具,本文介绍了企业微信开发的基本步骤、特点及开发进度安排,帮助开发者更好地理解和应用企业微信的开发环境。
|
2月前
|
数据可视化 前端开发 小程序
5G时代-探索微信小游戏
5G时代-探索微信小游戏
32 2
5G时代-探索微信小游戏
|
2月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
21 2
|
2月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
46 3
|
3月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
2月前
|
JSON 文字识别 小程序
微信小程序OCR插件,实现身份证、行驶证、银行卡、营业执照和驾驶证等识别
微信小程序OCR插件,实现身份证、行驶证、银行卡、营业执照和驾驶证等识别
300 0
|
4月前
|
人工智能 小程序 Java
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
本文介绍了一款名为PyWxDump的开源工具,它可以获取微信账户信息、解密SQLite数据库以查看和备份聊天记录。此工具适用于已登录电脑版微信的用户,通过GitHub下载后简单几步即可操作。适合对数据恢复感兴趣的开发者,但请注意合法合规使用并尊重隐私。
602 2
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
|
4月前
|
小程序 开发者
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
这篇文章介绍了如何在微信开发者工具中集成SVN版本控制系统,并提供了解决集成后无效果问题的方法。
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
|
5月前
|
小程序 开发工具 开发者
入职必会-开发环境搭建31-微信开发者工具下载和安装
微信开发者工具是一款由微信官方推出的开发工具,旨在帮助开发者更高效地进行微信小程序和微信公众号的开发与调试。该工具集成了代码编辑、代码上传、实时预览、调试等功能,能够提供便捷的开发环境和调试工具,帮助开发者快速定位和解决问题。
|
5月前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
1041 0