Wickedness/heros_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve tactical unit pixel sprites

Browse Source
This commit is contained in:
Wickedness
2026-06-22 02:35:53 +09:00
parent b0c6c0ebea
commit 971132c7a4
2 changed files with 290 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/game/scenes/BattleScene.ts
View File

@@ -24,7 +24,7 @@ const unitTexture: Record<string, string> = {
'zhang-fei': 'unit-zhang-fei',
'rebel-a': 'unit-rebel',
'rebel-b': 'unit-rebel',
'rebel-c': 'unit-rebel-cavalry',
'rebel-c': 'unit-rebel-archer',
'rebel-leader': 'unit-rebel-leader'
};
@@ -244,7 +244,7 @@ export class BattleScene extends Phaser.Scene {
private drawUnits() {
firstBattleUnits.forEach((unit) => {
const sizeRatio = unit.faction === 'ally' ? 0.98 : 0.92;
const sizeRatio = unit.faction === 'ally' ? 1.08 : 1.02;
const sprite = this.add.image(this.tileCenterX(unit.x), this.tileCenterY(unit.y), unitTexture[unit.id] ?? 'unit-rebel');
sprite.setName(`unit-${unit.id}`);
sprite.setDisplaySize(this.layout.tileSize * sizeRatio, this.layout.tileSize * sizeRatio);
@@ -252,12 +252,12 @@ export class BattleScene extends Phaser.Scene {
sprite.setInteractive({ useHandCursor: unit.faction === 'ally' });
sprite.on('pointerdown', () => this.selectUnit(unit));
const label = this.add.text(sprite.x, sprite.y + this.layout.tileSize * 0.36, unit.name, {
const label = this.add.text(sprite.x, sprite.y + this.layout.tileSize * 0.47, unit.name, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '13px',
fontSize: '11px',
color: unit.faction === 'ally' ? '#e7edf7' : '#ffebe7',
backgroundColor: 'rgba(8,10,14,0.78)',
padding: { left: 5, right: 5, top: 2, bottom: 2 }
stroke: '#05070a',
strokeThickness: 3
});
label.setOrigin(0.5, 0);
label.setDepth(7);
@@ -771,7 +771,7 @@ export class BattleScene extends Phaser.Scene {
view.sprite.setAlpha(1);
view.label.setAlpha(1);
view.label.setColor(unit?.faction === 'ally' ? '#e7edf7' : '#ffebe7');
view.label.setBackgroundColor('rgba(8,10,14,0.78)');
view.label.setBackgroundColor('');
});
}
@@ -967,7 +967,7 @@ export class BattleScene extends Phaser.Scene {
view.sprite.setTint(0xb7b7b7);
view.label.setAlpha(0.55);
view.label.setColor('#b9b9b9');
view.label.setBackgroundColor('rgba(20,20,20,0.66)');
view.label.setBackgroundColor('');
}
private renderBondPanel(message?: string) {

398
src/game/scenes/BootScene.ts
View File

@@ -15,13 +15,19 @@ type UnitPixelPalette = {
robe: number;
trim: number;
shade: number;
highlight?: number;
skin: number;
skinShade?: number;
hair: number;
weapon: number;
metal?: number;
accent: number;
outline?: number;
boot?: number;
beard?: boolean;
spear?: boolean;
halberd?: boolean;
beardStyle?: 'short' | 'long' | 'wild';
weaponKind?: 'dual' | 'sword' | 'spear' | 'glaive' | 'bow' | 'axe';
headgear?: 'topknot' | 'turban' | 'cap' | 'helmet';
mounted?: boolean;
cape?: boolean;
};
@@ -69,211 +75,371 @@ export class BootScene extends Phaser.Scene {
robe: palette.blue,
trim: 0xe7edf7,
shade: 0x1d3552,
highlight: 0x74a8df,
skin: 0xf0c79a,
skinShade: 0xc9895f,
hair: 0x1e1b17,
weapon: 0xd8d0ba,
accent: 0xd8b15f
metal: 0xf0f4e9,
accent: 0xd8b15f,
outline: 0x10151b,
boot: 0x172033,
weaponKind: 'dual',
headgear: 'topknot'
});
this.createPixelUnitTexture('unit-guan-yu', {
robe: 0x2f7d45,
trim: 0xd7e6c5,
shade: 0x1f5131,
highlight: 0x65b36d,
skin: 0xd59b6e,
skinShade: 0xa86945,
hair: 0x241611,
weapon: 0xc7d2d8,
metal: 0xf0f5ee,
accent: 0xb64232,
outline: 0x0d1410,
boot: 0x15130e,
beard: true,
halberd: true
beardStyle: 'long',
weaponKind: 'glaive',
headgear: 'cap'
});
this.createPixelUnitTexture('unit-zhang-fei', {
robe: 0x5b2b33,
trim: 0xefc67c,
shade: 0x351820,
highlight: 0x8a4552,
skin: 0xb97955,
skinShade: 0x7d4937,
hair: 0x16110f,
weapon: 0xcfd8d8,
metal: 0xf1f5ed,
accent: 0x15191f,
spear: true
outline: 0x0b0909,
boot: 0x141010,
beard: true,
beardStyle: 'wild',
weaponKind: 'spear',
headgear: 'topknot'
});
this.createPixelUnitTexture('unit-rebel', {
robe: 0xc8a032,
trim: 0x6e4f24,
shade: 0x7b6221,
highlight: 0xf0cf5a,
skin: 0xbc8053,
skinShade: 0x845237,
hair: 0x242015,
weapon: 0xbfc5bd,
metal: 0xe4e8d8,
accent: 0xf1d157,
spear: true
outline: 0x17120c,
boot: 0x2d2115,
weaponKind: 'spear',
headgear: 'turban'
});
this.createPixelUnitTexture('unit-rebel-archer', {
robe: 0xd0aa3f,
trim: 0x754a28,
shade: 0x765a22,
highlight: 0xe4c565,
skin: 0xbc8053,
skinShade: 0x845237,
hair: 0x262017,
weapon: 0x8f5b31,
metal: 0xd8d7bf,
accent: 0xf1d157,
outline: 0x17120c,
boot: 0x2d2115,
weaponKind: 'bow',
headgear: 'turban'
});
this.createPixelUnitTexture('unit-rebel-cavalry', {
robe: 0xd0aa3f,
trim: 0x7a4b2a,
shade: 0x7a6428,
highlight: 0xf0cf5a,
skin: 0xbc8053,
skinShade: 0x845237,
hair: 0x262017,
weapon: 0xbfc5bd,
metal: 0xe4e8d8,
accent: 0x56351f,
mounted: true
outline: 0x17120c,
boot: 0x2d2115,
mounted: true,
weaponKind: 'spear',
headgear: 'turban'
});
this.createPixelUnitTexture('unit-rebel-leader', {
robe: 0x9e7130,
trim: 0xf4d66f,
shade: 0x60421f,
highlight: 0xd59b45,
skin: 0xc98b5d,
skinShade: 0x8d5a3b,
hair: 0x1e1710,
weapon: 0xd4d7c6,
metal: 0xf1f1df,
accent: 0xe4c43d,
halberd: true,
cape: true
outline: 0x120e0a,
boot: 0x1d1710,
weaponKind: 'axe',
headgear: 'helmet',
cape: true,
beard: true,
beardStyle: 'short'
});
}
private createPixelUnitTexture(key: string, colors: UnitPixelPalette) {
const graphics = this.make.graphics({ x: 0, y: 0 });
this.drawPixelShadow(graphics);
this.drawPixelShadow(graphics, colors);
if (colors.mounted) {
this.drawHorse(graphics, colors);
}
if (colors.cape) {
graphics.fillStyle(0x6c2722, 1);
graphics.fillRect(15, 19, 20, 18);
graphics.fillRect(12, 26, 7, 12);
graphics.fillStyle(0x3f1715, 1);
graphics.fillRect(13, 35, 17, 3);
this.drawCape(graphics, colors);
}
this.drawWeapon(graphics, colors);
this.drawWeapon(graphics, colors, 'back');
this.drawBody(graphics, colors);
this.drawHead(graphics, colors);
this.drawWeapon(graphics, colors, 'front');
graphics.generateTexture(key, 64, 64);
graphics.destroy();
this.textures.get(key).setFilter(Phaser.Textures.FilterMode.NEAREST);
}
private drawPixelShadow(graphics: Phaser.GameObjects.Graphics) {
graphics.fillStyle(0x07090c, 0.45);
graphics.fillRect(12, 56, 40, 4);
graphics.fillRect(18, 53, 30, 3);
private px(graphics: Phaser.GameObjects.Graphics, color: number, x: number, y: number, width: number, height: number, alpha = 1) {
graphics.fillStyle(color, alpha);
graphics.fillRect(x, y, width, height);
}
private drawPixelShadow(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
const left = colors.mounted ? 7 : 15;
const width = colors.mounted ? 48 : 36;
this.px(graphics, 0x050609, left, 58, width, 3, 0.5);
this.px(graphics, 0x050609, left + 5, 56, width - 10, 2, 0.38);
this.px(graphics, 0x050609, left + 12, 54, width - 24, 2, 0.28);
}
private drawHorse(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
graphics.fillStyle(0x5b3824, 1);
graphics.fillRect(11, 39, 38, 10);
graphics.fillRect(8, 43, 8, 5);
graphics.fillRect(45, 35, 6, 9);
graphics.fillStyle(0x3a2418, 1);
graphics.fillRect(14, 48, 5, 10);
graphics.fillRect(25, 47, 5, 11);
graphics.fillRect(40, 47, 5, 11);
graphics.fillStyle(0x8c5a36, 1);
graphics.fillRect(16, 37, 24, 3);
graphics.fillRect(47, 37, 4, 3);
graphics.fillStyle(0x1f1510, 1);
graphics.fillRect(46, 32, 5, 4);
graphics.fillStyle(colors.accent, 1);
graphics.fillRect(22, 40, 14, 2);
graphics.fillRect(48, 35, 3, 2);
const outline = colors.outline ?? 0x15100d;
this.px(graphics, outline, 9, 38, 40, 13);
this.px(graphics, outline, 44, 30, 9, 13);
this.px(graphics, outline, 6, 43, 8, 6);
this.px(graphics, 0x5b3824, 11, 39, 36, 10);
this.px(graphics, 0x70472c, 13, 37, 25, 4);
this.px(graphics, 0x8c5a36, 17, 38, 19, 2);
this.px(graphics, 0x3a2418, 13, 49, 6, 9);
this.px(graphics, 0x3a2418, 25, 48, 5, 10);
this.px(graphics, 0x3a2418, 39, 48, 6, 10);
this.px(graphics, outline, 12, 57, 8, 2);
this.px(graphics, outline, 24, 57, 8, 2);
this.px(graphics, outline, 38, 57, 9, 2);
this.px(graphics, 0x6a4328, 45, 32, 7, 9);
this.px(graphics, 0x21150f, 46, 29, 5, 4);
this.px(graphics, 0x21150f, 49, 34, 4, 2);
this.px(graphics, colors.accent, 21, 41, 17, 3);
this.px(graphics, colors.trim, 24, 38, 10, 2);
this.px(graphics, 0xd6b05a, 47, 36, 4, 2);
this.px(graphics, 0x0b0b0b, 49, 32, 1, 1);
}
private drawWeapon(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
graphics.fillStyle(colors.weapon, 1);
if (colors.spear) {
graphics.fillRect(49, 8, 3, 45);
graphics.fillRect(48, 5, 5, 4);
graphics.fillRect(46, 9, 9, 2);
graphics.fillStyle(0x7f8f8f, 1);
graphics.fillRect(50, 12, 1, 32);
private drawCape(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
const outline = colors.outline ?? 0x17100c;
this.px(graphics, outline, 16, 20, 22, 24);
this.px(graphics, outline, 13, 28, 9, 13);
this.px(graphics, 0x6c2722, 17, 21, 20, 21);
this.px(graphics, 0x8f392c, 18, 23, 8, 16);
this.px(graphics, 0x3f1715, 14, 35, 18, 4);
this.px(graphics, 0xc46146, 20, 24, 3, 12);
}
private drawWeapon(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette, layer: 'back' | 'front') {
const kind = colors.weaponKind ?? 'sword';
const metal = colors.metal ?? colors.weapon;
const outline = colors.outline ?? 0x101010;
if (layer === 'back' && kind === 'spear') {
this.px(graphics, outline, 50, 8, 4, 47);
this.px(graphics, colors.weapon, 51, 10, 2, 44);
this.px(graphics, outline, 48, 5, 7, 5);
this.px(graphics, metal, 49, 3, 5, 6);
this.px(graphics, metal, 46, 9, 10, 2);
this.px(graphics, 0xffffff, 50, 4, 2, 3, 0.55);
return;
}
if (colors.halberd) {
graphics.fillRect(49, 6, 3, 48);
graphics.fillRect(44, 8, 13, 3);
graphics.fillRect(51, 11, 8, 5);
graphics.fillRect(46, 16, 4, 4);
graphics.fillStyle(0x89999a, 1);
graphics.fillRect(50, 12, 1, 37);
if (layer === 'back' && kind === 'glaive') {
this.px(graphics, outline, 50, 5, 4, 50);
this.px(graphics, colors.weapon, 51, 8, 2, 46);
this.px(graphics, outline, 44, 6, 13, 5);
this.px(graphics, metal, 45, 5, 10, 5);
this.px(graphics, metal, 54, 9, 5, 5);
this.px(graphics, metal, 47, 12, 4, 6);
this.px(graphics, 0xffffff, 47, 6, 6, 1, 0.48);
return;
}
graphics.fillRect(50, 20, 3, 31);
graphics.fillRect(47, 19, 9, 3);
graphics.fillRect(51, 16, 3, 5);
if (layer === 'back' && kind === 'bow') {
this.px(graphics, outline, 15, 17, 3, 27);
this.px(graphics, outline, 18, 14, 3, 6);
this.px(graphics, outline, 18, 41, 3, 6);
this.px(graphics, colors.weapon, 17, 18, 2, 25);
this.px(graphics, colors.weapon, 19, 15, 2, 5);
this.px(graphics, colors.weapon, 19, 41, 2, 5);
this.px(graphics, metal, 22, 19, 1, 24, 0.8);
this.px(graphics, metal, 11, 32, 12, 1);
this.px(graphics, metal, 11, 30, 3, 5);
return;
}
if (layer === 'back' && kind === 'axe') {
this.px(graphics, outline, 50, 13, 4, 43);
this.px(graphics, colors.weapon, 51, 15, 2, 40);
this.px(graphics, outline, 43, 11, 16, 9);
this.px(graphics, metal, 44, 10, 9, 8);
this.px(graphics, metal, 52, 13, 7, 6);
this.px(graphics, 0xffffff, 45, 11, 5, 1, 0.5);
return;
}
if (layer === 'front' && kind === 'dual') {
this.px(graphics, outline, 46, 26, 3, 20);
this.px(graphics, metal, 47, 22, 2, 20);
this.px(graphics, metal, 49, 20, 3, 4);
this.px(graphics, colors.accent, 44, 39, 6, 2);
this.px(graphics, outline, 17, 31, 3, 17);
this.px(graphics, metal, 16, 28, 2, 18);
this.px(graphics, metal, 14, 27, 3, 4);
this.px(graphics, colors.accent, 16, 42, 6, 2);
return;
}
if (layer === 'front' && kind === 'sword') {
this.px(graphics, outline, 48, 22, 4, 28);
this.px(graphics, metal, 49, 18, 2, 29);
this.px(graphics, metal, 47, 20, 6, 3);
this.px(graphics, colors.accent, 46, 42, 7, 2);
}
}
private drawBody(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
graphics.fillStyle(colors.shade, 1);
graphics.fillRect(22, 27, 22, 24);
graphics.fillRect(18, 33, 8, 14);
graphics.fillRect(42, 33, 7, 14);
graphics.fillStyle(colors.robe, 1);
graphics.fillRect(23, 26, 20, 22);
graphics.fillRect(19, 32, 8, 13);
graphics.fillRect(42, 32, 7, 13);
graphics.fillRect(24, 48, 8, 8);
graphics.fillRect(35, 48, 8, 8);
const outline = colors.outline ?? 0x111318;
const highlight = colors.highlight ?? colors.robe;
const boot = colors.boot ?? 0x16120e;
const bodyY = colors.mounted ? 21 : 26;
const legY = colors.mounted ? 40 : 46;
graphics.fillStyle(colors.trim, 1);
graphics.fillRect(24, 27, 18, 2);
graphics.fillRect(25, 35, 16, 2);
graphics.fillRect(23, 45, 22, 2);
graphics.fillRect(29, 29, 3, 17);
graphics.fillRect(36, 29, 2, 17);
graphics.fillStyle(0xf8e6a8, 0.9);
graphics.fillRect(25, 30, 4, 2);
graphics.fillRect(39, 30, 3, 2);
graphics.fillRect(26, 39, 14, 2);
graphics.fillStyle(colors.accent, 1);
graphics.fillRect(30, 24, 8, 3);
graphics.fillRect(28, 37, 12, 2);
graphics.fillStyle(0x0a0c10, 1);
graphics.fillRect(24, 56, 9, 3);
graphics.fillRect(35, 56, 9, 3);
graphics.fillStyle(colors.skin, 1);
graphics.fillRect(17, 36, 4, 7);
graphics.fillRect(48, 36, 4, 7);
graphics.fillStyle(0x000000, 0.22);
graphics.fillRect(22, 50, 4, 5);
graphics.fillRect(39, 50, 4, 5);
this.px(graphics, outline, 23, legY, 10, 12);
this.px(graphics, outline, 35, legY - 2, 10, 14);
this.px(graphics, colors.shade, 25, legY, 7, 10);
this.px(graphics, colors.robe, 36, legY - 1, 7, 11);
this.px(graphics, boot, 22, legY + 10, 12, 4);
this.px(graphics, boot, 35, legY + 10, 12, 4);
this.px(graphics, 0xffffff, 27, legY + 1, 3, 1, 0.3);
this.px(graphics, outline, 21, bodyY + 2, 25, 23);
this.px(graphics, outline, 18, bodyY + 8, 8, 16);
this.px(graphics, outline, 42, bodyY + 6, 8, 16);
this.px(graphics, colors.shade, 23, bodyY + 4, 21, 21);
this.px(graphics, colors.robe, 24, bodyY + 3, 18, 20);
this.px(graphics, highlight, 26, bodyY + 5, 5, 15);
this.px(graphics, colors.shade, 37, bodyY + 5, 5, 17);
this.px(graphics, colors.robe, 19, bodyY + 9, 7, 13);
this.px(graphics, colors.robe, 42, bodyY + 8, 7, 12);
this.px(graphics, highlight, 20, bodyY + 10, 3, 9);
this.px(graphics, colors.trim, 24, bodyY + 4, 18, 2);
this.px(graphics, colors.trim, 25, bodyY + 12, 17, 2);
this.px(graphics, colors.trim, 23, bodyY + 20, 22, 2);
this.px(graphics, colors.trim, 29, bodyY + 6, 3, 16);
this.px(graphics, colors.accent, 31, bodyY, 8, 4);
this.px(graphics, colors.accent, 27, bodyY + 15, 14, 2);
this.px(graphics, 0xf8e6a8, 26, bodyY + 7, 4, 2, 0.8);
this.px(graphics, 0xf8e6a8, 38, bodyY + 7, 3, 2, 0.78);
this.px(graphics, 0xf8e6a8, 27, bodyY + 18, 13, 1, 0.55);
this.px(graphics, colors.skin, 17, bodyY + 15, 4, 6);
this.px(graphics, colors.skin, 48, bodyY + 13, 4, 6);
this.px(graphics, colors.skinShade ?? 0x9a6747, 18, bodyY + 20, 3, 2);
this.px(graphics, colors.skinShade ?? 0x9a6747, 49, bodyY + 18, 3, 2);
if (colors.weaponKind === 'bow') {
this.px(graphics, colors.accent, 39, bodyY + 14, 7, 3);
this.px(graphics, colors.metal ?? colors.weapon, 44, bodyY + 11, 9, 1);
}
}
private drawHead(graphics: Phaser.GameObjects.Graphics, colors: UnitPixelPalette) {
graphics.fillStyle(colors.skin, 1);
graphics.fillRect(24, 11, 17, 15);
graphics.fillRect(21, 16, 4, 7);
graphics.fillRect(40, 16, 4, 7);
graphics.fillStyle(0xd79a70, 1);
graphics.fillRect(25, 24, 15, 2);
graphics.fillStyle(colors.hair, 1);
graphics.fillRect(23, 8, 20, 5);
graphics.fillRect(22, 12, 6, 10);
graphics.fillRect(39, 12, 5, 10);
graphics.fillRect(26, 6, 13, 3);
graphics.fillStyle(colors.accent, 1);
graphics.fillRect(25, 7, 14, 2);
graphics.fillRect(29, 4, 7, 3);
graphics.fillRect(30, 2, 5, 2);
const outline = colors.outline ?? 0x111318;
const skinShade = colors.skinShade ?? 0xb17450;
const headY = colors.mounted ? 7 : 10;
graphics.fillStyle(0x050609, 1);
graphics.fillRect(27, 17, 2, 1);
graphics.fillRect(36, 17, 2, 1);
graphics.fillRect(31, 22, 5, 1);
graphics.fillStyle(0xffffff, 0.55);
graphics.fillRect(29, 13, 5, 1);
graphics.fillRect(36, 13, 4, 1);
this.px(graphics, outline, 24, headY + 1, 18, 16);
this.px(graphics, outline, 21, headY + 6, 5, 7);
this.px(graphics, outline, 40, headY + 6, 5, 7);
this.px(graphics, colors.skin, 25, headY + 2, 16, 14);
this.px(graphics, colors.skin, 22, headY + 7, 4, 5);
this.px(graphics, colors.skin, 40, headY + 7, 4, 5);
this.px(graphics, skinShade, 34, headY + 9, 5, 5);
this.px(graphics, skinShade, 26, headY + 14, 14, 2);
if (colors.headgear === 'turban') {
this.px(graphics, colors.accent, 23, headY - 1, 20, 6);
this.px(graphics, colors.trim, 25, headY, 15, 2);
this.px(graphics, colors.accent, 31, headY - 4, 8, 4);
this.px(graphics, colors.shade, 40, headY + 1, 5, 5);
} else if (colors.headgear === 'helmet') {
this.px(graphics, outline, 23, headY - 2, 20, 8);
this.px(graphics, colors.trim, 25, headY - 3, 16, 6);
this.px(graphics, colors.accent, 29, headY - 7, 8, 5);
this.px(graphics, colors.metal ?? colors.trim, 26, headY + 3, 15, 2);
} else if (colors.headgear === 'cap') {
this.px(graphics, colors.hair, 23, headY - 1, 20, 6);
this.px(graphics, colors.accent, 25, headY - 2, 15, 3);
this.px(graphics, colors.accent, 30, headY - 5, 8, 4);
} else {
this.px(graphics, colors.hair, 23, headY - 2, 20, 6);
this.px(graphics, colors.hair, 22, headY + 2, 6, 9);
this.px(graphics, colors.hair, 39, headY + 2, 5, 9);
this.px(graphics, colors.accent, 26, headY - 4, 13, 3);
this.px(graphics, colors.accent, 29, headY - 7, 8, 4);
this.px(graphics, colors.hair, 31, headY - 9, 5, 3);
}
this.px(graphics, 0x050609, 27, headY + 8, 2, 1);
this.px(graphics, 0x050609, 36, headY + 8, 2, 1);
this.px(graphics, 0x3a1d18, 31, headY + 13, 5, 1);
this.px(graphics, 0xffffff, 29, headY + 4, 5, 1, 0.5);
this.px(graphics, 0xffffff, 36, headY + 4, 4, 1, 0.42);
if (colors.beard) {
graphics.fillStyle(0x2a1712, 1);
graphics.fillRect(27, 24, 12, 8);
graphics.fillRect(29, 32, 8, 7);
graphics.fillStyle(0x160d0a, 1);
graphics.fillRect(31, 38, 5, 6);
graphics.fillStyle(0x4b281d, 1);
graphics.fillRect(28, 25, 3, 5);
graphics.fillRect(36, 25, 2, 6);
const beardY = headY + 15;
this.px(graphics, outline, 26, beardY - 1, 15, 8);
this.px(graphics, colors.hair, 27, beardY, 13, 7);
this.px(graphics, 0x4b281d, 28, beardY + 1, 3, 5);
this.px(graphics, 0x4b281d, 36, beardY + 1, 2, 5);
if (colors.beardStyle === 'long') {
this.px(graphics, outline, 28, beardY + 6, 11, 12);
this.px(graphics, colors.hair, 29, beardY + 6, 9, 11);
this.px(graphics, 0x160d0a, 31, beardY + 14, 5, 5);
this.px(graphics, 0x6a3a2a, 31, beardY + 7, 3, 9);
} else if (colors.beardStyle === 'wild') {
this.px(graphics, outline, 23, beardY + 2, 20, 10);
this.px(graphics, colors.hair, 24, beardY + 2, 18, 9);
this.px(graphics, outline, 27, beardY + 10, 13, 8);
this.px(graphics, colors.hair, 28, beardY + 10, 11, 7);
this.px(graphics, 0x4b281d, 26, beardY + 5, 4, 4);
this.px(graphics, 0x4b281d, 37, beardY + 5, 4, 4);
}
}
}
}