Improve battle layout and visuals

src/game/scenes/BootScene.ts

@@ -1,4 +1,5 @@
 import Phaser from 'phaser';
+import firstBattleMapUrl from '../../assets/images/battle/first-battle-map.png';
 import titleBackgroundUrl from '../../assets/images/taoyuan-oath-title.png';
 import storyChaosUrl from '../../assets/images/story/01-yellow-turban-chaos.png';
 import storyLiuBeiUrl from '../../assets/images/story/02-liu-bei-resolve.png';
@@ -22,6 +23,7 @@ export class BootScene extends Phaser.Scene {
     this.load.image('story-three-heroes', storyThreeHeroesUrl);
     this.load.image('story-militia', storyMilitiaUrl);
     this.load.image('story-sortie', storySortieUrl);
+    this.load.image('battle-map-first', firstBattleMapUrl);
     this.load.image('portrait-liu-bei', liuBeiPortraitUrl);
     this.load.image('portrait-guan-yu', guanYuPortraitUrl);
     this.load.image('portrait-zhang-fei', zhangFeiPortraitUrl);
@@ -34,8 +36,7 @@ export class BootScene extends Phaser.Scene {
 
   private createGeneratedTextures() {
     this.createPetalTexture();
-    this.createUnitTexture('unit-ally', palette.blue, 0xe7edf7);
-    this.createUnitTexture('unit-enemy', palette.red, 0xffebe7);
+    this.createPixelUnitTextures();
   }
 
   private createPetalTexture() {
@@ -48,17 +49,144 @@ export class BootScene extends Phaser.Scene {
     graphics.destroy();
   }
 
-  private createUnitTexture(key: string, primary: number, accent: number) {
+  private createPixelUnitTextures() {
+    this.createPixelUnitTexture('unit-liu-bei', {
+      robe: palette.blue,
+      trim: 0xe7edf7,
+      skin: 0xf0c79a,
+      hair: 0x1e1b17,
+      weapon: 0xd8d0ba,
+      accent: 0xd8b15f
+    });
+    this.createPixelUnitTexture('unit-guan-yu', {
+      robe: 0x2f7d45,
+      trim: 0xd7e6c5,
+      skin: 0xd59b6e,
+      hair: 0x241611,
+      weapon: 0xc7d2d8,
+      accent: 0xb64232,
+      beard: true,
+      halberd: true
+    });
+    this.createPixelUnitTexture('unit-zhang-fei', {
+      robe: 0x5b2b33,
+      trim: 0xefc67c,
+      skin: 0xb97955,
+      hair: 0x16110f,
+      weapon: 0xcfd8d8,
+      accent: 0x15191f,
+      spear: true
+    });
+    this.createPixelUnitTexture('unit-rebel', {
+      robe: 0xc8a032,
+      trim: 0x6e4f24,
+      skin: 0xbc8053,
+      hair: 0x242015,
+      weapon: 0xbfc5bd,
+      accent: 0xf1d157,
+      spear: true
+    });
+    this.createPixelUnitTexture('unit-rebel-cavalry', {
+      robe: 0xd0aa3f,
+      trim: 0x7a4b2a,
+      skin: 0xbc8053,
+      hair: 0x262017,
+      weapon: 0xbfc5bd,
+      accent: 0x56351f,
+      mounted: true
+    });
+    this.createPixelUnitTexture('unit-rebel-leader', {
+      robe: 0x9e7130,
+      trim: 0xf4d66f,
+      skin: 0xc98b5d,
+      hair: 0x1e1710,
+      weapon: 0xd4d7c6,
+      accent: 0xe4c43d,
+      halberd: true,
+      cape: true
+    });
+  }
+
+  private createPixelUnitTexture(
+    key: string,
+    colors: {
+      robe: number;
+      trim: number;
+      skin: number;
+      hair: number;
+      weapon: number;
+      accent: number;
+      beard?: boolean;
+      spear?: boolean;
+      halberd?: boolean;
+      mounted?: boolean;
+      cape?: boolean;
+    }
+  ) {
     const graphics = this.make.graphics({ x: 0, y: 0 });
-    graphics.fillStyle(0x0c0f14, 0.5);
-    graphics.fillEllipse(32, 49, 44, 17);
-    graphics.fillStyle(primary, 1);
-    graphics.fillRoundedRect(14, 12, 36, 38, 8);
-    graphics.fillStyle(accent, 1);
-    graphics.fillCircle(32, 17, 9);
-    graphics.lineStyle(3, 0x0b0d12, 0.55);
-    graphics.strokeRoundedRect(14, 12, 36, 38, 8);
-    graphics.generateTexture(key, 64, 64);
+    graphics.fillStyle(0x07090c, 0.42);
+    graphics.fillRect(6, 27, 20, 3);
+
+    if (colors.mounted) {
+      graphics.fillStyle(0x5b3824, 1);
+      graphics.fillRect(7, 18, 18, 6);
+      graphics.fillRect(5, 21, 5, 3);
+      graphics.fillRect(22, 17, 4, 4);
+      graphics.fillStyle(0x2f2118, 1);
+      graphics.fillRect(9, 24, 3, 5);
+      graphics.fillRect(21, 23, 3, 5);
+    }
+
+    if (colors.cape) {
+      graphics.fillStyle(0x6c2722, 1);
+      graphics.fillRect(10, 13, 13, 13);
+      graphics.fillRect(8, 18, 5, 7);
+    }
+
+    graphics.fillStyle(colors.weapon, 1);
+    if (colors.spear) {
+      graphics.fillRect(24, 6, 2, 22);
+      graphics.fillRect(23, 5, 4, 2);
+    } else if (colors.halberd) {
+      graphics.fillRect(24, 5, 2, 23);
+      graphics.fillRect(22, 5, 6, 2);
+      graphics.fillRect(25, 7, 4, 3);
+    } else {
+      graphics.fillRect(23, 12, 2, 14);
+      graphics.fillRect(22, 11, 5, 2);
+    }
+
+    graphics.fillStyle(colors.robe, 1);
+    graphics.fillRect(11, 13, 10, 12);
+    graphics.fillRect(9, 18, 14, 8);
+    graphics.fillStyle(colors.trim, 1);
+    graphics.fillRect(12, 14, 8, 2);
+    graphics.fillRect(10, 25, 13, 2);
+
+    graphics.fillStyle(colors.skin, 1);
+    graphics.fillRect(12, 7, 8, 7);
+    graphics.fillRect(10, 15, 3, 5);
+    graphics.fillRect(20, 15, 3, 5);
+    graphics.fillStyle(colors.hair, 1);
+    graphics.fillRect(11, 6, 10, 3);
+    graphics.fillRect(10, 8, 2, 5);
+    graphics.fillRect(20, 8, 2, 5);
+
+    if (colors.beard) {
+      graphics.fillStyle(0x2a1712, 1);
+      graphics.fillRect(13, 13, 6, 6);
+      graphics.fillRect(14, 19, 4, 4);
+    }
+
+    graphics.fillStyle(colors.accent, 1);
+    graphics.fillRect(14, 5, 4, 2);
+    graphics.fillRect(14, 17, 5, 2);
+    graphics.fillStyle(0x06080b, 1);
+    graphics.fillRect(13, 10, 2, 1);
+    graphics.fillRect(18, 10, 2, 1);
+
+    graphics.generateTexture(key, 32, 32);
     graphics.destroy();
+    this.textures.get(key).setFilter(Phaser.Textures.FilterMode.NEAREST);
   }
 }