一直以来,使用 creator 在开发 app,还有 h5 小游戏。
有天突然微信小游戏就发布了新闻,他们支持游戏了。厉害的是 creator 直接支持打包为微信小游戏。
虽然激动,但是时间有限,于是就一路磕磕绊绊,踩坑试水,终于在今天正式上线了。
说俩个我觉得应该注意的吧。
-
软件著作权
一定要提前申请。我最后的时间,基本卡在这里,在等证书下来。所以记得早些时间申请,就不会出现等证书下来的状况。 -
包体超过 4M
这个刚开始挺头疼的,不过,creator 团队提供了很不错的解决方案。
出去资源,加上小游戏的开发数据域代码,我的包体只有 3m 多,所以完全没有问题。 -
调试,微信接口使用
分享:
onShareClick() {
if (!window.wx) return;
function success(res) {
dd.challenges.shareOnce();
}
window.wx.updateShareMenu({ withShareTicket: true });
window.wx.onShareAppMessage(
function() {
// 用户点击了“转发”按钮
return {
title: this.randomTitle(),
imageUrl: canvas.toTempFilePathSync({
destWidth: 500,
destHeight: 400
}),
success: success
};
}.bind(this)
);
window.wx.shareAppMessage({
title: this.randomTitle(),
imageUrl: canvas.toTempFilePathSync({
destWidth: 500,
destHeight: 400
}),
success: success
});
}
打开开发数据域:
cc.Class({
extends: cc.Component,
properties: {
display: cc.Sprite
},
onLoad() {
dd.sub = this;
this.close = this.node.getChildByName("close");
this.block = this.node.getChildByName("block");
this.block.active = false;
},
start() {
this.close.active = false;
this._isShow = false;
if (!window.wx) return;
const launch = window.wx.getLaunchOptionsSync();
console.log("launch:", launch);
window.wx.postMessage({
message: "Group",
launch: launch
});
this.tex = new cc.Texture2D();
},
toggle() {
this._isShow = !this._isShow;
this.close.active = this._isShow;
this.block.active = this._isShow;
if (!window.wx) return;
// 发消息给子域
window.wx.postMessage({
message: this._isShow ? "Show" : "Hide"
});
},
closePanel() {
this.toggle();
},
// 刷新子域的纹理
_updateSubDomainCanvas() {
if (!this.tex) {
return;
}
if (!this._isShow) return;
this.tex.initWithElement(sharedCanvas);
this.tex.handleLoadedTexture();
this.display.spriteFrame = new cc.SpriteFrame(this.tex);
},
update() {
if (!window.wx) return;
this._updateSubDomainCanvas();
}
});
开发数据域代码:
cc.Class({
extends: cc.Component,
properties: {
display: cc.Node
},
start() {
this.display.active = false;
this.display.x = 0;
this.display.y = 0;
if (!window.wx) return;
wx.onMessage(data => {
console.log('子收到:', data);
switch (data.message) {
case "Show":{
this._show();
break;
}
case "Hide":{
this._hide();
break;
}
case "Group":{
window.isGroup = data.launch.shareTicket !== undefined;
this.display.active = true;
console.log('lanuch group', window.isGroup);
break;
}
default: {
break;
}
}
});
},
_show() {
this.display.active = true;
// this.display.x = 0;
// this.display.y = 0;
// let moveTo = cc.moveTo(0.5, 0, 0);
// this.display.runAction(moveTo);
},
_hide() {
this.display.active = false;
// let moveTo = cc.moveTo(0.5, 0, 1000);
// this.display.runAction(moveTo);
// this.display.x = 0;
// this.display.y = 2000;
}
});
抓取排行榜数据
微信小游戏的排行榜分为群数据和好友数据俩种。
刚开始我还各种判断,后来发现在开发数据域里这样写就好了。
先去拉取 group,如果 fail 了,再去拉取好友。
onEnable() {
this.getGroup();
}
getGroup(){
wx.getGroupCloudStorage({
keyList: ["maxScore", "challengesMax", "skinsMax"],
success: function(data) {
const datas = data.data;
const all = this.handleData(datas)
this.fresh(all);
}.bind(this),
fail: function(){
this.getFriend();
}.bind(this)
})
},
getFriend() {
wx.getFriendCloudStorage({
keyList: ["maxScore", "challengesMax", "skinsMax"],
success: function(data) {
const datas = data.data;
const all = this.handleData(datas)
this.fresh(all);
}.bind(this)
});
},
某天发现 fps 掉到 30 了,游戏逻辑也没动过,找了好久,最后发现是开发数据域的问题。
因为我参考的是官方的 demo,也没怎么改。
// 刷新子域的纹理
_updateSubDomainCanvas() {
if (!this.tex) {
return;
}
if (!this._isShow) return; // 加了这行在代码里,就好了。
this.tex.initWithElement(sharedCanvas);
this.tex.handleLoadedTexture();
this.display.spriteFrame = new cc.SpriteFrame(this.tex);
},
update() {
if (!window.wx) return;
this._updateSubDomainCanvas();
}
问问论坛大佬,你们都是如何推广你们的小游戏的?
最后欢迎大家给我提优化建议,谢谢。