cocos creator 2.4.3如果优化vivio小游戏的启动时长和黑屏时长?

Creator 2.x
#1

vivo小游戏渠道需启动时长为不超过5s，黑屏时长不超过3s，
在onStart为进入游戏第一个场景之前渲染一张图片。修改引擎boot.js文件添加如下代码。路径地址：CocosDashboard\resources.editors\Creator\2.4.3\resources\builtin\runtime-adapters\platforms\vivo\res\boot.js.

未修改之前代码：
var settings = window._CCSettings;
window._CCSettings = undefined;

var onStart = function () {
	
    cc.view.enableRetina(true);
    cc.view.resizeWithBrowserSize(true);

    var launchScene = settings.launchScene;

    // load scene
    cc.director.loadScene(launchScene, null,
        function () {
            console.log('Success to load scene: ' + launchScene);
        }
    );
};

var option = {
    id: 'GameCanvas',
    debugMode: settings.debug ? cc.debug.DebugMode.INFO : cc.debug.DebugMode.ERROR,
    showFPS: settings.debug,
    frameRate: 60,
    groupList: settings.groupList,
    collisionMatrix: settings.collisionMatrix,
}

cc.assetManager.init({
    bundleVers: settings.bundleVers,
    subpackages: settings.subpackages,
    remoteBundles: settings.remoteBundles,
    server: settings.server,
    subContextRoot: settings.subContextRoot
}, function () {
    let { RESOURCES, INTERNAL, MAIN, START_SCENE } = cc.AssetManager.BuiltinBundleName;
    let bundleRoot = [INTERNAL];
    settings.hasResourcesBundle && bundleRoot.push(RESOURCES);
    settings.hasStartSceneBundle && bundleRoot.push(MAIN);

    var count = 0;
    function cb(err) {
        if (err) return console.error(err.message, err.stack);
        count++;
        if (count === bundleRoot.length + 1) {
            // if there is start-scene bundle. should load start-scene bundle in the last stage
            // Otherwise the main bundle should be the last
            cc.assetManager.loadBundle(settings.hasStartSceneBundle ? START_SCENE : MAIN, function (err) {
				
                if (!err) cc.game.run(option, onStart);
            });
        }
    }

    // load plugins
    cc.assetManager.loadScript(settings.jsList.map(function (x) { return 'src/' + x; }), cb);

    // load bundles
    for (let i = 0; i < bundleRoot.length; i++) {
		console.log("bundleRootname",bundleRoot[i]);
        cc.assetManager.loadBundle(bundleRoot[i], cb);
    }
});

};

require(‘adapter/rename-adapter.js’);
require(‘adapter/qgame-adapter.js’);
require(‘src/settings.js’);
require(‘src/cocos2d-runtime.js’);
if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
require(‘src/physics.js’);
}
require(‘adapter/index.js’);

cc.macro.CLEANUP_IMAGE_CACHE = true;
window.boot();

修改之后代码：

window.boot = function () {
///////////////////////////////////////////////////////////////////////////////////////
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’;

// Fragment shader program
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';

/**

  • Create a program object and make current

  • @param gl GL context

  • @param vshader a vertex shader program (string)

  • @param fshader a fragment shader program (string)

  • @return true, if the program object was created and successfully made current
    */
    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;
    }
    /**

  • Create the linked program object

  • @param gl GL context

  • @param vshader a vertex shader program (string)

  • @param fshader a fragment shader program (string)

  • @return created program object, or null if the creation has failed
    */
    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;
    }
    /**

  • Create a shader object

  • @param gl GL context

  • @param type the type of the shader object to be created

  • @param source shader program (string)

  • @return created shader object, or null if the creation has failed.
    */
    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 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 false;
}
var image = qg.createImage();  // Create the image object
if (!image) {
    console.log('Failed to create the image object');
    return 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 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 drawImg(imgPath) {
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,
]);

const gl = qg.createCanvas().getContext("webgl");
if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
}
// 初始化shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
}
// 初始顶点缓冲区
var n = initVertexBuffers(gl, vertices);
if (n < 0) {
    console.log('Failed to set the vertex information');
    return;
}
//指定一个覆盖（清空）canvas的颜色
gl.clearColor(1.0, 1.0, 1.0, 1.0);
//设置图片
if (!initTextures(gl, n, imgPath)) {
    console.log('Failed to intialize the texture.');
    return;
}

}

drawImg(“xxx/logo.jpg”);
function drawEveryFrame() {
window.requestAnimationFrame(drawEveryFrame);
draw();
}
function draw() {
// 设置清除颜色
const gl = qg.createCanvas().getContext(“webgl”);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清除
gl.clear(gl.COLOR_BUFFER_BIT);
console.log(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
let first = true;
let originRequestAnimationFrame = window.requestAnimationFrame;
//requestAnimationFrame 这里首次调用的 doDraw 方法。当发现调用的不是 doDraw 方法，则移除 doDraw 调用。但这里 gl 状态没有恢复到默认值，可能有问题
window.requestAnimationFrame = function () {
if (arguments[0] !== drawEveryFrame && first) {
window.cancelAnimationFrame(drawEveryFrame);
first = false;
}
originRequestAnimationFrame.apply(this, arguments);
}

window.requestAnimationFrame(drawEveryFrame);
///////////////////////////////////////////////////////////////////////////////////////

var settings = window._CCSettings;
window._CCSettings = undefined;

var onStart = function () {
	
    cc.view.enableRetina(true);
    cc.view.resizeWithBrowserSize(true);

    var launchScene = settings.launchScene;

    // load scene
    cc.director.loadScene(launchScene, null,
        function () {
            console.log('Success to load scene: ' + launchScene);
        }
    );
};

var option = {
    id: 'GameCanvas',
    debugMode: settings.debug ? cc.debug.DebugMode.INFO : cc.debug.DebugMode.ERROR,
    showFPS: settings.debug,
    frameRate: 60,
    groupList: settings.groupList,
    collisionMatrix: settings.collisionMatrix,
}

cc.assetManager.init({
    bundleVers: settings.bundleVers,
    subpackages: settings.subpackages,
    remoteBundles: settings.remoteBundles,
    server: settings.server,
    subContextRoot: settings.subContextRoot
}, function () {
    let { RESOURCES, INTERNAL, MAIN, START_SCENE } = cc.AssetManager.BuiltinBundleName;
    let bundleRoot = [INTERNAL];
    settings.hasResourcesBundle && bundleRoot.push(RESOURCES);
    settings.hasStartSceneBundle && bundleRoot.push(MAIN);

    var count = 0;
    function cb(err) {
        if (err) return console.error(err.message, err.stack);
        count++;
        if (count === bundleRoot.length + 1) {
            // if there is start-scene bundle. should load start-scene bundle in the last stage
            // Otherwise the main bundle should be the last
            cc.assetManager.loadBundle(settings.hasStartSceneBundle ? START_SCENE : MAIN, function (err) {
				
                if (!err) cc.game.run(option, onStart);
            });
        }
    }

    // load plugins
    cc.assetManager.loadScript(settings.jsList.map(function (x) { return 'src/' + x; }), cb);

    // load bundles
    for (let i = 0; i < bundleRoot.length; i++) {
		console.log("bundleRootname",bundleRoot[i]);
        cc.assetManager.loadBundle(bundleRoot[i], cb);
    }
});

};

require(‘adapter/rename-adapter.js’);
require(‘adapter/qgame-adapter.js’);
require(‘src/settings.js’);
require(‘src/cocos2d-runtime.js’);
if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
require(‘src/physics.js’);
}
require(‘adapter/index.js’);

cc.macro.CLEANUP_IMAGE_CACHE = true;
window.boot();

#2

qg没有显示qg.createImage生成对象的方法吗

#3

image
image739×236 6.31 KB