[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");
}

[Swift5]只想要UIView某一邊使用圓弧

 let cornerPath = UIBezierPath(roundedRect: myView.bounds, byRoundingCorners: [.bottomLeft, .topLeft], cornerRadii:  CGSize(width: 8, height:  8))
 let maskLayer = CAShapeLayer()
 maskLayer.path = cornerPath.cgPath
 myView.layer.mask = maskLayer

UIBezierPath參數內容：
roundedRect：要做mask的UIView的bounds。
byRoundingCorners：要做圓弧角的地方，有左上、左下、右上、右下，也有全部都要的allCorners可以用。
cornerRadii：圓角大小，CGSize物件，寬度＝水平弧度，高度＝垂直弧度。詳細可以看這篇：Why is cornerRadii parameter of CGSize type in...。

[Swift]UITableView想要可以移動cell重新排序、但是不顯示尾端的漢堡排圖案

直接上code!

[Vue3][筆記]vue-i18n 讀取public資料夾內json file

最近做一個委託，對方需要網站有多國語系，並且他能夠自己去更新語言包內的文字而不需要透過我們再編譯。
vue-i18n可以滿足我們製作多國語系的功能，可惜網路上很少有在討論vue3+i18n+public資料讀取的資訊。
基於vue專案的設計，public資料夾是不能直接上方宣告import js、json檔案來利用的，必須透過await import/await fetch來讀取進來。（如果有搞錯請留言跟我說QQ）
這就導致了通用的vue-i18n範例是不能使用的。 以下是我搜尋後找到的方法，從vue2改寫而來! 參考的文章：VueJS 2.0 教學筆記: i18n 多語套件進階篇

【筆記】動態讀取cell

先獨立建立一個User interface：Empty，命名為MyInfoCell。
一開始看到會是空白一片，我們加入一個TableViewCell。

=>

接著建立Swift File，名字為InfoCell，Class名稱也是 InfoCell：

class InfoCell : UITableViewCell{
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var detailLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        selectionStyle = .none
    }
}

將MyInfoCell內的TableViewCell的Custom Class指向InfoCell。

最後，在主要的class內加入delegate，然後加入這幾行：

override func viewDidLoad() {
        let myNib = UINib(nibName: "MyInfoCell", bundle: nil)
        tableview.register(myNib, forCellReuseIdentifier: "myCell")
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableview.dequeueReusableCell(withIdentifier: "addressCell") as! InfoCell
}

App開啟後指定第一個ViewController

app打開後，要指定第一個view controller有兩種方法。

Timer.scheduledTimer沒有執行

狀況：在接取API responce回來後，呼叫了Timer.scheduledTimer，但Timer.scheduledTimer似乎沒有跑⋯⋯這是為什麼呢？ 原因：因為主要是沒有在main queue上執行喔～ 改之前：

func startTimer(){
        if self.timer == nil{
            timer = Timer.scheduledTimer(timeInterval: REFRESH_DURATION_SEC, target: self, selector: #selector(endTimer), userInfo: nil, repeats: false)
        }
    }

改之後：

幫文字加入星號來遮罩文字

參考網址：How to mask a String to show only the last 3 characters?

extension String{
      /// 幫文字加入星號來遮罩文字
    /// - Parameters:
    ///   - startIndex: 開始遮罩的位置（含）
    ///   - endIndex: 結束遮罩的位置（不含），請勿超過文字長度，沒有做防呆
    /// - Returns: 遮罩後文字
    func maskToStarredWords(_ startIndex: Int, _ endIndex: Int) -> String{
        return prefix(startIndex) + String(repeating: "*", count: Swift.min(endIndex - startIndex + 1, count)) + suffix(count - endIndex - 1)
    }
}

使用EventHandler在CocosCreator面板上拉取node函式

紅框圈起來的就是本次文章重點！
這次的範例是Animation自動播放，然後取得clip時間來呼叫結束函式。
當然也可以進入動畫編輯器，插入事件來呼叫結束函式。

[筆記]複數個Spine物件不同時間出現，動畫要一致

規格需求：

• 第二個Spine物件，動畫要跟第一個出現的Spine物件，動畫要一致
• Spine動畫修改animationStart時間時，會有一個先從頭開始播再直接跳到指定時間的Bug。故使用addAnimation + delay時間來控一下這個狀況。
• Spine動畫修改animationStart時間後，每次loop都會從指定的Start time開始播放，因此第一次不要Loop，等播完一次後再打開Loop。

public PlayLoopAnim(startTime: number){
    if (this.isBingoTime)
       return;
    if (startTime > 0){
       let entry: sp.spine.TrackEntry = this.spine.addAnimation(0, "Loop", false, 0.1);
       entry.animationStart = startTime + 0.1;    //Delay時間
       this.spine.setCompleteListener(this.OnPlayLoopOnceEnd.bind(this));
    }else{            
       this.spine.addAnimation(0, "Loop", true);
    }
}

private OnPlayLoopOnceEnd(){
   this.spine.setCompleteListener(null);
   let entry: sp.spine.TrackEntry = this.spine.addAnimation(0, "Loop", true);
   entry.animationStart = 0;
}