快速連結

2024年2月18日

[CocosCreator3.8]自定義Splash、並且在遊戲第一個場景loaded後再讓Splash頁面消失

使用web desktop平台。
這次會更改到index.ejs、application.js。並且追加一個自己的css檔案。
遊戲內也會有修改需求,在第一個場景、第一個node上要掛一行code。
請先在build setting時設定不要顯示splash。

index.ejs head內
加入自定義的index.css:

<link rel="stylesheet" type="text/css" href="index.css"/><!--我自己定義了自己的css-->
index.ejs body內

<div id="Splash">自己定義loading怎麼顯示</div>

index.css
index.css檔案則是直接改產出來的style.css,然後在裡面加入這些:


#Splash{
  width: 100%;
  height: 100%;
  max-width: 1920px;
  max-height: 1080px;
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

application.js
在這個js內找到return cc.game.run();這行,並且把這段code加上去:

cc.game.once("game_scene_loaded", ()=>{
    document.getElementById("Splash").remove();
});

然後就會看起來像是這樣


firstnode.ts這是我隨便命名的,請自由命名~
在第一個場景、第一個node上要掛上這行code!這樣它就會發事件出去,讓application.js接收到了~

protected onLoad(): void {
  game.emit("game_scene_loaded");
}