18. スクショを撮る

はじめに

Pキーでスクショを撮るようにしました。

方針

Sceneではなくmain.tsにイベントハンドラを登録することで、どのSceneでもスクショが撮れるようになります。

実装

main.ts

イベントハンドラを追加します。

window.addEventListener('keydown', (event) => {
  if (event.key === 'p' || event.key === 'P') {
    const gameCanvas = document.querySelector('canvas');
    if (!gameCanvas) return;

    const dataUrl = gameCanvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = `screenshot_${Date.now()}.png`;
    link.click();
  }
});

configにpreserveDrawingBufferを追加します。

// config 例
const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [MainScene, AnotherScene],
  render: {
    pixelArt: true,
    preserveDrawingBuffer: true, // これを追加
  }
};

まとめ

これでスクショを撮れるようにしました。