处理 h5包 cocos 自带的 loading 页

前言

当我们通过 cocos Creator 打出 web-mobile 包时，访问 index.html 会出现一个丑陋的 cocos 自身的 loading 页。 瞬间降低了游戏的逼格，本文介绍如何处理这一问题。

一. index.html

删除第 46、47、48 行代码:

这几行代码主要是处理，loading 页中的进度条UI展示。

二. main.js

1. 删除

删除这个方法中的所有代码:

该方法主要处理进度条的进度，还有场景加载后隐藏splash。

2. 添加

在 loadScene 方法中，加入 108-111 行代码：

这几行代码主要处理，首场景加载完成后，隐藏 splash。

在这里延迟隐藏 splash，可以有效避免：首场景比较大时，从 loading 到 首场景 会出现 闪黑的问题。亲测有效

三. 加入 loading 图

该张 loading 图，用来替换 cocos 自带的 splash.png。

四. style-mobile.css

修改 background 中的 url 为我们加入的 loading.jpg；

修改 background-size 为 100%;

五. 一键修改 loading

使用 python 脚本，实现一键修改 loading页。

# -*- coding: utf-8 -*-

import io, os, sys, shutil


# 拷贝 loading

shutil.copy('loading.jpg','web-mobile');


# 打开文件
path = "web-mobile/"
dirs = os.listdir(path);

# 输出所有文件和文件夹
for file in dirs:

    filename = 'web-mobile/'+ file;

    if file[0:4] == 'main':

        with io.open(filename,"r",encoding="utf-8") as f:
            lines = f.readlines();
            f.close();

        with io.open(filename,"w",encoding="utf-8") as f_w:

            for index in range(len(lines)):

                if index>=58 and index<72 :
                   continue

                line = lines[index];
                if index == 119:
                    line = line+"\n                        var splash = document.getElementById('splash'); setTimeout(function () {splash.style.display = 'none';}, 100);\n";

                f_w.write(u'{}'.format(line));

        continue

    if file[0:5] == 'index':

        with io.open(filename,"r",encoding="utf-8") as f:
            lines = f.readlines();
            f.close();

        with io.open(filename,"w",encoding="utf-8") as f_w:

            for index in range(len(lines)):
                if index>=45 and index<48 :
                   continue
                f_w.write(lines[index])

        continue


    if file[0:6] == 'splash':

        if os.path.exists(filename):
            os.remove(filename);

        continue


    if file[0:7] == 'style-m':

        with io.open(filename,"r",encoding="utf-8") as f:
            list = [];
            lines = f.readlines();
            for index in range(len(lines)):

                if index == 89:
                    line = '  background: #171717 url(./loading.jpg) no-repeat center;\n'
                    line = line.encode('utf-8')


                elif index == 90:
                    line = '  background-size: 100%;\n'
                    line = line.encode('utf-8')
                else:
                    line = lines[index];

                list.append(line);

            f.close();

        with io.open(filename,"w+",encoding="utf-8") as f_w:

            for index in range(len(list)):


                if index>=93 and index<112 :
                    continue

                f_w.write(u'{}'.format(list[index]));

        continue


print('build success');