Git Product home page Git Product logo

Comments (10)

yuanzm avatar yuanzm commented on June 1, 2024

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

from minigame-canvas-engine.

liangshen001 avatar liangshen001 commented on June 1, 2024

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

from minigame-canvas-engine.

yuanzm avatar yuanzm commented on June 1, 2024

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

from minigame-canvas-engine.

yuanzm avatar yuanzm commented on June 1, 2024

如果不是开放数据域的场景,那么也不复杂,参照这里的实现,将
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的实现也复刻一份。

from minigame-canvas-engine.

liangshen001 avatar liangshen001 commented on June 1, 2024

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

from minigame-canvas-engine.

liangshen001 avatar liangshen001 commented on June 1, 2024

我的代码如下 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或其他的示例 感谢🙏

from minigame-canvas-engine.

yuanzm avatar yuanzm commented on June 1, 2024

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

from minigame-canvas-engine.

yuanzm avatar yuanzm commented on June 1, 2024

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

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

from minigame-canvas-engine.

liangshen001 avatar liangshen001 commented on June 1, 2024

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

from minigame-canvas-engine.

liangshen001 avatar liangshen001 commented on June 1, 2024

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

from minigame-canvas-engine.

Related Issues (17)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.