【预制体】【MyClearName】自定义角色头顶UI

本预制体核心代码来源MyClearHP，仅保留了更换昵称、后续可自定义扩展称号、角色标记等不需要频繁变化的内容。
注意：本预制体仅适用于初学者，适用于更换默认的displayName。如果增加头衔、称号、角色标记等，需要初步掌握对代码的阅读能力进行二次更改。


MyClearHP原文地址：
https://forum.ark.online/forum.p ... highlight=MyClearHP
作者：叽里咕噜小胡桃


MyClearName预制体下载:
脚本-name.zip (21.14 KB, 下载次数: 28)

2024-8-12 17:03 上传

点击文件名下载附件


使用方法：
如仅用于更换玩家昵称，可直接将预制体导入后，拖入到对象中即可。
打开HeadUI，可自定义要显示的文本内容，参考roleName的写法进行自定义配置。



UI截图：



完整代码如下：

import HeadUI_Generate from "./ui-generate/HeadUI_generate";



/**世界UIguid-玩家昵称 */

class P_db {

  /**世界UI的guid，服务端创建并同步 */

  public WorldUIGuid: string;

  /**玩家昵称，由玩家进游戏时同步 */

  public nickName: string;

  public roleName: string;

}

@Component

export default class MyClearName extends mw.Script {

  /**双端维护的角色实例id-世界UIguid、昵称信息map */

  public PID_db_Map: Map<string, P_db> = new Map();

  @mw.Property({

    replicated: true,

    onChanged: "onPID_db_StrChanged",

    hideInEditor: true,

  })

  public PID_db_Str: string = "";

  /**客户端接收服务器下发的db */

  public onPID_db_StrChanged() {

    console.log("onPID_db_StrChanged")

    if (SystemUtil.isClient()) {

      // 这两行返回是防止MyClearName和客户端角色没准备好，减少报错

      if (Player.localPlayer == null) {

        return;

      }

      if (MyClearName.instance == null) {

        return;

      }

      // 同步当前str中的内容到本地map里

      const obj = JSON.parse(this.PID_db_Str);

      this.PID_db_Map = new Map();

      for (const key in obj) {

        if (obj.hasOwnProperty(key)) {

          let value = obj[key] as P_db;

          this.PID_db_Map.set(key, value);

        }

      }

      /**遍历同步下发的dbMap */

      this.PID_db_Map.forEach((value, key) => {

        mw.GameObject.asyncFindGameObjectById(value.WorldUIGuid).then((obj) => {

          let worldUI = obj as UIWidget;

          // 如果找不到世界UI里的客户端UI

          if (

            worldUI == undefined ||

            worldUI.getTargetUIWidget() == undefined

          ) {

            // 客户端创建头顶UI

            let newUI = UIService.create(HeadUI_Generate);

            // 把头顶UI绑在世界UI上

            worldUI.setTargetUIWidget(newUI.uiWidgetBase);

            worldUI.drawSize = new Vector2(400, 300);

            worldUI.widgetSpace = WidgetSpaceMode.OverheadUI;

            worldUI.headUIMaxVisibleDistance = 4800;

            worldUI.scaledByDistanceEnable = false;

          }

          let CurrWorldUIWidget = findUIScript(

            worldUI.getTargetUIWidget(),

          ) as HeadUI_Generate;



          if(value.nickName) {

            CurrWorldUIWidget.textBlock_nickName.text = value.nickName;

          }

          if(value.roleName) {

            CurrWorldUIWidget.textBlock_roleName.text = value.roleName;

          }

        });

      });

    }

  }

  /**服务器向客户端下发同步db */

  public SyncPID_db_Map() {

    if (SystemUtil.isServer()) {

      this.PID_db_Str = JSON.stringify(Object.fromEntries(this.PID_db_Map));

    }

  }

  /**服务器强制向客户端下发同步db,网络通畅的话客户端一定会收到更新 */

  public ForceSyncPID_db_Map() {

    if (SystemUtil.isServer()) {

      if (

        this.PID_db_Str == JSON.stringify(Object.fromEntries(this.PID_db_Map))

      ) {

        this.PID_db_Str =

          JSON.stringify(Object.fromEntries(this.PID_db_Map)) + " ";

      } else {

        this.PID_db_Str = JSON.stringify(Object.fromEntries(this.PID_db_Map));

      }

    }

  }





  // _isReady 标志用于指示 MyClearName 是否已经准备就绪

  private static _isReady = false;

  // _instance 用于存储 MyClearName 的实例

  private static _instance: MyClearName | null = null;

  // _queuedOperations 数组用于存储还未执行的方法调用

  private static _queuedOperations: (() => void)[] = [];

  // instance 属性用于获取 MyClearName 的实例

  public static get instance() {

    // 如果实例尚未创建，则创建一个代理（Proxy）

    if (!MyClearName._instance) {

      MyClearName._instance = new Proxy(

        {},

        {

          get: (target, prop) => {

            // 如果已经准备就绪，直接返回实例的方法或属性

            if (MyClearName._isReady) {

              return MyClearName._instance[prop];

            } else {

              // 如果尚未准备就绪，返回一个函数，将操作加入队列中

              return (...args: any[]) => {

                MyClearName._queuedOperations.push(() =>

                  MyClearName._instance[prop](...args),

                );

              };

            }

          },

        },

      ) as MyClearName;

    }

    return MyClearName._instance;

  }

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

  protected onStart() {

    // 初始化真正的 MyClearName 实例

    MyClearName._instance = this;

    MyClearName._isReady = true;

    // 执行队列中的操作

    MyClearName._queuedOperations.forEach((operation) => operation());

    MyClearName._queuedOperations = [];

    // console.log("[MyClearName] 初始化完成，感谢使用MyClear系列单脚本!");

    if (SystemUtil.isClient()) {

      if (!SystemUtil.isPIE) {

        Player.asyncGetLocalPlayer().then(async (myPlayer) => {

          let tempNick = AccountService.getNickName();

          let newNick = tempNick.replace(/[\r\n/g, "").substring(0, 20);

          if (newNick == "") {

            newNick = "神秘人";

          }

          Event.dispatchToServer("MyNick", newNick, "村民");

          myPlayer.character.displayName = "";

        });

      } else {

        Player.asyncGetLocalPlayer().then(async (myPlayer) => {

          let tempNick = "Pid_" + myPlayer.userId;

          let newNick = tempNick.replace(/[\r\n/g, "").substring(0, 20);

          Event.dispatchToServer("MyNick", newNick, "村民");

          myPlayer.character.displayName = "";

        });

      }

    }

    if (SystemUtil.isServer()) {

      Event.addClientListener(

        "MyNick",

        (eventplayer: Player, nickName: string, roleName) => {

          let pdnode = undefined;

          if (

            this.PID_db_Map.has(eventplayer.userId) &&

            this.PID_db_Map.get(eventplayer.userId)

          ) {

            pdnode = this.PID_db_Map.get(eventplayer.userId);

          }

          // 发过来的时候Map还没建好

          if (pdnode == undefined) {

            pdnode = new P_db();

            pdnode.nickName = nickName;

            // pdnode.roleName = roleName;

            this.PID_db_Map.set(eventplayer.userId, pdnode);

            this.SyncPID_db_Map();

          } else {

            pdnode.nickName = nickName;

            // pdnode.roleName = roleName;

            this.PID_db_Map.set(eventplayer.userId, pdnode);

            this.SyncPID_db_Map();

          }

          eventplayer.character.displayName = "";

        },

      );



      Event.addClientListener(

        "handleChangeRole",

        (eventplayer: Player, value) => {

          let pdnode = undefined;

          if (

            this.PID_db_Map.has(eventplayer.userId) &&

            this.PID_db_Map.get(eventplayer.userId)

          ) {

            pdnode = this.PID_db_Map.get(eventplayer.userId);

          }

          // 发过来的时候Map还没建好

          if (pdnode == undefined) {

            pdnode = new P_db();

            pdnode.roleName = value;

            this.PID_db_Map.set(eventplayer.userId, pdnode);

            this.SyncPID_db_Map();

          } else {

            pdnode.roleName = value;

            this.PID_db_Map.set(eventplayer.userId, pdnode);

            this.SyncPID_db_Map();

          }

        },

      );



      Event.addLocalListener(

        "ss_handleChangeRole",

        (eventplayer: Player, value) => {

          let pdnode = undefined;

          if (

            this.PID_db_Map.has(eventplayer.userId) &&

            this.PID_db_Map.get(eventplayer.userId)

          ) {

            pdnode = this.PID_db_Map.get(eventplayer.userId);

          }

          // 发过来的时候Map还没建好

          if (pdnode == undefined) {

            pdnode = new P_db();

            pdnode.roleName = value;

            this.PID_db_Map.set(eventplayer.userId, pdnode);

            this.SyncPID_db_Map();

          } else {

            pdnode.roleName = value;

            this.PID_db_Map.set(eventplayer.userId, pdnode);

            this.SyncPID_db_Map();

          }

        },

      );



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

        this.onPlayerJoin(player);

      });



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

        this.onPlayerLeft(player);

      });

    }

  }



  /**[服务器] 给NPC或玩家角色加血条，NPC或玩家角色被destory时会自动删除

   * @param char NPC或玩家角色(一般情况下就是NPC啦)

   * @param charParams 初始化参数

   * @example MyClearName.instance.addMyClearNameForChar(anyCharacter, { charName: "烤迪克", curHP: 30, maxHP: 100 , zOffset: 0 })

   * @returns

   */

  public static addMyClearNameForChar(

    char: Character | GameObject,

    charParams?: {

      nickName?: string;

      roleName?: string;

      zOffset?: number;

    },

  ) {

    if (SystemUtil.isClient()) {

      return;

    }

    if (charParams == undefined) {



      charParams = {

        nickName: "神秘人",

        roleName: "村民",

      };

    } else {

      if (charParams.nickName == null) {

        charParams.nickName = "神秘人";

      }

      if (charParams.roleName == null) {

        charParams.roleName = "村民";

      }

    }

    charParams.zOffset = 0;

    if (char instanceof Character) {

      mw.GameObject.asyncSpawn("UIWidget", { replicates: true }).then(

        (value) => {

          let charInstanceID = this.getInstanceIDByChar(char);

          let tempDB = new P_db();

          let worldUI = value as UIWidget;

          // 绑定位置

          char.attachToSlot(worldUI, 20);

          // 世界相对位置

          worldUI.localTransform.position = new Vector(0, 0, 25);

          // 锚点位置

          worldUI.pivot = new Vector(0.5, 0);

          worldUI.drawSize = new Vector2(400, 100);

          worldUI.widgetSpace = WidgetSpaceMode.OverheadUI;

          tempDB.WorldUIGuid = value.gameObjectId;

          // 设置昵称

          tempDB.nickName = charParams.nickName;

          char.displayName = "";

          MyClearName.instance.PID_db_Map.set(charInstanceID, tempDB);

          MyClearName.instance.SyncPID_db_Map();

          /**添加物体销毁回调*/

          let myCharobj = char as GameObject;

          // 当角色被销毁时，自动移除MyClearHP的血条

          myCharobj.onDestroyDelegate.add(() => {

            this.removeMyClearNameForChar(charInstanceID);

          });

        },

      );

    } else {

      mw.GameObject.asyncSpawn("UIWidget", { replicates: true }).then(

        (value) => {

          let charInstanceID = char.gameObjectId;

          let tempDB = new P_db();

          let worldUI = value as UIWidget;

          // 绑定位置

          // char.attachToSlot(worldUI, 23);

          worldUI.parent = char;

          // 世界相对位置

          worldUI.worldTransform.position = char.worldTransform.position

            .clone()

            .add(new Vector(0, 0, charParams.zOffset));

          // 锚点位置

          worldUI.pivot = new Vector(0.5, 0);

          worldUI.drawSize = new Vector2(400, 100);

          worldUI.widgetSpace = WidgetSpaceMode.OverheadUI;

          tempDB.WorldUIGuid = value.gameObjectId;

          // 设置昵称

          tempDB.nickName = charParams.nickName;

          // char.displayName = "";

          MyClearName.instance.PID_db_Map.set(charInstanceID, tempDB);

          MyClearName.instance.SyncPID_db_Map();

          /**添加物体销毁回调*/

          // let myCharobj = char as GameObject;

          // 当角色被销毁时，自动移除MyClearHP的血条

          char.onDestroyDelegate.add(() => {

            this.removeMyClearNameForChar(charInstanceID);

          });

        },

      );

    }

  }



  /**[服务器] 给NPC或玩家角色移除血条

   * @param charInstanceID NPC或玩家角色实例ID(一般情况下就是NPC啦)

   */

  public static removeMyClearNameForChar(charInstanceID: string) {

    if (MyClearName.instance.PID_db_Map.has(charInstanceID)) {

      let worldUIGUID =

        MyClearName.instance.PID_db_Map.get(charInstanceID).WorldUIGuid;

      if (worldUIGUID != null) {

        mw.GameObject.asyncFindGameObjectById(worldUIGUID).then((value) => {

          if (value) {

            value.destroy();

          }

          MyClearName.instance.PID_db_Map.delete(charInstanceID);

          MyClearName.instance.SyncPID_db_Map();

        });

      }

    } else {

      // console.warn("[MyClearName] 没找到" + charInstanceID + "有可能它自动销毁了，不过我还是建议你检查一下~");

    }

  }

  /**[双端] 获取NPC或玩家角色的昵称

   * @param charInstanceID NPC或玩家角色的实例id

   * @returns 玩家的昵称，*UnknownPlayer*则没拿到

   */

  public static getCharName(charInstanceID: string): string {

    let _name = "*UnknownPlayer*";

    if (

      MyClearName.instance.PID_db_Map.has(charInstanceID) &&

      MyClearName.instance.PID_db_Map.get(charInstanceID) != null

    ) {

      _name = MyClearName.instance.PID_db_Map.get(charInstanceID).nickName;

    }

    return _name;

  }

  /**[双端] 获取角色的实例id

   * @param char 需要获取id的角色

   * @returns 如果是玩家角色就返回userID，如果是NPC就返回gameobjectID

   */

  public static getInstanceIDByChar(char: Character | GameObject): string {

    let charInstanceID = null;

    if (char instanceof Character && char.player != null) {

      charInstanceID = char.player.userId;

    } else if (char.gameObjectId != null) {

      charInstanceID = char.gameObjectId;

    }

    return charInstanceID;

  }

  /**[双端] 获取实例id对应的角色

   * @param instanceID 实例id(userID或者gameobjectID)

   * @returns 角色

   */

  public static getCharByInstanceID(

    instanceID: string,

  ): Character | GameObject {

    let char = null;

    if (Player.getPlayer(instanceID) != null) {

      char = Player.getPlayer(instanceID).character;

    } else if (GameObject.findGameObjectById(instanceID)) {

      char = GameObject.findGameObjectById(instanceID);

    }

    return char;

  }



  /**[仅服务器] 当玩家加入时的方法

   * @effect 仅服务端

   */

  private async onPlayerJoin(player: Player) {

    player.onCharacterAdd.add((character) => {

      if (character.gameObjectId != undefined) {

        MyClearName.addMyClearNameForChar(character);

      }

    });

  }

  /**当玩家离开时的方法

   * @effect 仅服务端

   */

  private onPlayerLeft(player: Player) {

    let userId = player.userId;

    MyClearName.removeMyClearNameForChar(userId);

  }

}

不错不错，可以搞点常用的功能方法、事件的API试试，方便大家快速接入&用起来