微信小游戏开发实战11-使用本地缓存

简介: 这是微信小游戏开发实战系列的第11篇,点击上方的#微信小游戏开发实战话题可以查看本系列的所有内容。本节主要内容:使用本地缓存来记录玩家的设置以及各种类型数据的本地缓存和读取操作。


这是微信小游戏开发实战系列的第11篇,点击上方的#微信小游戏开发实战话题可以查看本系列的所有内容。

本节主要内容:使用本地缓存来记录玩家的设置以及各种类型数据的本地缓存和读取操作。

如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。


本地缓存就是将数据存储在玩家的手机上,例如玩家的得分或者关卡存档,这样当下次打开游戏时,就可以通过读取已经的存储在本地的数据,对游戏中的内容进行设置。


在“精致1010”游戏中,我使用了本地缓存的功能,将玩家的声音和振感设置进行了缓存,这样当玩家下次进入到游戏时,就会恢复之前的设置。


下面,就就让我们来看一下,如何实现这个缓存设置的功能。


首先,需要添加“本地缓存”的插件。点击功能区的“添加插件”按钮。

640.png


在弹出的“管理插件”对话框中,打开“本地缓存”插件。

640.png


打开后,回到积木区的“插件”中,就能够看到与本地缓存有关的积木了。

640.png


简单解释一下这些积木块的意思。


  • 设置缓存 KEY 的值为 VALUE : 将某个值 value 存储在本地,并且为它设置一把钥匙 key,通过这个钥匙 key,就能够找到这个存储在本地的值 value。钥匙和值是一一对应的关系,就是说每把钥匙对应一个唯一的值。因此,当你需要存储多个值时,就需要对应的设置多把钥匙才行。

  • 删除缓存 KEY 的值:删除掉本地存储的钥匙 key ,以及其对应的值 value。

  • 清空全部存储值:删除掉本地存储的所有的钥匙 key ,以及对应的值 value。

  • 获取缓存 KEY 的值:通过唯一的钥匙 key ,拿到那个与它对应的值。

  • 缓存 KEY 是否存在:判断是否存在钥匙 key,如果钥匙不存在的话,也就意味着也不存在本地存储的值了。


接着我们直接看一下控制声音设置的积木块。

640.png

我们设置了一把叫做“声音”的钥匙 key,然后为其设置了一个用于判断声音是否开关的值 value,这个值只有两个状态,0 表示声音关,1 表示声音开。


在游戏启动后,首先去判断“声音”的钥匙 key 是否存在,存在的话,就读取一下这个本地的值,将它设置到全局变量“全局-声音”中,然后根据这个全局变量来设置声音按钮上显示的文字。


当声音设置的按钮被点击时,通过全局变量“全局-声音”来判断当前的声音是开还是关,如果开着的话,就将其关闭,反之,就将其打开。最后再将设置后的全局变量“全局-声音”的值存储到本地。


这样就实现了一个声音按钮控制,并且会将玩家的设置保存到本地,这样下次打开游戏后,就会还原到先前的设置了。

640.gif


除了缓存像 0,1,2 这样的整数,也可以缓存文字,例如“我是一段要缓存的文字”,另外,也可以将数据中的列表,表格,对象进行缓存,下面,就讲一下其它数据的缓存和读取的方法。


## 表格的缓存和读取


假设我们要缓存一个 5x5 的表格。


640.png

如图,我们创建了两个 5x5 的表格数据,一个是“要缓存的表格”,放置将要缓存的数据,另一个是“游戏中的表格”,在游戏中使用,每次游戏开始时,会将本地缓存的表格数据读取到“游戏中的表格”中。


这是要缓存的表格,第一行数据为 1 。

640.png


这是游戏中的表格,所有数据都为 0 。

640.png


下面,就实现一下这样的例子,先将“要缓存的表格”中的数据存到本地,然后,再通过读取本地的数据来设置“游戏中的表格”。


在游戏中放置两个按钮,点击“存储”时,会将“要缓存的表格”的数据存储到本地。点击“读取”时,会读取本地存储的数据到“游戏中的表格”中。

640.png


首先,看一下“存储”按钮上的逻辑。

640.png

很简单,点击后直接使用缓存积木块缓存整个表格的数据即可,这里我们将钥匙 KEY 命名为了“表格”。


再来看一下“读取”按钮上的逻辑。

640.png

点击后,直接使用赋值积木块,将缓存表格中的值设置到“游戏中的表格”中。


下面,我们点击调试一下看看,“游戏中的表格”是否能够成功设置。


游戏运行后,先点击“存储”,将“要缓存的表格”数据存储在本地,然后再接着点击“读取”,读取数据到“游戏中的表格”。

640.png

上图中你会发现,“游戏中的表格”并没有被设置(第一行不是 1),但是下方莫名其妙的出现了一个 undefined 变量,在这个变量中存储了我们本来要设置到“游戏中的表格”中的数据。


这可能是开发工具的问题,但是这证明我们无法直接将读取到的本地表格的数据直接设置到“游戏中的表格”中。


那么,如何解决这个问题呢?我们可以通过创建一个临时变量,先将读取到的本地表格数据存储在临时变量中,然后再通过循环逐个的将临时变量表格中的数据设置到“游戏中的表格”中。


先创建几个变量。

640.png

如图,新建了三个变量,“临时变量”用于存储读取到的本地表格数据,“行号”和“列号”用于双重循环。


接着,再来看一下我们修改后的读取逻辑。

640.png


再次调试一下,点击“读取”。

640.png

这次“游戏中的表格”被正常设置了,“全局-临时变量”中也存储了我们读取的数据,整个过程是这样的,我们先将读取到的本地表格数据存储到“全局-临时变量”中,然后再通过循环,逐个的将“全局-临时变量”中的数据设置到“游戏中的表格”中。


这就是存储和读取表格数据的方案了,看起来有点儿绕,至少在官方出来更好用的方案之前,大家可以先使用这个去满足当前的需求。


##列表的缓存和读取


读取列表跟读取表格是一样的道理,也是先将读取到的内容存储到一个“临时变量”中,然后再通过循环将列表中的每个数据设置到“游戏中的列表”中。


列表的存储。

640.png


列表的读取。

640.png


## 对象的缓存和读取


对象的缓存和读取也一样,不同的是对象无法使用循环进行遍历,只能去手动的设置每一个 key 的 value。


对象的存储。

640.png


对象的读取。

640.png


这一节的内容就到这里了,总结一下,首先我们讲了如何利用本地缓存来实现游戏中的声音设置的存储,接着讲了各种数据类型的本地缓存和读取操作。也许在未来,微信小游戏制作工具的官方会优化数据读取的操作,让其像数据存储操作一样的容易,只需要用一个积木块进行赋值即可。但是,在这之前,我们可以先使用这种稍微绕弯一点儿的方式来满足当前的需求。


欢迎关注我的公众号,了解更多与游戏开发有关的教程和内容,如果你有对游戏开发感兴趣的朋友,也欢迎把这个系列文章推荐给他。

相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
488 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
546 1
|
1月前
|
数据可视化 前端开发 小程序
5G时代-探索微信小游戏
5G时代-探索微信小游戏
24 2
5G时代-探索微信小游戏
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
193 1
|
1月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
19 2
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
63 5
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
550 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
28天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
30 0
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
322 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
491 0