自己做的小游戏上线啦~感谢creator的一路支持。

一直以来,使用 creator 在开发 app,还有 h5 小游戏。
有天突然微信小游戏就发布了新闻,他们支持游戏了。厉害的是 creator 直接支持打包为微信小游戏。
虽然激动,但是时间有限,于是就一路磕磕绊绊,踩坑试水,终于在今天正式上线了。
说俩个我觉得应该注意的吧。

  1. 软件著作权
    一定要提前申请。我最后的时间,基本卡在这里,在等证书下来。所以记得早些时间申请,就不会出现等证书下来的状况。

  2. 包体超过 4M
    这个刚开始挺头疼的,不过,creator 团队提供了很不错的解决方案
    出去资源,加上小游戏的开发数据域代码,我的包体只有 3m 多,所以完全没有问题。

  3. 调试,微信接口使用
    分享:

 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();
}

问问论坛大佬,你们都是如何推广你们的小游戏的?

最后欢迎大家给我提优化建议,谢谢。

1赞

1.小游戏有缓存机制,缓存大小是50M,包括图片缓存和文本缓存;

2.缓存文件不会失效,即使加了md5,缓存文件依然在缓存里。

玩了一下你的小游戏,我发现真好玩,我再也不是手残党了,我居然也能超过10分了。。。。真好玩。

唯一的不足:除了游戏场景,美术不错,其它的场景美术设计师跑路了吗?

加md5应该是应用在,比如主界面的颜色修改,文件名不变的前提下,发了版本,由于md5的不同,纵使用户有缓存,依然会找最新的那种。

不错哈,谢谢。

不错,挺好玩

感谢肯定

mark 一下

恭喜你自己的小游戏上线,怎么联系你啊~~

你小游戏不错哦,我们可以帮忙推广. 怎么联系你

要不要换量

我的qq号。157354966

适配好像有点问题

可以详细说下吗?感谢

你好 ,我想问一下你的IOS微信 自动播放声音是如何解决的?我遇到一个问题就是IOS没有办法自动播放声音,安卓的一切正常,IOS只有交互后才会播放声音!!

我没有遇到这个问题,启动起来,我会主动调用一下play,然后就有声音了。我用的是1.10

mark下 玩了下小游戏界面适配需要优化下

不对啊 我看你的是进去就自动播放背景音乐了啊,遇到的问题就是即使调了play也不能主动播放

感谢,能说下机型吗?

const DataEnum = require('./data/DataEnum');

cc.Class({
    extends: cc.Component,
    properties: {
        target: {
            default: null,
            type: cc.Node
        },
        bgm: {
            type: cc.AudioClip,
            default: null
        },
    },
    onLoad() {
        dd.audio = this;
        this.mute(dd.data.get(DataEnum.isMute));
        this.bgmId = -1;
    },
    onEnable() {
        this.node.on('mutex', this.onMutex, this);
        this.target.on('isPause', this.onPause, this);
        this.target.on('isStart', this.onStart, this);
    },
    onDisable() {
        this.node.off('mutex', this.onMutex, this);
        this.target.off('isStart', this.onStart, this);
        this.target.off('isPause', this.onPause, this);
    },
    onPause(event) {
        let isPause = event.detail;
        this._toogleBGM(!isPause);
    },
    onStart() {
        this._toogleBGM(true);
    },
    play(filePath, loop, volume) {
        if(dd.isMute){
            return -1;
        }
        return cc.audioEngine.play(filePath, loop, volume);
    },
    stop(audioId) {
        cc.audioEngine.stop(audioId);
    },
    onMutex(event){
        this.mute(event.detail);
        this._toogleBGM(!event.detail);
    },
    mute(bool) {
        this.node.mutex = bool;
        dd.isMute = bool;
        dd.data.set(DataEnum.isMute, bool);
        dd.data.save(DataEnum.isMute);
        if (bool) {
            cc.audioEngine.pauseAll();
        } else {
            cc.audioEngine.resumeAll();
        }
    },
    _toogleBGM(bool) {
        if(dd.isMute) return;
        if (this.bgmId !== -1) {
            this.bmgId = -1;
            this.stop(this.bgmId);
        }
        if (bool) {
            this.bgmId = this.play(this.bgm, true, 1);
        }
    }
});

我代码在这里,我也不知道为啥不一样。

我换了最新的版本,就可以播放了,之前是1.9.2