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

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

1、官方文档游戏圈使用指南 · 小游戏;
2、需要将游戏圈放到指定地方(比如下图,坐标为x:160,y:850,因为游戏圈图标的锚点在左上角,所在层的锚点也在左上角);
Cocos Creator之微信小游戏的游戏圈

3、如果是将游戏圈按钮放到某个指定按钮的位置,按钮所在层的锚点为左下角(0,0),则: 3.1、获取指定按钮的坐标:
let x = this.按钮.node.x;
let y = this.按钮.node.y;
3.2、获取逻辑屏幕宽高:
let windowSize = cc.view.getVisibleSize();
Cocos Creator之微信小游戏的游戏圈
3.3、得出该位置对应于左上角的比例:
let leftRatio = this.x / windowSize.width;
let topRatio = this.y / windowSize.height;
Cocos Creator之微信小游戏的游戏圈
3.4、获得实际手机的屏幕宽高:
let sysInfo = wx.getSystemInfoSync();
Cocos Creator之微信小游戏的游戏圈
3.5、得出应该放置的对应于left和top的距离:
this.leftPos = sysInfo.windowWidth * leftRatio;
this.topPos = sysInfo.windowHeight * topRatio;
Cocos Creator之微信小游戏的游戏圈
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,
}
Cocos Creator之微信小游戏的游戏圈

最终效果如图:
Cocos Creator之微信小游戏的游戏圈

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