【资源分享】快速接入动作、快捷表情和快捷对话气泡

快速接入动作和快捷表情、快捷对话




1.接入动作列表
第一步：首先需要一个滚动框类，这里有一份写好的滚动框类
SuperScrollView.ts (11.07 KB, 下载次数: 55)

2023-11-13 17:30 上传

点击文件名下载附件

[url=]第二步：[/url]需要两个ui文件，一个是动作滚动框ui，一个是动作item ui
记得拖入编辑器后导出ui脚本

Action.ui (6.13 KB, 下载次数: 56)

2023-5-18 15:36 上传

点击文件名下载附件
ActionItem.ui (6.57 KB, 下载次数: 51)

2023-5-18 15:37 上传

点击文件名下载附件

第三步：需要一个动作表来配置每个item对应的名称、需要播放的动作id、是否循环播放、播放缩放等等。
Action_动作.xlsx (9.58 KB, 下载次数: 55)

2023-5-18 15:45 上传

点击文件名下载附件
导表工具及使用细节参见论坛导表工具：https://forum.ark.online/forum.php?mod=viewthread&tid=1280

第四步：最后我们需要编写ui的ts脚本

/** * 动作滚动列表UI */

export class UI_Action extends Action_Generate {

    private dt: number = 0;

    // UIMultiScroller类就是刚刚下载的滚动框类里中的有限滚动框类

    private _scrollAction: UIMultiScroller = null;

    onStart() {

        this._scrollAction = new UIMultiScroller(   //初始化动作滑动框

            this.scroll_Action,

            this.content,

            UI_ActionItem,

            3, 45, 0, 150, 150, 5, 0, 0);

        this.btn_Close.onClicked.add(() => {

            mw.UIService.hide(UI_Action);

        })

    }



    /**动作数据设置 */

    actionSetData() {

        let eles = GameConfig.Action.getAllElement();

        // oTrace(`===========actionSetData ids.length:${eles.length}`);

        this._scrollAction.setData(eles);

    }



    onShow() {

        this.actionSetData();   //每次展示动作面板时 要重新刷新数据

        console.log("aaa")

    }



}   

/** * 动作itemUI */

export default class UI_ActionItem extends ActionItem_Generate implements IItemRender {

    get clickObj(): mw.StaleButton {

        return this.btn_actionFunc;

    }

    setSelect(bool: boolean): void {



    }

    // get uiObject(): mw.Widget {

    //  return this.uiObject;

    // }



    private dt: number = 0;

    private _data: IActionElement;

    onStart() {

        this.btn_actionFunc.touchMethod = (mw.ButtonTouchMethod.PreciseTap);

        this.btn_actionFunc.clickMethod = (mw.ButtonClickMethod.PreciseClick);

        this.btn_actionFunc.onClicked.add(this.onCLick.bind(this));

    }



    setData(data: IActionElement) {

        this._data = data;

        this.txt_Name.text = (this._data.actionname);

        this.img_Item.imageGuid = (this._data.iconguid);

    }



    onCLick() {

        PlayerManagerExtesion.rpcPlayAnimation(Player.localPlayer.character, this._data.actionguid, this._data.loopPlay)

    }



    //预加载数据

    private static _objs: UI_ActionItem[] = [];

    public static Init(count: number) {

        for (let index = 0; index < count; index++) {

            this._objs.push(mw.UIService.create(UI_ActionItem));

        }

    }

    public static Gain(): UI_ActionItem {

        if (this._objs.length > 0) {

            return this._objs.pop();

        }

        return mw.UIService.create(UI_ActionItem);

    }



}

2.接入快捷表情和快捷对话气泡
第一步：仍需要使用上述滚动框类


第二步：仍需要使用上述ui内的组件，可以重新创建两个ui，将上述ui内的组件拷贝过来。


第三步：快捷表情、快捷对话表
QuickEmoji_快捷表情.xlsx (5.77 KB, 下载次数: 56)

2023-5-18 15:49 上传

点击文件名下载附件
QuickTalk_快捷对话.xlsx (5.92 KB, 下载次数: 53)

2023-5-18 15:49 上传

点击文件名下载附件

第四步：由于特效只能在c端播放，所以快捷表情和对话需要通过s端广播给其他c端进行显示
QuickTalkModule.ts (7.02 KB, 下载次数: 55)

2023-11-13 17:30 上传

点击文件名下载附件

第五步：导入对话气泡ui
BubbleUI.ui (4.48 KB, 下载次数: 52)

2023-5-18 15:50 上传

点击文件名下载附件
记得复制BubbleUI的id赋给QuickTalkModuleC类的uiGuid属性，这样才能正确生成对话气泡ui

第六步：最后是编写一下ui脚本

/**

 * 快捷表情itemUI，这里可以extends自己导出的ui脚本

 */

export class UI_EmojiItem extends EmojiItemUI_Generate implements IItemRender {



    private _data: IQuickEmojiElement;



    setData(data: IQuickEmojiElement): void {

        this._data = data;

        this.img_Emoji.imageGuid = data.emojiGuid;

    }



    get clickObj(): mw.StaleButton {

        return this.btn_Emoji;

    }



    setSelect(bool: boolean): void {

        // SoundService.playSound



    }



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

    protected onStart(): void {

        this.btn_Emoji.onClicked.add(() => {

            ModuleService.getModule(QuickTalkModule_C).playEmojiEffect(this._data.effectGuid);

        })

    }



}



/**快捷说话item */

export class UI_QtItem extends QtItemUI_Generate implements IItemRender {



    private _data: IQuickTalkElement;

    /**文字滚动宽度 为anchor宽度 */

    private _width: number;

    /**文本每100ms移动的距离 */

    private _dist: number = 11;

    /**文字开始滚动时cdtag */

    private _startCdTag: number;

    /**文字开始滚动时，停留几秒 1000 = 1s */

    private _startCdTime: number = 1800;

    /**文字滚动到结尾时cdtag */

    private _endCdTag: number;

    /**文字滚动到结尾时，停留几秒 */

    private _endCdTime: number = 2000;

    setData(data: IQuickTalkElement): void {

        this._data = data;

        this.txt_Qt.text = data.talkContent;

        this._posX = 0;

        this.txt_Qt.position = mw.Vector2.zero;

        setTimeout(() => {

            this.canUpdate = this.txt_Qt.size.x > this._width;

        }, 1);

    }



    /*

    *这里rolling是用作item的左右移动，方便玩家查看快捷对话的整段内容

    */

    startRoll() {

        this.clearTags();

        this.canUpdate = false;

        this._startCdTag = setTimeout(() => {

            this.canUpdate = true;

        }, this._startCdTime);

    }



    endRoll() {

        this.clearTags();

        this.canUpdate = false;

        this._endCdTag = setTimeout(() => {

            this.canUpdate = true;

        }, this._endCdTime);

    }



    Rolling() {

        if (this._posX === 0) {

            this._tmpVec2.x = this._posX;

            this.txt_Qt.position = this._tmpVec2;

            this.startRoll();

            this._posX -= this._dist;

        }

        else if (Math.abs(this._posX) > this.txt_Qt.size.x - this._width) {

            this.endRoll();

            this._posX = 0;

        } else {

            this._tmpVec2.x = this._posX;

            this.txt_Qt.position = this._tmpVec2;

            this._posX -= this._dist;

        }

    }



    clearTags() {

        if (this._startCdTag) {

            clearTimeout(this._startCdTag);

            this._startCdTag = null;

        }

        if (this._endCdTag) {

            clearTimeout(this._endCdTag);

            this._endCdTag = null;

        }

    }



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

    protected onStart(): void {

        this.canUpdate = false;

        this._width = this.anchor.size.x;

        this.btn_Qt.onClicked.add(() => {

            ModuleService.getModule(QuickTalkModule_C).playQuickTalk(this._data.talkContent);

        });

    }



    private _posX: number = 0;

    private _tmpVec2: mw.Vector2 = new mw.Vector2();

    private _dt: number = 0;



    protected onUpdate(dt: number): void {

        this._dt += dt;

        if (this._dt < 0.1) {

            return;

        }

        this._dt = 0;



        this.Rolling();

    }

    /**item隐藏时的回调 */

    hideAction() {

        this.clearTags();

        this.canUpdate = false;

    }



    get clickObj(): mw.StaleButton {

        return this.btn_Qt;

    }



    setSelect(bool: boolean): void {



    }



}

最后，最小Demo献上
Demo.rar (239.71 KB, 下载次数: 43)

2023-11-13 17:22 上传

点击文件名下载附件