如何使用滚动列表插件?

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

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


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



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



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


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

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

列数:一共有多少列。

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

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

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

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



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


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



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


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



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



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


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


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



再次预览一下。



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


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



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



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


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



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

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

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


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



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


预览一下。



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



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


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

另外我做了一门游戏开发课,以及一个游戏开发训练营,目的是帮助想学习游戏开发的朋友尽快入门,做出自己的游戏,节省时间和精力,少走弯路。目前已有 37 名学员加入,多位同学已经通过学习做出了自己的游戏,如果你也想学习做游戏的话不要错过咯!

这是我做的几个简单好玩小游戏,欢迎试玩。

精致1010

一个很精致的消除游戏。

小程序

精致点点连线

忙碌生活中的片刻放松。

小程序

圆点守护者

为守护家园而战!

小程序

也欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识内容,可以来围观。接受付费咨询,不闲聊,望见谅。

相关文章
|
4月前
|
小程序 索引 容器
微信小游戏制作工具中的滚动列表插件如何使用?
微信小游戏制作工具中的滚动列表插件如何使用?
58 1
|
前端开发 API 定位技术
【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
原文:【百度地图API】如何使用suggestion--下拉列表方式的搜索建议 摘要:   百度地图上有一个很强大的搜索建议功能,以下拉列表的方式展示出来。比如,输入“百度”,下拉列表中就会出现“北京市海淀区百度在线网络技术(北京)有限公司”。
2272 0
原生表格-滚动-合并功能
原生表格-滚动-合并功能
|
5月前
【VsCode】1.70.0 新版本好用功能分享 :代码函数名称浏览时固定(功能原称 sticky Scroll)
在Code 1.70.0 以后,新增功能:sticky Scroll 。 效果描述: 在浏览长函数的时候,可以将函数的名称定义部分固定在顶栏,类似冻结窗口,方便查看函数功能,不必再跳转。
135 0
|
7月前
|
JavaScript
js点击收缩展开文本(不能用废弃)
js点击收缩展开文本(不能用废弃)
|
JavaScript 前端开发
storybook让组件自动形成好看的文档~
storybook让组件自动形成好看的文档~
427 0
|
数据安全/隐私保护
uniapp动态切换显示不同内容组件
通过点击注册或是登录按钮切换不同的组件.默认显示登陆界面,登录字样加粗显示,登录页面显示手机号密码登录.
uniapp动态切换显示不同内容组件
|
JavaScript
uniapp制作app顶部原生导航栏输入框的内容自动变化
uniapp制作app顶部原生导航栏输入框的内容自动变化
206 0
uniapp制作app顶部原生导航栏输入框的内容自动变化
学习笔记jira项目6-渲染列表和下拉框
学习笔记jira项目6-渲染列表和下拉框
85 0
|
JSON 监控 前端开发
小程序滚动加载分页处理(新详细教程)
成品展示: 下滑可以获取刷新后的新数据结合旧数据渲染前端,从而实现分页功能 关注、收藏、点赞3连😀!!! 关注、收藏、点赞3连😀!!! # 一、所使用到方法及后端函数的介绍 1.小程序涉及到的方法介绍 看下微信文档说明: 监听用户滑到底部操作: onReachBottom:funtion(){ } 思路:在里面写数据调用,对每次滑到底部进行分页起始和分页结束变量累加即可 第二个就是 concat 用法:将旧数据与新数据拼接 1.TP5后端查询方法 limit(起始页,终止页) 二、完整代
274 0
小程序滚动加载分页处理(新详细教程)

相关实验场景

更多