Add unit movement and denser pixel sprites
This commit is contained in:
@@ -11,6 +11,21 @@ import liuBeiPortraitUrl from '../../assets/images/portraits/liu-bei.png';
|
||||
import zhangFeiPortraitUrl from '../../assets/images/portraits/zhang-fei.png';
|
||||
import { palette } from '../ui/palette';
|
||||
|
||||
type UnitPixelPalette = {
|
||||
robe: number;
|
||||
trim: number;
|
||||
shade: number;
|
||||
skin: number;
|
||||
hair: number;
|
||||
weapon: number;
|
||||
accent: number;
|
||||
beard?: boolean;
|
||||
spear?: boolean;
|
||||
halberd?: boolean;
|
||||
mounted?: boolean;
|
||||
cape?: boolean;
|
||||
};
|
||||
|
||||
export class BootScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('BootScene');
|
||||
@@ -53,6 +68,7 @@ export class BootScene extends Phaser.Scene {
|
||||
this.createPixelUnitTexture('unit-liu-bei', {
|
||||
robe: palette.blue,
|
||||
trim: 0xe7edf7,
|
||||
shade: 0x1d3552,
|
||||
skin: 0xf0c79a,
|
||||
hair: 0x1e1b17,
|
||||
weapon: 0xd8d0ba,
|
||||
@@ -61,6 +77,7 @@ export class BootScene extends Phaser.Scene {
|
||||
this.createPixelUnitTexture('unit-guan-yu', {
|
||||
robe: 0x2f7d45,
|
||||
trim: 0xd7e6c5,
|
||||
shade: 0x1f5131,
|
||||
skin: 0xd59b6e,
|
||||
hair: 0x241611,
|
||||
weapon: 0xc7d2d8,
|
||||
@@ -71,6 +88,7 @@ export class BootScene extends Phaser.Scene {
|
||||
this.createPixelUnitTexture('unit-zhang-fei', {
|
||||
robe: 0x5b2b33,
|
||||
trim: 0xefc67c,
|
||||
shade: 0x351820,
|
||||
skin: 0xb97955,
|
||||
hair: 0x16110f,
|
||||
weapon: 0xcfd8d8,
|
||||
@@ -80,6 +98,7 @@ export class BootScene extends Phaser.Scene {
|
||||
this.createPixelUnitTexture('unit-rebel', {
|
||||
robe: 0xc8a032,
|
||||
trim: 0x6e4f24,
|
||||
shade: 0x7b6221,
|
||||
skin: 0xbc8053,
|
||||
hair: 0x242015,
|
||||
weapon: 0xbfc5bd,
|
||||
@@ -89,6 +108,7 @@ export class BootScene extends Phaser.Scene {
|
||||
this.createPixelUnitTexture('unit-rebel-cavalry', {
|
||||
robe: 0xd0aa3f,
|
||||
trim: 0x7a4b2a,
|
||||
shade: 0x7a6428,
|
||||
skin: 0xbc8053,
|
||||
hair: 0x262017,
|
||||
weapon: 0xbfc5bd,
|
||||
@@ -98,6 +118,7 @@ export class BootScene extends Phaser.Scene {
|
||||
this.createPixelUnitTexture('unit-rebel-leader', {
|
||||
robe: 0x9e7130,
|
||||
trim: 0xf4d66f,
|
||||
shade: 0x60421f,
|
||||
skin: 0xc98b5d,
|
||||
hair: 0x1e1710,
|
||||
weapon: 0xd4d7c6,
|
||||
@@ -107,86 +128,123 @@ export class BootScene extends Phaser.Scene {
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
) {
|
||||
private createPixelUnitTexture(key: string, colors: UnitPixelPalette) {
|
||||
const graphics = this.make.graphics({ x: 0, y: 0 });
|
||||
graphics.fillStyle(0x07090c, 0.42);
|
||||
graphics.fillRect(6, 27, 20, 3);
|
||||
this.drawPixelShadow(graphics);
|
||||
|
||||
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);
|
||||
this.drawHorse(graphics, colors);
|
||||
}
|
||||
|
||||
if (colors.cape) {
|
||||
graphics.fillStyle(0x6c2722, 1);
|
||||
graphics.fillRect(10, 13, 13, 13);
|
||||
graphics.fillRect(8, 18, 5, 7);
|
||||
graphics.fillRect(15, 19, 20, 18);
|
||||
graphics.fillRect(12, 26, 7, 12);
|
||||
graphics.fillStyle(0x3f1715, 1);
|
||||
graphics.fillRect(13, 35, 17, 3);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
this.drawWeapon(graphics, colors);
|
||||
this.drawBody(graphics, colors);
|
||||
this.drawHead(graphics, colors);
|
||||
|
||||
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.generateTexture(key, 48, 48);
|
||||
graphics.destroy();
|
||||
this.textures.get(key).setFilter(Phaser.Textures.FilterMode.NEAREST);
|
||||
}
|
||||
|
||||
private drawPixelShadow(graphics: Phaser.GameObjects.Graphics) {
|
||||
graphics.fillStyle(0x07090c, 0.45);
|
||||
graphics.fillRect(10, 41, 30, 3);
|
||||
graphics.fillRect(14, 39, 23, 2);
|
||||
}
|
||||
|
||||
private drawHorse(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
|
||||
graphics.fillStyle(0x5b3824, 1);
|
||||
graphics.fillRect(10, 28, 28, 8);
|
||||
graphics.fillRect(8, 31, 6, 4);
|
||||
graphics.fillRect(34, 25, 5, 7);
|
||||
graphics.fillStyle(0x3a2418, 1);
|
||||
graphics.fillRect(12, 36, 4, 7);
|
||||
graphics.fillRect(20, 35, 4, 8);
|
||||
graphics.fillRect(30, 35, 4, 8);
|
||||
graphics.fillStyle(0x8c5a36, 1);
|
||||
graphics.fillRect(13, 27, 19, 3);
|
||||
graphics.fillStyle(colors.accent, 1);
|
||||
graphics.fillRect(18, 29, 10, 2);
|
||||
}
|
||||
|
||||
private drawWeapon(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
|
||||
graphics.fillStyle(colors.weapon, 1);
|
||||
if (colors.spear) {
|
||||
graphics.fillRect(36, 8, 2, 31);
|
||||
graphics.fillRect(35, 6, 4, 3);
|
||||
graphics.fillRect(34, 9, 6, 2);
|
||||
return;
|
||||
}
|
||||
|
||||
if (colors.halberd) {
|
||||
graphics.fillRect(36, 6, 2, 34);
|
||||
graphics.fillRect(32, 7, 9, 2);
|
||||
graphics.fillRect(37, 9, 6, 4);
|
||||
graphics.fillRect(34, 13, 3, 3);
|
||||
return;
|
||||
}
|
||||
|
||||
graphics.fillRect(36, 15, 2, 22);
|
||||
graphics.fillRect(34, 14, 6, 2);
|
||||
graphics.fillRect(37, 12, 2, 4);
|
||||
}
|
||||
|
||||
private drawBody(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
|
||||
graphics.fillStyle(colors.shade, 1);
|
||||
graphics.fillRect(17, 21, 16, 18);
|
||||
graphics.fillRect(14, 26, 6, 10);
|
||||
graphics.fillRect(31, 26, 5, 10);
|
||||
graphics.fillStyle(colors.robe, 1);
|
||||
graphics.fillRect(18, 20, 14, 16);
|
||||
graphics.fillRect(15, 25, 6, 9);
|
||||
graphics.fillRect(31, 25, 5, 9);
|
||||
graphics.fillRect(19, 36, 5, 6);
|
||||
graphics.fillRect(27, 36, 5, 6);
|
||||
|
||||
graphics.fillStyle(colors.trim, 1);
|
||||
graphics.fillRect(19, 21, 12, 2);
|
||||
graphics.fillRect(20, 27, 10, 2);
|
||||
graphics.fillRect(18, 34, 15, 2);
|
||||
graphics.fillRect(22, 23, 2, 12);
|
||||
graphics.fillStyle(0x0a0c10, 1);
|
||||
graphics.fillRect(19, 42, 6, 2);
|
||||
graphics.fillRect(27, 42, 6, 2);
|
||||
graphics.fillStyle(colors.skin, 1);
|
||||
graphics.fillRect(13, 28, 3, 5);
|
||||
graphics.fillRect(35, 28, 3, 5);
|
||||
}
|
||||
|
||||
private drawHead(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
|
||||
graphics.fillStyle(colors.skin, 1);
|
||||
graphics.fillRect(18, 10, 12, 10);
|
||||
graphics.fillRect(16, 13, 3, 5);
|
||||
graphics.fillRect(29, 13, 3, 5);
|
||||
graphics.fillStyle(colors.hair, 1);
|
||||
graphics.fillRect(17, 8, 14, 4);
|
||||
graphics.fillRect(16, 11, 4, 7);
|
||||
graphics.fillRect(29, 11, 3, 7);
|
||||
graphics.fillStyle(colors.accent, 1);
|
||||
graphics.fillRect(19, 7, 9, 2);
|
||||
graphics.fillRect(21, 5, 5, 2);
|
||||
|
||||
graphics.fillStyle(0x050609, 1);
|
||||
graphics.fillRect(20, 14, 2, 1);
|
||||
graphics.fillRect(27, 14, 2, 1);
|
||||
graphics.fillRect(23, 18, 4, 1);
|
||||
|
||||
if (colors.beard) {
|
||||
graphics.fillStyle(0x2a1712, 1);
|
||||
graphics.fillRect(20, 19, 9, 6);
|
||||
graphics.fillRect(22, 25, 5, 5);
|
||||
graphics.fillStyle(0x160d0a, 1);
|
||||
graphics.fillRect(23, 28, 3, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user