使用Wasm4开发Pong类游戏：f32存球位置致移动卡顿求助

问题描述 #

我正在用Wasm4开发一款Pong类游戏，核心实体Player（ paddle）和Ball的移动逻辑不同：Player通过用户输入移动，用i32存储位置；Ball则通过speed和direction向量逐帧更新位置。

Ball的代码如下：

export class Ball extends Entity {
   private position: Position<f32> = new Position<f32>();
   private speed: u8 = 2;
   
   public spawn(x: i32, y: i32): void {
    this.position.x = x;
    this.position.y = y;

    let angle = <f32>randomInRangeFloat(30, 150);
    angle = angle * <f32>(Math.PI / 180);

    this.direction.x = <f32>Math.cos(angle);
    this.direction.y = <f32>Math.sin(angle);
  }

  public update(): Ball {
    this.position.x += this.direction.x * this.speed;
    this.position.y += this.direction.y * this.speed;

    // ...
  }

  public draw(): Ball {
    w4.oval(
      <i32>this.position.x,
      <i32>this.position.y,
      this.size,
      this.size
    );
  }
}

遇到的问题：用f32存储Ball位置时，移动方向准确但卡顿明显；改用i32存储时移动流畅，但运动异常，无法适配较小的speed值。

问题原因分析 #

• f32存储卡顿：Wasm4的渲染API（如w4.oval）只接受i32类型坐标，直接将f32强转i32会丢失小数部分，导致球的位置不是逐帧平滑过渡，而是出现跳变，视觉上表现为卡顿。
• i32存储运动异常：i32是整数类型，当speed较小或direction向量分量小于1时，相乘结果会被截断为0，球会停止在某个方向上移动，出现运动异常。

解决方法 #

方案1：整数模拟浮点位置（推荐） #

用i32存储放大后的位置，保留小数精度，渲染时再缩小回原始坐标，兼顾精度与流畅度：

export class Ball extends Entity {
   // 用i32存储放大16倍的位置，模拟浮点精度
   private position: Position<i32> = new Position<i32>();
   private speed: u8 = 2;
   // 缩放因子选2的幂（如16），计算更高效
   private readonly SCALE: i32 = 16;
   
   public spawn(x: i32, y: i32): void {
    // 初始位置放大SCALE倍
    this.position.x = x * this.SCALE;
    this.position.y = y * this.SCALE;

    let angle = <f32>randomInRangeFloat(30, 150);
    angle = angle * <f32>(Math.PI / 180);

    // 方向向量同步放大SCALE倍，转为i32存储
    this.direction.x = <i32>(Math.cos(angle) * this.SCALE);
    this.direction.y = <i32>(Math.sin(angle) * this.SCALE);
  }

  public update(): Ball {
    // 用放大后的数值计算移动，保留精度
    this.position.x += this.direction.x * this.speed;
    this.position.y += this.direction.y * this.speed;

    // 碰撞检测等逻辑也用放大后的位置计算，避免精度误差
  }

  public draw(): Ball {
    // 渲染时缩小回原始坐标，用整除保证整数
    w4.oval(
      this.position.x / this.SCALE,
      this.position.y / this.SCALE,
      this.size,
      this.size
    );
    return this;
  }
}

方案2：优化f32位置的渲染平滑度 #

若坚持用f32存储位置，不要直接强转i32，改用四舍五入让位置过渡更自然：

public draw(): Ball {
    // 用四舍五入替代直接截断，缓解卡顿
    w4.oval(
      <i32>Math.round(this.position.x),
      <i32>Math.round(this.position.y),
      this.size,
      this.size
    );
    return this;
  }

这种方式能改善卡顿，但仍可能存在细微跳变，稳定性不如方案1。

额外优化建议 #

• 碰撞检测时统一坐标体系：用放大后的整数位置计算，避免浮点精度误差。
• 调整speed值时结合缩放因子：比如原本speed=2，用SCALE=16时，实际像素移动速度仍为2，无需额外调整。

内容的提问来源于stack exchange，提问作者Daniel Boll