Add dialogue character portraits
This commit is contained in:
@@ -5,6 +5,9 @@ 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 {
|
||||
@@ -19,6 +22,9 @@ export class BootScene extends Phaser.Scene {
|
||||
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() {
|
||||
@@ -27,29 +33,11 @@ export class BootScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private createGeneratedTextures() {
|
||||
this.createPortrait('portrait-liu-bei', 0x445f92, 0xd8b15f);
|
||||
this.createPortrait('portrait-guan-yu', 0x1f5f43, 0xd8b15f);
|
||||
this.createPortrait('portrait-zhang-fei', 0x8a4f3d, 0xe8dfca);
|
||||
this.createPetalTexture();
|
||||
this.createUnitTexture('unit-ally', palette.blue, 0xe7edf7);
|
||||
this.createUnitTexture('unit-enemy', palette.red, 0xffebe7);
|
||||
}
|
||||
|
||||
private createPortrait(key: string, primary: number, accent: number) {
|
||||
const graphics = this.make.graphics({ x: 0, y: 0 });
|
||||
graphics.fillStyle(0x141820, 1);
|
||||
graphics.fillRoundedRect(0, 0, 128, 128, 8);
|
||||
graphics.fillStyle(primary, 1);
|
||||
graphics.fillCircle(64, 46, 26);
|
||||
graphics.fillRoundedRect(31, 71, 66, 42, 12);
|
||||
graphics.fillStyle(accent, 1);
|
||||
graphics.fillTriangle(38, 29, 64, 8, 90, 29);
|
||||
graphics.lineStyle(4, 0x0b0d12, 0.45);
|
||||
graphics.strokeRoundedRect(2, 2, 124, 124, 8);
|
||||
graphics.generateTexture(key, 128, 128);
|
||||
graphics.destroy();
|
||||
}
|
||||
|
||||
private createPetalTexture() {
|
||||
const graphics = this.make.graphics({ x: 0, y: 0 });
|
||||
graphics.fillStyle(0xf0a6a4, 1);
|
||||
|
||||
Reference in New Issue
Block a user