使用minigame-unity-webgl-transform项目转的微信小游戏该如何使用此引擎

[liangshen001]

在unity中调用了js的openPage方法(模仿微信UnitySDK中调用js的方式), 然后我想在js中绘制一个简单的页面 核心代码如下

const template = `  <view id="container">
    <text id="testText" class="redText" value="hello canvas"></text>
  </view>`;
const style = {
  container: {
    width: 800,
    height: 400,
    backgroundColor: '#f3f3f3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  testText: {
    color: '#ffffff',
    width: '100%',
    height: '100%',
    lineHeight: 400,
    fontSize: 80,
    textAlign: 'center',
  },
  // 文字的最终颜色为#ff0000
  redText: {
    color: '#ff0000',
  }
}
// 绘制一个页面
export function openPage() {
    let canvas = wx.createCanvas();
    let context = canvas.getContext('2d');
    Layout.init(template, style);
    Layout.updateViewPort(canvas.getBoundingClientRect());
    Layout.layout(context);
}

预期效果 可以在游戏的画面上渲染出 hello canvas 的文字

实际效果 代码没有报错也没有任何效果

请问我如何才能实现我想要的效果(核心需求就是想在游戏unity外去绘制一个界面) 或者可以给个配合minigame-unity-webgl-transform使用的例子

[yuanzm]

可以看这里，有Unity示例： https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/tree/main/Demo/Ranking/Assets/WX-WASM-SDK/wechat-default/open-data

[liangshen001]

这种需求一定要使用开放数据域的方式吗, 限制会比较多

[yuanzm]

不是为了绘制好友排行榜之类的需求么？我好奇什么场景非要在unity外绘制一个界面？

[yuanzm]

如果不是开放数据域的场景，那么也不复杂，参照这里的实现，将 https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/blob/main/Demo/Ranking/Assets/WX-WASM-SDK/wechat-default/unity-sdk/open-data.js里面关于 sharedCanvas 的使用换成你自己创建的离屏canvas。不过这里的麻烦点在于你需要跟C#的SDK一样，将showOpenData的实现也复刻一份。

[liangshen001]

需求是游戏和SDK页面分离, 这样SDK的页面就可以独立于游戏编写, 也不必每次都去把unityi游戏重新打包为小游戏了, 只需要替换js实现即可. 要是使用离屏canvas渲染那渲染纹理是如何获取的那?, 有没有其它例子可以参考🤔

[liangshen001]

我的代码如下 showPage方法是从Unity中调用的. 我不太确定纹理是否是这样获取的, 这段代码在调试工具中还是没有任何效果.

function showPage() {
    const cachedSharedCanvas = wx.createCanvas();
    let context = cachedSharedCanvas.getContext('2d');
    // 编写模板字符串
    const template = `<view id="container"><text id="testText" class="redText" value="hello canvas"></text></view>`;
    // 编写样式
    const style = {
        container: {
            width: 400,
            height: 200,
            backgroundColor: '#ffffff',
            justContent: 'center',
            alignItems: 'center',
        },
        testText: {
            color: '#ffffff',
            width: 400,
            height: 200,
            lineHeight: 200,
            fontSize: 40,
            textAlign: 'center',
        },
        // 文字的最终颜色为#ff0000
        redText: {
            color: '#ff0000',
        },
    };
    // 初始化渲染引擎
    Layout.init(template, style);
    cachedSharedCanvas.width = 100;
    cachedSharedCanvas.height = 100;
    // 执行渲染
    Layout.updateViewPort({
        x: 0,
        y: 0,
        width: 100,
        height: 100,
    });
    Layout.layout(context);
    const GL = GameGlobal.manager.gameInstance.Module.GL;
    const gl = GL.currentContext.GLctx;
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, cachedSharedCanvas);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    // 这里的纹理ID是这样获取的吗？
    const textureId = gl.getParameter(gl.TEXTURE_BINDING_2D)
    GL.textures[textureId] = texture
}

希望能给个demo或其他的示例 感谢🙏

[yuanzm]

emm，不是这样的，我还是好奇你这里SDK在干啥，是小游戏的SDK，会绘制一些游戏活动到屏幕上么？demo的话，看明天有没有时间搞一个。

[yuanzm]

https://forum.unity.com/threads/texture2d-createexternaltexture-from-a-webgl-texture.1267220/

如果跟开放数据域没关系，这个帖子应该能够解决你的问题。

[liangshen001]

嗯,显示一些独立于游戏的活动页面, 这个方法我试一下

[liangshen001]

我在unity创建了一个纹理然后使用离屏canvas来替代了sharedCanvas成功渲染出页面了, https://forum.unity.com/threads/texture2d-createexternaltexture-from-a-webgl-texture.1267220/ 这个帖子我还没实现, 但纹理实际也是在unity层创建的, 貌似无法在js层直接创建纹理使用.