Updating splash screen in Cocos creator 3.4

Cocos Creator
1

hi,
is there any way to update the splash screen in cocos creator 3.4?

I referred this document, but here it says we can only update the image.
so is there any way to append text and also to add progress bar?

1 Like
2

I haven’t really delved into this issue yet. All I needed was to change the color of the “Powered by Cocos Creator” label. It’s strange that I couldn’t do it from CC itself. I have a black background, the text color is also black, the result is obvious.

I found the code that is responsible for this case. I have it on the path “CocosDashboard_1.0.20\resources.editors\Creator\3.4.2\resources\resources\3d\engine\cocos\core\splash-screen.ts”. Changed in it:

...
private initWarterMark () {
        // create texture from image
        const wartemarkImg = document.createElement('canvas');
        wartemarkImg.width = 330; wartemarkImg.height = 30;
        wartemarkImg.style.width = `${wartemarkImg.width}`;
        wartemarkImg.style.height = `${wartemarkImg.height}`;
        const ctx = wartemarkImg.getContext('2d')!;
        
        ctx.font = `bold ${20}px Arial `;
        ctx.textBaseline = 'top';
        ctx.textAlign = 'left';
        ctx.fillStyle = 'white';  // <----- changed color to white
        const text = 'Powered by Cocos Creator';

        const textMetrics = ctx.measureText(text);
        ctx.fillText(text, (330 - textMetrics.width) / 2, 6);
        const region = new BufferTextureCopy();
        region.texExtent.width = wartemarkImg.width;
        region.texExtent.height = wartemarkImg.height;
        region.texExtent.depth = 1;
        this.watermarkTexture = this.device.createTexture(new TextureInfo(
            TextureType.TEX2D, TextureUsageBit.SAMPLED | TextureUsageBit.TRANSFER_DST,
            Format.RGBA8, wartemarkImg.width, wartemarkImg.height,
        ));
        this.device.copyTexImagesToTexture([wartemarkImg], this.watermarkTexture, [region]);
        // create material
        this.watermarkMat = new Material();
        this.watermarkMat.initialize({ effectName: 'splash-screen' });
        const pass = this.watermarkMat.passes[0];
        const binding = pass.getBinding('mainTexture');
        pass.bindTexture(binding, this.watermarkTexture);
        pass.descriptorSet.update();
    }
...

It should be noted that these changes are global, and not for a specific project. And, as far as I understand, everything is drawn from the start using WebGL. I also plan to make a loading screen with a progress bar, but I haven’t gotten around to it yet. I just recently started learning Cocos. I hope the developers will answer this topic, in terms of customizing the splash screen (loading screen), since it is also interesting to me.

3

I thought about this option. Make the loading screen the first scene in the game after the splash screen, which will dynamically load all resources. And you can make a progress bar and anything else on it. :cowboy_hat_face:

4

Use build-templates/ folder for custom loading screen
https://docs.cocos.com/creator/3.0/manual/en/editor/publish/custom-project-build-template.html?h=build%20template

5

I have only recently started studying CC, and apparently my approach was not correct. Could you, in a couple of words, indicate the direction that I should add/change to the build-templates/ folder in order to change, at least, the color of the splash screen text? I am developing a web-mobile application.

6

Search and copy the existing build template from the Cocos project folder into the build-templates/ folder and start modifying it the way you like it with HTML/CSS/JS