後端搞 Cocos 小遊戲開發的三點避坑指北

北桥苏發表於2024-03-14
後端遊戲開發

前言

先說一下我為什麼要弄小遊戲吧，首先無關工作，也無關興趣，就只是想在副業裡探索一下。沒錯就是做一個單機的小遊戲上架到平臺試一下水（薅廣告費），不過說實話入局有點晚。

早在 2019 年的時候，我也折騰過白鷺引擎還弄過小 demo，當時上架平臺也簡單。但是不知道為什麼那時不順手釋出一下，錄了個影片就沒再管了（還是太年輕）。現在好了白鷺引擎倒了，而我也才意識到寫文章做影片並不是我的強項。

儘管現在大佬們都在 All in AI，但我還是把一個方向定在了小遊戲上。選引擎二選一，挑了 Cocos Creator，之所以有下面的幾個坑點，其根本原因是我沒有系統性看他們的文件，所以記錄一下以便後期撿起。

坑點

1. 指令碼引入方式

這個問題是我在 Cocos Creator 資源管理器裡，建立指令碼時選的 js，而程式碼裡卻用了 import 的語法導致還排查了一段時間（離大譜），但下面的花括號還是要值得注意。

import {util} from "./util";
import startPanel from "./startPanel";
  • 使用 {} 的 import 允許你匯入模組中的特定匯出項，在這裡是具體例項。
  • 不使用 {} 的 import 允許你匯入模組的預設匯出，在這裡只是類。
import gameManager from "./gameManager";
import { util } from "./util";

const {ccclass, property} = cc._decorator;

@ccclass
export default class uiManager extends cc.Component {

    private game: gameManager = null;

    @property(cc.Node)
    ninja: cc.Node = null;

    // 這裡gameManager只是型別約束
    init(game: gameManager) {
        this.game = game
    }

    onLoad() {
        // 這裡直接使用util的靜態方法
		util.resize();
	}

}

2. 元件的相關設定

大部分元件的設定可以從文件裡看到，如碰撞元件 BoxCollider，渲染元件裡 Sprite（精靈元件設定圖片等引數），但是如何要用到其自帶滑塊，並也用他的精靈圖，位置在 internal 裡（當時我找了老半天）。

internal>image>default_progressbar_bg （進度條舉例

3. 音樂和音效

3.1. 新增背景音樂

在 Main Camera 下新增一個空白節點，在該節點中新增 AudioSource 元件，Clip 就是從 assets 裡拖入的 mp3 檔案。

最後將節點拖入指令碼中（作為元件操作播放 / 停止）

@property(cc.AudioSource)
bgAudio: cc.AudioSource = null;

this.bgAudio.play();

3.2. 新增操作音效

在指令碼中定義 AudioClip 屬性，然後在 assets 中拖入 mp3 檔案，最後在指令碼中操作音效的播放與停止。

@property({
    type: cc.AudioClip
})
audioWin: cc.AudioClip = null;

@property({
    type: cc.AudioClip
})
audioLose: cc.AudioClip = null;

playSound(sName){
        switch(sName){
            case "click":
                // cc.audioEngine.play(this.audioClick, false, 1);
            case "win":
                cc.audioEngine.play(this.audioWin, false, 1);
            case "lose":
                cc.audioEngine.play(this.audioLose, false, 1);
                break;
        }
    }

3.3. 報錯問題

給遊戲加了開始的背景音樂和操作音效後，用編輯器執行一切正常。但是當打包成某節小遊戲或某信小遊戲後，發現聲音直接出不來，在我不斷除錯也依次報了下面一堆錯誤。

  • cocos2d-js-min.js:1 Uncaught TypeError: this.bgAudio.play is not a function
  • Uncaught TypeError: this.bgAudio.play is not a function
  • Uncaught TypeError: Cannot read properties of undefined (reading 'playMusic')
  • Uncaught TypeError: Cannot read properties of null (reading 'play')
  • cc.audioEngine 為 undefined

一開始我以為是引擎版本原因，切換幾次後發現根本不是，因為把程式碼放到相同版本下的其他專案下是正常的。最主要的是打包後報的錯誤真不好排查，導致在這個問題上花了很多時間。最後在比較打包後的 js 檔案，才懷疑是不是有些引擎裡的模組沒搭建來，順著這個思路果真是音樂音效的模組被我關了，前面我還一直以為是 this 指向那裡的程式碼有問題。

解決方法就是在構造釋出下面的 “專案設定”，勾選 Audio 和 AudioSource 然後再打包就可以了。其實建立專案時，預設是全選的，但可能是我前期亂折騰去掉了幾項。

寫在後面

後續可能還有一些關於小遊戲或 Unity 遊戲製作踩坑內容，包括小遊戲的證書申請和上架流程等等，如果你也玩 Cocos Creator 和 Unity3D，歡迎一起交流談論。

相關文章