当前位置:   article > 正文

unity微信小游戏——排行榜_unity 微信排行榜

unity 微信排行榜

1.微信公众平台配置排行榜

设置时记住排行榜唯一标识

2.微信公众平台配置获取微信好友信息权限 同登录篇第一步Unity微信小游戏——登录 获取用户头像名称-CSDN博客

3.Unity搭建排行榜UI

此处建议使用官方案例的UI进行修改

minigame-unity-webgl-transform: Unity WebGL 微信小游戏适配方案 (gitee.com)

Demo\Ranking这个项目就是

1.新建Canvas

此处要选择Overlay 否则排行榜会无法拖动

此处RankingBox默认状态为SetActive(false)

bg:排行榜背景 也可以把背景让在RankingBox上

image:一般放排行榜标题 可有可无

sharedCanvas:RawImage 旋转X需要设置为180 否则排行榜会颠倒,排行榜数据就显示范围在这里设置

RankMask:当成退出按钮就好 可按照自己需求设置位置大小 

4.脚本

RankBody为sharedCanvas

RankingBox为RankingBox

  1. using Game.Tools;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4. using UnityEngine;
  5. using UnityEngine.UI;
  6. using WeChatWASM;
  7. [System.Serializable]
  8. public class OpenDataMessage
  9. {
  10. // type 用于表明时间类型
  11. public string type;
  12. public int score;
  13. }
  14. public class WXRank : MonoBehaviour
  15. {
  16. /// <summary>
  17. /// 显示排行榜数据内容
  18. /// </summary>
  19. public RawImage RankBody;
  20. /// <summary>
  21. /// 排行榜
  22. /// </summary>
  23. public GameObject RankingBox;
  24. private void Start()
  25. {
  26. }
  27. /// <summary>
  28. /// 渲染排行榜
  29. /// </summary>
  30. private void ShowOpenData()
  31. {
  32. Debug.Log("显示排行榜");
  33. RankingBox.SetActive(true);
  34. // 注意这里传x,y,width,height是为了点击区域能正确点击,x,y 是距离屏幕左上角的距离,宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的。
  35. /**
  36. * 如果父元素占满整个窗口的话,pivot 设置为(0,0),rotation设置为180,则左上角就是离屏幕的距离
  37. * 注意这里传x,y,width,height是为了点击区域能正确点击,因为开放数据域并不是使用 Unity 进行渲染而是可以选择任意第三方渲染引擎
  38. * 所以开放数据域名要正确处理好事件处理,就需要明确告诉开放数据域,排行榜所在的纹理绘制在屏幕中的物理坐标系
  39. * 比如 iPhone Xs Max 的物理尺寸是 414 * 896,如果排行榜被绘制在屏幕中央且物理尺寸为 200 * 200,那么这里的 x,y,width,height应当是 107,348,200,200
  40. * x,y 是距离屏幕左上角的距离,宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的
  41. * 如果是Scale With Screen Size,且设置为以宽度作为缩放,则要这要做一下换算,比如canavs宽度为960,rawImage设置为200 则需要根据 referenceResolution 做一些换算
  42. * 不过不管是什么屏幕适配模式,这里的目的就是为了算出 RawImage 在屏幕中绝对的位置和尺寸
  43. */
  44. CanvasScaler scaler = gameObject.GetComponent<CanvasScaler>();
  45. var referenceResolution = scaler.referenceResolution;
  46. var p = RankBody.transform.position;
  47. WX.ShowOpenData(RankBody.texture, (int)p.x, Screen.height - (int)p.y, (int)((Screen.width / referenceResolution.x) * RankBody.rectTransform.rect.width), (int)((Screen.width / referenceResolution.x) * RankBody.rectTransform.rect.height));
  48. }
  49. /// <summary>
  50. /// 显示排行榜
  51. /// </summary>
  52. public void Show()
  53. {
  54. SetUserScore();
  55. ShowOpenData();
  56. //显示排行榜
  57. OpenDataMessage msgData = new OpenDataMessage();
  58. msgData.type = "showFriendsRank";
  59. string msg = JsonUtility.ToJson(msgData);
  60. WX.GetOpenDataContext().PostMessage(msg);
  61. }
  62. /// <summary>
  63. /// 设置开放域数据 (要排行的数据)
  64. /// </summary>
  65. /// <param name="msgData"></param>
  66. public void SetUserScore()
  67. {
  68. OpenDataMessage message = new OpenDataMessage();
  69. message.type = "setUserRecord";
  70. message.score = 123;
  71. string msg = JsonUtility.ToJson(message);
  72. WX.GetOpenDataContext().PostMessage(msg);
  73. Debug.Log("每日杀敌数:" + message.score);
  74. }
  75. /// <summary>
  76. /// 隐藏排行榜
  77. /// </summary>
  78. public void Hide()
  79. {
  80. RankingBox.SetActive(false);
  81. WX.HideOpenData();
  82. }
  83. }

5.其他配置

1.WX-WASM-SDK-V2\Runtime\wechat-default\open-data\index.js

RANK_KEY修改为在微信公众配置的唯一标识

setUserRecord会随机为自己生成一条数据 如不需要删掉就可以了

2.WX-WASM-SDK-V2\Runtime\wechat-default\open-data\render\styles\friendRank.js

此处为设置排行榜内每条数据位置 大小 等信息

可以直接在微信开发者工具里修改该脚本来看查看效果

3.WX-WASM-SDK-V2\Runtime\wechat-default\open-data\render\tpls\friendRank.js

此处为设置排行榜显示条数 UI图片和文本内容等相关内容 按照自己需求配置即可

4.转微信小游戏时需要勾选使用好友关系链

5.后续微信开发者工具打开时可能会报错 提醒应该是需要配置一个相关插件 按照官方指导安装就可以了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/369422
推荐阅读
相关标签
  

闽ICP备14008679号