Cocos Creator之微信小游戏的游戏圈

Cocos Creator之微信小游戏的游戏圈

1、官方文档游戏圈使用指南 · 小游戏；
2、需要将游戏圈放到指定地方（比如下图，坐标为x:160,y:850，因为游戏圈图标的锚点在左上角，所在层的锚点也在左上角）；

3、如果是将游戏圈按钮放到某个指定按钮的位置，按钮所在层的锚点为左下角（0，0），则： 3.1、获取指定按钮的坐标：
let x = this.按钮.node.x;
let y = this.按钮.node.y;
3.2、获取逻辑屏幕宽高：
let windowSize = cc.view.getVisibleSize();

3.3、得出该位置对应于左上角的比例：
let leftRatio = this.x / windowSize.width;
let topRatio = this.y / windowSize.height;

3.4、获得实际手机的屏幕宽高：
let sysInfo = wx.getSystemInfoSync();

3.5、得出应该放置的对应于left和top的距离：
this.leftPos = sysInfo.windowWidth * leftRatio;
this.topPos = sysInfo.windowHeight * topRatio;

3.6、创建游戏圈按钮：
let self = this;
this.clubButton = wx.createGameClubButton({
icon: ‘light’,
style: {
left: self.leftPos - 20, // 之所以要减20，是因为clubButton的锚点在左上角
top: self.topPos - 20, // 之所以要减20，是因为clubButton的锚点在左上角
width: 40,
height: 40,
}

最终效果如图：

如有问题，欢迎指正，共同学习，谢谢。