Cocos Creator 微信小游戏平台启动与包体优化（首屏渲染耗时降低 50%）

SmallMain · 2020年08月5日 13:12

统一回复一下

文章最后面已经提供了修复的思路。

这里是没有找到 engine-loader.js 的导出模块，是不是构建目录内没有放 engine-loader.js 文件，或者没有 require 使用之类的。

863559577:

版本240 构建面板里，没有勾选允许分离引擎其他的都是按照上面说的做的，但出现这个了没弄明白哪里的问题，查了半天这个错误也不知道为什么，请指点一下哪里错了是？开发工具里清了缓存什么的也不行VM176:1 MiniProgramErrorThis application has not registered any plugins yet.Error: This application has not registered any plugins yet. at t.checkWxConfig (http://127.0.0.1:20366/game/dev/WAGame.js94985) at t.requirePlugin (http://127.0.0.1:20366/game/dev/WAGame.js95641) at http://127.0.0.1:20366/game/engine/game.js:8:1 at require (http://127.0.0.1:20366/game/dev/WAGame.js98112) at :1:50 at doWhenAllScriptLoaded (:45:14) at HTMLScriptElement.scriptLoaded (:63:7) at HTMLScriptElement.script.onload (:71:22)

这里是因为你按文章内容放 build-templates 构建模版的时候，里面的 game.js 文件是勾了引擎分离构建出来的，你可以搜一下一定有 requirePlugin 这个函数调用，重新取消勾选引擎分离之后构建，按上文再做一遍。

可能看的是 IOS 的数据，统计可能有问题，可以按照上面的思路改一下，做了后首屏渲染耗时是一定会有下降的。

1018967523 · 2020年08月10日 07:17

老哥，我想咨询一下，自定义渲染的首屏图片会变形，咋弄

863559577 · 2020年08月18日 06:16

2.4.2的，一切照做，首屏出现，引擎子包加载正常，没有任何错误信息，但一直停在首屏那里没有出现游戏逻辑的场景请问是哪里出了错误？
可能是哪个配置文件搞错了，打扰了

wingser · 2020年08月18日 06:01

android 和ios都看了，没有明显变化，要说有变化还下降了一点点（首屏打开留存率）

imusthit · 2020年09月12日 08:40

横屏游戏 android可以 ios不行

imusthit · 2020年09月12日 08:48

“deviceOrientation”: “portrait” 这个配置改成landscape ios就炸了

24283959 · 2020年09月14日 01:19

感谢UP分享，在你的基础上，可以把首场景单独打包，资源再分包。首包压到了100kb，美滋滋。

863559577 · 2020年09月14日 03:34

连好友系统都没有，你这个程度没有什么太多实用价值，只能追求个极限测试算

ni94wei1 · 2020年09月22日 12:26

关于这段还有点不解, 这段加在哪里呢? 我对于gl这块不太熟, 调整了几次发现高端机分数还是比较低.

ni94wei1 · 2020年09月22日 12:26

非常感谢, 关于requestAnimationFrame这段还有点不解, 这段加在哪里呢? 我对于gl这块不太熟, 调整了几次发现高端机分数还是很低.

2817268478 · 2020年09月23日 04:02

首屏绘制那个脚本最下面就行

448140908 · 2020年10月16日 02:49

首屏渲染和引擎分包接入都可行，性能也提升了很多，但是首屏渲染的图在部分机型中会抛出异常"[wxgl]Error: toDataURL() not supported for this context"，请问这个怎么解决

lv_midsummer · 2020年10月20日 03:03

first_render.js代码中存在细微错误，可能会导致微信小游戏 ios的首屏渲染耗时异常。
建议写法如下：

`var VSHADER_SOURCE =
‘attribute vec4 a_Position;\n’ +
‘attribute vec2 a_TexCoord;\n’ +
‘varying vec2 v_TexCoord;\n’ +
‘void main() {\n’ +
’ gl_Position = a_Position;\n’ +
’ v_TexCoord = a_TexCoord;\n’ +
‘}\n’;

var FSHADER_SOURCE =
‘#ifdef GL_ES\n’ +
‘precision mediump float;\n’ +
‘#endif\n’ +
‘uniform sampler2D u_Sampler;\n’ +
‘varying vec2 v_TexCoord;\n’ +
‘void main() {\n’ +
’ gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n’ +
‘}\n’;

const VERTICES = new Float32Array([
-1, 1, 0.0, 1.0,
-1, -1, 0.0, 0.0,
1, 1, 1.0, 1.0,
1, -1, 1.0, 0.0,
]);

var INITENV = false;
var TEXTURE, USAMPLE, IMAGE;

function initShaders(gl, vshader, fshader) {
var program = createProgram(gl, vshader, fshader);
if (!program) {
console.log(‘Failed to create program’);
return false;
}

gl.useProgram(program);
gl.program = program;

return true;

}

function createProgram(gl, vshader, fshader) {
// Create shader object
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
if (!vertexShader || !fragmentShader) {
return null;
}

// Create a program object
var program = gl.createProgram();
if (!program) {
    return null;
}

// Attach the shader objects
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// Link the program object
gl.linkProgram(program);

// Check the result of linking
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
    var error = gl.getProgramInfoLog(program);
    console.log('Failed to link program: ' + error);
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
}
return program;

}

function loadShader(gl, type, source) {
// Create shader object
var shader = gl.createShader(type);
if (shader == null) {
console.log(‘unable to create shader’);
return null;
}

// Set the shader program
gl.shaderSource(shader, source);

// Compile the shader
gl.compileShader(shader);

// Check the result of compilation
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
    var error = gl.getShaderInfoLog(shader);
    console.log('Failed to compile shader: ' + error);
    gl.deleteShader(shader);
    return null;
}

return shader;

}

function initVertexBuffers(gl, vertices) {
var verticesTexCoords = vertices || new Float32Array([
// Vertex coordinates, texture coordinate
-1, 1, 0.0, 1.0,
-1, -1, 0.0, 0.0,
1, 1, 1.0, 1.0,
1, -1, 1.0, 0.0,
]);

var n = 4; // The number of vertices

// Create the buffer object
var vertexTexCoordBuffer = gl.createBuffer();
if (!vertexTexCoordBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
}

// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);

var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
//Get the storage location of a_Position, assign and enable buffer
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
gl.enableVertexAttribArray(a_Position);  // Enable the assignment of the buffer object

// Get the storage location of a_TexCoord
var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
if (a_TexCoord < 0) {
    console.log('Failed to get the storage location of a_TexCoord');
    return -1;
}
// Assign the buffer object to a_TexCoord variable
gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
gl.enableVertexAttribArray(a_TexCoord);  // Enable the assignment of the buffer object

return n;

}

function initTextures(gl, n, imgPath) {
var texture = gl.createTexture(); // Create a texture object
if (!texture) {
console.log(‘Failed to create the texture object’);
return [null, null, null, false];
}

// Get the storage location of u_Sampler
var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
if (!u_Sampler) {
    console.log('Failed to get the storage location of u_Sampler');
    return [null, null, null, false];
}
var image = wx.createImage();  // Create the image object
if (!image) {
    console.log('Failed to create the image object');
    return [null, null, null, false];
}
// Register the event handler to be called on loading an image
image.onload = function () { loadTexture(gl, n, TEXTURE, u_Sampler, image); };
// Tell the browser to load an image
image.src = imgPath;
return [texture, u_Sampler, image, true];

}

function loadTexture(gl, n, texture, u_Sampler, image) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image’s y axis
// Enable texture unit0
gl.activeTexture(gl.TEXTURE0);
// Bind the texture object to the target
gl.bindTexture(gl.TEXTURE_2D, texture);

// Set the texture parameters
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
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);

// Set the texture image
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

// Set the texture unit 0 to the sampler
gl.uniform1i(u_Sampler, 0);

gl.clear(gl.COLOR_BUFFER_BIT);   // Clear <canvas>

gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // Draw the rectangle

}

function InitGLEnv(imgPath, gl, vertices) {
if (!gl) {
console.log(‘Failed to get the rendering context for WebGL’);
return [-1];
}

// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log(‘Failed to intialize shaders.’);
return -1;
}

// Set the vertex information
var n = initVertexBuffers(gl, vertices);
if (n < 0) {
console.log(‘Failed to set the vertex information’);
return -1;
}

// Specify the color for clearing
gl.clearColor(1.0, 1.0, 1.0, 1.0);

// Set texture
var ret = true;
var teture, u_sample, image;
[teture, u_sample, image, ret] = initTextures(gl, n, imgPath);
if (!ret) {
console.log(‘Failed to intialize the texture.’);
return -1;
}
return [teture, u_sample, image, ret];
}

exports.drawImg = drawImg;
`

使用时：
`const { drawImg } = require(’./webgl_first_render.js’);

require(’./webgl_first_render.js’)

function render() {
if (FIRSTRENDER) {
drawImg(‘images/bg.jpg’, gl);
requestAnimationFrame(render);
console.log(“YY”)
}
}

var FIRSTRENDER = true;
GameGlobal.dycc = wx.createCanvas();//获取绘制二维上下文
GameGlobal.screencanvas = GameGlobal.dycc || new _Canvas2.default();
var gl = GameGlobal.dycc.getContext(“webgl”);

requestAnimationFrame(render);

// const loadTask = wx.loadSubpackage({
// name: ‘’,
// success: function(res) {
// // 分包加载成功后通过 success 回调
// FIRSTRENDER = false;
// console.log(“SUCCESS”)
// },
// fail: function(res) {
// // 分包加载失败通过 fail 回调
// }
// })

// loadTask.onProgressUpdate(res => {
// console.log(‘下载进度’, res.progress)
// console.log(‘已经下载的数据长度’, res.totalBytesWritten)
// console.log(‘预期需要下载的数据总长度’, res.totalBytesExpectedToWrite)
// })
`

huangdongxc · 2020年10月26日 12:36

mark 一下

240414571 · 2020年10月29日 07:50

Mark!

490421769 · 2020年11月6日 08:56

你是不是canvas.js没有修改?

ihc523 · 2020年11月6日 16:01

Mark.

771413234 · 2020年11月23日 09:41

Mark.

xuyid · 2020年11月23日 12:29

大神，首屏渲染出来后，我调用cc.director.loadScene会黑屏一段时间，这个要怎么处理？

SmallMain · 2020年11月24日 02:55

可能是加载 Scene 的时间比较长，尽量减少首个 Scene 的东西，引擎启动后，渲染会交给引擎接管后就不会再渲染那张图片了