テンプレートを使って作成するとmain.jsは以下のようになっている。

import { Game as MainGame } from './scenes/Game';
import { AUTO, Scale,Game } from 'phaser';

//  Find out more information about the Game Config at:
//  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
const config = {
    type: AUTO,
    width: 1024,
    height: 768,
    parent: 'game-container',
    backgroundColor: '#028af8',
    scale: {
        mode: Scale.FIT,
        autoCenter: Scale.CENTER_BOTH
    },
    scene: [
        MainGame
    ]
};

export default new Game(config);

import { AUTO, Scale,Game } from 'phaser'; を記載しない場合は、
AUTO、Scale、Gameに Phaser. をつける。

import { Game as MainGame } from './scenes/Game';
//import { AUTO, Scale, Game } from 'phaser';

//  Find out more information about the Game Config at:
//  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
const config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    parent: 'game-container',
    backgroundColor: '#028af8',
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: [
        MainGame
    ]
};

export default new Phaser.Game(config);

設定はこちら

import { Game as MainGame } from './scenes/Game';
import { AUTO, Scale, Game } from 'phaser';

const config = {
    type: AUTO,
    width: 300,
    height: 300,
    parent: 'game-container',
    backgroundColor: '#028af8',
    scale: {
        mode: Scale.NONE, //
        autoCenter: Scale.CENTER_BOTH
    },
    scene: [
        MainGame
    ]
};

export default new Game(config);

画像の読み込みと配置

100x100のblockを、(0,0)の座標に配置してみる。

Game.js

import { Scene } from 'phaser';

export class Game extends Scene {
    constructor() {
        super('Game');
    }

    preload() {
        this.load.image('block', 'assets/Block.png');
    }

    create() {
        this.add.image(0, 0, 'block');
    }
}

画像をロードするためには、
this.load.image(キー名, パス); を指定します。
パスは、publicフォルダからの相対パスです。

ロードで読み込んだ画像を配置するためには、以下のように記載します。
this.add.iamge(x座標, y座標, キー名);

配置した結果は、以下のとおりです。

この結果から、0,0 の原点は左上であることと、画像は右下しかみえていないことから、画像中心が指定座標に配置されていることがわかります。

100x100のサイズの画像を画面内の納めるのであれば、以下のように 50, 50 の座標に配置することになります。

    create() {
        this.add.image(50, 50, 'block');
    }

複数の画像をロードして配置

今度は、別の画像(60x60)を左上から少しずつオーバーラップして配置してみます。

    preload() {
        this.load.image('black', 'assets/Black.png');
        this.load.image('blue', 'assets/Blue.png');
        this.load.image('green', 'assets/Green.png');
    }

    create() {
        this.add.image(30, 30, 'black');
        this.add.image(80, 30, 'blue');
        this.add.image(130, 30, 'green');
    }

奥行方向は、配置した順になります。
逆の重なりにしたいのであれば、setDepthで奥行を指定します

    create() {
        this.add.image(30, 30, 'black').setDepth(30);
        this.add.image(80, 30, 'blue').setDepth(20);
        this.add.image(130, 30, 'green').setDepth(10);
    }

ロードする際に、assetsを何度も書くのは冗長なので、複数のデータを取り込むのであれば

    preload() {
        this.load.setPath('assets');
        this.load.image('black', 'Black.png');
        this.load.image('blue', 'Blue.png');
        this.load.image('green', 'Green.png');
    }

this.load.setPathに assets を指定すれば
それ以降は、省略して記載できます。

画像のスケール

X方向に2倍にしたい場合、setScaleを使います。

    create() {
        this.add.image(30, 30, 'black');
        this.add.image(60, 90, 'black').setScale(2, 1);
    }

60x60が 120x60になるので、配置の位置も60にずらしています。
x方向が2倍、 y方向は1倍のままです。

両方等倍するのであれば、 2引数ではなく1引数で指定できます。

    create() {
        this.add.image(30, 30, 'black');
        this.add.image(60, 120, 'black').setScale(2);
    }

設定についてみていきます。

まずは、テンプレでMinimalとして作成した際のmain.jsをみてみます。

yarn create @phaserjs/game

import { Game as MainGame } from './scenes/Game';

//  Find out more information about the Game Config at:
//  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
const config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    parent: 'game-container',
    backgroundColor: '#028af8',
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Scale.CENTER_BOTH
    },
    scene: [
        MainGame
    ]
};

export default new Phaser.Game(config);

■type

AUTO: ブラウザがWebGLをサポートできるかどうかを自動検出する。対応している場合はWebGLレンダラーを使用する。対応していない場合は、Canvasレンダラーを使用する。
WEBGL: 強制的にWebGLレンダラーを使用する。
CANVAS: 強制的にCanvasレンダラーを使用する。

参考：
APIドキュメントをみるといろいろ説明でてくるので参考にしてみるとよいと思います
https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.AUTO

■width, height

初期状態のキャンバスの幅と高さをピクセル単位で指定

■parent

レンダラーによって作成されたキャンバスが描画される親要素(ID)名を指定する
index.htmlには、以下のように id=game-containerを持つ要素がありそこに描画される

<body>
    <div id="app">
        <div id="game-container"></div>
    </div>
    <!-- <script type="module" src="src/main.js"></script> -->
</body>

■backgroundColor

背景色を設定

■scaleのmode

FITとNONEあたりかな

■scaleのautoCenter

Scale.CENTER_BOTH: 垂直、水平方向ともにセンタリングされる。
Scale.CENTER_HORIZONTALLY: 水平方向のみセンタリングされる。
Scale.CENTER_VERTICALLY: 垂直方向のみセンタリングされる。
Scale.NO_CENTER: センタリングしない。