NineSlice not rendering correctly on games with `pixelArt` set to `true`

[incubusknight]

Version

• Phaser Version: 4.0.0 (Vite bundler)

• Operating system: Windows 11

• Browser: Chrome 146.0.7680.178

Description

The nineslice GameObject is not behaving correctly when using a game with pixelArt true. It seems when a nineslice object has an odd width or height the rendered content seems to be truncated by one pixel.

This is how the object is supposed to look; in this example both width (114px) and height (26px) are even:

This is how the object looks when the width is 114px and height is 25px; top looks wrong:

This is how the object looks when the width is 115px and height is 26px; right side looks wrong:

This is how the object looks when both width and height are odd (115px and 25px); both top and right side look wrong:

As you can see, when an odd size is used either the top or the right part of the nineslice gets truncated (or not rendered.)

Example Test Code

Game config:

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 450,
  parent: 'game-container',
  pixelArt: true,
  roundPixels: true,
  scale: {
    zoom: 2,
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  physics: {
    default: 'arcade',
    arcade: {
      debug: false,
      gravity: { y: 0, x: 0 }
    }
  },
  backgroundColor: '#fff',
  scene: [
    new LoaderScene({ key: 'loader' }),
    new TitleControllerScene({ key: 'title-controller' }),
    new TitleMenuScene({ key: 'title-menu' }),
  ]
};

This can be easily reproduce, you just need a relatively small nineslice image. The code below is what I'm using to test in my code:

preload() {
  this.load.atlas('ui-atlas', '/images/ui/ui-atlas.png', '/images/ui/ui-atlas.json');
}

create() {
  // Render bug
  this.add.nineslice(100, 100, 'ui-atlas', 'panel-round-7p-bg', 115, 25, 6, 6, 6, 6);

  // Works fine
  this.add.nineslice(100, 150, 'ui-atlas', 'panel-round-7p-bg', 114, 26, 6, 6, 6, 6);
}

Additional Information

In my example the texture frame is solid, but the frames that are outlines look even worse because either top or right lines are missing.

The issue does not happen when pixelArt is false. But that ain't gonna work for me.

Here's the ui-atlas files needed to reproduce.

ui-atlas.json