当前位置: 首页 > news >正文

Unity微信小游戏接入开放数据域

demo地址:https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/tree/main/Demo/Ranking
官方说明: https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/blob/main/Design/OpenData.md

  1. 准备一个Canvas,保证其渲染模式为:Overlay
    在这里插入图片描述

  2. Canvas中创建一个RawImage,用于确定开放数据域渲染的范围。rotation x = 180
    在这里插入图片描述

  3. 初始化数据域

    private static WeChatWASM.WXOpenDataContext _openDataContext = null;
    public static void InitOpenDataContext()
    {// 初始化开放数据域openDataContext??= WeChatWASM.WX.GetOpenDataContext(new WeChatWASM.OpenDataContextOption{sharedCanvasMode = WeChatWASM.CanvasType.ScreenCanvas});
    }
    
  4. 打开数据域渲染

    void ShowOpenData()
    {RankMask.SetActive(true);RankingBox.SetActive(true);// // 注意这里传x,y,width,height是为了点击区域能正确点击,x,y 是距离屏幕左上角的距离,宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的。/*** 如果父元素占满整个窗口的话,pivot 设置为(0,0),rotation设置为180,则左上角就是离屏幕的距离* 注意这里传x,y,width,height是为了点击区域能正确点击,因为开放数据域并不是使用 Unity 进行渲染而是可以选择任意第三方渲染引擎* 所以开放数据域名要正确处理好事件处理,就需要明确告诉开放数据域,排行榜所在的纹理绘制在屏幕中的物理坐标系* 比如 iPhone Xs Max 的物理尺寸是 414 * 896,如果排行榜被绘制在屏幕中央且物理尺寸为 200 * 200,那么这里的 x,y,width,height应当是 107,348,200,200* x,y 是距离屏幕左上角的距离,宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的* 如果是Scale With Screen Size,且设置为以宽度作为缩放,则要这要做一下换算,比如canavs宽度为960,rawImage设置为200 则需要根据 referenceResolution 做一些换算* 不过不管是什么屏幕适配模式,这里的目的就是为了算出 RawImage 在屏幕中绝对的位置和尺寸*/CanvasScaler scaler = gameObject.GetComponent<CanvasScaler>();var referenceResolution = scaler.referenceResolution;var p = RankBody.transform.position;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));
    }
    
  5. 向数据域发送消息

    OpenDataMessage msgData = new OpenDataMessage();
    msgData.type = "showFriendsRank";string msg = JsonUtility.ToJson(msgData);
    openDataContext.PostMessage(msg);
    
  6. 开放数据域解析并处理消息

    	function main() {wx.onMessage((data) => {console.log('[WX OpenData] onMessage', data);if (typeof data === 'string') {try {// eslint-disable-next-line no-param-reassigndata = JSON.parse(data);}catch (e) {console.error('[WX OpenData] onMessage data is not a object');return;}}switch (data.type) {// 来自 WX Unity SDK 的信息case 'WXRender':initOpenDataCanvas(data);break;// 来自 WX Unity SDK 的信息case 'WXDestroy':Layout.clearAll();break;// 下面为业务自定义消息case 'showFriendsRank':renderFriendsRank(data.rankKey, data.strTag);break;case 'showGroupFriendsRank':renderGroupFriendsRank(data.shareTicket, data.rankKey, data.strTag);break;default:console.error(`[WX OpenData] onMessage type 「${data.type}」 is not supported`);break;}});
    }
    
  7. 修改HTML格式,渲染开放数据域UI

http://www.lryc.cn/news/511070.html

相关文章:

  • Spring Boot的开发工具(DevTools)模块中的热更新特性导致的问题
  • Elasticsearch安装和数据迁移
  • Numpy指南:解锁Python多维数组与矩阵运算(下)
  • 路由器刷机TP-Link tp-link-WDR5660 路由器升级宽带速度
  • VB.NET在 Excel 二次开发中的全面应用
  • uni-app使用组件button遇到的问题
  • 如何在Express.js中处理异常情况?
  • CKA认证 | Day7 K8s存储
  • ArcGIS Pro地形图四至角图经纬度标注与格网标注
  • 策略模式以及优化
  • linux自动化一键批量检查主机端口
  • Vue3入门(9)
  • 《人工智能如何加速药物研发进程:从新药发现到临床试验的突破》
  • “鼎和财险一体化数据安全管控实践”入选信通院金融领域优秀案例
  • 探索多模态大语言模型(MLLMs)的推理能力
  • 72 mysql 的客户端和服务器交互 returnGeneratedKeys
  • 【连续学习之SSL算法】2018年论文Selfless sequential learning
  • 【蓝桥杯——物联网设计与开发】拓展模块5 - 光敏/热释电模块
  • 数字IC后端设计实现十大精华主题分享
  • 高质量配音如何影响游戏的受欢迎度
  • QWidget应用封装为qt插件,供其他qt应用调用
  • UE(虚幻)学习(四) 第一个C++类来控制小球移动来理解蓝图和脚本如何工作
  • 使用FreeNAS软件部署ISCSI的SAN架构存储(IP-SAN)练习题
  • Sql Sqserver 相关知识总结
  • 面试题整理17----K8s中request和limit资源限制是如何实现的
  • Spring Boot @Conditional注解
  • jpeg文件学习
  • c++基于过程
  • FOC软件 STM32CubeMX 使用
  • leetcode hot 100 全排列