微信小游戏:Cocos Creator 常见问题及解决方案

时间:2024-03-16 08:47:39

子域的信息渲染到主域

在我们制作微信小游戏的时候基本上一定会用到排行榜,而制作好友排行榜的时候就涉及到子域问题,子域渲染到主域问题还不是一般的少,这里总结一下我遇到的子域渲染到主域的几个问题:

  1. 子域界面怎么渲染到屏幕上:
    因为子域主要是为了保护用户隐私,主域是不可能拿到子域的任何信息,因此,微信中使用sharedcanvas来实现子域信息渲染。好消息是子域可以自行接收玩家的Touch事件等。

    首先,在主域中创建一个节点,如图所示:
    微信小游戏:Cocos Creator 常见问题及解决方案
    其中可能没有接触过的模块也就是WXSubContentView,这个模块是Cocos Creator为了微信的子域专门新增的模块。这个模块主要解决Touch事件偏离问题。
    然后在这个节点上添加代码,示例如下:这段代码的主要功能就是创建一个Texture2D,把sharedCavas的内容赋值给这个Texture2D,然后通过this.sprite.spriteFrame = new cc.SpriteFrame(this.texture);赋值给精灵。

cc.Class({
    extends: cc.Component,

    onLoad : function () {
        this.texture = new cc.Texture2D();
        this.sprite = this.getComponent(cc.Sprite);
        this.subContextView = this.getComponent(cc.WXSubContextView);
    },

    update (dt) {
        if(cc.sys.platform == cc.sys.WECHAT_GAME)
        {
            var openDataContext = wx.getOpenDataContext();
            var sharedCanvas = openDataContext.canvas;
            this.texture.initWithElement(sharedCanvas);
            this.texture.handleLoadedTexture();
            this.sprite.spriteFrame = new cc.SpriteFrame(this.texture);
        }
        this.subContextView.updateSubContextViewport
    },
});
  1. 子域渲染到sharedCanvas时,除了要显示的内容,其他区域全部为黑屏
    直接把子域中相机的background Color设置为透明的就可以了
    微信小游戏:Cocos Creator 常见问题及解决方案
  2. 子域渲染出的Texture赋值给主域设定好的图片后,图片大小显示不正常
    因为在解决2的问题时我们已经把背景设置为透明的了,所以在主域的目标Sprite模块上,我们就要把Size Mode改为Custom,否则会裁剪掉透明部分。
    微信小游戏:Cocos Creator 常见问题及解决方案
  3. 子域中的Mask模块不起作用
    之前在微信小游戏:主域子域介绍过,子域中只提供了部分接口,所以图片式的mask在子域中是不支持的,子域中,只支持RECT和ELLIPSE两种mask
    微信小游戏:Cocos Creator 常见问题及解决方案

包体大小问题

两个工程都包含引擎代码,加起来大概接近3M,而微信要求主包最大也就是4M,主域和子域两个工程之后几乎什么都做不了了,怎么办呢?我们可以裁剪引擎
依次点击项目->项目设置->模块设置:
取消勾选用不到的模块,可以很大程度的减少包体大小,子域中更是只用到个别几个模块,另外要注意的是CanvasRenderer模块是必须包含的模块
微信小游戏:Cocos Creator 常见问题及解决方案

推广一下自己做的简单的小游戏
微信小游戏:Cocos Creator 常见问题及解决方案
创建了一个小游戏交流群,如果过期或者满了或者有问题交流 可以加我微信 备注“微信小游戏”
微信小游戏:Cocos Creator 常见问题及解决方案
微信小游戏:Cocos Creator 常见问题及解决方案