cocos creator 安卓启动黑屏几秒钟,加个logo启动页面效果更佳

本文详细介绍如何在Android应用中实现启动时的闪屏效果,包括添加启动图片、配置AndroidManifest.xml、修改AppActivity类以及在main.js中调用清除闪屏的方法。通过这些步骤,可以有效提升应用启动时的用户体验。

1.添加一张开始图片drawable/logo
安卓工程下的res目录下新建styles.xml
在这里插入图片描述

2.AndroidManifest.xml
添加 android:theme="@style/AppWelcome"
在这里插入图片描述

3.AppActivity类中添加:
protected static Handler mUIHandler;
private static ImageView mWelcome = null;
3.1 在onCreate函数中添加
mUIHandler = new Handler();
// 显示launch image 遮住「黑屏」
addContentView(createLaunchImage(),new WindowManager.LayoutParams(
WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN));
在这里插入图片描述
3.2添加几个方法:
// 创建一个ImageView,welcome是闪屏图片
private ImageView createLaunchImage() {
mWelcome = new ImageView(this);
mWelcome.setImageResource(R.drawable.logo);
mWelcome.setScaleType(ImageView.ScaleType.CENTER_CROP);
return mWelcome;
}
// 当资源加载好了之后 删除之前创建的imageView 否则一直会在界面上显示
public static void clearWelcomeImage() {
Log.d(“clearWelcomeImage”,“clearWelcomeImage”);
mUIHandler.post(new Runnable() {
@Override
public void run() {
if (mWelcome != null) {
Log.d(“clearWelcomeImage1”,“clearWelcomeImage1”);

                mWelcome.setVisibility(View.GONE);
            }
        }
    });
}

在这里插入图片描述

4.在main.js中
var launchScene = settings.launchScene;
下面添加:代码
var launchScene = settings.launchScene;
var clearWelcomeImage = function(){
console.log(“clear welcome image …”)
if (cc.sys.os === cc.sys.OS_ANDROID) {
let className = “org/cocos2dx/javascript/AppActivity”;
let sigs = “()V”;
jsb.reflection.callStaticMethod(className, “clearWelcomeImage”, sigs);
}
else if (cc.sys.os === cc.sys.OS_IOS)
{

	  }
	}

// load scene
cc.director.loadScene(launchScene, null,
function () {
if (cc.sys.isBrowser) {
// show canvas
var canvas = document.getElementById(‘GameCanvas’);
canvas.style.visibility = ‘’;
var div = document.getElementById(‘GameDiv’);
if (div) {
div.style.backgroundImage = ‘’;
}
}
cc.loader.onProgress = null;
console.log('Success to load scene: ’ + launchScene);
clearWelcomeImage();//调用
}
);

在这里插入图片描述

5.OK

Cocos Creator 3.8 中开发 H5 游戏时,去除启动时的插屏 LOGO(splash screen)需要修改项目生成的启动配置和相关资源文件。Cocos Creator 默认会在 H5 平台启动时显示引擎的启动画面(即 Cocos 引擎的 LOGO),这一行为可以通过修改构建后的 `index.html` 文件以及相关资源来实现自定义或去除。 ### 修改步骤 #### 1. 修改 `index.html` 文件 在构建 H5 项目后,打开 `build/web-mobile` 目录下的 `index.html` 文件,找到以下与启动画面相关的代码段: ```html <div id="splash"> <div class="spinner"></div> <div class="noloding" style="display:none;"> <p class="logotext">Cocos Creator</p> </div> </div> ``` 这段代码定义了启动时显示的元素。要完全去除启动画面,可以直接删除或注释掉这段代码: ```html <!-- <div id="splash"> <div class="spinner"></div> <div class="noloding" style="display:none;"> <p class="logotext">Cocos Creator</p> </div> </div> --> ``` #### 2. 移除 CSS 样式 在 `index.html` 文件中,查找与 `#splash` 和 `.spinner` 相关的 `<style>` 标签,并将其删除或注释: ```html <style> #splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 100000; display: flex; align-items: center; justify-content: center; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.2); border-radius: 50%; border-left-color: #fff; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> ``` 同样可以注释或删除该部分样式。 #### 3. 修改启动脚本 在构建后的 `main.js` 或 `main.min.js` 文件中,可能存在用于控制启动画面的逻辑代码。可以通过搜索 `splash` 或 `loading` 相关代码片段,将其注释或删除。 例如: ```javascript // document.getElementById('splash').style.display = 'none'; ``` #### 4. 自定义启动画面(可选) 如果希望替换默认的启动画面,可以在 `index.html` 中保留 `<div id="splash">`,并替换其中的内容,例如使用自定义的图片或动画: ```html <div id="splash"> <img src="custom-splash.png" alt="Custom Splash" style="width: 200px;"> </div> ``` 同时确保 `custom-splash.png` 存放在 `build/web-mobile` 目录中,并在构建过程中不被清理。 ### 注意事项 - 修改后的 `index.html` 和相关资源文件在每次重新构建项目时可能会被覆盖,因此建议在每次构建后手动执行上述修改。 - 如果希望自动化处理,可以使用构建后的脚本工具(如 Node.js 脚本)在构建完成后自动修改文件内容。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值