网站制作费用

云创建站专注于游戏网站建设平台

云创建站平台提供手游、端游、各种游戏网站建设

咨询热线: 19177286696

CocosCreator-【微信小游戏】小游戏从零开发到上线全过程,了解下!

作者:jcmp      发布时间:2021-02-25      浏览量:0
一周时间,从无到上线的所有开发过程记录如

一周时间,从无到上线的所有开发过程记录如下。小游戏上线由于时间关系,没有接广告(调用微信的API,看完笔记就会了)。小游戏游戏上线3天的流量是4万人左右,端午节的时候哦(没有集大力推广,上线试水),后期用户流失较大(运营的事),小游戏不涉及自己的服务器,只有排行榜是利用的微信的服务器。

主域(主工程)

子域(子工程)

一、游戏内容

1.开发工具

CocosCreator 1.9.1、微信开发工具(最新)、Sublime。

2.游戏本身玩法:游戏玩法逻辑,不作介绍,根据游戏自身写逻辑

3.排行榜:微信统计,只有“分数”一个数据,所有游戏本身的围绕一个分数来展开哦。

4.分享:分享到微信好友或者微信朋友圈

5.需要创建2个工程,主域和子域

二、上线准备工作

三、开发核心点(坑点)

1.主域

1)游戏主工程(排行榜脚本和排行榜资源不能在这里):游戏玩法逻辑,subCanvas渲染,分数提交,分析等逻辑。

2)主域的ui结构:需要创建一个subCanvas

image.png

GameMain.jsvarUIHelper =require("UIHelper")varSHARE_TITLE ="分享标题"varSHARE_IMAGE_URL ="http://47.106.91.153/wechatgame/game_share_icon.png"cc.Class({extends: cc.Component,gameWebSokcet:null,properties: {subCanvas: cc.Sprite, },onLoad:function(){ cc.Client = {} cc.Client.UIHelper =newUIHelper() cc.Client.GameMain =thisthis.updateFlag =false},start:function(){if(window.wx !=undefined) {window.wx.showShareMenu({withShareTicket:true});this.tex =newcc.Texture2D(); } },shareToFriends:function(){if(cc.sys.platform === cc.sys.WECHAT_GAME){ wx.shareAppMessage( {title:"端午大作战",imageUrl:"http://47.106.91.153/wechatgame/game_share_icon.png"}); } },// 刷新子域的纹理_updateSubDomainCanvas:function(){if(window.sharedCanvas !=undefined) {this.tex.initWithElement(window.sharedCanvas);this.tex.handleLoadedTexture();this.subCanvas.spriteFrame =newcc.SpriteFrame(this.tex); } },setUpdateFlag:function(bOn){this.updateFlag = bOn },update:function(dt){if(this.updateFlag){this._updateSubDomainCanvas(); } },})。

this._updateSubDomainCanvas(); 必须刷新,这了我用的标记去控制,就是在打开排行的时候去刷新,关闭排行的时候就不刷新,为什么? 因为,这个东西一直刷新非常非常消耗性能,FPS直接掉30帧,所以在玩游戏的就关闭下,游戏结束,打开排行榜再刷新。

2)发布设置:

image.png

黄色框为资源工程发布的游戏名字(特殊的,子工程发布的时候是发布在主工程发布所有在目录,即主工程的build目录下),对应了主域的子工程名字,发布路径必须是主域的build目录下。

2.子域:只有排行榜脚本和资源在这里

1)子域设置:

image.png

排行数据相关类WXStorageMgr.js

cc.Class({extends: cc.Component,ctor:function(){this.RankListData =undefinedthis.ScoreTag ="x1"//"WXStorage_Score"},SubmitScore:function(score){if(window.wx ==undefined) {return}varself =this//获取云端的历史数据wx.getUserCloudStorage({keyList: [self.ScoreTag],success:function(res){console.log("云端读取成功")varlast_score =0//判断当前分数是否大于历史分数if(res.KVDataList.length !=0) {letval = res.KVDataList[0].value val =parseInt(val)if(typeofval =="number") { last_score = val } }console.log("----历史分数:"+ last_score +"----当前分数:"+ score)if(last_score >= score) {console.log("当前分数没有历史分数高,不用记录")return}//开始记录wx.setUserCloudStorage({KVDataList: [{key: self.ScoreTag,value:""+ score}],success:function(res){console.log("云端记录成功") },fail:function(res){console.log("云端记录失败") }, }) },fail:function(res){console.log("云端读取失败") }, }) },GetRankingData:function(call_back){if(window.wx ==undefined) {return}varself =this//获取自己的信息wx.getUserInfo({openIdList: ["selfOpenId"],success:function(res){console.log(res)//取出自己的user_infoif(res.data.length <=0) {console.log("用户信息读取失败") }letmine_info = res.data[0]//openid//获取朋友的信息wx.getFriendCloudStorage({keyList: [self.ScoreTag],success:function(res){ self.RankListData =newArray() res.data.forEach(function(item,index,array){letnew_item = {} new_item.avatarUrl = item.avatarUrl new_item.isMine = item.avatarUrl == mine_info.avatarUrl new_item.nickName = item.nicknameif(item.KVDataList.length >0) { new_item.score =parseInt(item.KVDataList[0].value) }else{ new_item.score =0} self.RankListData[index] = new_item });if(typeofcall_back =="function") { call_back(self.RankListData) }console.log(self.RankListData) },fail:function(res){console.log("朋友信息获取失败") }, }) },fail:function(res){console.log("用户信息读取失败") } }) },});

排行数据调用过程代码:

UIRank.js部分代码:

varWXStorageMgr =require("WXStorageMgr")varMAX_SHOW_RANK =100varsort =function(ranks){ ranks.sort(function(a, b){returnb.score - a.score })}// 用法:AddClickEvent(this.testBtn, this.node, "BtnFunctionTest", this.__classname__)varAddClickEvent =function(node, target, handler, component){if(!component){ log.error("")return}console.log(node.name +":"+ component +":"+ handler)vareventHandler =newcc.Component.EventHandler() eventHandler.target = target eventHandler.component = component eventHandler.handler = handlervarclickEvents = node.getComponent(cc.Button).clickEvents; clickEvents.push(eventHandler)}// 加载该玩家头像varloadWechatHead =function(node, headSprite, head_url){letimage = wx.createImage() image.onload =function(){lettexture =newcc.Texture2D() texture.initWithElement(image) texture.handleLoadedTexture() headSprite.spriteFrame =newcc.SpriteFrame(texture) } image.src = head_url}cc.Class({extends: cc.Component,properties: {btnChallenge:cc.Node,btnReplay:cc.Node,btnReturn:cc.Node,btnViewAllRank:cc.Node,rankListView:cc.ScrollView,content:cc.Node,rankItem:cc.Prefab,curGetScore:cc.Label,top4Node:cc.Node,selfItem:cc.Node,maxItem:cc.Node,subRank:cc.Node,allRank:cc.Node,uiRank:cc.Node,allRankBtnReturn:cc.Node,btnShareToFriends:cc.Node, }, onLoad () { AddClickEvent(this.btnChallenge,this.node,"onBtnChallenge",this.__classname__) AddClickEvent(this.btnReplay,this.node,"onBtnReplay",this.__classname__) AddClickEvent(this.btnReturn,this.node,"onBtnReturn",this.__classname__) AddClickEvent(this.btnViewAllRank,this.node,"onBtnViewAllRank",this.__classname__) AddClickEvent(this.allRankBtnReturn,this.node,"onAllRankBtnReturn",this.__classname__) AddClickEvent(this.btnShareToFriends,this.node,"shareToFriends",this.__classname__)this.storageMgr =newWXStorageMgr()console.log("rank on load finish") },shareToFriends:function(){if(window.wx ==undefined) {return} wx.shareAppMessage( {title:"粽子大作战",imageUrl:"http://47.106.91.153/wechatgame/duanwugame/res/raw-assets/resources/png/login/l_01.849db.png"}); },start:function(){console.log("rank on start")varself =thisif(window.wx !=undefined) {window.wx.onMessage(function(data){//1:设置分数 2:获取排行数据if(data.type ==1) {console.log("设置分数") self.storageMgr.SubmitScore(data.score) }elseif(data.type ==2) {console.log("获取排行数据")varthat = self self.storageMgr.GetRankingData(function(rank_datas){console.log("-----排行数据获取成功-----") that.onWechatCallback(rank_datas) }) }elseif(data.type ==4){ self.closeRankUI() } }) }console.log("rank on start finish") },onAllRankBtnReturn:function(){this.viewSubRank() },onWechatCallback:function(data){for(vari =0; i < data.length; i++) { data[i] }this.uiRank.active =truethis.ranks = data sort(this.ranks)this.viewTop4PlayerRank(this.ranks)// 自己if(this.getMineInfo(this.ranks)){varinfos =this.getMineInfo(this.ranks)this.setItemInfo(this.selfItem, infos.info, infos.rank) }else{console.log("error self info") }// 最大if(this.ranks[0]){console.log(" max info")this.setItemInfo(this.maxItem,this.ranks[0],1) }else{console.log("error max info") }this.viewSubRank() },

3.分享:坑的是,在pc上的微信开发工具,调试期间没有转发功能,然后我在mac上的微信开发工具调试有转发功能!不知道后期是否修复了。

分析代码:

wx.shareAppMessage( {title:"粽子大作战", imageUrl:"http://47.106.91.153/wechatgame/duanwugame/res/raw-assets/resources/png/login/l_01.849db.png"});

4..ui制作规范:

由于子域不能和主域通信(主域能和子域通信),所有我把排行相关的ui按钮做到了主工程里面,然后按钮发送消息给子工程(这里基本思路,通信的内容用微信的api进行)。

通信代码例子:

returnBegin:function(){this.uiRankTemp.active =falsethis.uiBegin.active =trueif(cc.sys.platform === cc.sys.WECHAT_GAME){window.wx.postMessage({type:4, }); }varself =thisthis.schedule(function(){ self.canvas.getComponent("GameMain").setUpdateFlag(false) },0.1,1) },

image.png

4.远程资源下载

远程资源下载需要讲资源放置到远程服务器上面,仅限( 包体大于4mb), 发布正式版注意事项:需要https域名服务器,域名是备案的域名,调试阶段可以勾选上“不校验合法域名”,发布到手机上需要开启调试模式哦!切记。

image.png

在cocos creaator 发布的时候填写好域名地址,不用加res目录,但是你的远程资源服务器上需要是res目录哦。上传好以后,删除本地res,然后清理缓存,在微信工具里面调试下,资源可以正常下载,就可以进入下面的步骤了。

5.发布开发版本

待上面的工作都做完以后,就可以用手机调试了,在微信工具里面点击预览即可,然后用手机扫二维码在手机上调试。

6.发布体验版本

开发版本ok了以后,上传到微信后台,进入微信后台管理,将提交的版本选为体验版本即可。

7.发布正式版

将体验版本,提交审核,前提是你的所有手续是齐全的,什么软著啊,自审报告啊,等等。

9.微信小游戏服务器相关

============= 单独写一个笔记 ,后续 =============

四、后记

简单的微信小游戏涉及不到服务器的东西,不过后面我开发的几款小游戏都涉及到了服务器,经过上线测试也还算稳定,主要射击到,商城,签到啊之类的,后面将单独写一个笔记关于微信小游戏的发服务器之类的东西,什么分享给好友,好友点击响应等等。

链接:https://www.jianshu.com/p/f7a58bdfe74d。