115 lines
4.3 KiB
TypeScript
115 lines
4.3 KiB
TypeScript
import Phaser from 'phaser';
|
|
import firstBattleMapUrl from '../../assets/images/battle/first-battle-map.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 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 titleBackgroundUrl from '../../assets/images/taoyuan-oath-title.png';
|
|
import guanYuUnitSheetUrl from '../../assets/images/units/unit-guan-yu.png';
|
|
import liuBeiUnitSheetUrl from '../../assets/images/units/unit-liu-bei.png';
|
|
import rebelArcherUnitSheetUrl from '../../assets/images/units/unit-rebel-archer.png';
|
|
import rebelCavalryUnitSheetUrl from '../../assets/images/units/unit-rebel-cavalry.png';
|
|
import rebelLeaderUnitSheetUrl from '../../assets/images/units/unit-rebel-leader.png';
|
|
import rebelUnitSheetUrl from '../../assets/images/units/unit-rebel.png';
|
|
import zhangFeiUnitSheetUrl from '../../assets/images/units/unit-zhang-fei.png';
|
|
|
|
type UnitDirection = 'south' | 'east' | 'north' | 'west';
|
|
|
|
const unitWalkFrameCount = 4;
|
|
const unitSheetFrameSize = 313;
|
|
const unitWalkFrameRate = 8;
|
|
const unitIdleFrameRate = 4;
|
|
const unitSheetRows: Record<UnitDirection, number> = {
|
|
south: 0,
|
|
east: 1,
|
|
north: 2,
|
|
west: 3
|
|
};
|
|
|
|
const unitSheets = [
|
|
{ key: 'unit-liu-bei', url: liuBeiUnitSheetUrl },
|
|
{ key: 'unit-guan-yu', url: guanYuUnitSheetUrl },
|
|
{ key: 'unit-zhang-fei', url: zhangFeiUnitSheetUrl },
|
|
{ key: 'unit-rebel', url: rebelUnitSheetUrl },
|
|
{ key: 'unit-rebel-archer', url: rebelArcherUnitSheetUrl },
|
|
{ key: 'unit-rebel-cavalry', url: rebelCavalryUnitSheetUrl },
|
|
{ key: 'unit-rebel-leader', url: rebelLeaderUnitSheetUrl }
|
|
];
|
|
|
|
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);
|
|
|
|
unitSheets.forEach(({ key, url }) => {
|
|
this.load.spritesheet(key, url, {
|
|
frameWidth: unitSheetFrameSize,
|
|
frameHeight: unitSheetFrameSize
|
|
});
|
|
});
|
|
}
|
|
|
|
create() {
|
|
this.createPetalTexture();
|
|
this.createUnitAnimations();
|
|
this.scene.start('TitleScene');
|
|
}
|
|
|
|
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 createUnitAnimations() {
|
|
unitSheets.forEach(({ key }) => {
|
|
(['south', 'east', 'north', 'west'] as UnitDirection[]).forEach((direction) => {
|
|
const frames = Array.from({ length: unitWalkFrameCount }, (_, frameIndex) => ({
|
|
key,
|
|
frame: unitSheetRows[direction] * unitWalkFrameCount + frameIndex
|
|
}));
|
|
const walkAnimationKey = `${key}-walk-${direction}`;
|
|
const idleAnimationKey = `${key}-idle-${direction}`;
|
|
|
|
if (!this.anims.exists(walkAnimationKey)) {
|
|
this.anims.create({
|
|
key: walkAnimationKey,
|
|
frames,
|
|
frameRate: unitWalkFrameRate,
|
|
repeat: -1
|
|
});
|
|
}
|
|
|
|
if (!this.anims.exists(idleAnimationKey)) {
|
|
this.anims.create({
|
|
key: idleAnimationKey,
|
|
frames,
|
|
frameRate: unitIdleFrameRate,
|
|
repeat: -1
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|