Handling Pixel Images

[sy318]

Overall

We understand that pixel images need to be scaled by whole numbers to prevent distortion. Is there a method to load pixel images with Flame Sprites that ensures they are scaled by whole numbers?

As shown in the picture, the ratio of one pixel is broken, so the thickness of the line is not constant.

Examples

[eunjijeon11]

Below is the code we use currently to load the character image. You can find this code here.

const double CHARACTER_SIZE_X = 100 * 1.4;
const double CHARACTER_SIZE_Y = 128 * 1.4;

class MyPlayer extends SpriteAnimationGroupComponent<CharacterState> {

  late final Vector2 screensize;

  late Sprite idle;
  late Sprite walk1;
  late Sprite walk2;

  MyPlayer(this.uid, this.screensize, this.joystick)
      : super(
            size: Vector2(CHARACTER_SIZE_X * 1.w, CHARACTER_SIZE_Y * 1.w),
            anchor: Anchor.center,
            position: screensize * 0.5) {
    moveForce = Vector2.zero();
  }

  @override
  FutureOr<void> onLoad() async {
    idle = await Sprite.load("characters/${role.code}_idle.png");
    walk1 = await Sprite.load("characters/${role.code}_walk1.png");
    walk2 = await Sprite.load("characters/${role.code}_walk2.png");

    // ... (omit) ...

    return super.onLoad();
  }