如何使用滚动列表插件?

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

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


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


640.png


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


640.png


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


640.png

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

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

列数:一共有多少列。

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

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

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

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


640.png


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


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


640.png


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


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


640.png


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


640.gif


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


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


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


640.png


再次预览一下。


640.gif


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


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


640.png


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


640.png


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


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


640.png


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

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

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


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


640.png


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


预览一下。


640.gif


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


640.png


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


今天的分享就到这里了。我是会做游戏也会教你做游戏的小蚂蚁,想学习做游戏的话,关注我的公众号就对啦!

相关文章
|
6月前
|
小程序 索引 容器
微信小游戏制作工具中的滚动列表插件如何使用?
微信小游戏制作工具中的滚动列表插件如何使用?
155 1
|
JavaScript
Fastadmin列表的多图预览(一行代码)
Fastadmin列表的多图预览(一行代码)
356 0
|
30天前
|
前端开发 小程序
扩展uview复选组件库支持自定义图片+自定义内容
扩展uview复选组件库支持自定义图片+自定义内容
63 6
|
前端开发 API 定位技术
【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
原文:【百度地图API】如何使用suggestion--下拉列表方式的搜索建议 摘要:   百度地图上有一个很强大的搜索建议功能,以下拉列表的方式展示出来。比如,输入“百度”,下拉列表中就会出现“北京市海淀区百度在线网络技术(北京)有限公司”。
2359 0
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
137 0
|
6月前
|
搜索推荐
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。(一)
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。(一)
|
6月前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
153 1
|
6月前
|
移动开发 前端开发 JavaScript
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
原生表格-滚动-合并功能
原生表格-滚动-合并功能
【VsCode】1.70.0 新版本好用功能分享 :代码函数名称浏览时固定(功能原称 sticky Scroll)
在Code 1.70.0 以后,新增功能:sticky Scroll 。 效果描述: 在浏览长函数的时候,可以将函数的名称定义部分固定在顶栏,类似冻结窗口,方便查看函数功能,不必再跳转。
473 0