sun and clouds

CITATIONS.md

@@ -1,6 +1,8 @@
-minecraft grass texture - https://minecraft.fandom.com/wiki/List_of_block_textures
+minecraft grass sprites - https://minecraft.fandom.com/wiki/List_of_block_textures
 stickman figures - https://www.deviantart.com/turboignited/art/Stickman-Spritesheet-691692371
 mountain sprite - https://www.deviantart.com/jonata-d/art/Mountain-Sprite-001-706211298
 grass tile set - https://xeleph.itch.io/side-view-grass-tileset
-tree textures - https://graphscriptdev.itch.io/plant-trees?download
-plant textures - https://www.shutterstock.com/image-vector/trees-bushes-grass-style-pixel-art-2255025673
+tree sprites - https://graphscriptdev.itch.io/plant-trees?download
+plant sprites - https://www.shutterstock.com/image-vector/trees-bushes-grass-style-pixel-art-2255025673
+cloud sprite - https://artisan-studio.itch.io/2d-pixel-art-semi-realistic-clouds?download
+sun sprite - https://www.shutterstock.com/image-vector/sun-sticker-pixel-art-icon-design-2148275463

src/scenes/boot.ts

@@ -13,10 +13,18 @@ export class Boot extends Scene {
     this.load.image("grass-side-view", "assets/grass-block.webp");
     this.load.image("grass", "assets/grass.png");
     this.load.image("mountain", "assets/mountain.png");
-    this.load.image("tree0", "assets/tree0.png");
-    this.load.image("tree1", "assets/tree1.png");
-    this.load.image("tree2", "assets/tree2.png");
-    this.load.image("tree3", "assets/tree3.png");
+    this.load.image("sun", "assets/sun.png");
+
+    // load trees
+    for (let i = 0; i < 4; i++) {
+      this.load.image("tree" + i, "assets/tree" + i + ".png");
+    }
+
+    // load clouds
+    for (let i = 0; i < 6; i++) {
+      this.load.image("cloud" + i, "assets/cloud" + i + ".png");
+    }
+
     // this.load.image("player-idle", "assets/player-idle.png");
     this.load.spritesheet("player", "assets/stickman-sprites.png", {
       frameWidth: 128,

src/scenes/game/index.ts

@@ -70,5 +70,6 @@ export class Game extends Scene {
     this.mover.update(_, delta);
     this.ui.update(_, delta);
     this.interactableContainer.update();
+    this.worldDecoration.update(_, delta);
   }
 }

src/scenes/game/world-decoration/cloud-containers/cloud-container.ts

@@ -0,0 +1,71 @@
+import { Physics } from "phaser";
+import { Game as MainGame } from "../../index";
+import { DecorationContainer } from "../decoration-container";
+import { screenSize } from "../../../../constants";
+
+export abstract class CloudContainer extends DecorationContainer {
+  cloudScale = 1;
+  cloudSpeed = 0.15;
+
+  // static scaleVariation = 3; // deviation from treeScale (subtraction or addition)
+  static cloudCount = 6; // number of tree textures labeled as "tree{n}" [0, n)
+
+  constructor(
+    scene: MainGame,
+    private cloudGroup: Physics.Arcade.StaticGroup
+  ) {
+    super(scene, cloudGroup);
+    for (let i = 0; i < CloudContainer.cloudCount; i++) {
+      this.scene.textures
+        .get("cloud" + i)
+        .setFilter(Phaser.Textures.FilterMode.NEAREST);
+    }
+  }
+
+  create() {
+    this.populateClouds(10);
+  }
+
+  createCloud(x: number) {
+    const cloud = this.scene.add
+      .image(
+        0,
+        0,
+        "cloud" + Math.floor(Math.random() * CloudContainer.cloudCount)
+      )
+      .setScale(
+        this.cloudScale //+
+        // (Math.random() - 0.5) * TreeContainer.scaleVariation
+      )
+      .setOrigin(0, 0);
+
+    const posX = x * cloud.width * this.cloudScale;
+    cloud.setPosition(posX, cloud.height);
+    cloud.setData("startingX", x);
+    this.staticGroup.add(cloud);
+  }
+
+  populateClouds(width: number) {
+    const start = Math.random() * 2;
+
+    for (let i = -start; i < width - 1; i += 1) {
+      this.createCloud(i);
+    }
+  }
+
+  update(_: number, delta: number) {
+    this.cloudGroup.getChildren().forEach((_cloud) => {
+      const cloud = _cloud as Phaser.Physics.Arcade.Image;
+      const offset = this.cloudSpeed * delta;
+      cloud.setPosition(cloud.x - offset, cloud.y);
+      if (cloud.x < -screenSize.x) {
+        cloud.setPosition(
+          screenSize.x +
+            1000 +
+            cloud.getData("startingX") * cloud.width * this.cloudScale,
+          cloud.y
+        );
+      }
+    });
+  }
+}

src/scenes/game/world-decoration/cloud-containers/cloud-container1.ts

@@ -0,0 +1,11 @@
+import { Physics } from "phaser";
+import { Game as MainGame } from "../../index";
+import { CloudContainer } from "./cloud-container";
+
+export class CloudContainer1 extends CloudContainer {
+  constructor(scene: MainGame, cloudGroup: Physics.Arcade.StaticGroup) {
+    super(scene, cloudGroup);
+    this.cloudScale = 8;
+    this.create();
+  }
+}

src/scenes/game/world-decoration/cloud-containers/index.ts

@@ -0,0 +1 @@
+export * from "./cloud-container1";

src/scenes/game/world-decoration/index.ts

@@ -8,6 +8,8 @@ import {
   TreeContainer2,
   TreeContainer3,
 } from "./tree-containers";
+import { CloudContainer1 } from "./cloud-containers";
+import { screenSize } from "../../../constants";
 
 type ContainerInfo = {
   speedMultiplier: number;
@@ -28,7 +30,11 @@ export class WorldDecoration {
   FOREGROUND_CLASS = GrassContainer;
   foregroundGroup: Physics.Arcade.StaticGroup;
 
+  CLOUD_CLASS = CloudContainer1;
+  cloudContainer: CloudContainer1;
+
   decorationContainers: ContainerInfo[] = [
+    { speedMultiplier: 0.025, class: CloudContainer1 },
     { speedMultiplier: 1, class: GrassContainer },
     { speedMultiplier: 0.075, class: MountainContainer },
     { speedMultiplier: 0.15, class: TreeContainer3 }, // farther ones should be drawn first
@@ -39,6 +45,8 @@ export class WorldDecoration {
   decorationInfos: DecorationInfo[] = [];
 
   constructor(scene: MainGame) {
+    scene.add.image(screenSize.x - 250, 200, "sun").setScale(0.8);
+
     this.decorationContainers.forEach((containerInfo) => {
       const staticGroup = scene.physics.add.staticGroup();
       const instance = new containerInfo.class(scene, staticGroup);
@@ -50,11 +58,17 @@ export class WorldDecoration {
 
       if (containerInfo.class == this.FOREGROUND_CLASS) {
         this.foregroundGroup = staticGroup;
+      } else if (containerInfo.class == this.CLOUD_CLASS) {
+        this.cloudContainer = instance as CloudContainer1;
       }
     });
   }
 
   addToForegroundGroup(object: GameObjects.Image) {
     this.foregroundGroup.add(object);
   }
+
+  update(_: number, delta: number) {
+    this.cloudContainer.update(_, delta);
+  }
 }