280 lines
8.6 KiB
TypeScript
280 lines
8.6 KiB
TypeScript
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';
|
|
import storyThreeHeroesUrl from '../../assets/images/story/03-three-heroes-meet.png';
|
|
import storyMilitiaUrl from '../../assets/images/story/04-volunteer-militia.png';
|
|
import storySortieUrl from '../../assets/images/story/05-first-sortie.png';
|
|
import guanYuPortraitUrl from '../../assets/images/portraits/guan-yu.png';
|
|
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');
|
|
}
|
|
|
|
preload() {
|
|
this.load.image('title-taoyuan', titleBackgroundUrl);
|
|
this.load.image('story-chaos', storyChaosUrl);
|
|
this.load.image('story-liu-bei', storyLiuBeiUrl);
|
|
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);
|
|
}
|
|
|
|
create() {
|
|
this.createGeneratedTextures();
|
|
this.scene.start('TitleScene');
|
|
}
|
|
|
|
private createGeneratedTextures() {
|
|
this.createPetalTexture();
|
|
this.createPixelUnitTextures();
|
|
}
|
|
|
|
private createPetalTexture() {
|
|
const graphics = this.make.graphics({ x: 0, y: 0 });
|
|
graphics.fillStyle(0xf0a6a4, 1);
|
|
graphics.fillEllipse(12, 10, 20, 9);
|
|
graphics.fillStyle(0xf7c7bd, 0.75);
|
|
graphics.fillEllipse(15, 8, 10, 4);
|
|
graphics.generateTexture('petal', 24, 18);
|
|
graphics.destroy();
|
|
}
|
|
|
|
private createPixelUnitTextures() {
|
|
this.createPixelUnitTexture('unit-liu-bei', {
|
|
robe: palette.blue,
|
|
trim: 0xe7edf7,
|
|
shade: 0x1d3552,
|
|
skin: 0xf0c79a,
|
|
hair: 0x1e1b17,
|
|
weapon: 0xd8d0ba,
|
|
accent: 0xd8b15f
|
|
});
|
|
this.createPixelUnitTexture('unit-guan-yu', {
|
|
robe: 0x2f7d45,
|
|
trim: 0xd7e6c5,
|
|
shade: 0x1f5131,
|
|
skin: 0xd59b6e,
|
|
hair: 0x241611,
|
|
weapon: 0xc7d2d8,
|
|
accent: 0xb64232,
|
|
beard: true,
|
|
halberd: true
|
|
});
|
|
this.createPixelUnitTexture('unit-zhang-fei', {
|
|
robe: 0x5b2b33,
|
|
trim: 0xefc67c,
|
|
shade: 0x351820,
|
|
skin: 0xb97955,
|
|
hair: 0x16110f,
|
|
weapon: 0xcfd8d8,
|
|
accent: 0x15191f,
|
|
spear: true
|
|
});
|
|
this.createPixelUnitTexture('unit-rebel', {
|
|
robe: 0xc8a032,
|
|
trim: 0x6e4f24,
|
|
shade: 0x7b6221,
|
|
skin: 0xbc8053,
|
|
hair: 0x242015,
|
|
weapon: 0xbfc5bd,
|
|
accent: 0xf1d157,
|
|
spear: true
|
|
});
|
|
this.createPixelUnitTexture('unit-rebel-cavalry', {
|
|
robe: 0xd0aa3f,
|
|
trim: 0x7a4b2a,
|
|
shade: 0x7a6428,
|
|
skin: 0xbc8053,
|
|
hair: 0x262017,
|
|
weapon: 0xbfc5bd,
|
|
accent: 0x56351f,
|
|
mounted: true
|
|
});
|
|
this.createPixelUnitTexture('unit-rebel-leader', {
|
|
robe: 0x9e7130,
|
|
trim: 0xf4d66f,
|
|
shade: 0x60421f,
|
|
skin: 0xc98b5d,
|
|
hair: 0x1e1710,
|
|
weapon: 0xd4d7c6,
|
|
accent: 0xe4c43d,
|
|
halberd: true,
|
|
cape: true
|
|
});
|
|
}
|
|
|
|
private createPixelUnitTexture(key: string, colors: UnitPixelPalette) {
|
|
const graphics = this.make.graphics({ x: 0, y: 0 });
|
|
this.drawPixelShadow(graphics);
|
|
|
|
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.drawWeapon(graphics, colors);
|
|
this.drawBody(graphics, colors);
|
|
this.drawHead(graphics, colors);
|
|
|
|
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 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);
|
|
}
|
|
|
|
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);
|
|
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);
|
|
return;
|
|
}
|
|
|
|
graphics.fillRect(50, 20, 3, 31);
|
|
graphics.fillRect(47, 19, 9, 3);
|
|
graphics.fillRect(51, 16, 3, 5);
|
|
}
|
|
|
|
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);
|
|
|
|
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);
|
|
}
|
|
|
|
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);
|
|
|
|
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);
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|