使用minigame-unity-webgl-transform项目转的微信小游戏该如何使用此引擎
Closed this issue · 10 comments
在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使用的例子
这种需求一定要使用开放数据域的方式吗, 限制会比较多
不是为了绘制好友排行榜之类的需求么？我好奇什么场景非要在unity外绘制一个界面？
如果不是开放数据域的场景，那么也不复杂，参照这里的实现，将
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的实现也复刻一份。
需求是游戏和SDK页面分离, 这样SDK的页面就可以独立于游戏编写, 也不必每次都去把unityi游戏重新打包为小游戏了, 只需要替换js实现即可. 要是使用离屏canvas渲染那渲染纹理是如何获取的那?, 有没有其它例子可以参考🤔
我的代码如下 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或其他的示例 感谢🙏
emm，不是这样的，我还是好奇你这里SDK在干啥，是小游戏的SDK，会绘制一些游戏活动到屏幕上么？demo的话，看明天有没有时间搞一个。
https://forum.unity.com/threads/texture2d-createexternaltexture-from-a-webgl-texture.1267220/
如果跟开放数据域没关系，这个帖子应该能够解决你的问题。
嗯,显示一些独立于游戏的活动页面, 这个方法我试一下
我在unity创建了一个纹理然后使用离屏canvas来替代了sharedCanvas成功渲染出页面了,
https://forum.unity.com/threads/texture2d-createexternaltexture-from-a-webgl-texture.1267220/
这个帖子我还没实现, 但纹理实际也是在unity层创建的, 貌似无法在js层直接创建纹理使用.