如何在微信小游戏制作工具中实现关卡翻页功能?

简介: 如何在微信小游戏制作工具中实现关卡翻页功能?

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


最近有几位同学问水平方向上的关卡翻页功能怎么做,这篇教程就详细的介绍一下水平的关卡翻页功能的实现方法。


如果游戏中的关卡数量比较多,一般有两种方式展示大量的关卡按钮,一种是垂直的滑动显示,这个比较简单,只需要使用一个“滚动列表”插件即可实现。另一种是水平方向的翻页显示,当然水平方向上也是可以滑动的,但是似乎很少看见有在水平方向上使用滑动的方式显示大量关卡按钮的(或许这样与我们的操作习惯不符,或许你可以尝试一下这种很少有人用的方式?),大部分水平方向关卡的切换都是使用点击按钮翻一页的方式。


先来看一下我们今天要学习制做的关卡翻页示例。

如图,每一页显示 4x4 的 16 个关卡,下方有两个翻页按钮,可以点击向后翻页或者向前翻页,最下方是一个显示用户当前选择关卡的提示,为了方便我们查看当前选择的是第几关(这只是为了方便我们开发者查看,真实的游戏中可不会显示)。


我们把制作这个示例一共分为三步:

  • 制作 4x4 的网格布局排列的按钮;
  • 设置按钮上的关卡数字(这个按钮是第几关);
  • 实现向前向后翻页的功能;

接着,我们就来一步一步的制作这个示例吧!

按网格布局排列的按钮

看到“网格布局”这四个字熟悉吗?关于它的内容我在之前的教程中讲过没有十遍也有八遍了,所以在这里我就不想再讲一次了。如果你还不知道的话,可以去看看之前写的【这篇】教程。


如果你有认真学习过之前的教程的话,我认为只要谈到“做一个几行几列布局”的方块这样的需求,你就应该在脑袋里立刻蹦出实现方式:计算起点,双重循环克隆,根据行号列号计算位置.....


这种万金油式的一通百通的如此重要的知识,如果还没有掌握的话,真的是应该反思一下了。以后是打算每次遇到都撞一次墙?还是下点儿功夫一次彻底把它打通?


原理就不再说了,我们直接来看实现吧!

先布置一个简单的场景,其中包含关卡按钮,前后翻页按钮,以及几个用于显示信息的基础文字。

接着,再来看一下这个示例中所用到的所有的变量。

其中起点位置X/Y行/列号行/列数是我们在实现网格布局时需要用到的。

来看一下实现关卡按钮 4x4 排列布局的积木逻辑。

如图,红框框出的积木是实现排列布局的,需要重点理解,其它的我们后续会讲。

这样,我们就做出了关卡按钮的 4x4 网格排列布局了。

按钮上的关卡数字

接着,再来看一下如何设置按钮上的关卡数字。

先来看一下这张图,这是一个 4 行 4 列的布局,在已知行号和列号的前提下,我们可以计算出当前行列号那个位置上的索引。比如说第 2 行第 3 列位置上的索引是 7。


有了这个是不是我们就能知道哪个按钮表示的是哪一关了呢?且慢,我们还需要一个已知的条件,就是当前的关卡是哪一页。

因为不同的页数显示的关卡范围是不同的,如图是第二页显示的关卡,是从第 17 关到 32 关。所以,我们在计算一个按钮上的关卡数字的时候,还需要考虑的一个因素是当前的页数

如图,不同的关卡页数,关卡的范围是不同的,通过每页的关卡数量(示例中是 16 关),以及当前的页数,可以计算出这一页的关卡范围。


最后,我们将这些已知条件结合一下,就可以计算出当前的按钮表示的关卡数字了。

你可以举个例子带入计算一下,例如位于第3行,第4列,第3页的按钮,它的关卡数字是:(3-1)*16+(3-1)*4+4 = 44,所以这个按钮显示的关卡数字是 44。

来看一下设置关卡数字的积木逻辑。

很简单,就三块积木,这三块积木完成的就是我们上述的分析计算过程。

实现前后翻页

都做到这里了,实现关卡翻页就是水到渠成的事了。我们只需要增加两个翻页按钮,点击向后翻页的按钮,就把关卡页的索引增加 1 ,点击向前翻页的按钮,就把关卡页的索引减少 1,因为关卡页的索引改变了,所以所有按钮上的关卡数字也要重新计算一遍。


直接来看一下向后向前翻页的积木逻辑吧!


向后翻页按钮的积木逻辑:

向前翻页按钮的积木逻辑:

当关卡按钮收到刷新通知时,只需要重新计算一下自己的显示数字即可。

当玩家点击一个关卡按钮的时候,我们把当前的关卡数字记录到一个“当前选择关卡”的全局变量中。

玩家点击一个关卡后再怎么做呢?我们的游戏通常会进入另一个场景,这个场景是真正进行游戏的场景,在这个新场景启动的时候,我们就可以根据全局变量“当前选择关卡”中记录的玩家选择的关卡(是第几关),来进行关卡的设置和初始化了。


这篇教程的内容就到这里了,希望它能够帮助你实现一个可水平切换关卡的功能。

相关文章
|
3月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
3月前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
6月前
|
Java API
wxid添加微信好友工具,免费微信wxid转换器二维码,jar实现仅供学习参考
本项目实现微信ID与wxid的转换及二维码生成功能,核心逻辑基于ZXing库完成QR编码,支持文件批量导入导出。
|
6月前
|
编解码 Java
wxid加微信好友工具,二维码转换工具,微信号转wxid插件【仅供学习参考】
本工具基于JAVA实现微信ID转换功能,支持wxid、微信号与二维码之间的相互转换。开发中使用ZXing库(版本3.5.1)完成二维码编解码,并设计核心类`WxidConverter`实现关键转换逻辑。
|
6月前
|
JSON 安全 定位技术
微信附近人提取v3脚本, 微信附近人id提取技术插件,采集附近人wxid数据工具
本内容介绍微信“附近的人”功能的技术原理与实现方法,基于LBS服务,涉及位置模拟、协议分析及数据解析。通过修改GPS坐标或使用Frida等工具hook位置函数
微信封号脚本插件,全自动批量投诉工具, vx隔空抓包封号思路【仅供学习参考用途】
这是一款针对微信投诉自动化处理的工具插件,通过模拟点击操作实现批量投诉功能。相比手动投诉,该插件效率更高、成功率更有保障。
|
6月前
|
存储
微信附近人提取工具,附近人微信号采集,用xposed实现【仅供学习参考】
主Hook模块拦截微信附近人界面,数据结构保存用户信息,数据导出模块实现CSV格式存储,以及Xposed框架入口配置。
|
6月前
|
监控 数据可视化 BI
微信计数器统计工具,QQ统计器手机APP,通过autojs实现后台
这是一款基于AutoJS的微信/QQ新增好友监控脚本,具备后台运行、自动统计每日新增好友数量、生成简单报表及定时提醒功能。
|
6月前
|
人工智能 监控 数据可视化
微信养号脚本插件,全自动化工具,【autojs实现框架】
这是一套微信养号自动化脚本,包含主脚本`wechat_auto.js`和配置文件`config.json`。脚本实现自动浏览朋友圈、订阅号新闻文章及指定公众号历史文章三大功能,支持自定义滚动次数、阅读时长与运行时间等参数。特点包括随机化操作、多种浏览模式交替及完善的日志记录。配套UI模块提供可视化控制界面,方便监控任务状态与调整参数。下载地址:https://www.pan38.com/share.php?code=n6cPZ,提取码:8888(仅供学习参考)。

热门文章

最新文章