Анимация-загрузки-на-Phaser,-RexUI.md

+Как создать анимацию загрузки в RexUi, Phaser?
+
+1)Для начала нам нужна уже готовая сцена с любым контентом
+В Preload этой сцены мы добавляем следующее:
+
+```js
+this.load.rexAwait(function (successCallback, failureCallback) {
+      setTimeout(successCallback, 4500);
+    });
+    //Обьявляем закрытие
+    this.plugins
+      .get('rexLoadingAnimationScene')
+      
+      .startScene(
+        this,
+        'loading-animation',
+        function (successCallback, animationScene) {
+          animationScene.onClose(successCallback);
+        },
+      );
+```
+Здесь мы объявляем закрытие нашей будущей сцены с анимацией
+
+2) Далее мы делаем следующую сцену уже с нашей загрузкой:
+
+```js
+class LoadingAnimation extends Phaser.Scene {
+  private sprites: Phaser.GameObjects.Sprite[] = [];
+  private currentIndex: number = 0;
+
+  constructor() {
+    super({
+      key: 'loading-animation',
+    });
+  }
+
+  preload() {
+    //Фоновый цвет
+    this.cameras.main.setBackgroundColor('#c5d0e6');
+    //Спрайты
+    this.load.image('sprite1', 'sprite/Sp1.png');
+    this.load.image('sprite2', 'sprite/Sp2.png');
+    this.load.image('sprite3', 'sprite/Sp3.png');
+    this.load.image('sprite4', 'sprite/Sp4.png');
+    this.load.image('sprite5', 'sprite/Sp5.png');
+    this.load.image('sprite6', 'sprite/Sp6.png');
+    this.load.image('sprite7', 'sprite/Sp7.png');
+
+
+  }
+
+  create() {
+
+    //Используем закрытие
+    var scene = this;
+    
+    this.onClose = function (onComplete) {
+      scene.tweens.add({
+        targets: this.sprites[0],
+        scale: 0,
+        duration: 1000,
+        onComplete: onComplete
+      });
+    };
+
+    // Создание спрайтов и добавление их в сцену
+    this.sprites = Array.from({ length: 7 }, (_, i) =>
+      this.add.sprite(window.innerWidth / 2, window.innerHeight / 2, `sprite${i + 1}`).setVisible(false).setScale(0.4)
+    );
+    // Запуск циклической смены спрайтов
+    this.nextSprite();
+
+  }
+
+  nextSprite() {
+    const currentSprite = this.sprites[this.currentIndex];
+    const nextIndex = (this.currentIndex + 2) % this.sprites.length;
+    const nextSprite = this.sprites[nextIndex];
+
+    // Анимация появления следующего спрайта
+    this.tweens.add({
+      targets: currentSprite,
+      scale: 0.4,
+      //scaleX: { start: 0, to: 1 },
+      //scaleY: { start: 0, to: 1 },
+      duration: 100,
+      onComplete: () => {
+        currentSprite.setVisible(false);
+        nextSprite.setVisible(true);
+        this.tweens.add({
+          targets: nextSprite,
+          duration: 200,
+          onComplete: () => {
+            // Переход к следующему спрайту после завершения анимации
+            this.currentIndex = nextIndex;
+            this.nextSprite();
+          },
+        });
+      },
+    });
+  }
+}
+const config = getPhaserConfig([НАША ПРОШЛАЯ СЦЕНА, LoadingAnimation,]);
+```
+3) Подключаем в config.js:
+
+```js
+import { AUTO, Scale, Types } from 'phaser';
+
+import SpinnerPlugin from 'phaser3-rex-plugins/templates/spinner/spinner-plugin.js';
+import LoadingAnimationScenePlugin from 'phaser3-rex-plugins/plugins/loadinganimationscene-plugin.js';
+
+export const getPhaserConfig = (scene: any[]): Types.Core.GameConfig => ({
+  type: AUTO,
+  parent: 'phaser-container',
+  width: window.innerWidth,
+  height: window.innerHeight,
+  scale: {
+    mode: Scale.FIT,
+    autoCenter: Scale.CENTER_BOTH,
+  },
+  scene: scene,
+  plugins: {
+    // scene: [
+    // {
+    // key: 'rexUI',
+    // plugin: RexPlugins,
+    // mapping: 'rexUI',
+    // },
+    // // ...
+    // ],
+    global: [
+      {
+        key: 'rexLoadingAnimationScene',
+        plugin: LoadingAnimationScenePlugin,
+        start: true,
+      },
+    ],
+    scene: [
+      {
+        key: 'rexSpinner',
+        plugin: SpinnerPlugin,
+        mapping: 'rexSpinner',
+      },
+    ],
+  },
+});
+
+```
+4) Там, где мы прописывали анимацию и главную сцену, импортируем модули:
+
+```js
+import SpinnerPlugin from 'phaser3-rex-plugins/templates/spinner/spinner-plugin.js';
+import LoadingAnimationScenePlugin from 'phaser3-rex-plugins/plugins/loadinganimationscene-plugin.js';
+```
+
+5) ОБЯЗАТЕЛЬНО!
+Если выдает ошибки необоснованно, над строкой с ошибкой вводим следующее:
+```js
+//@ts-ignore
+```