Added tiled background

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;
     }