開発を容易にするために、いくつかのテンプレートが作成されています.
https://github.com/photonstorm/phaser3-project-template
襟にクローンを入れた後、バーベルとネットバッグの設定を確認してください.

git clone https://github.com/photonstorm/phaser3-project-template.git

クローンを手に入れると、対応するフォルダがありますが、ノードモジュールはインストール済みです.
package-lockファイルは既にあります

npm install

だから.
srcフォルダを見せてください.

1. src index

import Phaser from 'phaser';
import logoImg from './assets/logo.png';

class MyGame extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.image('logo', logoImg);
    }
      
    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: MyGame
};

const game = new Phaser.Game(config);

まずクラスフォーマット
ここで初めて見たのは

1. Phaser.Game()

const game = new Phaser.Game(config)

はい.
https://photonstorm.github.io/phaser3-docs/Phaser.Game.html
新しいPhaser.Gameのオブジェクトを作成しています.パラメータはconfigです.

1. config

configの構成は次のとおりです.
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.GameConfig
ここを参考にすればいいです
私たちが使用している構成から見ると

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: MyGame
};

2. type

タイプは次のとおりです.
使用するレンダラーPhaser.AUTOあり
レンダラーのタイプは次のとおりです.
Phaser.AUTO, Phaser.CANVAS, Phaser.WEBあり
CANVASやWEB GLは知っていますがAUTOが何なのか分からない人もいます
AUTOはまずWEBを選択し、選択していない場合
CANVASを選択します
この部分は後で詳しく議論するだろう
親:
html要素または文字列を受信し、ここで文字列を受信します.
widthとheightはキャンバスの幅と高さを設定しています.
widthとheightがない場合は、デフォルトは1024 x 768に設定されます.
この数字はピクセルベースです.
現場.
ゲームに追加するシーンを設定します.こちらはMyGameです.
現在、コードに存在するMyGameクラスを使用しています.

2. MyGame Class

class MyGame extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.image('logo', logoImg);
    }
      
    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }
}

次はMyGameレベルを確認しましょう
まずMyGameレベルはPhaserSceneから継承
私はすべての方法を構造関数に継承した.
Phaser.Scene
https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html
中にはいろいろな方法が見えます
ソース・コード
https://github.com/photonstorm/phaser/blob/v3.51.0/src/scene/Scene.js
まずここがそうであることを知っています.
MyGameには2つの方法があります
preloadとcreate.
シーンに属する2つのタイプ.
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Scenes.html#.SettingsConfig
init,
preload,
create,
update,
extend
あります.
私たちが使っているpreloadとcreateを見てみましょう
プレス力の下で.

    preload ()
    {
        this.load.image('logo', logoImg);
    }

イメージを事前にロードするために使用します.

    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }

createは、事前にロードされた画像を作成します.

1. preload()

方法は次のとおりです.
1行だけ

this.load.image('logo',logoImg)

よく見ると.
this.loadがあるわload
Phaser.Sceneによって継承される方法
https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html
ドキュメントを表示できます.

this.load.image('key',URL)

最初のパラメータはkeyと呼ばれます.
2番目のパラメータはURLで、ファイルのパスを表します.

2. create()

    create ()
    {
        const logo = this.add.image(400, 150, 'logo');
      
        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }

最初の行

const logo = this.add.image(400,150,'logo')

this.add.イメージの最初のパラメータはxです
2つ目はy
3つ目はkeyです.
x,yはキャンバスに画像を表示する座標である.
keyはさっき説明したものです.

this.load.image('key',url)

キー.
コードはlogoであるため、文字列としてlogoに書き込まれる.
最後のコード

this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });

https://photonstorm.github.io/phaser3-docs/Phaser.Types.Tweens.html#.TweenBuilderConfig
デフォルトのアニメーションを追加するために作成されたコードです.
targetsはtweetを作成するオブジェクトです.
yいくら探しても該当するドキュメントが見つからないので、先にデータを削除したり変更したりします.
y軸の動きについての内容のようです.
対応するソースコードを開きました
https://github.com/photonstorm/phaser/blob/v3.51.0/src/tweens/builders/TweenBuilder.js

y最大限度の増加値は450
そうでなければメッセージをお願いします
durationは、数秒ごとに実行されるアニメーションです.
2秒ごとに上下に移動する2000に設定します.
楽です.
これは補間で使用される残量方程式で、値を与えない場合はpower 0がデフォルトです.
yoyoyoは言ったように最初の起点に戻り、デフォルト値はfalseです.
このオプションを設定しないと、上部には戻らないので、アニメーションは不自然です.
最後はloop
補間間反復の回数−1は無限反復である.
0は1回
1は2回
この数字はゼロから始まります.
このように基本的にすべて理解しました
これが終わったら一緒にゲームを作ってみんなに会いましょう
長いコメント読んでくれてありがとう.何か気になることがあったらコメントを書いてください.