fix(gameobject): pass required props to TileSprite

Author: remarkablemark

src/components/GameObjects.ts

@@ -743,7 +743,14 @@ export const TextStyle = GameObjects.TextStyle as unknown as FC<
  * An important note about Tile Sprites and NPOT textures: Internally, TileSprite textures use GL_REPEAT to provide seamless repeating of the textures. This, combined with the way in which the textures are handled in WebGL, means they need to be POT (power-of-two) sizes in order to wrap. If you provide a NPOT (non power-of-two) texture to a TileSprite it will generate a POT sized canvas and draw your texture to it, scaled up to the POT size. It's then scaled back down again during rendering to the original dimensions. While this works, in that it allows you to use any size texture for a Tile Sprite, it does mean that NPOT textures are going to appear anti-aliased when rendered, due to the interpolation that took place when it was resized into a POT texture. This is especially visible in pixel art graphics. If you notice it and it becomes an issue, the only way to avoid it is to ensure that you provide POT textures for Tile Sprites.
  */
 export const TileSprite = GameObjects.TileSprite as unknown as FC<
-  Props<GameObjects.TileSprite>
+  Props<GameObjects.TileSprite> & {
+    x: GameObjects.TileSprite['x'];
+    y: GameObjects.TileSprite['y'];
+    width: GameObjects.TileSprite['width'];
+    height: GameObjects.TileSprite['height'];
+    texture: string;
+    frame?: string | number;
+  }
 >;
 
 /**

src/render/gameobject.test.tsx

@@ -246,6 +246,85 @@ describe('GameObject', () => {
   });
 });
 
+describe.each(['Image', 'Sprite', 'NineSlice'] as const)('%s', (component) => {
+  const Component = GameObjects[component];
+
+  it('adds game object', () => {
+    const props = {
+      x: 1,
+      y: 2,
+    };
+    const texture = 'texture';
+    const frame = 'frame';
+    addGameObject(
+      <Component {...props} texture={texture} frame={frame} />,
+      scene,
+    );
+    expect(Phaser.GameObjects[component]).toHaveBeenCalledWith(
+      scene,
+      props.x,
+      props.y,
+      texture,
+      frame,
+    );
+    expect(setProps).toHaveBeenCalledWith(expect.anything(), props, scene);
+  });
+
+  it('does not pass certain props to setProps', () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+    const props = {
+      children: [],
+      key: null,
+      ref: () => {},
+      x: 1,
+      y: 2,
+      texture: 'texture',
+      frame: 'frame',
+    };
+    addGameObject(<Component {...props} />, scene);
+    expect(setProps).toHaveBeenCalledWith(
+      expect.anything(),
+      {
+        x: props.x,
+        y: props.y,
+      },
+      scene,
+    );
+    consoleErrorSpy.mockRestore();
+  });
+});
+
+describe('composite', () => {
+  function Composite() {
+    return (
+      <Fragment>
+        <GameObjects.Text
+          text="text"
+          style={{
+            color: '#fff',
+            font: '42px Arial',
+          }}
+        />
+        <GameObjects.Sprite texture="texture" frame="frame" />
+      </Fragment>
+    );
+  }
+
+  it('renders composite component', () => {
+    function MyComponent() {
+      return (
+        <Fragment>
+          <Composite />
+          <GameObjects.Text />
+        </Fragment>
+      );
+    }
+    addGameObject(<MyComponent />, scene);
+    expect(Phaser.GameObjects.Text).toHaveBeenCalledTimes(2);
+    expect(Phaser.GameObjects.Sprite).toHaveBeenCalledTimes(1);
+  });
+});
+
 describe('Light', () => {
   it('adds game object', () => {
     const props = {
@@ -446,81 +525,29 @@ describe('Text', () => {
   });
 });
 
-describe.each(['Image', 'Sprite', 'NineSlice'] as const)('%s', (component) => {
-  const Component = GameObjects[component];
-
+describe('TileSprite', () => {
   it('adds game object', () => {
     const props = {
       x: 1,
       y: 2,
+      width: 3,
+      height: 4,
     };
     const texture = 'texture';
     const frame = 'frame';
     addGameObject(
-      <Component {...props} texture={texture} frame={frame} />,
+      <GameObjects.TileSprite {...props} texture={texture} frame={frame} />,
       scene,
     );
-    expect(Phaser.GameObjects[component]).toHaveBeenCalledWith(
+    expect(Phaser.GameObjects.TileSprite).toHaveBeenCalledWith(
       scene,
       props.x,
       props.y,
+      props.width,
+      props.height,
       texture,
       frame,
     );
     expect(setProps).toHaveBeenCalledWith(expect.anything(), props, scene);
   });
-
-  it('does not pass certain props to setProps', () => {
-    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
-    const props = {
-      children: [],
-      key: null,
-      ref: () => {},
-      x: 1,
-      y: 2,
-      texture: 'texture',
-      frame: 'frame',
-    };
-    addGameObject(<Component {...props} />, scene);
-    expect(setProps).toHaveBeenCalledWith(
-      expect.anything(),
-      {
-        x: props.x,
-        y: props.y,
-      },
-      scene,
-    );
-    consoleErrorSpy.mockRestore();
-  });
-});
-
-describe('composite', () => {
-  function Composite() {
-    return (
-      <Fragment>
-        <GameObjects.Text
-          text="text"
-          style={{
-            color: '#fff',
-            font: '42px Arial',
-          }}
-        />
-        <GameObjects.Sprite texture="texture" frame="frame" />
-      </Fragment>
-    );
-  }
-
-  it('renders composite component', () => {
-    function MyComponent() {
-      return (
-        <Fragment>
-          <Composite />
-          <GameObjects.Text />
-        </Fragment>
-      );
-    }
-    addGameObject(<MyComponent />, scene);
-    expect(Phaser.GameObjects.Text).toHaveBeenCalledTimes(2);
-    expect(Phaser.GameObjects.Sprite).toHaveBeenCalledTimes(1);
-  });
 });

src/render/gameobject.ts

@@ -157,6 +157,18 @@ export function addGameObject(
       gameObject = new element.type(scene, props.x, props.y, props.text, style);
       break;
 
+    case element.type === Phaser.GameObjects.TileSprite:
+      gameObject = new element.type(
+        scene,
+        props.x,
+        props.y,
+        props.width,
+        props.height,
+        texture,
+        frame,
+      );
+      break;
+
     // Phaser component
     case gameObjects.indexOf(element.type) !== -1:
       gameObject = new element.type(scene);