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之微信小游戏的游戏圈

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

相关文章:

  • 2021-09-08
  • 2021-11-16
  • 2021-08-10
  • 2021-09-05
  • 2021-07-17
  • 2021-05-16
  • 2022-12-23
  • 2022-01-02
猜你喜欢
  • 2021-12-10
  • 2021-04-30
  • 2021-05-01
  • 2021-12-13
  • 2022-12-23
  • 2021-10-20
相关资源
相似解决方案