【编辑器内置排行榜】使用介绍

空伊伊 · 发表于 2023-12-15 19:26:39

本帖最后由空伊伊于 2024-1-15 16:39 编辑

排行榜是游戏开发中经常使用到的一个功能，目前编辑器已经实现内置，接下来为大家介绍详细的使用方法。

一、显示排行榜
显示排行榜只需要在客户端调用一行代码即可

LeaderboardModule.showPanel()

二、基础设置
定义字段（Field）枚举
排行榜可以有多个字段用来显示数据，为了方便确定字段的内容，推荐使用枚举来进行定义。如下：



//显示字段枚举

export enum FieldType {

    Name = 1,//玩家

    Kill = 2,//击杀

    Score = 3,//积分

}

设置排行榜样式（客户端执行）
排行榜的样式需要在客户端手动设置。

LeaderboardModule.setStyle("我的排行榜", true, 10, 5)

添加排行榜字段（客户端执行）
排行榜默认是没有字段的，所以需要在客户端进行添加

// 设置排行榜的字段

LeaderboardModule.addField(FieldType.Name, "玩家名")

LeaderboardModule.addField(FieldType.Kill, "击杀数")

LeaderboardModule.addField(FieldType.Score, "积分")

设置排行榜排序规则（客户端执行）
当排行榜需要根据多个字段来进行综合排序的时候，就需要设置排序规则。



// 设置排行榜的排序规则

LeaderboardModule.setSortFields(FieldType.Score, FieldType.Kill)

显示排名字段（客户端执行）
排名这个字段默认是不显示的，需要在客户端手动开启



// 显示排名字段

LeaderboardModule.showRankField("排名", null, "未上榜")

三、数据修改
排行榜的数据修改都需要，且只能在服务端执行。
向排行榜添加玩家（服务端执行）

LeaderboardModule.addPlayer(player)

从排行榜删除玩家（服务端执行）

LeaderboardModule.removePlayer(player)

修改对应玩家的排行榜数据（服务端执行）

// 在服务端随机设置玩家的两个属性

LeaderboardModule.setPlayerValue(playerID, FieldType.Kill, Math.floor(Math.random() * 100))

LeaderboardModule.setPlayerValue(playerID, FieldType.Score, Math.floor(Math.random() * 100))

示例Demo：

编辑器自带排行榜.rar (71.8 KB, 下载次数: 92)

2023-12-15 19:01 上传

点击文件名下载附件

补充：完整代码

//显示字段枚举

export enum FieldType {

    Name = 1,//玩家

    Kill = 2,//击杀

    Score = 3,//积分

}



@Component

export default class Test extends Script {



    /** 当脚本被实例后，会在第一帧更新前调用此函数 */

    protected onStart(): void {





        if (SystemUtil.isClient()) {



            // 设置排行榜的样式

            LeaderboardModule.setStyle("我的排行榜", true, 10, 5)

            // 设置排行榜的字段

            LeaderboardModule.addField(FieldType.Name, "玩家名")

            LeaderboardModule.addField(FieldType.Kill, "击杀数")

            LeaderboardModule.addField(FieldType.Score, "积分")

            // 设置排行榜的排序规则

            LeaderboardModule.setSortFields(FieldType.Score, FieldType.Kill)

            // 显示排名

            LeaderboardModule.showRankField("排名", null, "未上榜")



            // 获取玩家的nickName（因为目前nickName只能在客户端获取，所以需要由客户端获取到，然后通过事件发送给服务端）            

            let nickName = SystemUtil.isPIE ? "玩家" + Player.localPlayer.playerId : AccountService.getNickName()

            Event.dispatchToServer("setNickName", nickName)



            // 测试代码，按下“Q”键，即可修改自己的排行数据

            InputUtil.onKeyDown(Keys.Q, () => {

                this.setValue(Player.localPlayer.playerId)

            })



            // 测试代码，按下“G”键，即可显示出排行榜

            InputUtil.onKeyDown(Keys.G, () => {

                LeaderboardModule.showPanel()

            })

        }





        if (SystemUtil.isServer()) {



            // 监听客户端的消息，对nickName进行设置的同时，还需要向排行榜添加对应玩家

            Event.addClientListener("setNickName", async (player: Player, nickName: string) => {

                // 将玩家添加到排行榜

                LeaderboardModule.addPlayer(player)

                // 设置排行榜的“Name”字段

                LeaderboardModule.setPlayerValue(player, FieldType.Name, nickName);

                // 修改玩家的头顶昵称

                (await player.character.asyncReady()).displayName = nickName

            })



            // 当玩家退出游戏，将对应玩家的数据从排行榜上删除

            Player.onPlayerLeave.add((player: Player) => {

                LeaderboardModule.removePlayer(player)

            })



        }



    }





    @RemoteFunction(Server)

    private setValue(playerID: number) {

        // 在服务端随机设置玩家的两个属性

        LeaderboardModule.setPlayerValue(playerID, FieldType.Kill, Math.floor(Math.random() * 100))

        LeaderboardModule.setPlayerValue(playerID, FieldType.Score, Math.floor(Math.random() * 100))

    }





}