Add tactical battle UI icons
This commit is contained in:
283
scripts/build-battle-ui-icons.py
Normal file
283
scripts/build-battle-ui-icons.py
Normal file
@@ -0,0 +1,283 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import math
|
||||
from pathlib import Path
|
||||
from typing import Callable
|
||||
|
||||
from PIL import Image, ImageDraw, ImageFilter
|
||||
|
||||
|
||||
ROOT = Path(__file__).resolve().parents[1]
|
||||
OUT = ROOT / "src" / "assets" / "images" / "ui" / "battle-ui-icons.png"
|
||||
FRAME = 48
|
||||
SCALE = 4
|
||||
|
||||
|
||||
def main() -> None:
|
||||
OUT.parent.mkdir(parents=True, exist_ok=True)
|
||||
icons: list[tuple[str, Callable[[ImageDraw.ImageDraw], None]]] = [
|
||||
("hp", draw_hp),
|
||||
("might", draw_might),
|
||||
("intelligence", draw_intelligence),
|
||||
("leadership", draw_leadership),
|
||||
("attack", draw_attack),
|
||||
("defense", draw_defense),
|
||||
("move", draw_move),
|
||||
("mastery", draw_mastery),
|
||||
("sword", draw_sword),
|
||||
("spear", draw_spear),
|
||||
("axe", draw_axe),
|
||||
("bow", draw_bow),
|
||||
("strategy", draw_strategy),
|
||||
("horse", draw_horse),
|
||||
("armor", draw_armor),
|
||||
("accessory", draw_accessory),
|
||||
("hit", draw_hit),
|
||||
("critical", draw_critical),
|
||||
("terrain", draw_terrain),
|
||||
("counter", draw_counter),
|
||||
("advantage", draw_advantage),
|
||||
("success", draw_success),
|
||||
]
|
||||
cols = 5
|
||||
rows = math.ceil(len(icons) / cols)
|
||||
atlas = Image.new("RGBA", (cols * FRAME, rows * FRAME), (0, 0, 0, 0))
|
||||
for index, (_name, draw_icon) in enumerate(icons):
|
||||
tile = make_icon(draw_icon)
|
||||
atlas.alpha_composite(tile, ((index % cols) * FRAME, (index // cols) * FRAME))
|
||||
atlas.save(OUT, optimize=True)
|
||||
print(f"Wrote {OUT}")
|
||||
|
||||
|
||||
def make_icon(draw_icon: Callable[[ImageDraw.ImageDraw], None]) -> Image.Image:
|
||||
image = Image.new("RGBA", (FRAME * SCALE, FRAME * SCALE), (0, 0, 0, 0))
|
||||
draw = ImageDraw.Draw(image, "RGBA")
|
||||
draw_icon(draw)
|
||||
image = image.filter(ImageFilter.UnsharpMask(radius=1.2, percent=90, threshold=3))
|
||||
return image.resize((FRAME, FRAME), Image.Resampling.LANCZOS)
|
||||
|
||||
|
||||
def c(value: tuple[int, int, int, int] | tuple[int, int, int]) -> tuple[int, int, int, int]:
|
||||
if len(value) == 3:
|
||||
return (value[0], value[1], value[2], 255)
|
||||
return value
|
||||
|
||||
|
||||
def line(draw: ImageDraw.ImageDraw, points: list[tuple[int, int]], fill: tuple[int, int, int, int], width: int) -> None:
|
||||
scaled = [(x * SCALE, y * SCALE) for x, y in points]
|
||||
draw.line(scaled, fill=fill, width=width * SCALE, joint="curve")
|
||||
|
||||
|
||||
def poly(draw: ImageDraw.ImageDraw, points: list[tuple[int, int]], fill, outline=None) -> None:
|
||||
scaled = [(x * SCALE, y * SCALE) for x, y in points]
|
||||
draw.polygon(scaled, fill=c(fill), outline=c(outline) if outline else None)
|
||||
|
||||
|
||||
def ellipse(draw: ImageDraw.ImageDraw, box: tuple[int, int, int, int], fill, outline=None, width=1) -> None:
|
||||
scaled = tuple(v * SCALE for v in box)
|
||||
draw.ellipse(scaled, fill=c(fill), outline=c(outline) if outline else None, width=width * SCALE)
|
||||
|
||||
|
||||
def rect(draw: ImageDraw.ImageDraw, box: tuple[int, int, int, int], fill, outline=None, width=1) -> None:
|
||||
scaled = tuple(v * SCALE for v in box)
|
||||
draw.rounded_rectangle(scaled, radius=4 * SCALE, fill=c(fill), outline=c(outline) if outline else None, width=width * SCALE)
|
||||
|
||||
|
||||
def icon_shadow(draw: ImageDraw.ImageDraw) -> None:
|
||||
ellipse(draw, (7, 35, 41, 42), (0, 0, 0, 80))
|
||||
|
||||
|
||||
def draw_hp(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(24, 39), (10, 25), (10, 15), (16, 10), (24, 15), (32, 10), (38, 15), (38, 25)], (210, 64, 65), (72, 21, 28))
|
||||
poly(draw, [(24, 35), (13, 24), (13, 16), (17, 13), (24, 18), (31, 13), (35, 16), (35, 24)], (255, 130, 111))
|
||||
line(draw, [(18, 21), (30, 21)], (255, 235, 188, 240), 2)
|
||||
line(draw, [(24, 15), (24, 28)], (255, 235, 188, 240), 2)
|
||||
|
||||
|
||||
def draw_might(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
line(draw, [(13, 35), (31, 17)], (112, 78, 48), 4)
|
||||
poly(draw, [(33, 10), (39, 15), (27, 25), (23, 21)], (228, 230, 219), (72, 78, 80))
|
||||
line(draw, [(35, 36), (17, 18)], (112, 78, 48), 4)
|
||||
poly(draw, [(15, 11), (10, 18), (22, 23), (25, 18)], (217, 221, 211), (65, 70, 73))
|
||||
ellipse(draw, (19, 19, 29, 29), (190, 60, 52), (74, 31, 29))
|
||||
line(draw, [(18, 30), (24, 36), (30, 30)], (239, 188, 83), 2)
|
||||
|
||||
|
||||
def draw_intelligence(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(13, 13), (25, 9), (38, 13), (38, 34), (25, 38), (13, 34)], (74, 103, 116), (30, 41, 50))
|
||||
poly(draw, [(16, 16), (25, 13), (35, 16), (35, 31), (25, 34), (16, 31)], (212, 204, 158))
|
||||
line(draw, [(20, 18), (31, 16)], (89, 75, 52, 210), 1)
|
||||
line(draw, [(20, 23), (31, 21)], (89, 75, 52, 210), 1)
|
||||
line(draw, [(20, 28), (31, 26)], (89, 75, 52, 210), 1)
|
||||
ellipse(draw, (9, 26, 17, 36), (145, 95, 64), (67, 37, 31))
|
||||
line(draw, [(14, 30), (10, 37)], (231, 206, 150, 230), 2)
|
||||
|
||||
|
||||
def draw_leadership(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
line(draw, [(15, 39), (15, 9)], (118, 92, 58), 3)
|
||||
poly(draw, [(17, 11), (38, 15), (31, 23), (38, 31), (17, 27)], (185, 55, 50), (77, 27, 30))
|
||||
poly(draw, [(17, 13), (34, 16), (29, 22), (34, 28), (17, 25)], (229, 157, 73))
|
||||
ellipse(draw, (11, 35, 20, 43), (208, 176, 88), (73, 55, 31))
|
||||
|
||||
|
||||
def draw_attack(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
line(draw, [(13, 34), (33, 14)], (108, 80, 49), 4)
|
||||
poly(draw, [(35, 9), (39, 13), (25, 28), (21, 24)], (225, 226, 217), (70, 76, 78))
|
||||
poly(draw, [(25, 25), (33, 32), (30, 36), (21, 28)], (216, 151, 73), (79, 46, 28))
|
||||
line(draw, [(14, 34), (21, 41)], (244, 199, 104), 3)
|
||||
|
||||
|
||||
def draw_defense(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(24, 7), (38, 13), (35, 31), (24, 41), (13, 31), (10, 13)], (77, 109, 132), (29, 38, 50))
|
||||
poly(draw, [(24, 11), (34, 15), (32, 29), (24, 36), (16, 29), (14, 15)], (113, 154, 183))
|
||||
line(draw, [(24, 12), (24, 36)], (225, 206, 138, 230), 2)
|
||||
line(draw, [(15, 22), (33, 22)], (225, 206, 138, 220), 2)
|
||||
|
||||
|
||||
def draw_move(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(15, 29), (24, 31), (36, 35), (35, 40), (22, 40), (12, 35)], (72, 98, 96), (25, 38, 38))
|
||||
poly(draw, [(19, 10), (28, 10), (27, 28), (18, 29)], (148, 108, 72), (65, 43, 30))
|
||||
poly(draw, [(20, 27), (31, 30), (36, 34), (23, 34), (15, 31)], (213, 167, 94))
|
||||
line(draw, [(32, 14), (39, 10)], (220, 204, 144, 170), 2)
|
||||
line(draw, [(34, 22), (42, 21)], (220, 204, 144, 150), 2)
|
||||
|
||||
|
||||
def draw_mastery(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
points = []
|
||||
for i in range(10):
|
||||
radius = 15 if i % 2 == 0 else 6
|
||||
angle = -math.pi / 2 + i * math.pi / 5
|
||||
points.append((24 + math.cos(angle) * radius, 22 + math.sin(angle) * radius))
|
||||
poly(draw, [(round(x), round(y)) for x, y in points], (237, 185, 72), (88, 58, 24))
|
||||
rect(draw, (12, 33, 36, 39), (61, 73, 69), (30, 38, 37))
|
||||
rect(draw, (14, 35, 27, 37), (129, 206, 120), None)
|
||||
|
||||
|
||||
def draw_sword(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(32, 6), (38, 11), (21, 31), (17, 27)], (226, 229, 220), (73, 78, 80))
|
||||
poly(draw, [(17, 28), (23, 34), (20, 38), (13, 31)], (201, 135, 67), (72, 44, 31))
|
||||
line(draw, [(12, 37), (17, 32)], (235, 205, 112), 3)
|
||||
line(draw, [(18, 25), (25, 32)], (75, 43, 33), 2)
|
||||
|
||||
|
||||
def draw_spear(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
line(draw, [(14, 39), (31, 12)], (117, 82, 45), 3)
|
||||
poly(draw, [(33, 6), (39, 18), (29, 17)], (226, 229, 220), (71, 77, 78))
|
||||
poly(draw, [(29, 18), (35, 20), (30, 24)], (187, 61, 51), (75, 31, 30))
|
||||
|
||||
|
||||
def draw_axe(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
line(draw, [(17, 39), (30, 10)], (112, 78, 48), 4)
|
||||
poly(draw, [(27, 8), (42, 13), (39, 25), (28, 21), (24, 15)], (217, 221, 211), (65, 70, 73))
|
||||
poly(draw, [(24, 15), (17, 19), (24, 23), (29, 20)], (183, 130, 64), (75, 45, 29))
|
||||
|
||||
|
||||
def draw_bow(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
line(draw, [(29, 8), (34, 14), (35, 25), (30, 37)], (184, 121, 62), 4)
|
||||
line(draw, [(29, 8), (18, 22), (30, 37)], (217, 199, 139, 220), 1)
|
||||
line(draw, [(15, 24), (35, 24)], (220, 225, 214), 2)
|
||||
poly(draw, [(36, 24), (30, 20), (30, 28)], (219, 83, 66), (75, 29, 26))
|
||||
|
||||
|
||||
def draw_strategy(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(11, 30), (18, 13), (30, 10), (38, 22), (34, 36), (22, 39)], (223, 221, 202), (78, 77, 65))
|
||||
line(draw, [(18, 16), (34, 23)], (107, 121, 129, 180), 1)
|
||||
line(draw, [(16, 22), (33, 28)], (107, 121, 129, 180), 1)
|
||||
line(draw, [(14, 29), (30, 34)], (107, 121, 129, 180), 1)
|
||||
line(draw, [(25, 17), (17, 40)], (124, 84, 49), 2)
|
||||
|
||||
|
||||
def draw_horse(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(11, 25), (18, 15), (31, 15), (39, 23), (35, 31), (22, 31)], (150, 114, 80), (60, 43, 33))
|
||||
poly(draw, [(30, 15), (40, 9), (42, 17), (36, 21)], (150, 114, 80), (60, 43, 33))
|
||||
ellipse(draw, (38, 12, 41, 15), (20, 18, 14))
|
||||
line(draw, [(17, 30), (14, 40)], (90, 62, 42), 3)
|
||||
line(draw, [(29, 30), (33, 40)], (90, 62, 42), 3)
|
||||
line(draw, [(13, 20), (8, 16)], (92, 57, 35), 3)
|
||||
|
||||
|
||||
def draw_armor(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(17, 9), (31, 9), (38, 18), (34, 39), (14, 39), (10, 18)], (79, 98, 116), (28, 38, 48))
|
||||
poly(draw, [(20, 12), (28, 12), (34, 20), (31, 35), (17, 35), (14, 20)], (121, 143, 158))
|
||||
line(draw, [(24, 13), (24, 36)], (216, 178, 94, 190), 2)
|
||||
line(draw, [(16, 23), (32, 23)], (43, 55, 66, 200), 1)
|
||||
line(draw, [(15, 29), (33, 29)], (43, 55, 66, 200), 1)
|
||||
|
||||
|
||||
def draw_accessory(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
ellipse(draw, (13, 12, 35, 34), (42, 82, 90), (218, 187, 96), 2)
|
||||
ellipse(draw, (19, 18, 29, 28), (84, 174, 166), (236, 223, 155), 1)
|
||||
line(draw, [(24, 34), (24, 40)], (218, 187, 96), 2)
|
||||
ellipse(draw, (21, 38, 27, 44), (204, 65, 59), (80, 29, 29))
|
||||
|
||||
|
||||
def draw_hit(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
ellipse(draw, (9, 9, 39, 39), (32, 50, 58), (94, 149, 164), 2)
|
||||
ellipse(draw, (16, 16, 32, 32), (83, 134, 140), (211, 218, 172), 2)
|
||||
ellipse(draw, (21, 21, 27, 27), (241, 208, 96), (73, 56, 28), 1)
|
||||
line(draw, [(31, 17), (40, 8)], (225, 229, 219), 2)
|
||||
|
||||
|
||||
def draw_critical(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
points = []
|
||||
for i in range(14):
|
||||
radius = 18 if i % 2 == 0 else 7
|
||||
angle = -math.pi / 2 + i * math.pi / 7
|
||||
points.append((24 + math.cos(angle) * radius, 24 + math.sin(angle) * radius))
|
||||
poly(draw, [(round(x), round(y)) for x, y in points], (230, 78, 61), (83, 32, 27))
|
||||
line(draw, [(17, 16), (31, 32)], (255, 229, 139), 3)
|
||||
line(draw, [(31, 16), (17, 32)], (255, 229, 139), 3)
|
||||
|
||||
|
||||
def draw_terrain(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
poly(draw, [(7, 35), (17, 20), (24, 32), (32, 14), (42, 35)], (81, 117, 69), (33, 54, 34))
|
||||
poly(draw, [(7, 35), (18, 28), (30, 33), (42, 35), (42, 40), (7, 40)], (122, 102, 63), (56, 45, 31))
|
||||
line(draw, [(17, 23), (19, 27)], (215, 206, 158), 1)
|
||||
line(draw, [(32, 17), (34, 22)], (215, 206, 158), 1)
|
||||
|
||||
|
||||
def draw_counter(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
line(draw, [(13, 30), (30, 13)], (220, 224, 214), 3)
|
||||
line(draw, [(35, 18), (18, 35)], (220, 224, 214), 3)
|
||||
poly(draw, [(31, 9), (39, 12), (33, 18)], (216, 151, 73), (75, 41, 28))
|
||||
poly(draw, [(17, 39), (9, 36), (15, 30)], (216, 151, 73), (75, 41, 28))
|
||||
|
||||
|
||||
def draw_advantage(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
ellipse(draw, (9, 9, 39, 39), (32, 50, 58), (94, 149, 164), 2)
|
||||
poly(draw, [(15, 17), (28, 17), (28, 12), (38, 22), (28, 32), (28, 27), (15, 27)], (229, 157, 73), (76, 48, 30))
|
||||
poly(draw, [(33, 31), (20, 31), (20, 36), (10, 26), (20, 16), (20, 21), (33, 21)], (113, 154, 183), (29, 38, 50))
|
||||
ellipse(draw, (20, 20, 28, 28), (237, 185, 72), (79, 52, 24))
|
||||
|
||||
|
||||
def draw_success(draw: ImageDraw.ImageDraw) -> None:
|
||||
icon_shadow(draw)
|
||||
rect(draw, (11, 11, 37, 35), (76, 103, 91), (29, 43, 39), 2)
|
||||
poly(draw, [(14, 14), (34, 14), (31, 23), (34, 32), (14, 32), (17, 23)], (184, 145, 83), (77, 55, 31))
|
||||
line(draw, [(17, 24), (22, 29), (32, 17)], (225, 245, 202), 3)
|
||||
ellipse(draw, (18, 36, 30, 43), (180, 63, 58), (73, 27, 27))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
BIN
src/assets/images/ui/battle-ui-icons.png
Normal file
BIN
src/assets/images/ui/battle-ui-icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
57
src/game/data/battleUiIcons.ts
Normal file
57
src/game/data/battleUiIcons.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import Phaser from 'phaser';
|
||||
|
||||
import battleUiIconsUrl from '../../assets/images/ui/battle-ui-icons.png';
|
||||
|
||||
export const battleUiIconTextureKey = 'battle-ui-icons';
|
||||
export const battleUiIconFrameSize = 48;
|
||||
|
||||
export const battleUiIconFrames = {
|
||||
hp: 0,
|
||||
might: 1,
|
||||
intelligence: 2,
|
||||
leadership: 3,
|
||||
attack: 4,
|
||||
defense: 5,
|
||||
move: 6,
|
||||
mastery: 7,
|
||||
sword: 8,
|
||||
spear: 9,
|
||||
axe: 10,
|
||||
bow: 11,
|
||||
strategy: 12,
|
||||
horse: 13,
|
||||
armor: 14,
|
||||
accessory: 15,
|
||||
hit: 16,
|
||||
critical: 17,
|
||||
terrain: 18,
|
||||
counter: 19,
|
||||
advantage: 20,
|
||||
success: 21
|
||||
} as const;
|
||||
|
||||
export type BattleUiIconKey = keyof typeof battleUiIconFrames;
|
||||
|
||||
export const battleUiIconManifest = {
|
||||
source: 'src/assets/images/ui/battle-ui-icons.png',
|
||||
textureKey: battleUiIconTextureKey,
|
||||
frameWidth: battleUiIconFrameSize,
|
||||
frameHeight: battleUiIconFrameSize,
|
||||
columns: 5,
|
||||
rows: 5,
|
||||
frames: battleUiIconFrames
|
||||
} as const;
|
||||
|
||||
export function loadBattleUiIcons(scene: Phaser.Scene, onReady: () => void) {
|
||||
if (scene.textures.exists(battleUiIconTextureKey)) {
|
||||
onReady();
|
||||
return;
|
||||
}
|
||||
|
||||
scene.load.once('complete', onReady);
|
||||
scene.load.spritesheet(battleUiIconTextureKey, battleUiIconsUrl, {
|
||||
frameWidth: battleUiIconFrameSize,
|
||||
frameHeight: battleUiIconFrameSize
|
||||
});
|
||||
scene.load.start();
|
||||
}
|
||||
@@ -11,12 +11,19 @@ import {
|
||||
unitTextureVariantKeys as unitAssetTextureVariantKeys,
|
||||
type UnitDirection
|
||||
} from '../data/unitAssets';
|
||||
import {
|
||||
battleUiIconFrames,
|
||||
battleUiIconTextureKey,
|
||||
loadBattleUiIcons,
|
||||
type BattleUiIconKey
|
||||
} from '../data/battleUiIcons';
|
||||
import {
|
||||
equipmentExpToNext,
|
||||
equipmentSlotLabels,
|
||||
equipmentSlots,
|
||||
getItem,
|
||||
type EquipmentSlot
|
||||
type EquipmentSlot,
|
||||
type ItemDefinition
|
||||
} from '../data/battleItems';
|
||||
import {
|
||||
campaignSaveSlotCount,
|
||||
@@ -1194,6 +1201,7 @@ type EquipmentGrowthResult = {
|
||||
type LevelUpStatGain = {
|
||||
label: string;
|
||||
amount: number;
|
||||
icon: BattleUiIconKey;
|
||||
};
|
||||
|
||||
type CharacterGrowthResult = {
|
||||
@@ -1285,6 +1293,7 @@ type CombatPreview = {
|
||||
criticalRate: number;
|
||||
counterAvailable: boolean;
|
||||
terrainLabel: string;
|
||||
matchupLabel: string;
|
||||
};
|
||||
|
||||
type CombatResult = CombatPreview & {
|
||||
@@ -2992,7 +3001,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private ensureScenarioAssets(onReady: () => void) {
|
||||
this.ensureScenarioMapTexture(() => this.ensureScenarioUnitTextures(onReady));
|
||||
this.ensureScenarioMapTexture(() => loadBattleUiIcons(this, () => this.ensureScenarioUnitTextures(onReady)));
|
||||
}
|
||||
|
||||
private ensureScenarioMapTexture(onReady: () => void) {
|
||||
@@ -4453,15 +4462,8 @@ export class BattleScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private renderAttackPreview(preview: CombatPreview) {
|
||||
const counter = preview.counterAvailable ? ' / 반격 가능' : '';
|
||||
const bond = preview.bondDamageBonus > 0 && preview.bondLabel ? `\n공명 ${preview.bondLabel} 피해 +${preview.bondDamageBonus}%` : '';
|
||||
const equipment = preview.equipmentEffectLabels.length > 0
|
||||
? `\n보물 ${preview.equipmentEffectLabels.join(', ')} (${this.equipmentPreviewBonusText(preview)})`
|
||||
: '';
|
||||
this.renderUnitDetail(
|
||||
preview.defender,
|
||||
`${preview.attacker.name} ${commandLabels[preview.action]} 예측\n피해 ${preview.damage} / 명중 ${preview.hitRate}% / 치명 ${preview.criticalRate}%\n지형 ${preview.terrainLabel}${counter}${bond}${equipment}`
|
||||
);
|
||||
this.renderUnitDetail(preview.defender);
|
||||
this.renderCombatPreviewCard(preview);
|
||||
}
|
||||
|
||||
private renderSupportPreview(user: UnitData, target: UnitData, usable: BattleUsable) {
|
||||
@@ -4487,6 +4489,101 @@ export class BattleScene extends Phaser.Scene {
|
||||
return parts.join(' / ') || '보정 없음';
|
||||
}
|
||||
|
||||
private renderCombatPreviewCard(preview: CombatPreview) {
|
||||
const { panelX, panelWidth } = this.layout;
|
||||
const left = panelX + 24;
|
||||
const width = panelWidth - 48;
|
||||
const height = 124;
|
||||
const y = Math.min(this.sideContentTop() + 430, this.sideContentBottom(10) - height);
|
||||
|
||||
const bg = this.trackSideObject(this.add.rectangle(left, y, width, height, 0x121a22, 0.96));
|
||||
bg.setOrigin(0);
|
||||
bg.setStrokeStyle(2, palette.gold, 0.72);
|
||||
|
||||
this.trackSideIcon(left + 22, y + 25, this.actionIcon(preview), 32);
|
||||
this.trackSideObject(this.add.text(left + 44, y + 11, `${preview.attacker.name} ${commandLabels[preview.action]} 예측`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '16px',
|
||||
color: '#f4dfad',
|
||||
fontStyle: '700'
|
||||
}));
|
||||
|
||||
const attackerWeapon = getItem(preview.attacker.equipment.weapon.itemId);
|
||||
const defenderArmor = getItem(preview.defender.equipment.armor.itemId);
|
||||
this.renderPreviewEquipmentChip(left + 44, y + 38, 126, this.itemIcon(attackerWeapon, 'weapon'), attackerWeapon.name);
|
||||
this.renderPreviewEquipmentChip(left + 178, y + 38, 126, this.itemIcon(defenderArmor, 'armor'), defenderArmor.name);
|
||||
|
||||
const metricTop = y + 70;
|
||||
const metricWidth = (width - 24) / 3;
|
||||
this.renderPreviewMetric(left + 8, metricTop, metricWidth, 'attack', '피해', `${preview.damage}`);
|
||||
this.renderPreviewMetric(left + 8 + metricWidth, metricTop, metricWidth, preview.action === 'strategy' ? 'success' : 'hit', preview.action === 'strategy' ? '성공' : '명중', `${preview.hitRate}%`);
|
||||
this.renderPreviewMetric(left + 8 + metricWidth * 2, metricTop, metricWidth, 'critical', '치명', `${preview.criticalRate}%`);
|
||||
|
||||
const badgeY = y + 101;
|
||||
const maxBadgeRight = left + width - 10;
|
||||
let badgeX = left + 10;
|
||||
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'advantage', preview.matchupLabel, maxBadgeRight);
|
||||
if (preview.action === 'strategy') {
|
||||
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'success', `${preview.hitRate}% 성공`, maxBadgeRight);
|
||||
}
|
||||
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'terrain', preview.terrainLabel, maxBadgeRight);
|
||||
if (preview.counterAvailable) {
|
||||
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'counter', '반격 가능', maxBadgeRight);
|
||||
}
|
||||
if (preview.bondDamageBonus > 0 && preview.bondLabel) {
|
||||
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'leadership', `공명 +${preview.bondDamageBonus}%`, maxBadgeRight);
|
||||
}
|
||||
if (preview.equipmentEffectLabels.length > 0) {
|
||||
this.renderPreviewBadge(badgeX, badgeY, 'mastery', '장비 보정', maxBadgeRight);
|
||||
}
|
||||
}
|
||||
|
||||
private renderPreviewEquipmentChip(x: number, y: number, width: number, icon: BattleUiIconKey, label: string) {
|
||||
const chip = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x0b1118, 0.86));
|
||||
chip.setOrigin(0);
|
||||
chip.setStrokeStyle(1, 0x53606c, 0.42);
|
||||
this.trackSideIcon(x + 12, y + 11, icon, 18);
|
||||
this.trackSideObject(this.add.text(x + 25, y + 4, label, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
color: '#d4dce6',
|
||||
wordWrap: { width: width - 32, useAdvancedWrap: true }
|
||||
}));
|
||||
}
|
||||
|
||||
private renderPreviewMetric(x: number, y: number, width: number, icon: BattleUiIconKey, label: string, value: string) {
|
||||
this.trackSideIcon(x + 13, y + 11, icon, 18);
|
||||
this.trackSideObject(this.add.text(x + 26, y + 2, label, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
color: '#9fb0bf'
|
||||
}));
|
||||
const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 1, value, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '15px',
|
||||
color: '#f2e3bf',
|
||||
fontStyle: '700'
|
||||
}));
|
||||
valueText.setOrigin(1, 0);
|
||||
}
|
||||
|
||||
private renderPreviewBadge(x: number, y: number, icon: BattleUiIconKey, label: string, maxRight?: number) {
|
||||
const width = Phaser.Math.Clamp(label.length * 8 + 34, 58, 120);
|
||||
if (maxRight && x + width > maxRight) {
|
||||
return x;
|
||||
}
|
||||
const badge = this.trackSideObject(this.add.rectangle(x, y, width, 20, 0x0b1118, 0.88));
|
||||
badge.setOrigin(0);
|
||||
badge.setStrokeStyle(1, 0x53606c, 0.44);
|
||||
this.trackSideIcon(x + 11, y + 10, icon, 15);
|
||||
this.trackSideObject(this.add.text(x + 22, y + 4, label, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '10px',
|
||||
color: '#d4dce6'
|
||||
}));
|
||||
return x + width + 6;
|
||||
}
|
||||
|
||||
private finishUnitAction(unit: UnitData, message: string) {
|
||||
this.actedUnitIds.add(unit.id);
|
||||
this.phase = 'idle';
|
||||
@@ -5104,7 +5201,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
exp: unit.exp,
|
||||
next: 100,
|
||||
leveled: unit.level > previousLevel,
|
||||
statGains: this.characterLevelUpStatGains(unit.level - previousLevel),
|
||||
statGains: this.characterLevelUpStatGains(unit, unit.level - previousLevel),
|
||||
flashArea: { x, y, width, height: 68, depth: depth + 3 }
|
||||
});
|
||||
}
|
||||
@@ -5397,7 +5494,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
color: '#f4dfad',
|
||||
fontStyle: '700'
|
||||
});
|
||||
const statText = this.add.text(-width / 2 + 110, 26, stats ?? '숙련 효과 강화', {
|
||||
const statText = this.add.text(-width / 2 + 110, 22, stats ? '능력 상승' : '숙련 효과 강화', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '16px',
|
||||
color: stats ? '#a8ffd0' : '#d8b15f',
|
||||
@@ -5406,6 +5503,9 @@ export class BattleScene extends Phaser.Scene {
|
||||
strokeThickness: 3
|
||||
});
|
||||
container.add([bg, burst, title, levelText, statText]);
|
||||
if (animation.statGains) {
|
||||
this.addStatGainChipsToContainer(container, animation.statGains, -width / 2 + 110, 46, width - 124);
|
||||
}
|
||||
|
||||
if (animation.unit) {
|
||||
const sprite = this.add.sprite(-width / 2 + 56, 10, this.unitActionTexture(animation.unit), this.unitActionFrameIndex('south', this.celebrationPose(animation.unit)));
|
||||
@@ -5428,6 +5528,40 @@ export class BattleScene extends Phaser.Scene {
|
||||
await this.delay(260);
|
||||
}
|
||||
|
||||
private addStatGainChipsToContainer(
|
||||
container: Phaser.GameObjects.Container,
|
||||
gains: LevelUpStatGain[],
|
||||
x: number,
|
||||
y: number,
|
||||
maxWidth: number
|
||||
) {
|
||||
const visibleGains = gains.filter((gain) => gain.amount > 0).slice(0, 5);
|
||||
let cursorX = x;
|
||||
visibleGains.forEach((gain) => {
|
||||
const chipWidth = Phaser.Math.Clamp(gain.label.length * 12 + 42, 64, 92);
|
||||
if (cursorX + chipWidth > x + maxWidth) {
|
||||
return;
|
||||
}
|
||||
const bg = this.add.rectangle(cursorX, y, chipWidth, 24, 0x0b1118, 0.9);
|
||||
bg.setOrigin(0);
|
||||
bg.setStrokeStyle(1, 0x53606c, 0.5);
|
||||
const icon = this.createBattleUiIcon(cursorX + 13, y + 12, gain.icon, 18);
|
||||
const text = this.add.text(cursorX + 26, y + 5, `+${gain.amount}`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '12px',
|
||||
color: '#a8ffd0',
|
||||
fontStyle: '700'
|
||||
});
|
||||
const label = this.add.text(cursorX + 48, y + 5, gain.label, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
color: '#d4dce6'
|
||||
});
|
||||
container.add([bg, icon, text, label]);
|
||||
cursorX += chipWidth + 6;
|
||||
});
|
||||
}
|
||||
|
||||
private createResultLevelUpBurst(x: number, y: number, depth: number) {
|
||||
const ring = this.trackResultObject(this.add.circle(x, y + 2, 33));
|
||||
ring.setStrokeStyle(3, 0xffdf7b, 0.84);
|
||||
@@ -5617,7 +5751,8 @@ export class BattleScene extends Phaser.Scene {
|
||||
hitRate,
|
||||
criticalRate,
|
||||
counterAvailable: this.canCounterAttack(defender, attacker, action),
|
||||
terrainLabel: terrainRule.label
|
||||
terrainLabel: terrainRule.label,
|
||||
matchupLabel: this.combatMatchupLabel(attacker, defender, action)
|
||||
};
|
||||
}
|
||||
|
||||
@@ -5886,6 +6021,43 @@ export class BattleScene extends Phaser.Scene {
|
||||
return this.equipmentDefenseBonus(unit) + Math.floor(unit.stats.leadership / 18) + Math.floor(terrainDefenseBonus / 3);
|
||||
}
|
||||
|
||||
private combatMatchupLabel(attacker: UnitData, defender: UnitData, action: DamageCommand) {
|
||||
if (action === 'strategy') {
|
||||
const gap = attacker.stats.intelligence - defender.stats.intelligence;
|
||||
return gap >= 10 ? '책략 우위' : gap <= -10 ? '책략 불리' : '책략 균형';
|
||||
}
|
||||
|
||||
if (action === 'item') {
|
||||
const gap = attacker.stats.luck - defender.stats.luck;
|
||||
return gap >= 12 ? '도구 우위' : gap <= -12 ? '도구 불리' : '도구 균형';
|
||||
}
|
||||
|
||||
if (this.hasClassAdvantage(attacker, defender)) {
|
||||
return '상성 우위';
|
||||
}
|
||||
if (this.hasClassAdvantage(defender, attacker)) {
|
||||
return '상성 불리';
|
||||
}
|
||||
return '상성 보통';
|
||||
}
|
||||
|
||||
private hasClassAdvantage(attacker: UnitData, defender: UnitData) {
|
||||
const distance = this.tileDistance(attacker, defender);
|
||||
if (attacker.classKey === 'spearman' && defender.classKey === 'cavalry') {
|
||||
return true;
|
||||
}
|
||||
if (attacker.classKey === 'cavalry' && (defender.classKey === 'archer' || defender.classKey === 'strategist' || defender.classKey === 'quartermaster')) {
|
||||
return true;
|
||||
}
|
||||
if (attacker.classKey === 'archer' && distance > 1 && (defender.classKey === 'infantry' || defender.classKey === 'spearman' || defender.classKey === 'yellowTurban')) {
|
||||
return true;
|
||||
}
|
||||
if ((attacker.classKey === 'strategist' || attacker.classKey === 'quartermaster') && defender.stats.intelligence + 12 <= attacker.stats.intelligence) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private attackerEquipmentExpGain(unit: UnitData, action: DamageCommand) {
|
||||
if (action === 'attack') {
|
||||
return this.weaponExpGain(unit);
|
||||
@@ -7163,6 +7335,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
}));
|
||||
title.setOrigin(0.5, 0);
|
||||
title.setDepth(depth + 8);
|
||||
this.renderCombatActionRibbon(result, left + panelWidth / 2 - 220, top + 54, 440, depth + 9);
|
||||
|
||||
const attackerDirection = 'east';
|
||||
const defenderDirection = 'west';
|
||||
@@ -7249,6 +7422,68 @@ export class BattleScene extends Phaser.Scene {
|
||||
this.hideCombatCutIn();
|
||||
}
|
||||
|
||||
private renderCombatActionRibbon(result: CombatResult, x: number, y: number, width: number, depth: number) {
|
||||
const bg = this.trackCombatObject(this.add.rectangle(x, y, width, 58, 0x0b1118, 0.88));
|
||||
bg.setOrigin(0);
|
||||
bg.setDepth(depth);
|
||||
bg.setStrokeStyle(1, palette.gold, 0.58);
|
||||
|
||||
this.trackCombatIcon(x + 22, y + 19, this.actionIcon(result), 28, depth + 1);
|
||||
const attackerWeapon = getItem(result.attacker.equipment.weapon.itemId);
|
||||
const defenderArmor = getItem(result.defender.equipment.armor.itemId);
|
||||
this.trackCombatIcon(x + 132, y + 19, this.itemIcon(attackerWeapon, 'weapon'), 22, depth + 1);
|
||||
this.trackCombatIcon(x + 248, y + 19, this.itemIcon(defenderArmor, 'armor'), 22, depth + 1);
|
||||
|
||||
const actionLabel = this.trackCombatObject(this.add.text(x + 42, y + 8, result.usable?.name ?? commandLabels[result.action], {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '15px',
|
||||
color: '#f4dfad',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 74
|
||||
}));
|
||||
actionLabel.setDepth(depth + 1);
|
||||
|
||||
const weaponLabel = this.trackCombatObject(this.add.text(x + 148, y + 9, attackerWeapon.name, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '12px',
|
||||
color: '#d4dce6',
|
||||
fixedWidth: 82
|
||||
}));
|
||||
weaponLabel.setDepth(depth + 1);
|
||||
|
||||
const armorLabel = this.trackCombatObject(this.add.text(x + 264, y + 9, defenderArmor.name, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '12px',
|
||||
color: '#d4dce6',
|
||||
fixedWidth: 74
|
||||
}));
|
||||
armorLabel.setDepth(depth + 1);
|
||||
|
||||
const outcomeIcon = result.action === 'strategy' ? 'success' : result.critical ? 'critical' : 'hit';
|
||||
const outcomeLabel = result.action === 'strategy' ? (result.hit ? '성공' : '실패') : result.hit ? (result.critical ? '치명' : '명중') : '회피';
|
||||
this.renderCombatRibbonBadge(x + 42, y + 33, 'advantage', result.matchupLabel, depth + 1, 74);
|
||||
this.renderCombatRibbonBadge(x + 122, y + 33, outcomeIcon, outcomeLabel, depth + 1, 58);
|
||||
if (result.counter) {
|
||||
this.renderCombatRibbonBadge(x + 186, y + 33, 'counter', '반격', depth + 1, 54);
|
||||
}
|
||||
}
|
||||
|
||||
private renderCombatRibbonBadge(x: number, y: number, icon: BattleUiIconKey, label: string, depth: number, width = 52) {
|
||||
const badge = this.trackCombatObject(this.add.rectangle(x, y, width, 20, 0x101820, 0.92));
|
||||
badge.setOrigin(0);
|
||||
badge.setDepth(depth);
|
||||
badge.setStrokeStyle(1, 0x53606c, 0.48);
|
||||
this.trackCombatIcon(x + 11, y + 10, icon, 15, depth + 1);
|
||||
const text = this.trackCombatObject(this.add.text(x + 22, y + 4, label, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '10px',
|
||||
color: '#f2e3bf',
|
||||
fontStyle: '700',
|
||||
fixedWidth: width - 26
|
||||
}));
|
||||
text.setDepth(depth + 1);
|
||||
}
|
||||
|
||||
private applyCombatSpriteDisplaySize(sprite: Phaser.GameObjects.Sprite, unit: UnitData, compact = false) {
|
||||
const size = this.combatSpriteDisplaySize(unit, compact);
|
||||
sprite.setDisplaySize(size, size);
|
||||
@@ -7386,17 +7621,18 @@ export class BattleScene extends Phaser.Scene {
|
||||
}));
|
||||
nameText.setDepth(85);
|
||||
|
||||
const hpLabel = this.trackCombatObject(this.add.text(x + 78, y + 45, '병력', {
|
||||
this.trackCombatIcon(x + 88, y + 54, 'hp', 18, 85);
|
||||
const hpLabel = this.trackCombatObject(this.add.text(x + 104, y + 45, '병력', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '13px',
|
||||
color: '#9fb0bf',
|
||||
fontStyle: '700'
|
||||
}));
|
||||
hpLabel.setDepth(85);
|
||||
const hpTrack = this.trackCombatObject(this.add.rectangle(x + 126, y + 54, width - 210, 9, 0x0a0f14, 0.9));
|
||||
const hpTrack = this.trackCombatObject(this.add.rectangle(x + 148, y + 54, width - 232, 9, 0x0a0f14, 0.9));
|
||||
hpTrack.setOrigin(0, 0.5);
|
||||
hpTrack.setDepth(85);
|
||||
const hpFill = this.trackCombatObject(this.add.rectangle(x + 126, y + 54, width - 210, 7, 0x59d18c, 0.96));
|
||||
const hpFill = this.trackCombatObject(this.add.rectangle(x + 148, y + 54, width - 232, 7, 0x59d18c, 0.96));
|
||||
hpFill.setOrigin(0, 0.5);
|
||||
hpFill.setDepth(86);
|
||||
hpFill.setScale(unit.hp / unit.maxHp, 1);
|
||||
@@ -7409,17 +7645,18 @@ export class BattleScene extends Phaser.Scene {
|
||||
hpText.setOrigin(1, 0);
|
||||
hpText.setDepth(85);
|
||||
|
||||
const expLabel = this.trackCombatObject(this.add.text(x + 78, y + 75, '경험', {
|
||||
this.trackCombatIcon(x + 88, y + 84, 'mastery', 18, 85);
|
||||
const expLabel = this.trackCombatObject(this.add.text(x + 104, y + 75, '경험', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '13px',
|
||||
color: '#9fb0bf',
|
||||
fontStyle: '700'
|
||||
}));
|
||||
expLabel.setDepth(85);
|
||||
const expTrack = this.trackCombatObject(this.add.rectangle(x + 126, y + 84, width - 210, 9, 0x0a0f14, 0.9));
|
||||
const expTrack = this.trackCombatObject(this.add.rectangle(x + 148, y + 84, width - 232, 9, 0x0a0f14, 0.9));
|
||||
expTrack.setOrigin(0, 0.5);
|
||||
expTrack.setDepth(85);
|
||||
const expFill = this.trackCombatObject(this.add.rectangle(x + 126, y + 84, width - 210, 7, 0xd8b15f, 0.96));
|
||||
const expFill = this.trackCombatObject(this.add.rectangle(x + 148, y + 84, width - 232, 7, 0xd8b15f, 0.96));
|
||||
expFill.setOrigin(0, 0.5);
|
||||
expFill.setDepth(86);
|
||||
expFill.setScale((growth?.previousExp ?? unit.exp) / 100, 1);
|
||||
@@ -7666,7 +7903,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
|
||||
private async playCombatLevelUpSpotlight(entry: GrowthGaugeEntry, celebrant: UnitData | undefined, x: number, y: number, width: number, depth: number) {
|
||||
const panelWidth = Math.min(540, width - 34);
|
||||
const panelHeight = 104;
|
||||
const panelHeight = 116;
|
||||
const container = this.trackCombatObject(this.add.container(x, y));
|
||||
container.setDepth(depth);
|
||||
container.setAlpha(0);
|
||||
@@ -7691,7 +7928,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
fontStyle: '700'
|
||||
});
|
||||
levelText.setOrigin(celebrant ? 0 : 0.5, 0);
|
||||
const statText = this.add.text(celebrant ? -panelWidth / 2 + 112 : 0, 25, this.statGainLine(entry.statGains) ?? `${entry.label} 효과 강화`, {
|
||||
const statText = this.add.text(celebrant ? -panelWidth / 2 + 112 : 0, 25, entry.statGains ? '능력 상승' : `${entry.label} 효과 강화`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '16px',
|
||||
color: '#a8ffd0',
|
||||
@@ -7701,6 +7938,9 @@ export class BattleScene extends Phaser.Scene {
|
||||
});
|
||||
statText.setOrigin(celebrant ? 0 : 0.5, 0);
|
||||
container.add([bg, glow, title, levelText, statText]);
|
||||
if (entry.statGains) {
|
||||
this.addStatGainChipsToContainer(container, entry.statGains, celebrant ? -panelWidth / 2 + 112 : -panelWidth / 2 + 40, 51, panelWidth - 140);
|
||||
}
|
||||
|
||||
if (celebrant) {
|
||||
const sprite = this.add.sprite(-panelWidth / 2 + 56, 6, this.unitActionTexture(celebrant), this.unitActionFrameIndex('south', this.celebrationPose(celebrant)));
|
||||
@@ -7725,7 +7965,8 @@ export class BattleScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private renderGrowthGaugeRow(entry: GrowthGaugeEntry, x: number, y: number, width: number, depth: number): GrowthGaugeView {
|
||||
const label = this.trackCombatObject(this.add.text(x, y - 3, `${entry.owner} ${entry.label}`, {
|
||||
this.trackCombatIcon(x + 8, y + 8, this.growthEntryIcon(entry), 16, depth);
|
||||
const label = this.trackCombatObject(this.add.text(x + 22, y - 3, `${entry.owner} ${entry.label}`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '13px',
|
||||
color: '#d4dce6',
|
||||
@@ -7804,6 +8045,22 @@ export class BattleScene extends Phaser.Scene {
|
||||
return stats ? `Lv ${entry.level} 달성! ${stats}` : `Lv ${entry.level} 달성!`;
|
||||
}
|
||||
|
||||
private growthEntryIcon(entry: GrowthGaugeEntry): BattleUiIconKey {
|
||||
if (entry.kind === 'character') {
|
||||
return entry.statGains?.[0]?.icon ?? 'hp';
|
||||
}
|
||||
if (entry.kind === 'bond') {
|
||||
return 'leadership';
|
||||
}
|
||||
if (entry.slot === 'armor') {
|
||||
return 'armor';
|
||||
}
|
||||
if (entry.slot === 'accessory') {
|
||||
return 'accessory';
|
||||
}
|
||||
return 'sword';
|
||||
}
|
||||
|
||||
private showGrowthEventText(text: Phaser.GameObjects.Text, label: string) {
|
||||
text.setText(label);
|
||||
text.setAlpha(1);
|
||||
@@ -8874,13 +9131,11 @@ export class BattleScene extends Phaser.Scene {
|
||||
while (unit.level < maxCharacterLevel && exp >= 100) {
|
||||
exp -= 100;
|
||||
unit.level += 1;
|
||||
unit.maxHp += 2;
|
||||
unit.hp = Math.min(unit.maxHp, unit.hp + 2);
|
||||
unit.attack += 1;
|
||||
leveled = true;
|
||||
levelUps += 1;
|
||||
}
|
||||
|
||||
const statGains = this.applyCharacterLevelUpStats(unit, levelUps);
|
||||
unit.exp = unit.level >= maxCharacterLevel ? Math.min(exp, 100) : exp;
|
||||
|
||||
return {
|
||||
@@ -8892,21 +9147,90 @@ export class BattleScene extends Phaser.Scene {
|
||||
next: 100,
|
||||
leveled,
|
||||
levelUps,
|
||||
statGains: this.characterLevelUpStatGains(levelUps)
|
||||
statGains
|
||||
};
|
||||
}
|
||||
|
||||
private characterLevelUpStatGains(levelUps: number): LevelUpStatGain[] {
|
||||
private applyCharacterLevelUpStats(unit: UnitData, levelUps: number) {
|
||||
const gains = this.characterLevelUpStatGains(unit, levelUps);
|
||||
gains.forEach((gain) => {
|
||||
switch (gain.icon) {
|
||||
case 'hp':
|
||||
unit.maxHp += gain.amount;
|
||||
unit.hp = Math.min(unit.maxHp, unit.hp + gain.amount);
|
||||
return;
|
||||
case 'attack':
|
||||
unit.attack += gain.amount;
|
||||
return;
|
||||
case 'might':
|
||||
unit.stats.might = Math.min(255, unit.stats.might + gain.amount);
|
||||
return;
|
||||
case 'intelligence':
|
||||
unit.stats.intelligence = Math.min(255, unit.stats.intelligence + gain.amount);
|
||||
return;
|
||||
case 'leadership':
|
||||
unit.stats.leadership = Math.min(255, unit.stats.leadership + gain.amount);
|
||||
return;
|
||||
case 'move':
|
||||
unit.stats.agility = Math.min(255, unit.stats.agility + gain.amount);
|
||||
return;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
});
|
||||
return gains;
|
||||
}
|
||||
|
||||
private characterLevelUpStatGains(unit: UnitData, levelUps: number): LevelUpStatGain[] {
|
||||
if (levelUps <= 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const profile = this.levelUpStatProfile(unit.classKey);
|
||||
return [
|
||||
{ label: '병력', amount: levelUps * 2 },
|
||||
{ label: '공격', amount: levelUps }
|
||||
{ label: '병력', amount: levelUps * 2, icon: 'hp' },
|
||||
{ label: '공격', amount: levelUps, icon: 'attack' },
|
||||
...profile.map((icon) => ({
|
||||
label: this.levelUpStatLabel(icon),
|
||||
amount: levelUps,
|
||||
icon
|
||||
}))
|
||||
];
|
||||
}
|
||||
|
||||
private levelUpStatProfile(classKey: UnitClassKey): BattleUiIconKey[] {
|
||||
switch (classKey) {
|
||||
case 'strategist':
|
||||
case 'quartermaster':
|
||||
return ['intelligence', 'leadership'];
|
||||
case 'archer':
|
||||
return ['might', 'intelligence'];
|
||||
case 'cavalry':
|
||||
return ['might', 'leadership', 'move'];
|
||||
case 'lord':
|
||||
case 'rebelLeader':
|
||||
case 'yellowTurban':
|
||||
return ['might', 'intelligence', 'leadership'];
|
||||
default:
|
||||
return ['might', 'leadership'];
|
||||
}
|
||||
}
|
||||
|
||||
private levelUpStatLabel(icon: BattleUiIconKey) {
|
||||
switch (icon) {
|
||||
case 'might':
|
||||
return '무력';
|
||||
case 'intelligence':
|
||||
return '지력';
|
||||
case 'leadership':
|
||||
return '통솔';
|
||||
case 'move':
|
||||
return '민첩';
|
||||
default:
|
||||
return '능력';
|
||||
}
|
||||
}
|
||||
|
||||
private formatEquipmentGrowth(result: EquipmentGrowthResult) {
|
||||
const levelUp = result.leveled ? ` / Lv ${result.level} 달성` : '';
|
||||
return `${equipmentSlotLabels[result.slot]} ${result.itemName} 경험치 +${result.amount} (${result.exp}/${result.next})${levelUp}`;
|
||||
@@ -9782,7 +10106,8 @@ export class BattleScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private sideContentBottom(padding = 16) {
|
||||
return (this.miniMapLayout?.y ?? this.layout.panelY + this.layout.panelHeight - 140) - padding;
|
||||
const panelBottom = this.layout.panelY + this.layout.panelHeight - padding;
|
||||
return this.miniMapVisible && this.miniMapLayout ? this.miniMapLayout.y - padding : panelBottom;
|
||||
}
|
||||
|
||||
private renderBondPanel(message?: string) {
|
||||
@@ -10230,13 +10555,16 @@ export class BattleScene extends Phaser.Scene {
|
||||
header.setOrigin(0);
|
||||
header.setStrokeStyle(1, factionColor, 0.76);
|
||||
|
||||
this.trackSideObject(this.add.text(left + 14, top + 9, `${rosterLabels[unit.faction]} / ${unitClass.family}`, {
|
||||
const classIcon = this.trackSideIcon(left + 23, top + 31, this.unitMoveIcon(unit), 30);
|
||||
classIcon.setAlpha(acted ? 0.55 : 0.94);
|
||||
const headerTextX = left + 48;
|
||||
this.trackSideObject(this.add.text(headerTextX, top + 9, `${rosterLabels[unit.faction]} / ${unitClass.family}`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '14px',
|
||||
color: unit.faction === 'ally' ? '#9fd0ff' : '#ffb2a4',
|
||||
fontStyle: '700'
|
||||
}));
|
||||
this.trackSideObject(this.add.text(left + 14, top + 29, `${unit.name} ${unitClass.name}`, {
|
||||
this.trackSideObject(this.add.text(headerTextX, top + 29, `${unit.name} ${unitClass.name}`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '22px',
|
||||
color: acted ? '#bdbdbd' : '#f2e3bf',
|
||||
@@ -10266,7 +10594,8 @@ export class BattleScene extends Phaser.Scene {
|
||||
backText.setOrigin(0.5);
|
||||
}
|
||||
|
||||
this.trackSideObject(this.add.text(left, top + 78, '병력', {
|
||||
this.trackSideIcon(left + 10, top + 88, 'hp', 20);
|
||||
this.trackSideObject(this.add.text(left + 26, top + 78, '병력', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '17px',
|
||||
color: '#d4dce6',
|
||||
@@ -10279,43 +10608,46 @@ export class BattleScene extends Phaser.Scene {
|
||||
fontStyle: '700'
|
||||
}));
|
||||
hpValue.setOrigin(1, 0);
|
||||
this.drawGauge(left + 76, top + 84, width - 160, 10, unit.hp / unit.maxHp, 0x59d18c);
|
||||
this.drawGauge(left + 92, top + 84, width - 176, 10, unit.hp / unit.maxHp, 0x59d18c);
|
||||
|
||||
const attackBonus = this.equipmentAttackBonus(unit);
|
||||
const summaryGap = 6;
|
||||
const summaryBoxWidth = (width - summaryGap * 2) / 3;
|
||||
this.renderCompactValueBox(left, top + 112, summaryBoxWidth, '공격', `${unit.attack + attackBonus}`);
|
||||
this.renderCompactValueBox(left + summaryBoxWidth + summaryGap, top + 112, summaryBoxWidth, '방어+', `${this.equipmentDefenseBonus(unit)}`);
|
||||
this.renderCompactValueBox(left, top + 112, summaryBoxWidth, 'attack', '공격', `${unit.attack + attackBonus}`);
|
||||
this.renderCompactValueBox(left + summaryBoxWidth + summaryGap, top + 112, summaryBoxWidth, 'defense', '방어+', `${this.equipmentDefenseBonus(unit)}`);
|
||||
this.renderCompactValueBox(
|
||||
left + (summaryBoxWidth + summaryGap) * 2,
|
||||
top + 112,
|
||||
summaryBoxWidth,
|
||||
this.unitMoveIcon(unit),
|
||||
'방향',
|
||||
`${this.directionSymbol(direction)} ${this.unitDirectionLabel(direction)}`
|
||||
);
|
||||
|
||||
const statTop = top + 158;
|
||||
statLabels.forEach((stat, index) => {
|
||||
this.renderStatRow(stat.label, unit.stats[stat.key], left, statTop + index * 28, width);
|
||||
this.renderStatRow(stat.key, stat.label, unit.stats[stat.key], left, statTop + index * 28, width);
|
||||
});
|
||||
|
||||
const positionText = `위치 ${unit.x + 1}, ${unit.y + 1} / ${terrainRule.label} ${terrainRating}% / 이동 ${unit.move}${acted ? ' / 행동완료' : ''}`;
|
||||
this.trackSideObject(this.add.text(left, top + 306, positionText, {
|
||||
this.trackSideIcon(left + 9, top + 315, acted ? 'counter' : this.unitMoveIcon(unit), 18);
|
||||
this.trackSideObject(this.add.text(left + 24, top + 306, positionText, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '14px',
|
||||
color: acted ? '#bdbdbd' : '#9fb0bf',
|
||||
wordWrap: { width, useAdvancedWrap: true }
|
||||
wordWrap: { width: width - 24, useAdvancedWrap: true }
|
||||
}));
|
||||
|
||||
this.renderEquipmentSummary(unit, left, top + 330, width);
|
||||
if (message) {
|
||||
this.renderPanelMessage(message, left, top + 444, width, 66);
|
||||
this.renderPanelMessage(message, left, top + 460, width, 58);
|
||||
}
|
||||
this.showFacingIndicator(unit);
|
||||
}
|
||||
|
||||
private renderEquipmentSummary(unit: UnitData, x: number, y: number, width: number) {
|
||||
this.trackSideObject(this.add.text(x, y, '장비 / 숙련도', {
|
||||
this.trackSideIcon(x + 9, y + 10, 'mastery', 18);
|
||||
this.trackSideObject(this.add.text(x + 24, y, '장비 / 숙련도', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '16px',
|
||||
color: '#f2e3bf',
|
||||
@@ -10323,7 +10655,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
}));
|
||||
|
||||
equipmentSlots.forEach((slot, index) => {
|
||||
this.renderEquipmentRow(unit, slot, x, y + 24 + index * 28, width);
|
||||
this.renderEquipmentRow(unit, slot, x, y + 24 + index * 31, width);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -10332,23 +10664,22 @@ export class BattleScene extends Phaser.Scene {
|
||||
const item = getItem(state.itemId);
|
||||
const next = equipmentExpToNext(state.level);
|
||||
const isTreasure = item.rank === 'treasure';
|
||||
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 26, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.94 : 0.86));
|
||||
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 29, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.94 : 0.86));
|
||||
bg.setOrigin(0);
|
||||
bg.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.58 : 0.42);
|
||||
|
||||
const iconFrame = this.trackSideObject(this.add.rectangle(x + 14, y + 13, 22, 22, 0x0a0f14, 0.82));
|
||||
const iconFrame = this.trackSideObject(this.add.rectangle(x + 15, y + 14.5, 24, 24, 0x0a0f14, 0.82));
|
||||
iconFrame.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.72 : 0.48);
|
||||
|
||||
const icon = this.trackSideObject(this.add.image(x + 14, y + 13, this.itemIconKey(item.id)));
|
||||
icon.setDisplaySize(22, 22);
|
||||
this.trackSideIcon(x + 15, y + 14.5, this.itemIcon(item, slot), 22);
|
||||
|
||||
this.trackSideObject(this.add.text(x + 31, y + 6, equipmentSlotLabels[slot], {
|
||||
this.trackSideObject(this.add.text(x + 33, y + 4, equipmentSlotLabels[slot], {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '12px',
|
||||
color: '#9fb0bf',
|
||||
fontStyle: '700'
|
||||
}));
|
||||
this.trackSideObject(this.add.text(x + 78, y + 4, item.name, {
|
||||
this.trackSideObject(this.add.text(x + 78, y + 3, item.name, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '13px',
|
||||
color: isTreasure ? '#f4dfad' : '#d4dce6',
|
||||
@@ -10362,6 +10693,7 @@ export class BattleScene extends Phaser.Scene {
|
||||
color: '#9fb0bf'
|
||||
}));
|
||||
|
||||
this.trackSideIcon(x + width - 69, y + 14, 'mastery', 15);
|
||||
const expText = this.trackSideObject(this.add.text(x + width - 54, y + 6, `${state.exp}/${next}`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
@@ -10377,12 +10709,76 @@ export class BattleScene extends Phaser.Scene {
|
||||
}));
|
||||
levelText.setOrigin(1, 0);
|
||||
|
||||
this.drawGauge(x + 78, y + 20, width - 178, 4, state.exp / next, isTreasure ? 0xd8b15f : 0x58aee0);
|
||||
this.drawGauge(x + 78, y + 22, width - 178, 4, state.exp / next, isTreasure ? 0xd8b15f : 0x58aee0);
|
||||
}
|
||||
|
||||
private itemIconKey(itemId: string) {
|
||||
const key = `item-${itemId}`;
|
||||
return this.textures.exists(key) ? key : 'item-training-sword';
|
||||
private createBattleUiIcon(x: number, y: number, icon: BattleUiIconKey, size = 22) {
|
||||
const image = this.add.image(x, y, battleUiIconTextureKey, battleUiIconFrames[icon]);
|
||||
image.setDisplaySize(size, size);
|
||||
return image;
|
||||
}
|
||||
|
||||
private trackSideIcon(x: number, y: number, icon: BattleUiIconKey, size = 22) {
|
||||
return this.trackSideObject(this.createBattleUiIcon(x, y, icon, size));
|
||||
}
|
||||
|
||||
private trackCombatIcon(x: number, y: number, icon: BattleUiIconKey, size = 22, depth = 85) {
|
||||
const image = this.trackCombatObject(this.createBattleUiIcon(x, y, icon, size));
|
||||
image.setDepth(depth);
|
||||
return image;
|
||||
}
|
||||
|
||||
private itemIcon(item: ItemDefinition, slot: EquipmentSlot = item.slot): BattleUiIconKey {
|
||||
if (slot === 'armor') {
|
||||
return 'armor';
|
||||
}
|
||||
if (slot === 'accessory') {
|
||||
return item.id.includes('quiver') ? 'bow' : 'accessory';
|
||||
}
|
||||
if (item.id.includes('bow') || item.id.includes('quiver')) {
|
||||
return 'bow';
|
||||
}
|
||||
if (item.id.includes('spear') || item.id.includes('glaive') || item.id.includes('halberd') || item.id.includes('piercer')) {
|
||||
return 'spear';
|
||||
}
|
||||
if (item.id.includes('axe')) {
|
||||
return 'axe';
|
||||
}
|
||||
if (item.id.includes('fan') || item.id.includes('manual') || item.id.includes('scroll') || (item.strategyBonus ?? 0) > (item.attackBonus ?? 0)) {
|
||||
return 'strategy';
|
||||
}
|
||||
return 'sword';
|
||||
}
|
||||
|
||||
private unitMoveIcon(unit: UnitData): BattleUiIconKey {
|
||||
return unit.classKey === 'cavalry' ? 'horse' : 'move';
|
||||
}
|
||||
|
||||
private statIcon(key: keyof UnitStats): BattleUiIconKey {
|
||||
switch (key) {
|
||||
case 'might':
|
||||
return 'might';
|
||||
case 'intelligence':
|
||||
return 'intelligence';
|
||||
case 'leadership':
|
||||
return 'leadership';
|
||||
case 'agility':
|
||||
return 'move';
|
||||
case 'luck':
|
||||
return 'mastery';
|
||||
default:
|
||||
return 'might';
|
||||
}
|
||||
}
|
||||
|
||||
private actionIcon(preview: CombatPreview): BattleUiIconKey {
|
||||
if (preview.action === 'attack') {
|
||||
return this.itemIcon(getItem(preview.attacker.equipment.weapon.itemId), 'weapon');
|
||||
}
|
||||
if (preview.action === 'strategy') {
|
||||
return 'strategy';
|
||||
}
|
||||
return preview.usable ? this.itemIcon(getItem(preview.attacker.equipment.accessory.itemId), 'accessory') : 'accessory';
|
||||
}
|
||||
|
||||
private itemBonusText(item: ReturnType<typeof getItem>) {
|
||||
@@ -10418,11 +10814,12 @@ export class BattleScene extends Phaser.Scene {
|
||||
}, 0);
|
||||
}
|
||||
|
||||
private renderCompactValueBox(x: number, y: number, width: number, label: string, value: string) {
|
||||
private renderCompactValueBox(x: number, y: number, width: number, icon: BattleUiIconKey, label: string, value: string) {
|
||||
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 38, 0x16212d, 0.92));
|
||||
bg.setOrigin(0);
|
||||
bg.setStrokeStyle(1, 0x53606c, 0.56);
|
||||
this.trackSideObject(this.add.text(x + 8, y + 6, label, {
|
||||
this.trackSideIcon(x + 13, y + 17, icon, 18);
|
||||
this.trackSideObject(this.add.text(x + 25, y + 6, label, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '12px',
|
||||
color: '#9fb0bf'
|
||||
@@ -10436,15 +10833,16 @@ export class BattleScene extends Phaser.Scene {
|
||||
valueText.setOrigin(1, 0.5);
|
||||
}
|
||||
|
||||
private renderStatRow(label: string, value: number, x: number, y: number, width: number) {
|
||||
this.trackSideObject(this.add.text(x, y, label, {
|
||||
private renderStatRow(key: keyof UnitStats, label: string, value: number, x: number, y: number, width: number) {
|
||||
this.trackSideIcon(x + 9, y + 10, this.statIcon(key), 18);
|
||||
this.trackSideObject(this.add.text(x + 24, y, label, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '16px',
|
||||
color: '#d4dce6',
|
||||
fontStyle: '700'
|
||||
}));
|
||||
|
||||
this.drawGauge(x + 76, y + 8, width - 130, 9, value / 100, value >= 80 ? 0xd8b15f : 0x58aee0);
|
||||
this.drawGauge(x + 92, y + 8, width - 146, 9, value / 100, value >= 80 ? 0xd8b15f : 0x58aee0);
|
||||
|
||||
const valueText = this.trackSideObject(this.add.text(x + width, y - 1, `${value}`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
|
||||
Reference in New Issue
Block a user