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

Creator 2.x
#21

IOS 不生效的问题有解决吗

#22

顶一下贴。。。。

#23

谢谢分享！

#24

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

#26

方法2有同学上线过吗？实测，小游戏数据助手->数据->性能分析->首屏打开留存率没有显著变化

#27

方法二试了但是没传到线上。今天刚刚在云测试测试完:smirk:

#28

image.png729×62 3.78 KB
这个我也遇到了，大部分是ios的首屏耗时高，咨询了微信官方说这个是时间取错了还是什么的，最后让我加了
function render() {
if(wx.isGl)
{
var n = initVertexBuffers(gl);
requestAnimationFrame(render);
}

}
requestAnimationFrame(render)
这个才是正确取到时间的:grinning:

#29

统一回复一下

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

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

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

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

1赞
#30

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

#31

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

#32

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

#33

横屏游戏 android可以 ios不行

#34

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

#35

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

#36

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

#37

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

#38

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

#39

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

#40

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

#41

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];
}

function drawImg(imgPath, gl) {
if (!INITENV) {
var r = 0;
[TEXTURE, USAMPLE, IMAGE, r] = InitGLEnv(imgPath, gl, VERTICES);
if (r < 0) {
return;
}
INITENV = true;
}
var n = initVertexBuffers(gl, VERTICES);
if (n < 0) {
console.log(‘Failed to set the vertex information’);
return;
}
loadTexture(gl, n, TEXTURE, USAMPLE, IMAGE);
}

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)
// })
`

4赞