app root changes

assets/Scenes/Menu.scene

@@ -24,11 +24,11 @@
     "_active": true,
     "_components": [],
     "_prefab": {
-      "__id__": 83
+      "__id__": 73
     },
     "autoReleaseAssets": false,
     "_globals": {
-      "__id__": 84
+      "__id__": 74
     },
     "_id": "1a3bccb5-bbb7-4058-846c-ed41b52415b0"
   },
@@ -173,44 +173,35 @@
         "__id__": 41
       },
       {
-        "__id__": 43
+        "__id__": 50
       },
       {
-        "__id__": 52
+        "__id__": 59
-      },
-      {
-        "__id__": 61
-      },
-      {
-        "__id__": 70
-      },
-      {
-        "__id__": 73
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 78
+        "__id__": 68
       },
       {
-        "__id__": 79
+        "__id__": 69
       },
       {
-        "__id__": 80
+        "__id__": 70
       },
       {
-        "__id__": 81
+        "__id__": 71
       },
       {
-        "__id__": 82
+        "__id__": 72
       }
     ],
     "_prefab": null,
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 320,
-      "y": 479.99999999999994,
+      "y": 480.00000000000006,
       "z": 0
     },
     "_lrot": {
@@ -1297,92 +1288,6 @@
     "_atlas": null,
     "_id": "0bDo10DWhJ3Krfu8M+q41D"
   },
-  {
-    "__type__": "cc.Node",
-    "_name": "Camera",
-    "_objFlags": 0,
-    "_parent": {
-      "__id__": 10
-    },
-    "_children": [],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 42
-      }
-    ],
-    "_prefab": null,
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 1000
-    },
-    "_lrot": {
-      "__type__": "cc.Quat",
-      "x": 0,
-      "y": 0,
-      "z": 0,
-      "w": 1
-    },
-    "_lscale": {
-      "__type__": "cc.Vec3",
-      "x": 1,
-      "y": 1,
-      "z": 1
-    },
-    "_layer": 1073741824,
-    "_euler": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_id": "00gMEox2dKs5OZF6dNq6Ph"
-  },
-  {
-    "__type__": "cc.Camera",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 41
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "_projection": 0,
-    "_priority": 1073741824,
-    "_fov": 45,
-    "_fovAxis": 0,
-    "_orthoHeight": 480,
-    "_near": 1,
-    "_far": 2000,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 255
-    },
-    "_depth": 1,
-    "_stencil": 0,
-    "_clearFlags": 6,
-    "_rect": {
-      "__type__": "cc.Rect",
-      "x": 0,
-      "y": 0,
-      "width": 1,
-      "height": 1
-    },
-    "_aperture": 19,
-    "_shutter": 7,
-    "_iso": 0,
-    "_screenScale": 1,
-    "_visibility": 41943040,
-    "_targetTexture": null,
-    "_cameraType": -1,
-    "_trackingType": 0,
-    "_id": "31ELbgwJ1B7oQPudIYOXn5"
-  },
   {
     "__type__": "cc.Node",
     "_name": "PlayBtn",
@@ -1392,11 +1297,17 @@
     },
     "_children": [
       {
-        "__id__": 44
+        "__id__": 42
       }
     ],
     "_active": true,
     "_components": [
+      {
+        "__id__": 45
+      },
+      {
+        "__id__": 46
+      },
       {
         "__id__": 47
       },
@@ -1405,12 +1316,6 @@
       },
       {
         "__id__": 49
-      },
-      {
-        "__id__": 50
-      },
-      {
-        "__id__": 51
       }
     ],
     "_prefab": null,
@@ -1447,16 +1352,16 @@
     "_name": "Label",
     "_objFlags": 512,
     "_parent": {
-      "__id__": 43
+      "__id__": 41
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 45
+        "__id__": 43
       },
       {
-        "__id__": 46
+        "__id__": 44
       }
     ],
     "_prefab": null,
@@ -1493,7 +1398,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 44
+      "__id__": 42
     },
     "_enabled": true,
     "__prefab": null,
@@ -1514,7 +1419,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 44
+      "__id__": 42
     },
     "_enabled": true,
     "__prefab": null,
@@ -1555,7 +1460,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 43
+      "__id__": 41
     },
     "_enabled": true,
     "__prefab": null,
@@ -1576,7 +1481,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 43
+      "__id__": 41
     },
     "_enabled": true,
     "__prefab": null,
@@ -1614,7 +1519,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 43
+      "__id__": 41
     },
     "_enabled": true,
     "__prefab": null,
@@ -1668,7 +1573,7 @@
     "_duration": 0.1,
     "_zoomScale": 0.92,
     "_target": {
-      "__id__": 43
+      "__id__": 41
     },
     "_id": "abjYBOPMJCK7GsAsqNfoj3"
   },
@@ -1677,7 +1582,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 43
+      "__id__": 41
     },
     "_enabled": true,
     "__prefab": null,
@@ -1688,12 +1593,12 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 43
+      "__id__": 41
     },
     "_enabled": true,
     "__prefab": null,
     "button": {
-      "__id__": 50
+      "__id__": 48
     },
     "_id": "3f/GLS2YxHJI360Fym4+Nl"
   },
@@ -1706,11 +1611,17 @@
     },
     "_children": [
       {
-        "__id__": 53
+        "__id__": 51
       }
     ],
     "_active": true,
     "_components": [
+      {
+        "__id__": 54
+      },
+      {
+        "__id__": 55
+      },
       {
         "__id__": 56
       },
@@ -1719,12 +1630,6 @@
       },
       {
         "__id__": 58
-      },
-      {
-        "__id__": 59
-      },
-      {
-        "__id__": 60
       }
     ],
     "_prefab": null,
@@ -1761,16 +1666,16 @@
     "_name": "Label",
     "_objFlags": 512,
     "_parent": {
-      "__id__": 52
+      "__id__": 50
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 54
+        "__id__": 52
       },
       {
-        "__id__": 55
+        "__id__": 53
       }
     ],
     "_prefab": null,
@@ -1807,7 +1712,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 53
+      "__id__": 51
     },
     "_enabled": true,
     "__prefab": null,
@@ -1828,7 +1733,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 53
+      "__id__": 51
     },
     "_enabled": true,
     "__prefab": null,
@@ -1869,7 +1774,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 52
+      "__id__": 50
     },
     "_enabled": true,
     "__prefab": null,
@@ -1890,7 +1795,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 52
+      "__id__": 50
     },
     "_enabled": true,
     "__prefab": null,
@@ -1928,7 +1833,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 52
+      "__id__": 50
     },
     "_enabled": true,
     "__prefab": null,
@@ -1982,7 +1887,7 @@
     "_duration": 0.1,
     "_zoomScale": 0.92,
     "_target": {
-      "__id__": 52
+      "__id__": 50
     },
     "_id": "02km9/CjtM4LntV5ZcaVeR"
   },
@@ -1991,7 +1896,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 52
+      "__id__": 50
     },
     "_enabled": true,
     "__prefab": null,
@@ -2002,12 +1907,12 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 52
+      "__id__": 50
     },
     "_enabled": true,
     "__prefab": null,
     "button": {
-      "__id__": 59
+      "__id__": 57
     },
     "_id": "adNyH1o7lEPoaiPeZSxUCn"
   },
@@ -2020,11 +1925,17 @@
     },
     "_children": [
       {
-        "__id__": 62
+        "__id__": 60
       }
     ],
     "_active": true,
     "_components": [
+      {
+        "__id__": 63
+      },
+      {
+        "__id__": 64
+      },
       {
         "__id__": 65
       },
@@ -2033,12 +1944,6 @@
       },
       {
         "__id__": 67
-      },
-      {
-        "__id__": 68
-      },
-      {
-        "__id__": 69
       }
     ],
     "_prefab": null,
@@ -2075,16 +1980,16 @@
     "_name": "Label",
     "_objFlags": 512,
     "_parent": {
-      "__id__": 61
+      "__id__": 59
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 63
+        "__id__": 61
       },
       {
-        "__id__": 64
+        "__id__": 62
       }
     ],
     "_prefab": null,
@@ -2121,7 +2026,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 62
+      "__id__": 60
     },
     "_enabled": true,
     "__prefab": null,
@@ -2142,7 +2047,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 62
+      "__id__": 60
     },
     "_enabled": true,
     "__prefab": null,
@@ -2183,7 +2088,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 61
+      "__id__": 59
     },
     "_enabled": true,
     "__prefab": null,
@@ -2204,7 +2109,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 61
+      "__id__": 59
     },
     "_enabled": true,
     "__prefab": null,
@@ -2242,7 +2147,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 61
+      "__id__": 59
     },
     "_enabled": true,
     "__prefab": null,
@@ -2296,7 +2201,7 @@
     "_duration": 0.1,
     "_zoomScale": 0.92,
     "_target": {
-      "__id__": 61
+      "__id__": 59
     },
     "_id": "83MUZ70BBPoqpCJzA3nVTN"
   },
@@ -2305,7 +2210,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 61
+      "__id__": 59
     },
     "_enabled": true,
     "__prefab": null,
@@ -2316,255 +2221,15 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 61
+      "__id__": 59
     },
     "_enabled": true,
     "__prefab": null,
     "button": {
-      "__id__": 68
+      "__id__": 66
     },
     "_id": "6bWmS+us9G55ZQR94w+B3i"
   },
-  {
-    "__type__": "cc.Node",
-    "_name": "ModalWindowManager",
-    "_objFlags": 0,
-    "_parent": {
-      "__id__": 10
-    },
-    "_children": [],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 71
-      },
-      {
-        "__id__": 72
-      }
-    ],
-    "_prefab": null,
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_lrot": {
-      "__type__": "cc.Quat",
-      "x": 0,
-      "y": 0,
-      "z": 0,
-      "w": 1
-    },
-    "_lscale": {
-      "__type__": "cc.Vec3",
-      "x": 1,
-      "y": 1,
-      "z": 1
-    },
-    "_layer": 33554432,
-    "_euler": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_id": "01wdX287REE6Gr0JKdC+pi"
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 70
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 640,
-      "height": 960
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 0.5
-    },
-    "_id": "cfwsr07o9Od6unAYhU9sZV"
-  },
-  {
-    "__type__": "c623fhj2b5Cyau8MBXLOmVF",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 70
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "availableWindows": [
-      {
-        "__uuid__": "0b35c4ba-253d-4316-ad01-0ba40a2612fc",
-        "__expectedType__": "cc.Prefab"
-      },
-      {
-        "__uuid__": "9f66fba0-82b2-481c-835d-41cb87f38d87",
-        "__expectedType__": "cc.Prefab"
-      }
-    ],
-    "_id": "16B4Ez0O1Ob7mNngLSL2Y/"
-  },
-  {
-    "__type__": "cc.Node",
-    "_name": "ScreenFader",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "_parent": {
-      "__id__": 10
-    },
-    "_children": [],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 74
-      },
-      {
-        "__id__": 75
-      },
-      {
-        "__id__": 76
-      },
-      {
-        "__id__": 77
-      }
-    ],
-    "_prefab": null,
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_lrot": {
-      "__type__": "cc.Quat",
-      "x": 0,
-      "y": 0,
-      "z": 0,
-      "w": 1
-    },
-    "_lscale": {
-      "__type__": "cc.Vec3",
-      "x": 1,
-      "y": 1,
-      "z": 1
-    },
-    "_layer": 8388608,
-    "_euler": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 0,
-      "z": 0
-    },
-    "_id": "71qF2ggGpMcLF94AUlql0u"
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 73
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 640,
-      "height": 960
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 0.5
-    },
-    "_id": "7bzTWH09FA4oZ0VugCpmQ3"
-  },
-  {
-    "__type__": "cc.Sprite",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 73
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "_customMaterial": null,
-    "_srcBlendFactor": 2,
-    "_dstBlendFactor": 4,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 255
-    },
-    "_spriteFrame": {
-      "__uuid__": "0a917d5c-2810-46e1-8332-63f00395d63a@f9941",
-      "__expectedType__": "cc.SpriteFrame"
-    },
-    "_type": 0,
-    "_fillType": 0,
-    "_sizeMode": 0,
-    "_fillCenter": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 0
-    },
-    "_fillStart": 0,
-    "_fillRange": 0,
-    "_isTrimmedMode": true,
-    "_useGrayscale": false,
-    "_atlas": {
-      "__uuid__": "c4872559-07b2-44e5-9613-5f22506b1989",
-      "__expectedType__": "cc.SpriteAtlas"
-    },
-    "_id": "cdmu4EBtJM6rWXHQdGNEN0"
-  },
-  {
-    "__type__": "f9bdcLpmMdIgqWNOgetdMv1",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 73
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "animation": {
-      "__id__": 77
-    },
-    "_id": "0bBTtYUmtAGoBYF+/lNGeL"
-  },
-  {
-    "__type__": "cc.Animation",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 73
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "playOnLoad": false,
-    "_clips": [
-      {
-        "__uuid__": "62a2bbe7-81e3-4f5d-85a7-e6ed018e783a",
-        "__expectedType__": "cc.AnimationClip"
-      },
-      {
-        "__uuid__": "03c7a83d-bc15-48b9-b343-7c930ab88d2c",
-        "__expectedType__": "cc.AnimationClip"
-      }
-    ],
-    "_defaultClip": null,
-    "_id": "6cOISS7ZBL7ZILXit/Dlrm"
-  },
   {
     "__type__": "cc.UITransform",
     "_name": "",
@@ -2595,9 +2260,7 @@
     },
     "_enabled": true,
     "__prefab": null,
-    "_cameraComponent": {
+    "_cameraComponent": null,
-      "__id__": 42
-    },
     "_alignCanvasWithScreen": true,
     "_id": "eeGIEoaYNDCIMhXubllIM7"
   },
@@ -2614,8 +2277,8 @@
     "_target": null,
     "_left": 0,
     "_right": 0,
-    "_top": -5.684341886080802e-14,
+    "_top": 5.684341886080802e-14,
-    "_bottom": -5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
     "_horizontalCenter": 0,
     "_verticalCenter": 0,
     "_isAbsLeft": true,
@@ -2640,19 +2303,16 @@
     "_enabled": true,
     "__prefab": null,
     "playBtn": {
-      "__id__": 50
+      "__id__": 48
     },
     "upgradeBtn": {
-      "__id__": 59
+      "__id__": 57
     },
     "audioSettingsBtn": {
-      "__id__": 68
+      "__id__": 66
     },
-    "modalWindowManager": {
+    "menuCanvas": {
-      "__id__": 72
+      "__id__": 69
-    },
-    "screenFader": {
-      "__id__": 76
     },
     "_id": "4cQFnvx1xB65sFsTPGRrB7"
   },
@@ -2690,19 +2350,19 @@
   {
     "__type__": "cc.SceneGlobals",
     "ambient": {
-      "__id__": 85
+      "__id__": 75
     },
     "shadows": {
-      "__id__": 86
+      "__id__": 76
     },
     "_skybox": {
-      "__id__": 87
+      "__id__": 77
     },
     "fog": {
-      "__id__": 88
+      "__id__": 78
     },
     "octree": {
-      "__id__": 89
+      "__id__": 79
     }
   },
   {

assets/Scripts/AppRoot/AppRoot.ts

@@ -1,10 +1,12 @@
-import { Component, director, instantiate, JsonAsset, Prefab, _decorator } from "cc";
+import { Camera, Component, director, instantiate, JsonAsset, Prefab, _decorator } from "cc";
 import { GameSettings } from "../Game/Data/GameSettings";
 import { GameAssets } from "../Game/Data/Assets/GameAssets";
 import { TranslationData } from "../Game/Data/TranslationData";
 import { UserData } from "../Game/Data/UserData";
 import { AudioPlayer } from "../Services/AudioPlayer/AudioPlayer";
 import { SaveSystem } from "./SaveSystem";
+import { ModalWindowManager } from "../Services/ModalWindowSystem/ModalWindowManager";
+import { OpenCloseAnimator } from "../Utils/OpenCloseAnimator";
 const { ccclass, property } = _decorator;
 
 @ccclass("AppRoot")
@@ -13,6 +15,9 @@ export class AppRoot extends Component {
     @property(JsonAsset) private settingsAsset: JsonAsset;
     @property(JsonAsset) private engTranslationAsset: JsonAsset;
     @property(Prefab) private gameAssetsPrefab: Prefab;
+    @property(Camera) private mainCamera: Camera;
+    @property(ModalWindowManager) private modalWindowManager: ModalWindowManager;
+    @property(OpenCloseAnimator) private screenFader: OpenCloseAnimator;
 
     private static instance: AppRoot;
     private saveSystem: SaveSystem;
@@ -44,6 +49,18 @@ export class AppRoot extends Component {
         return <TranslationData>this.engTranslationAsset.json;
     }
 
+    public get ModalWindowManager(): ModalWindowManager {
+        return this.modalWindowManager;
+    }
+
+    public get MainCamera(): Camera {
+        return this.mainCamera;
+    }
+
+    public get ScreenFader(): OpenCloseAnimator {
+        return this.screenFader;
+    }
+
     public saveUserData(): void {
         this.saveSystem.save(this.liveUserData);
     }
@@ -54,7 +71,7 @@ export class AppRoot extends Component {
             director.addPersistRootNode(this.node);
             this.init();
         } else {
-            this.destroy();
+            this.node.destroy();
         }
     }
 
@@ -68,5 +85,8 @@ export class AppRoot extends Component {
         this.gameAssets.init();
 
         this.audio.init(this.LiveUserData.soundVolume, this.LiveUserData.musicVolume);
+
+        this.screenFader.init();
+        this.screenFader.node.active = false;
     }
 }

assets/Scripts/AppRoot/AppRootUtils.ts

@@ -0,0 +1,13 @@
+import { delay } from "../Services/Utils/AsyncUtils";
+import { AppRoot } from "./AppRoot";
+
+export async function requireAppRootAsync(): Promise<void> {
+    console.log("Waiting for app root");
+    while (AppRoot.Instance == null) await delay(10);
+
+    AppRoot.Instance.node.setSiblingIndex(1000); // render on top
+    AppRoot.Instance.node.active = false; // forces engine to reorder by hierarchy
+    AppRoot.Instance.node.active = true;
+
+    console.log("App root ready");
+}

assets/Scripts/AppRoot/AppRootUtils.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "43cfb543-4c62-4c36-bb28-f307b2e1d280",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Scripts/Game/Game.ts

@@ -1,7 +1,7 @@
-import { Camera, Component, KeyCode, Prefab, Vec2, _decorator } from "cc";
+import { Canvas, Component, KeyCode, Vec2, _decorator } from "cc";
-import { ModalWindowManager } from "../Services/ModalWindowSystem/ModalWindowManager";
+import { AppRoot } from "../AppRoot/AppRoot";
+import { requireAppRootAsync } from "../AppRoot/AppRootUtils";
 import { delay } from "../Services/Utils/AsyncUtils";
-import { OpenCloseAnimator } from "../Utils/OpenCloseAnimator";
 import { GameAudioAdapter } from "./Audio/GameAudioAdapter";
 import { Background } from "./Background/Background";
 import { MagnetCollisionSystem } from "./Collision/MagnetCollisionSystem";
@@ -46,12 +46,10 @@ export class Game extends Component {
     @property(ProjectileLauncher) private enemyMagicOrbProjectileLauncherComponent: ProjectileLauncher;
     @property(EnemyManager) private enemyManager: EnemyManager;
     @property(ItemManager) private itemManager: ItemManager;
-    @property(Camera) private camera: Camera;
     @property(GameUI) private gameUI: GameUI;
+    @property(Canvas) private gameCanvas: Canvas;
     @property(Background) private background: Background;
-    @property(ModalWindowManager) private modalWindowManager: ModalWindowManager;
     @property(GameAudioAdapter) private gameAudioAdapter: GameAudioAdapter;
-    @property(OpenCloseAnimator) private screenFader: OpenCloseAnimator;
 
     private playerCollisionSystem: PlayerCollisionSystem;
     private haloProjectileLauncher: HaloProjectileLauncher;
@@ -72,12 +70,12 @@ export class Game extends Component {
         return this.instance;
     }
 
-    public start(): void {
+    public async start(): Promise<void> {
-        Game.instance = this;
         this.gamePauser.pause();
-
+        this.node.active = false; // make sure that nothing is rendered until the app root is ready
-        this.screenFader.init();
+        await requireAppRootAsync();
-        this.screenFader.node.active = true;
+        this.node.active = true;
+        Game.instance = this;
     }
 
     public async playGame(
@@ -86,6 +84,8 @@ export class Game extends Component {
         translationData: TranslationData,
         testValues?: TestValues
     ): Promise<GameResult> {
+        this.gameCanvas.cameraComponent = AppRoot.Instance.MainCamera;
+
         this.gameResult = new GameResult();
         const metaUpgrades = new MetaUpgrades(userData.game.metaUpgrades, settings.metaUpgrades);
 
@@ -154,7 +154,7 @@ export class Game extends Component {
             this.diagonalProjectileLauncher,
             settings.upgrades
         );
-        const modalLauncher = new GameModalLauncher(this.modalWindowManager, this.player, this.gamePauser, upgrader, translationData);
+        const modalLauncher = new GameModalLauncher(AppRoot.Instance.ModalWindowManager, this.player, this.gamePauser, upgrader, translationData);
 
         this.itemManager.init(this.enemyManager, this.player, this.gameResult, modalLauncher, settings.items);
         this.gameUI.init(this.player, modalLauncher);
@@ -174,7 +174,7 @@ export class Game extends Component {
             this.haloProjectileLauncher
         );
         this.gamePauser.resume();
-        this.screenFader.playClose();
+        AppRoot.Instance.ScreenFader.playClose();
 
         while (!this.gameResult.hasExitManually && this.player.Health.IsAlive) await delay(100);
         if (!this.gameResult.hasExitManually) {
@@ -207,7 +207,8 @@ export class Game extends Component {
         this.timeAlive += deltaTime;
         this.gameUI.updateTimeAlive(this.timeAlive);
 
-        this.camera.node.worldPosition = this.player.node.worldPosition;
+        AppRoot.Instance.MainCamera.node.setWorldPosition(this.player.node.worldPosition);
+        this.gameUI.node.setWorldPosition(this.player.node.worldPosition);
     }
 
     private createPlayerData(settings: PlayerSettings, metaUpgrades: MetaUpgrades): PlayerData {

assets/Scripts/Menu/Menu.ts

@@ -1,4 +1,6 @@
-import { Component, _decorator } from "cc";
+import { Canvas, Component, _decorator } from "cc";
+import { AppRoot } from "../AppRoot/AppRoot";
+import { requireAppRootAsync } from "../AppRoot/AppRootUtils";
 import { ModalWindowManager } from "../Services/ModalWindowSystem/ModalWindowManager";
 import { UIButton } from "../Services/UI/Button/UIButton";
 import { OpenCloseAnimator } from "../Utils/OpenCloseAnimator";
@@ -12,24 +14,23 @@ export class Menu extends Component {
     @property(UIButton) private playBtn: UIButton;
     @property(UIButton) private upgradeBtn: UIButton;
     @property(UIButton) private audioSettingsBtn: UIButton;
-    @property(ModalWindowManager) private modalWindowManager: ModalWindowManager;
+    @property(Canvas) private menuCanvas: Canvas;
-    @property(OpenCloseAnimator) private screenFader: OpenCloseAnimator;
 
     private menuModalLauncher: MenuModalLauncher;
 
     public async start(): Promise<void> {
+        requireAppRootAsync();
+        this.menuCanvas.cameraComponent = AppRoot.Instance.MainCamera;
+
         this.playBtn.InteractedEvent.on(this.startGame, this);
         this.upgradeBtn.InteractedEvent.on(this.openUpgradesWindow, this);
         this.audioSettingsBtn.InteractedEvent.on(this.openAudioSettingsWindow, this);
 
-        this.menuModalLauncher = new MenuModalLauncher(this.modalWindowManager);
+        this.menuModalLauncher = new MenuModalLauncher(AppRoot.Instance.ModalWindowManager);
-
-        this.screenFader.init();
-        this.screenFader.node.active = false;
     }
 
     private startGame(): void {
-        this.screenFader.playOpen();
+        AppRoot.Instance.ScreenFader.playOpen();
         GameRunner.Instance.playGame();
     }