如何用 CocosCreator 對接抖音小遊戲的側邊欄復訪

北桥苏發表於2024-08-08
遊戲

前言

最近小遊戲的軟著下來了，用 CocosCreator 做的遊戲也完成了 1.0 版本。而當我打包成抖音小遊戲進行提交時，還沒到初審就給拒了，因為還有一個機審，機器檢測到程式碼中沒有接入 “側邊欄復訪功能”。這個我還真不知道，那隻能去官方看文件了，位置是小遊戲開發文件 -> 指南 -> 開放能力 -> 側邊欄能力。

簡介

側邊欄復訪能力是在「2023 年 11 月 24 日」起就開啟了「必接稽核」，為什麼要這樣做呢？原來是隨著抖音首頁側邊欄的日活不斷增高，平臺也積極引導使用者養成從首頁側邊欄進入遊戲的習慣而做的要求。這樣可以大幅提升次留、7 留，反正就是你好我好大家好的局面，接就對了。

文件我也大概看了，大概的流程就是開啟遊戲後，判斷是不是側邊欄進來，是的話就相當老使用者給他一些獎勵，不是的話給一些引導彈窗，讓使用者觸發開啟側邊欄。而文件裡的方案示例大部分也都有獎勵領取環節，但是我這個目前是單機，獎勵肯定是沒有的，那怎麼辦，於是我就做了一些簡化。

流程

  • 建立去側邊欄按鈕和引導層
  • 對接抖音提供的方法檢測和跳轉
  • 打包後去抖音開發工具調測

操作

建立去側邊欄按鈕

開啟遊戲場景畫布，找到主介面皮膚，分別新增 “去側邊欄按鈕節點” ，新增圖文素材。

建立引導層節點

繼續在主介面下新增引導層空白節點，就是展示一個遮罩，一個引導圖片和跳轉側邊欄和關閉按鈕。遮罩層的新增方式是給節點新增 sprint 元件，元件的 sprite Frame 選擇 ”internal"->"image"->"default_btn_disabled"，其他的按鈕就是自己的 UI 圖示了。

在主介面指令碼中掛載節點

就是將去側邊欄和引導圖層，跳轉復訪等繫結觸發事件。

主要程式碼

import gameManager from "./gameManager";

const {ccclass, property} = cc._decorator;

@ccclass
export default class startPanel extends cc.Component {

    // 抖音側邊欄復訪
    private isFromSidebar = false //狀態，表示是否從側邊欄進入

    @property(cc.Node)
    public btnSidebar: cc.Node | null = null; // 入口有禮按鈕

    @property(cc.Node)
    public ndSidebar: cc.Node | null = null; // 側邊欄引導對話方塊

    @property(cc.Node)
    public btnGotoSidebar: cc.Node | null = null; //去側邊欄按鈕

    @property(cc.Node)
    public btnCloseSidebar: cc.Node | null = null; // 關閉側邊欄引導對話方塊

    private game:gameManager = null;

    init(game:gameManager) {
        this.game = game
    }

    onLoad() {
        this.game.startAudio();
    }

    // 彈出側邊欄引導框
    private showDialogBox() {
        // 顯示引導層，隱藏開始按鈕
        this.ndSidebar.active = true;
        this.startBtn.active = false;
    }

    // 關閉側邊欄對話方塊
    private closeSidebar() {
        this.ndSidebar.active = false;
        this.startBtn.active = true;
    }

    // 自動跳轉側邊欄
    private gotoSidebar() {
        this.ndSidebar.active = false;
        this.startBtn.active = true;

        // 抖音小遊戲側邊欄跳轉邏輯
        tt.navigateToScene({
            scene: "sidebar",
            success: (res) => {
                console.log("navigate to scene success");
                // 跳轉成功回撥邏輯
            },
            fail: (res) => {
                console.log("navigate to scene fail: ", res);
                // 跳轉失敗回撥邏輯
            },
        });
    }

    start() {
        // --側邊欄按鈕判斷--//
        tt.onShow((res) => {
            //判斷使用者是否是從側邊欄進來的
            this.isFromSidebar = (res.launch_from == 'homepage' && res.location == 'sidebar_card')

            if (this.isFromSidebar) {
                //如果是從側邊欄進來的，隱藏“去側邊欄”
                this.btnSidebar.active = false
            }
            else {
                //否則 顯示“去側邊欄”按鈕
                this.btnSidebar.active = true
            }
        });

        //判斷使用者是否支援側邊欄進入功能，有些舊版的抖音沒有側邊欄，這種情況就把入口有禮那個按鈕給隱藏掉
		// 因為我引導層預設就是隱藏，所以這部分可以不用判斷
        /*tt.checkScene({
            scene: "sidebar",
            success: (res) => {
                this.btnSidebar.node.active = true
            },
            fail: (res) => {
                this.btnSidebar.node.active = false
            }
        });*/
        // --側邊欄按鈕判斷--//

        // 顯示側邊欄引導框
        this.btnSidebar.on('touchstart', this.showDialogBox, this);

        // 關閉側邊欄引導對話方塊
        this.btnCloseSidebar.on('touchstart', this.closeSidebar, this);

        // 點選進入抖音側邊欄
        this.btnGotoSidebar.on('touchstart', this.gotoSidebar, this);
    }
}

　　

寫在後面

這樣操作下來，你會發現接入這個側邊欄功能並不複雜，其實就相當於做了一個彈窗效果。麻煩的是在 CocosCreator 中新增抖音裡內部方法不能馬上除錯，而是要打完包再放到抖音開發者工具中測試，遇到報錯又改打包測試再改。還有一個是官方的文件的舉例是用了一個最複雜的方式，其實對於我們單機的小遊戲就只是引導一下，沒有復訪獎勵什麼的！

相關文章