Phaser-3运行时如何实现图像可见平滑移动，适配RPG战斗入场动画

完全可以实现，Phaser 3内置的补间动画系统可以直接实现你需要的战斗角色入场效果，不需要手动在update周期里修改坐标。

实现思路 #

你需要做的是：

1. 先把角色的初始位置设置在屏幕外（从右侧入场就把初始x设为大于画布宽度1900的值，左侧入场就设为小于0的值）
2. 在create函数中调用this.tweens.add()方法给角色添加移动补间即可

修改后的完整代码 #

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>battle</title>
    <script src="phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>
<script type="text/javascript">
var config = {
    type: Phaser.AUTO,
    width: 1900,
    height: 900,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0},
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
        }
    };
var game = new Phaser.Game(config);

function preload(){ 
    this.load.image("background","assets/battle background.png");
    this.load.image("hydroBot","assets/water hydrant.png");
};
function create(){
    const battle = this.add.image(0,0,"background").setOrigin(0,0);
    // 初始位置设置在屏幕右侧外，用户不可见的位置
    const bot= this.add.image(2500,200,"hydroBot");
    bot.setScale(5);
    // 添加移动补间动画
    this.tweens.add({
        targets: bot,
        x: 1000, // 目标x坐标，即你需要的最终站位
        duration: 1500, // 动画持续1.5秒，可自行调整数值
        ease: 'Power2' // 缓动效果，入场更自然，换成Linear即可匀速移动
    })
};
function update(){

};
</script>
</body>

常用参数调整说明 #

• 如果要从左侧入场，把初始x坐标改成-200即可，目标x保持你需要的站位值
• 要调整移动速度，修改duration值即可，数值越大移动越慢
• 多个角色同时入场的话，给每个角色的补间添加不同的delay参数（单位毫秒），就可以实现依次入场的效果
• 要实现移动结束后触发后续逻辑（比如显示UI、播放技能动画等），可以给补间添加onComplete回调函数

内容的提问来源于stack exchange，提问作者Genesis cookie