game-physicsgame-developmentwebassemblyassemblyscript

Pong Game - The ball movement is not smooth when storing position with float


I am developing a pong-like game using Wasm4. I have important entities with different approaches for movement, one is the Player which is the paddle and the other is the Ball, the mainly difference between the two of them are that the Player moves through the user input, storing it's position using i32 and the Ball has a speed and a direction vector which updates it's position every frame.


The Ball code

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
    );
  }
}

The thing is, when I use the position with f32 the movement seems pretty glitchy but accurate with the direction given in the spawn, but when I change the position to i32 the movement is very smooth, but the movement is very odd, it won't work with smaller speeds for instance.

I am fairly new to game development so I don't know if there's a problem in my formula or I should be adding another element somewhere.

Hope someone can help me. (If I didn't provided enough information please request me and I'll enhance the answer)


Solution

  • Unfortunately, it seems like you are not doing anything wrong, but you are starting to hit one of the deeper subjects in game development: anti-aliasing.

    The Wikipedia article for rasterization has a nice animation about it. If this is the kind of thing that happens to your game, then it may be the time to introduce anti-aliasing filters. Unfortunately, I am not an expert in game development, so I can just direct you to the simplest algorithms, like Bresenham. The Wikipedia article should also rabbit-hole you into this vast field.

    And, of course, Handmade Hero is always a nice learning resource.