如何在 Phaser 3 中正确调整精灵的大小（最新）

Question

I'm creating a hex grid made with Graphics and then generating a texture from that:

function GraphicsCreator(scene, hexShape, hex) {
  const graphics = scene.add.graphics({ x: 0, y: 0, add: false });

  graphics.lineStyle(3, hex.outlineColour)

  graphics.beginPath();
  graphics.moveTo(hexShape.points[0].x, hexShape.points[0].y);

  for (let i = 1; i < hexShape.points.length; i++) {
    graphics.lineTo(hexShape.points[i].x, hexShape.points[i].y);
  }

  graphics.closePath();
  graphics.strokePath();
  graphics.fillStyle(hex.colour);
  graphics.fillPoints(hexShape.points, true);
  graphics.setDepth(1);

  graphics.generateTexture('hex')

  graphics.destroy();
}

I'm then trying to get that texture for each hex and map it to the proper location which is all working fine.

aIHand.forEach(hex => {
  const point = hex.toPoint()
  const corners = hex.corners().map(corner => corner.add(point))
  const hexShape = new Phaser.Geom.Polygon(corners);

  hex.originalPos = point
  hex.id = aiCardNumber

  if (hex.id == 1) {
    GraphicsCreator(this, hexShape, hex)
  }

  const sprite = TextureGetter(this, hex)
  const gameObjectContainer = CreateGameObjectContainer(this, hexShape, hex, true, sprite)

  DebugBounds(sprite, this)

  InputManager(this, gameObjectContainer)
  //aiContainer.add(gameObjectContainer)
  aiCardNumber++
})

function TextureGetter(scene, hex) {
  const sprite = scene.add.sprite(hex.originalPos.x, hex.originalPos.y, 'hex')
  sprite.setDisplayOrigin(0)

  return sprite
}

function DebugBounds(obj, scene) {
  let render = scene.add.graphics();
  let bounds = obj.getBounds();
  render.lineStyle(3, 0xffff37);
  render.strokeRectShape(bounds);
  console.log(obj)
}

When I DebugBounds() for each sprite and also log them, I can see that displayHeight and displayWidth are the size of the entire screen and changing this or scale reduces the image to be basically non-visible as if it is the corner of the entire screen bounds. I really don't get this, please see the screenshot below

As far as I'm concerned, the process should be; CreateGraphics -> GenerateTexture -> loop through array and place texture in position -> bounds should be the size of the texture/graphic. What am I doing wrong here?

Here is also the config incase there is something here causing it, though I've tried removing/changing scale settings

const config = {
  type: Phaser.AUTO,
  width: 1920,
  height: 1080,
  scale: {
    mode: Phaser.Scale.FIT,
    parent: 'phaser-example',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 1920,
    height: 1080
  },
  backgroundColor: '#303352',
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
      debug: true
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  },
};

Thanks

Answer 1

Thanks to Phaser Discord, graphics.generateTexture needs to have an explicit size

so graphics.generateTexture('hex', 30, 30) for example!