[开发者心得] 你拉我呀我拉你，两个角色互相拉扯的效果实现

@Component

export default class PlayerScript extends Script {



    /** 玩家状态（多个状态可叠加） */

    @Property({ replicated: true })

    pawnState: number = 0;



    static isInState(state: number, targetState: number) {

        return (state & targetState) != 0;

    }



    /** 脚本所属玩家id */

    @Property({ replicated: true })

    scriptPlayerId: number = 0;



    /** 脚本玩家角色 */

    character: Character;



    /**

     * 玩家输入方向

     * @description 客户端生效，仅在被黏住的时候同步到服务端

     */

    inputDir: Vector2 = Vector2.zero;



    /** 输入更新计时器 */

    inputTimer: number = 0;



    protected onStart(): void {

        if (SystemUtil.isClient()) {

            this.client_init();

        }

        else {

            this.useUpdate = true;

        }

    }



    /** 客户端初始化 */

    async client_init() {

        console.log("[PlayerScript] client init");

        await ModuleService.ready();

        await Player.localPlayer.character.asyncReady();

        const scriptPlayer = await Player.asyncGetPlayer(this.scriptPlayerId);

        await scriptPlayer.character.asyncReady();

        this.character = scriptPlayer.character;

        PlayerManager.instance.clientRegisterPlayerScript(this);

        if (this.scriptPlayerId == Player.localPlayer.playerId) {

            this.useUpdate = true;

            this.character.description.base.wholeBody = "229674";

            this.character.syncDescription();

        }

    }



    protected onUpdate(dt: number): void {

        if (SystemUtil.isServer()) {

            return;

        }

        if (PlayerScript.isInState(this.pawnState, InStickState)) {

            this.inputTimer += dt;

            if (this.inputTimer > 0.1) {

                this.inputTimer = 0;

                let convertDir = new Vector(this.inputDir.y, this.inputDir.x, 0);

                let rot = Camera.currentCamera.worldTransform.rotation;

                rot.x = 0;

                rot.y = 0;

                convertDir = rot.rotateVector(convertDir);

                this.serverChangeInputDir(convertDir);

            }

        }

    }



    /** 服务端更新玩家输入方向 */

    @RemoteFunction(Server)

    protected serverChangeInputDir(dir: Vector2) {

        this.inputDir = dir;

    }



    /** 客户端更新玩家输入方向 */

    clientOnInputDir(dir: Vector2) {

        this.inputDir = dir;

    }



    /**

     * 修改玩家状态

     * @param state 状态

     * @param enable 是否启用

     */

    changePawnState(state: PawnState, enable: boolean) {

        if (enable) {

            this.pawnState |= state;

        }

        else {

            this.pawnState &= ~state;

        }

    }

}

export class StickInteractor extends InteractBase {

    /** 隐藏角色 */

    hiddenChar: Character;



    /** 发起角色信息 */

    sendChar: InteractCharData = new InteractCharData();



    /** 接收角色信息 */

    receiveChar: InteractCharData = new InteractCharData();



    interactor1: Interactor;

    interactor2: Interactor;



    /** 交互半径 */

    radius: number = 0;



    /** 发起者方向 */

    senderDirection: Vector = Vector.zero;

    /** 接收者方向 */

    receiverDirection: Vector = Vector.zero;



    /** 拉扯偏移方向 */

    biasDirection: Vector = Vector.zero;



    /** 是否在移动 */

    moving: boolean = false;



    /** 交互特效 */

    effect: number;



    /** 交互偏移高度 */

    static biasHeight: Vector = new Vector(0, 0, -50);



    /** 交互偏移距离 */

    static biasTrans: number = 40;



    /** 是否进入交互flag */

    entered1: boolean = false;

    entered2: boolean = false;



    /**

     * 初始化交互

     * @param sendCharScript 发起者脚本

     * @param receiveCharScript 接收者脚本

     */

    async initInteract(sendCharScript: PlayerScript, receiveCharScript: PlayerScript) {

        console.log("stick initInteract");

        this.sendChar.char = sendCharScript.character;

        this.sendChar.playerScript = sendCharScript;

        this.sendChar.playerId = sendCharScript.scriptPlayerId;

        this.receiveChar.char = receiveCharScript.character;

        this.receiveChar.playerScript = receiveCharScript;

        this.receiveChar.playerId = receiveCharScript.scriptPlayerId;

        // 修改交互双方状态

        this.sendChar.playerScript.changePawnState(PawnState.Stick, true);

        this.receiveChar.playerScript.changePawnState(PawnState.Sticked, true);

        // 创建隐藏角色

        this.hiddenChar = await GameObjPool.asyncSpawn("Character") as Character;

        this.hiddenChar.capsuleCorrectionEnabled = true;

        this.hiddenChar.setVisibility(PropertyStatus.Off);

        this.hiddenChar.setCollision(PropertyStatus.On);

        this.hiddenChar.movementDirection = MovementDirection.AxisDirection;

        this.hiddenChar.movementAxisDirection = Vector.forward;

        this.hiddenChar.collisionWithOtherCharacterEnabled = false;

        this.hiddenChar.complexMovementEnabled = true;



        // 将双方玩家角色通过交互物绑定到隐藏角色身上

        const senderPos = this.sendChar.char.worldTransform.position.clone();

        const receiverPos = this.receiveChar.char.worldTransform.position.clone();

        this.hiddenChar.worldTransform.position = new Vector((senderPos.x + receiverPos.x) / 2, (senderPos.y + receiverPos.y) / 2, senderPos.z);

        this.hiddenChar.worldTransform.rotation = Rotation.zero;

        this.radius = StickRadius;

        console.log("stick initInteract, spawn hiddenChar", this.hiddenChar.worldTransform.position, this.radius);

        this.interactor1 = await InteractBase.getInteractor();

        this.interactor2 = await InteractBase.getInteractor();

        this.interactor1.onEnter.add(() => {

            console.log("interactor1 onEnter");

            this.entered1 = true;

        })

        this.interactor2.onEnter.add(() => {

            this.entered2 = true;

            console.log("interactor2 onEnter");

        })

        this.interactor1.onLeave.add(() => {

            console.log("interactor1 onLeave");

        })

        this.interactor2.onLeave.add(() => {

            console.log("interactor2 onLeave");

        })

        this.interactor1.enter(this.sendChar.char, HumanoidSlotType.Buttocks);

        this.interactor2.enter(this.receiveChar.char, HumanoidSlotType.Buttocks);

        this.interactor1.parent = this.hiddenChar;

        this.interactor2.parent = this.hiddenChar;

        Vector.subtract(this.hiddenChar.worldTransform.position, senderPos, this.senderDirection);

        this.senderDirection.normalize().multiply(this.radius).add(StickInteractor.biasHeight);

        Vector.subtract(this.hiddenChar.worldTransform.position, receiverPos, this.receiverDirection);

        this.receiverDirection.normalize().multiply(this.radius).add(StickInteractor.biasHeight);

        this.interactor1.localTransform.position = this.senderDirection;

        this.interactor2.localTransform.position = this.receiverDirection;



        // 设置双方角色的交互姿态

        const senderStance = this.sendChar.char.loadSubStance(StickSenderAnim);

        senderStance.blendMode = StanceBlendMode.BlendUpper;

        senderStance.play();

        const receiverStance = this.receiveChar.char.loadSubStance(StickReceiverAnim);

        receiverStance.blendMode = StanceBlendMode.BlendUpper;

        receiverStance.play();

        this.sendChar.animation = this.sendChar.char.loadAnimation("223236");

        this.receiveChar.animation = this.receiveChar.char.loadAnimation("223236");

        this.sendChar.animation.slot = AnimSlot.Lower;

        this.receiveChar.animation.slot = AnimSlot.Lower;

        this.sendChar.animation.loop = 0;

        this.receiveChar.animation.loop = 0;

        this.effect = EffectService.playOnGameObject(StickedEff, this.receiveChar.char, { slotType: HumanoidSlotType.Head, loopCount: 0, position: Vector.up.multiply(50) });

        await WaitLoop.loop(() => this.entered1 && this.entered2);

    }



    onUpdate(dt: number) {

        if (this.sendChar.char && this.receiveChar.char) {

            this.move();

        }

    }



    async leaveInteract() {

        await WaitLoop.loop(() => this.entered1 && this.entered2);

        this._isLeaving = true;

        console.log("stick leaveInteract");

        this.interactor1.leave(this.interactor1.worldTransform.position);

        this.interactor2.leave(this.interactor2.worldTransform.position);

        console.log("leaveInteract", this.sendChar.char.worldTransform.position);

        console.log("leaveInteract", this.receiveChar.char.worldTransform.position);

        this.sendChar.animation.stop();

        this.receiveChar.animation.stop();

        this.sendChar.char.currentSubStance.stop();

        this.receiveChar.char.currentSubStance.stop();

        this.sendChar.playerScript.changePawnState(PawnState.Stick, false);

        this.receiveChar.playerScript.changePawnState(PawnState.Sticked, false);

        EffectService.stop(this.effect);

        this.interactor1.parent = null;

        this.interactor2.parent = null;

        GameObjPool.despawn(this.interactor1);

        GameObjPool.despawn(this.interactor2);

        this.interactor1 = null;

        this.interactor2 = null;

        this.hiddenChar.complexMovementEnabled = false;

        GameObjPool.despawn(this.hiddenChar);

        this.hiddenChar = null;

        this.onDestroy();

    }



    move() {

        // dir1和dir2结合，如果轴符号一致，则取平均值，否则相加

        const direct = Vector.zero;

        const dir1 = this.sendChar.playerScript.inputDir;

        const dir2 = this.receiveChar.playerScript.inputDir;

        direct.x = (dir1.x + dir2.x) / 2;

        direct.y = (dir1.y + dir2.y) / 2;

        if (direct.length > 0.5) {

            direct.normalize().multiply(0.5);

        }

        this.hiddenChar.addImpulse(new Vector(direct.x, direct.y, 0).multiply(500), true);

        if (dir1.length > 0.1) {

            this.senderDirection.set(dir1.x, dir1.y, 0).normalize();

            Vector.rotateZ(this.senderDirection, Vector.zero, Math.PI / 2, this.biasDirection);

            this.biasDirection.multiply(StickInteractor.biasTrans);

            this.interactor1.localTransform.position = Vector.multiply(this.senderDirection, this.radius).add(StickInteractor.biasHeight);

            this.interactor1.localTransform.rotation = Rotation.fromVector(this.senderDirection);

            this.interactor2.localTransform.position = Vector.multiply(this.senderDirection, -this.radius).add(StickInteractor.biasHeight).add(this.biasDirection);

            this.interactor2.localTransform.rotation = Rotation.fromVector(this.senderDirection.multiply(-1));

            console.log("moveUpdate", this.senderDirection.length);



        }

        else if (dir1.length <= 0.1 && dir2.length > 0.1) {

            this.receiverDirection.set(dir2.x, dir2.y, 0).normalize();

            Vector.rotateZ(this.receiverDirection, Vector.zero, -Math.PI / 2, this.biasDirection);

            this.biasDirection.multiply(StickInteractor.biasTrans);

            this.interactor2.localTransform.position = Vector.multiply(this.receiverDirection, this.radius).add(StickInteractor.biasHeight).add(this.biasDirection);

            this.interactor2.localTransform.rotation = Rotation.fromVector(this.receiverDirection);

            this.interactor1.localTransform.position = Vector.multiply(this.receiverDirection, -this.radius).add(StickInteractor.biasHeight);;

            this.interactor1.localTransform.rotation = Rotation.fromVector(this.receiverDirection.multiply(-1));

        }



        // direct 大于一个接近0的值

        if (direct.length > 0.1) {

            if (!this.moving) {

                this.moving = true;

                this.doAction(this.moving);

            }

        }

        else {

            if (this.moving) {

                this.moving = false;

                this.doAction(this.moving);

            }

        }

    }



    doAction(play: boolean) {

        //console.log("stick doAction", play);

        if (play) {

            this.sendChar.animation.play();

            this.receiveChar.animation.play();

        }

        else {

            this.sendChar.animation.stop();

            this.receiveChar.animation.stop();

        }

    }

}