微信小游戏插屏图片如何复用

Creator 3.x
#1

我有图片，用在了两个地方：
一个是项目设置的【插屏设置】中，将它用做了插屏
另一个是在游戏的初始场景中，将它加入了scene作为背景（以精灵的形式）。

构建时选择了初始场景分包。

这样打包出来的微信小游戏包，发现主包中这张插屏图片有2份复制，一份是在初始包外面的、应该专门用于插屏的；另一份是被打包在初始场景分包里的。造成了资源的浪费。

请问有什么办法可以避免上述情况下同一方图片复制2份的问题吗？

#2

这种情况其实没办法，图片不大的话分两份也清晰。
如果真要想省那么点：
包里面的图片会在打包的时候被加上md5，所以让插屏用包里面的图片大概率没戏。
只能是包里面用到这张图片的地方，用代码动态加载创建。但是这样显然又有点折磨自己。。。

#3

我想到了分两张图的思路，插屏的图可以糊一点，进入到场景内以后再换成高清原图。这个可以作为保底方案。
还是想问一下，代码动态加载创建的话，在代码里该如何定位到这张用作插屏的图片的路径呢？

#4

插屏的图片打包出来的路径应该是不变的吧，用你的window.location.origin + 路径，不就能下载到这张图片了嘛

1赞
#5

意思是把它当做远程图片用loadRemote + 文件路径来加载吗？

#6

可以只用插屏的一张图片 微信是用image.src = "splash.png"加载的插屏图片，可以将image这个对象存到全局里面，然后在场景里面获取到这个image，然后通过下面脚本将图片放到场景图片上
const imageAsset = new cc.ImageAsset(image);
const texture = new cc.Texture2D();
texture.image = imageAsset;
const spriteFrame = new cc.SpriteFrame();
spriteFrame.texture = texture;

1赞
#7

没看懂这个 image.src = “splash.png” 是什么意思啊？ “splash.png” 这个值是固定的吗还是你用来举例子的？ 可以说一下微信game.js里的代码长啥样吗

#8

function start(alpha, antialias, useWebgl2) {

options.alpha = alpha === 'true' ? true : false;

options.antialias = antialias === 'false' ? false : true;

if (useWebgl2 === 'true') {

    gl = window.canvas.getContext("webgl2", options);

}

// TODO: this is a hack method to detect whether WebGL2RenderingContext is supported

if (gl) {

    window.WebGL2RenderingContext = true;

} else {

    window.WebGL2RenderingContext = false;

    gl = window.canvas.getContext("webgl", options);

}

initVertexBuffer();

initProgressVertexBuffer();

initTexture();

program = initShaders(VS_LOGO, FS_LOGO);

programProgress = initShaders(VS_PROGRESSBAR, FS_PROGRESSBAR);

tick();

return loadImage('splash.png').then(() => {

    updateVertexBuffer();

    updateTexture();

    return setProgress(0);

});

}

function loadImage(imgPath) {

return new Promise((resolve, reject) => {

    image = new Image();

    image.premultiplyAlpha = false;

    image.onload = function() {

        resolve(image);

    };

    image.onerror = function(err) {

        reject(err);

    };

    image.src = imgPath.replace('#', '%23');

});

}
这个就是插屏渲染的逻辑 把image这个插屏的image存起来用就行

1赞
#9

明白了。感谢！

#10

我试了用loadRemote加载打包出来的插屏图片的方法。有两个问题说明一下：

  1. 加载路径不需要加上 window.location.origin 这个前缀，这个前缀在我调试时会解析为 https://127.0.0.1:xxxx 。在微信环境下会无法通过合法域名检测，导致下载失败。直接不加前缀使用文件路径即可正常加载。
  2. 这个方案会有一个短暂的黑屏：在进入第一个场景后，插屏的图片就会被卸载掉了；而下载插屏图片被设置为当前场景的背景会有0.1秒左右的过程，这期间会黑屏一下，下载完成后才能正常显示。

最后采用了 微信小游戏插屏图片如何复用 和 微信小游戏插屏图片如何复用 两个楼里说的方案。 略微改一下引擎生成的 first-screen.js 文件，其中有加载插屏的函数，在加载完插屏后把图片结果挂在一个全局变量上。然后在初始场景的onLoad函数中直接使用即可，这样不会出现黑屏。