65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import Phaser from 'phaser';
|
|
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';
|
|
|
|
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('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.createUnitTexture('unit-ally', palette.blue, 0xe7edf7);
|
|
this.createUnitTexture('unit-enemy', palette.red, 0xffebe7);
|
|
}
|
|
|
|
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 createUnitTexture(key: string, primary: number, accent: number) {
|
|
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.destroy();
|
|
}
|
|
}
|