第一次使用Egret开发微信小游戏经验总结(包括排行榜排序,每周一数据清零,超越好友等处理)

本文主要是介绍第一次使用Egret开发微信小游戏经验总结(包括排行榜排序,每周一数据清零,超越好友等处理),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自:https://blog.csdn.net/xw1110280055/article/details/82469825

最近项目组立项了个小游戏,用Egret(白鹭)开发,本来游戏核心功能2天就完成了,后来准备接入微信好友排行榜的时候,用到了子域,加入分享给好友的时候,图片合成后分享给微信好友有时候不能显示出图片内容。现整理一下,避免大家踩坑。
好友排行榜微信只让我们在开放数据域(后文都简称为”子域”)里面操作(毕竟这是人家最重要最值钱的数据了,不会让我们拿来随便用的),小游戏做好后,想加入排行榜和超越好友等功能,白鹭官方也给出了详细的教程了。目前官网的demo排行榜是分页的,点击查看下一页数据,不能像scrollView那样滚动展示数据,不是我想要的,我看了下其他人做的,说可以用一个项目做游戏,一个项目专门放排行榜,放排行榜的项目直接导出到游戏项目的openDataContext文件夹下。我也试着操作了下,发现坑有点难踩,遇到了个wx.getFileSystemManager not function的错误,后面发现在5.2.2中,使用assetsmananger而不是res,解决方案。而且这样会多引入一次egret和game库,其实好像也就多几百KB而已。第一种方案;这里我着重说一下另外一个方案,就是目前官方demo那种,在js里面直接用canvas做出类似于scrollView那种滚动效果,其实就是监听下Y轴滑动距离,根据滑动距离来处理canvas的位置。
想要排行榜有数据,就先上传用户数据到微信后台,就是托管数据。我是在比赛结束的时候发送一个消息给子域,此消息带上用户分数。

   platform["openDataContext"].postMessage({command: 'updateMaxScore',myScore: _myScore});
    然后在子域的index.js里面监听并处理这个消息
  •  
else if (data.command == 'updateMaxScore') {if (myCurrentScore <= data.myScore) {setUserCloudStorage(data.myScore);}getFriendCloudInfo();
}
  •  
这个setUserCloudStorage加了个上传时间的操作,用于之后通过时间来处理周一数据清零的操作,后面会贴上完整代码。上传新分数后再通过getFriendCloudInfo拿新数据并过滤排序。在排行榜界面先创建一个离屏canvas
  •  
let bitmap_rank = platform["openDataContext"].createDisplayObject(null,this.stageW, rank_item_bg_Group.height, 0);
bitmap_rank.y = 80;
rank_item_bg_Group.addChild(bitmap_rank);
  •  
 效果如下图
  •  

这里写图片描述
rank_item_bg_Group就是图中绿色框部分,在这个上面添加canvas,方便位置调整。然后传消息给后台根据是否有shareTicket来显示是好友排行榜还是群排行榜。

        let delayTime = 0;if(game.myShareTicket != undefined && game.myShareTicket != ""){delayTime = 1000;}setTimeout((e)=> {platform["openDataContext"].postMessage({command: "open",shareTicket: game.myShareTicket});}, delayTime);

如果是打开群排行榜,则需要延时来处理群排行榜数据。子域对应消息处理如下:

    if (data.command == 'open') {//创建并初始化startIndex = 0;if (data.shareTicket && data.shareTicket != "") {getGroupCloudStorage(data.shareTicket);setTimeout((e) => {createScene();createMyScene();}, 500);} else {createScene();createMyScene();}} 

createScene创建的是除图上红色框之外的排行榜内容,createMyScene创建的是我的内容,就是红色框那块,其实可以合并到一起的,后期再整理一下。微信头像和图片一样做一下预加载,先拿到头像数据保存起来,再预加载。

function preloadAvatarUrl() {let preloaded = 0;let count = 0;for (let asset in avatarUrlList) {count++;const img = wx.createImage();img.onload = () => {preloaded++;if (preloaded == count) {// console.log("头像加载完成");hasLoadRes = true;}}// console.log("src:" + avatarUrlList[asset] + " asset:" + asset);img.src = avatarUrlList[asset];assetsAvatarUrl[asset] = img;}
}
  •  

这个是给排行榜排序,根据用户分数做降序处理。

//给排行榜排序(降序)
var compare = function (prop) {return function (obj1, obj2) {var val1 = obj1[prop];var val2 = obj2[prop];var int1 = val1[0]["value"];var int2 = val2[0]["value"];if (!isNaN(Number(int1)) && !isNaN(Number(int2))) {int1 = Number(int1);int2 = Number(int2);}if (int1 < int2) {return 1;} else if (int1 > int2) {return -1;} else {return 0;}}
}

这个是根据上传分数时带的时间戳判断分数是否是同一周,大致思路是首先新的天数要大于老的天数,周日的天数通过getDay()获取到时是0,转为7,方便处理,然后天数不同通过时间戳差值判断是否在一周内,如果天数相同则判断差值是否在一天内,防止这周一早上10点和下周一早上9点被判断成一周。

//判断是否是同一周
function isSameWeek(oldTime) {oldTime = parseInt(oldTime);var newTime = new Date().getTime();let oneDayTime = 60 * 60 * 24 * 1000;// console.log("now:" + newTime + " old:" + oldTime + " off:" + (newTime - oldTime) + " one:" + (oneDayTime * 7))let oldDate = new Date(oldTime);let newDate = new Date(newTime);let oldDay = oldDate.getDay();let newDay = newDate.getDay();if (newDay == 0) {newDay = 7;}if (oldDay == 0) {oldDay = 7;}let isSame = false;if (oldDay < newDay) {if ((newTime - oldTime) < oneDayTime * 7) {  // 时间相差小于7isSame = true;}} else if (oldDay == newDay) {if ((newTime - oldTime) < oneDayTime) {isSame = true;}}return isSame;
}

platform.js里面也改造了下

    createDisplayObject(type, width, height,offsetY) {sharedCanvas.width = width;sharedCanvas.height = height;const bitmapdata = new egret.BitmapData(sharedCanvas);bitmapdata.$deleteSource = false;const texture = new egret.Texture();texture._setBitmapData(bitmapdata);const bitmap = new egret.Bitmap(texture);bitmap.width = width;bitmap.height = height;bitmap.y = offsetY;if (egret.Capabilities.renderMode == "webgl") {const renderContext = egret.wxgame.WebGLRenderContext.getInstance();const context = renderContext.context;需要用到最新的微信版本调用其接口WebGLRenderingContext.wxBindCanvasTexture(number texture, Canvas canvas)如果没有该接口,会进行如下处理,保证画面渲染正确,但会占用内存。if (!context.wxBindCanvasTexture) {egret.startTick((timeStarmp) => {egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);bitmapdata.webGLTexture = null;return false;}, this);}}return bitmap;}

排行榜好友我是只显示7个,根据Y轴滑动距离来判断显示哪7个数据就行,具体方法看后面代码,写的太多了,大家不一定有耐心看了,好久没写博客,有点乱,好像拆开写比较合适啊。

下面是index.js详细代码,贴了全部代码,发现显示不了那么多。就当附件传上来吧,附件找不到在哪里传,就先直接上传到资源里吧index.js顺便贴几张子域效果图。
这里写图片描述这里写图片描述

20180907补充:
子域的数据可以传给主域了,一个qq群里同学说的,验证了下,的确可以,现分享给大家。
在子域里获取到排行榜数据后,userDataList保存数据然后如下写法:

      let openContext = wx.getSharedCanvas().getContext("2d");openContext["canvas"]["userDataList"] = JSON.stringify(userDataList);

在主域里通过如下写法可以拿到子域保存的排行榜数据,这些就可以在主域直接用ScrollView了,哎,发现的有点晚了啊。

        let openContext = wx.getOpenDataContext();let friendDataList:any;if(openContext["canvas"]["userDataList"]){friendDataList = JSON.parse(openContext["canvas"]["userDataList"]);}console.log("openContext");console.log(openContext);console.log("friendDataList");console.log(friendDataList);

这里写图片描述

 

这篇关于第一次使用Egret开发微信小游戏经验总结(包括排行榜排序,每周一数据清零,超越好友等处理)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1110564

相关文章

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停

如何使用Nginx配置将80端口重定向到443端口

《如何使用Nginx配置将80端口重定向到443端口》这篇文章主要为大家详细介绍了如何将Nginx配置为将HTTP(80端口)请求重定向到HTTPS(443端口),文中的示例代码讲解详细,有需要的小伙... 目录1. 创建或编辑Nginx配置文件2. 配置HTTP重定向到HTTPS3. 配置HTTPS服务器

Python处理函数调用超时的四种方法

《Python处理函数调用超时的四种方法》在实际开发过程中,我们可能会遇到一些场景,需要对函数的执行时间进行限制,例如,当一个函数执行时间过长时,可能会导致程序卡顿、资源占用过高,因此,在某些情况下,... 目录前言func-timeout1. 安装 func-timeout2. 基本用法自定义进程subp

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析