Added tiled background

assets/Media/Images/background.png.meta

@@ -0,0 +1,134 @@
+{
+  "ver": "1.0.25",
+  "importer": "image",
+  "imported": true,
+  "uuid": "b522fec0-43ad-4f82-b496-79b67de5690e",
+  "files": [
+    ".json",
+    ".png"
+  ],
+  "subMetas": {
+    "6c48a": {
+      "importer": "texture",
+      "uuid": "b522fec0-43ad-4f82-b496-79b67de5690e@6c48a",
+      "displayName": "background",
+      "id": "6c48a",
+      "name": "texture",
+      "userData": {
+        "wrapModeS": "clamp-to-edge",
+        "wrapModeT": "clamp-to-edge",
+        "imageUuidOrDatabaseUri": "b522fec0-43ad-4f82-b496-79b67de5690e",
+        "isUuid": true,
+        "visible": false,
+        "minfilter": "linear",
+        "magfilter": "linear",
+        "mipfilter": "none",
+        "anisotropy": 0
+      },
+      "ver": "1.0.22",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    },
+    "f9941": {
+      "importer": "sprite-frame",
+      "uuid": "b522fec0-43ad-4f82-b496-79b67de5690e@f9941",
+      "displayName": "background",
+      "id": "f9941",
+      "name": "spriteFrame",
+      "userData": {
+        "trimType": "auto",
+        "trimThreshold": 1,
+        "rotated": false,
+        "offsetX": 0,
+        "offsetY": 0,
+        "trimX": 0,
+        "trimY": 0,
+        "width": 512,
+        "height": 512,
+        "rawWidth": 512,
+        "rawHeight": 512,
+        "borderTop": 0,
+        "borderBottom": 0,
+        "borderLeft": 0,
+        "borderRight": 0,
+        "packable": true,
+        "pixelsToUnit": 100,
+        "pivotX": 0.5,
+        "pivotY": 0.5,
+        "meshType": 0,
+        "vertices": {
+          "rawPosition": [
+            -256,
+            -256,
+            0,
+            256,
+            -256,
+            0,
+            -256,
+            256,
+            0,
+            256,
+            256,
+            0
+          ],
+          "indexes": [
+            0,
+            1,
+            2,
+            2,
+            1,
+            3
+          ],
+          "uv": [
+            0,
+            512,
+            512,
+            512,
+            0,
+            0,
+            512,
+            0
+          ],
+          "nuv": [
+            0,
+            0,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1
+          ],
+          "minPos": [
+            -256,
+            -256,
+            0
+          ],
+          "maxPos": [
+            256,
+            256,
+            0
+          ]
+        },
+        "isUuid": true,
+        "imageUuidOrDatabaseUri": "b522fec0-43ad-4f82-b496-79b67de5690e@6c48a",
+        "atlasUuid": ""
+      },
+      "ver": "1.0.11",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    }
+  },
+  "userData": {
+    "type": "sprite-frame",
+    "fixAlphaTransparencyArtifacts": true,
+    "hasAlpha": true,
+    "redirect": "b522fec0-43ad-4f82-b496-79b67de5690e@f9941"
+  }
+}

assets/Media/Prefabs/Game/Background.meta

@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "a6ec454b-a1f1-4622-94ab-0d46de4b0f2b",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}

assets/Media/Prefabs/Game/Background/background-001.prefab

@@ -0,0 +1,142 @@
+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "background-001",
+    "_objFlags": 0,
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "persistent": false,
+    "asyncLoadAssets": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "background-001",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 2
+      },
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": {
+      "__id__": 6
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 512,
+      "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": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 3
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 512,
+      "height": 512
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "a543e4ngZOuJDldEp7USz4"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 5
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 58,
+      "g": 58,
+      "b": 58,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "b522fec0-43ad-4f82-b496-79b67de5690e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 0,
+    "_fillType": 0,
+    "_sizeMode": 1,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "c3TST28D1MAYYNOTjXCu9X"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "0fuih3dHdO06Ljv1VvbfLw"
+  }
+]

assets/Media/Prefabs/Game/Background/background-001.prefab.meta

@@ -0,0 +1,13 @@
+{
+  "ver": "1.1.40",
+  "importer": "prefab",
+  "imported": true,
+  "uuid": "798cca4e-324e-4d93-a4b1-afa7ed68d159",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {
+    "syncNodeName": "background-001"
+  }
+}

assets/Scripts/Game/Background.meta

@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "cc51d327-9e82-4916-98ef-95612253838b",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}

assets/Scripts/Game/Background/Background.ts

@@ -0,0 +1,114 @@
+import { _decorator, Component, Node, Prefab, instantiate, randomRangeInt, Vec3 } from "cc";
+import { SCREEN_HALF_HEIGHT, SCREEN_HALF_WIDTH, SCREEN_HEIGHT, SCREEN_WIDTH } from "../Data/GameConstants";
+const { ccclass, property } = _decorator;
+
+@ccclass("Background")
+export class Background extends Component {
+    @property(Prefab) private backgroundPrefabs: Prefab[] = [];
+
+    private targetNode: Node;
+    private instancedBackgrounds: Node[][] = [];
+
+    private rows = 3;
+    private columns = 3;
+    private nodeSize = 512;
+
+    private playerGridPosX = 0;
+    private playerGridPosY = 0;
+
+    public init(targetNode: Node): void {
+        this.targetNode = targetNode;
+
+        for (let i = 0; i < this.rows; i++) {
+            const rowNodes: Node[] = [];
+            for (let u = 0; u < this.columns; u++) {
+                const randomIndex = randomRangeInt(0, this.backgroundPrefabs.length);
+                const backgroundNode = instantiate(this.backgroundPrefabs[randomIndex]);
+                backgroundNode.setParent(this.node);
+
+                const x = u * this.nodeSize - this.nodeSize + SCREEN_HALF_WIDTH;
+                const y = i * this.nodeSize - this.nodeSize + SCREEN_HALF_HEIGHT;
+                backgroundNode.setWorldPosition(new Vec3(x, y, 0));
+
+                rowNodes.push(backgroundNode);
+            }
+
+            this.instancedBackgrounds.push(rowNodes);
+        }
+    }
+
+    public gameTick(): void {
+        this.tryTileX();
+        this.tryTileY();
+    }
+
+    private tryTileX(): void {
+        const playerGridPosX = Math.round((this.targetNode.worldPosition.x - SCREEN_HALF_WIDTH) / this.nodeSize);
+
+        if (playerGridPosX < this.playerGridPosX) {
+            // move the last column to the left
+            const columnIndex = this.columns - 1;
+            for (let i = 0; i < this.rows; i++) {
+                const instancedNode = this.instancedBackgrounds[i][columnIndex];
+                const newPosition: Vec3 = instancedNode.worldPosition;
+                newPosition.x -= this.columns * this.nodeSize;
+
+                instancedNode.setWorldPosition(newPosition);
+
+                this.instancedBackgrounds[i].splice(columnIndex, 1);
+                this.instancedBackgrounds[i].unshift(instancedNode);
+            }
+        } else if (this.playerGridPosX < playerGridPosX) {
+            // move the first column to the right
+            for (let i = 0; i < this.rows; i++) {
+                const instancedNode = this.instancedBackgrounds[i][0];
+                const newPosition: Vec3 = instancedNode.worldPosition;
+                newPosition.x += this.columns * this.nodeSize;
+
+                instancedNode.setWorldPosition(newPosition);
+
+                this.instancedBackgrounds[i].splice(0, 1);
+                this.instancedBackgrounds[i].push(instancedNode);
+            }
+        }
+
+        this.playerGridPosX = playerGridPosX;
+    }
+
+    private tryTileY(): void {
+        const playerGridPosY = Math.round((this.targetNode.worldPosition.y - SCREEN_HALF_HEIGHT) / this.nodeSize);
+
+        if (playerGridPosY < this.playerGridPosY) {
+            // move the last row down
+            const rowIndex = this.rows - 1;
+            const nodesInRow: Node[] = [];
+            for (let i = 0; i < this.columns; i++) {
+                const instancedNode = this.instancedBackgrounds[rowIndex][i];
+                const newPosition: Vec3 = instancedNode.worldPosition;
+                newPosition.y -= this.rows * this.nodeSize;
+
+                instancedNode.setWorldPosition(newPosition);
+                nodesInRow.push(instancedNode);
+            }
+
+            this.instancedBackgrounds.splice(rowIndex, 1);
+            this.instancedBackgrounds.unshift(nodesInRow);
+        } else if (this.playerGridPosY < playerGridPosY) {
+            // move the first row up
+            const nodesInRow: Node[] = [];
+            for (let i = 0; i < this.columns; i++) {
+                const instancedNode = this.instancedBackgrounds[0][i];
+                const newPosition: Vec3 = instancedNode.worldPosition;
+                newPosition.y += this.rows * this.nodeSize;
+
+                instancedNode.setWorldPosition(newPosition);
+                nodesInRow.push(instancedNode);
+            }
+
+            this.instancedBackgrounds.splice(0, 1);
+            this.instancedBackgrounds.push(nodesInRow);
+        }
+
+        this.playerGridPosY = playerGridPosY;
+    }
+}

assets/Scripts/Game/Background/Background.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "26e60d05-0b7c-4d95-934e-8a11a559f01d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Scripts/Game/Data/GameConstants.ts

@@ -0,0 +1,5 @@
+export const SCREEN_WIDTH = 640;
+export const SCREEN_HEIGHT = 960;
+
+export const SCREEN_HALF_WIDTH = SCREEN_WIDTH / 2;
+export const SCREEN_HALF_HEIGHT = SCREEN_HEIGHT / 2;

assets/Scripts/Game/Data/GameConstants.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "6224412b-af18-4cec-a04b-ed291f866e83",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Scripts/Game/Game.ts

@@ -1,6 +1,7 @@
 import { Camera, Component, JsonAsset, KeyCode, Vec2, _decorator } from "cc";
 import { ModalWindowManager } from "../Services/ModalWindowSystem/ModalWindowManager";
 import { delay } from "../Services/Utils/AsyncUtils";
+import { Background } from "./Background/Background";
 import { PlayerCollisionSystem } from "./Collision/PlayerCollisionSystem";
 import { PlayerProjectileCollisionSystem } from "./Collision/PlayerProjectileCollisionSystem";
 import { WeaponCollisionSystem } from "./Collision/WeaponCollisionSystem";
@@ -30,6 +31,7 @@ export class Game extends Component {
     @property(EnemyManager) private enemyManager: EnemyManager;
     @property(Camera) private camera: Camera;
     @property(GameUI) private gameUI: GameUI;
+    @property(Background) private background: Background;
     @property(ModalWindowManager) private modalWindowManager: ModalWindowManager;
     @property(JsonAsset) private settingsAsset: JsonAsset;
 
@@ -98,6 +100,7 @@ export class Game extends Component {
         new GameModalLauncher(this.modalWindowManager, this.player, this.gamePauser, upgrader);
 
         this.gameUI.init(this.player);
+        this.background.init(this.player.node);
         this.gamePauser.resume();
 
         // while not dead
@@ -116,6 +119,7 @@ export class Game extends Component {
         this.haloProjectileLauncher.gameTick(deltaTime);
         this.horizontalProjectileLauncher.gameTick(deltaTime);
         this.diagonalProjectileLauncher.gameTick(deltaTime);
+        this.background.gameTick();
 
         this.camera.node.worldPosition = this.player.node.worldPosition;
     }