feat: adopt 1920x1080 baseline
This commit is contained in:
@@ -12,6 +12,10 @@ import {
|
||||
import { palette } from '../ui/palette';
|
||||
import { startLazyScene } from './lazyScenes';
|
||||
|
||||
const fhdUiScale = 1.5;
|
||||
const ui = (value: number) => value * fhdUiScale;
|
||||
const uiPx = (value: number) => `${Math.round(ui(value))}px`;
|
||||
|
||||
export class TitleScene extends Phaser.Scene {
|
||||
private focusedButton?: Phaser.GameObjects.Text;
|
||||
private settingsPanel?: Phaser.GameObjects.Container;
|
||||
@@ -93,11 +97,11 @@ export class TitleScene extends Phaser.Scene {
|
||||
const coverScale = Math.max(width / texture.width, height / texture.height);
|
||||
|
||||
background.setScale(coverScale * 1.08);
|
||||
background.setPosition(width / 2 - 18, height / 2 + 4);
|
||||
background.setPosition(width / 2 - ui(18), height / 2 + ui(4));
|
||||
this.tweens.add({
|
||||
targets: background,
|
||||
x: width / 2 + 18,
|
||||
y: height / 2 - 6,
|
||||
x: width / 2 + ui(18),
|
||||
y: height / 2 - ui(6),
|
||||
scale: coverScale * 1.12,
|
||||
duration: 18000,
|
||||
ease: 'Sine.easeInOut',
|
||||
@@ -142,11 +146,11 @@ export class TitleScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private drawAtmosphere(width: number, height: number) {
|
||||
const mist = this.add.ellipse(width / 2, height * 0.78, width * 1.25, 190, 0xd8b15f, 0.04);
|
||||
const mist = this.add.ellipse(width / 2, height * 0.78, width * 1.25, ui(190), 0xd8b15f, 0.04);
|
||||
this.tweens.add({
|
||||
targets: mist,
|
||||
alpha: 0.11,
|
||||
x: width / 2 + 22,
|
||||
x: width / 2 + ui(22),
|
||||
duration: 8000,
|
||||
ease: 'Sine.easeInOut',
|
||||
yoyo: true,
|
||||
@@ -156,78 +160,78 @@ export class TitleScene extends Phaser.Scene {
|
||||
for (let index = 0; index < 34; index += 1) {
|
||||
const petal = this.add.image(
|
||||
Phaser.Math.Between(0, width),
|
||||
Phaser.Math.Between(-80, height),
|
||||
Phaser.Math.Between(-ui(80), height),
|
||||
'petal'
|
||||
);
|
||||
const scale = Phaser.Math.FloatBetween(0.35, 0.9);
|
||||
petal.setScale(scale);
|
||||
petal.setScale(scale * fhdUiScale);
|
||||
petal.setAlpha(Phaser.Math.FloatBetween(0.22, 0.62));
|
||||
petal.setRotation(Phaser.Math.FloatBetween(-1.2, 1.2));
|
||||
|
||||
this.tweens.add({
|
||||
targets: petal,
|
||||
x: petal.x + Phaser.Math.Between(80, 220),
|
||||
y: height + Phaser.Math.Between(40, 180),
|
||||
x: petal.x + Phaser.Math.Between(ui(80), ui(220)),
|
||||
y: height + Phaser.Math.Between(ui(40), ui(180)),
|
||||
rotation: petal.rotation + Phaser.Math.FloatBetween(2.4, 5.6),
|
||||
duration: Phaser.Math.Between(12000, 24000),
|
||||
delay: Phaser.Math.Between(0, 6000),
|
||||
ease: 'Sine.easeInOut',
|
||||
repeat: -1,
|
||||
onRepeat: () => {
|
||||
petal.setPosition(Phaser.Math.Between(-120, width), Phaser.Math.Between(-180, -40));
|
||||
petal.setPosition(Phaser.Math.Between(-ui(120), width), Phaser.Math.Between(-ui(180), -ui(40)));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private drawTitleMark(width: number, height: number) {
|
||||
const compact = width < 720;
|
||||
const titleX = compact ? width / 2 : 92;
|
||||
const title = this.add.text(titleX, height - (compact ? 190 : 204), '삼국지', {
|
||||
const compact = width < ui(720);
|
||||
const titleX = compact ? width / 2 : ui(92);
|
||||
const title = this.add.text(titleX, height - ui(compact ? 190 : 204), '삼국지', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", serif',
|
||||
fontSize: compact ? '50px' : '64px',
|
||||
fontSize: uiPx(compact ? 50 : 64),
|
||||
color: '#f1e3c2',
|
||||
fontStyle: '700',
|
||||
padding: { top: 8, bottom: 8 },
|
||||
shadow: { offsetX: 0, offsetY: 4, color: '#080a0e', blur: 10, fill: true }
|
||||
padding: { top: ui(8), bottom: ui(8) },
|
||||
shadow: { offsetX: 0, offsetY: ui(4), color: '#080a0e', blur: ui(10), fill: true }
|
||||
});
|
||||
title.setOrigin(compact ? 0.5 : 0, 0);
|
||||
|
||||
const subtitle = this.add.text(compact ? width / 2 : 96, height - (compact ? 112 : 118), '세 형제의 맹세', {
|
||||
const subtitle = this.add.text(compact ? width / 2 : ui(96), height - ui(compact ? 112 : 118), '세 형제의 맹세', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", serif',
|
||||
fontSize: compact ? '26px' : '34px',
|
||||
fontSize: uiPx(compact ? 26 : 34),
|
||||
color: '#d8b15f',
|
||||
fontStyle: '700',
|
||||
padding: { top: 10, bottom: 8 },
|
||||
shadow: { offsetX: 0, offsetY: 2, color: '#080a0e', blur: 6, fill: true }
|
||||
padding: { top: ui(10), bottom: ui(8) },
|
||||
shadow: { offsetX: 0, offsetY: ui(2), color: '#080a0e', blur: ui(6), fill: true }
|
||||
});
|
||||
subtitle.setOrigin(compact ? 0.5 : 0, 0);
|
||||
|
||||
const lineX = compact ? width / 2 - 110 : 98;
|
||||
const lineY = height - (compact ? 76 : 70);
|
||||
this.add.rectangle(lineX, lineY, compact ? 220 : 310, 2, palette.gold, 0.68).setOrigin(0, 0.5);
|
||||
const lineX = compact ? width / 2 - ui(110) : ui(98);
|
||||
const lineY = height - ui(compact ? 76 : 70);
|
||||
this.add.rectangle(lineX, lineY, ui(compact ? 220 : 310), ui(2), palette.gold, 0.68).setOrigin(0, 0.5);
|
||||
}
|
||||
|
||||
private drawMenu(width: number, height: number) {
|
||||
const compact = width < 720;
|
||||
const menuX = compact ? width / 2 : width - 318;
|
||||
const compact = width < ui(720);
|
||||
const menuX = compact ? width / 2 : width - ui(318);
|
||||
const menuY = height * (compact ? 0.36 : 0.43);
|
||||
const canContinue = hasCampaignSave();
|
||||
const campaign = canContinue ? loadCampaignState() : undefined;
|
||||
const isEndingComplete = campaign?.step === 'ending-complete';
|
||||
const plateHeight = campaign ? 348 : 252;
|
||||
const plateHeight = ui(campaign ? 348 : 252);
|
||||
|
||||
const plate = this.add.rectangle(menuX, menuY, 250, plateHeight, 0x111821, 0.66);
|
||||
plate.setStrokeStyle(1, palette.gold, 0.45);
|
||||
this.add.rectangle(menuX, menuY - plateHeight / 2, 186, 2, palette.gold, 0.7);
|
||||
this.add.rectangle(menuX, menuY + plateHeight / 2, 186, 2, palette.gold, 0.36);
|
||||
const plate = this.add.rectangle(menuX, menuY, ui(250), plateHeight, 0x111821, 0.66);
|
||||
plate.setStrokeStyle(ui(1), palette.gold, 0.45);
|
||||
this.add.rectangle(menuX, menuY - plateHeight / 2, ui(186), ui(2), palette.gold, 0.7);
|
||||
this.add.rectangle(menuX, menuY + plateHeight / 2, ui(186), ui(2), palette.gold, 0.36);
|
||||
|
||||
this.createMenuButton(menuX, menuY - 70, '새 게임', true, () => this.requestStartGame());
|
||||
this.createMenuButton(menuX, menuY - ui(70), '새 게임', true, () => this.requestStartGame());
|
||||
this.createMenuButton(menuX, menuY, isEndingComplete ? '엔딩 보기' : '이어하기', canContinue, () => this.requestContinueGame());
|
||||
this.createMenuButton(menuX, menuY + 70, '설정', true, () => this.openSettingsPanel(menuX, menuY));
|
||||
this.createMenuButton(menuX, menuY + ui(70), '설정', true, () => this.openSettingsPanel(menuX, menuY));
|
||||
|
||||
if (campaign) {
|
||||
this.drawCampaignSaveBadge(menuX, menuY + 132, campaign, isEndingComplete);
|
||||
this.drawCampaignSaveBadge(menuX, menuY + ui(132), campaign, isEndingComplete);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -238,34 +242,34 @@ export class TitleScene extends Phaser.Scene {
|
||||
isEndingComplete: boolean
|
||||
) {
|
||||
const badge = this.add.container(x, y);
|
||||
const background = this.add.rectangle(0, 0, 216, 78, 0x21180f, 0.92);
|
||||
background.setStrokeStyle(1, palette.gold, 0.52);
|
||||
const background = this.add.rectangle(0, 0, ui(216), ui(78), 0x21180f, 0.92);
|
||||
background.setStrokeStyle(ui(1), palette.gold, 0.52);
|
||||
|
||||
const title = this.add.text(0, -24, isEndingComplete ? '완결 저장' : '진행 저장', {
|
||||
const title = this.add.text(0, -ui(24), isEndingComplete ? '완결 저장' : '진행 저장', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '18px',
|
||||
fontSize: uiPx(18),
|
||||
color: '#f6e6bd',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 198,
|
||||
fixedWidth: ui(198),
|
||||
align: 'center',
|
||||
padding: { top: 3, bottom: 3 }
|
||||
padding: { top: ui(3), bottom: ui(3) }
|
||||
});
|
||||
title.setOrigin(0.5);
|
||||
|
||||
const detail = this.add.text(0, 0, this.campaignSaveDetail(campaign, isEndingComplete), {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '14px',
|
||||
fontSize: uiPx(14),
|
||||
color: '#d8b15f',
|
||||
fixedWidth: 198,
|
||||
fixedWidth: ui(198),
|
||||
align: 'center'
|
||||
});
|
||||
detail.setOrigin(0.5);
|
||||
|
||||
const meta = this.add.text(0, 24, this.campaignSaveMeta(campaign), {
|
||||
const meta = this.add.text(0, ui(24), this.campaignSaveMeta(campaign), {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '12px',
|
||||
fontSize: uiPx(12),
|
||||
color: '#9fb0bf',
|
||||
fixedWidth: 198,
|
||||
fixedWidth: ui(198),
|
||||
align: 'center'
|
||||
});
|
||||
meta.setOrigin(0.5);
|
||||
@@ -311,21 +315,21 @@ export class TitleScene extends Phaser.Scene {
|
||||
onSelect: () => void
|
||||
) {
|
||||
const text = this.add.text(x, y, label, {
|
||||
fontSize: '30px',
|
||||
fontSize: uiPx(30),
|
||||
color: enabled ? '#f1e3c2' : '#7d8189',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 190,
|
||||
fixedWidth: ui(190),
|
||||
align: 'center',
|
||||
padding: { top: 10, bottom: 10 }
|
||||
padding: { top: ui(10), bottom: ui(10) }
|
||||
});
|
||||
text.setOrigin(0.5);
|
||||
text.setShadow(0, 3, '#080a0e', 8, true, true);
|
||||
text.setShadow(0, ui(3), '#080a0e', ui(8), true, true);
|
||||
|
||||
if (!enabled) {
|
||||
return text;
|
||||
}
|
||||
|
||||
const hitArea = this.add.zone(x, y, 216, 58);
|
||||
const hitArea = this.add.zone(x, y, ui(216), ui(58));
|
||||
hitArea.setOrigin(0.5);
|
||||
hitArea.setInteractive({ useHandCursor: true });
|
||||
hitArea.on('pointerover', () => {
|
||||
@@ -366,38 +370,38 @@ export class TitleScene extends Phaser.Scene {
|
||||
this.closeNewGameConfirmPanel();
|
||||
this.closeSaveSlotPanel();
|
||||
|
||||
const panel = this.add.container(x, y + 238);
|
||||
const backdrop = this.add.rectangle(0, 0, 286, 204, 0x0e151d, 0.9);
|
||||
backdrop.setStrokeStyle(1, palette.gold, 0.52);
|
||||
const panel = this.add.container(x, y + ui(238));
|
||||
const backdrop = this.add.rectangle(0, 0, ui(286), ui(204), 0x0e151d, 0.9);
|
||||
backdrop.setStrokeStyle(ui(1), palette.gold, 0.52);
|
||||
|
||||
const title = this.add.text(0, -74, '설정', {
|
||||
fontSize: '24px',
|
||||
const title = this.add.text(0, -ui(74), '설정', {
|
||||
fontSize: uiPx(24),
|
||||
color: '#f1e3c2',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 210,
|
||||
fixedWidth: ui(210),
|
||||
align: 'center'
|
||||
});
|
||||
title.setOrigin(0.5);
|
||||
|
||||
const soundText = this.createSettingsButton(0, -16, this.soundLabel());
|
||||
const soundText = this.createSettingsButton(0, -ui(16), this.soundLabel());
|
||||
soundText.on('pointerdown', () => {
|
||||
soundDirector.setMuted(!soundDirector.isMuted());
|
||||
soundText.setText(this.soundLabel());
|
||||
soundDirector.playSelect();
|
||||
});
|
||||
|
||||
const close = this.createSettingsButton(0, 42, '닫기');
|
||||
const close = this.createSettingsButton(0, ui(42), '닫기');
|
||||
close.on('pointerdown', () => {
|
||||
soundDirector.playSelect();
|
||||
this.closeSettingsPanel();
|
||||
});
|
||||
|
||||
const hint = this.add.text(0, 78, 'Esc 닫기', {
|
||||
const hint = this.add.text(0, ui(78), 'Esc 닫기', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
fontSize: uiPx(11),
|
||||
color: '#9fb0bf',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 210,
|
||||
fixedWidth: ui(210),
|
||||
align: 'center'
|
||||
});
|
||||
hint.setOrigin(0.5);
|
||||
@@ -405,16 +409,16 @@ export class TitleScene extends Phaser.Scene {
|
||||
panel.add([backdrop, title, soundText, close, hint]);
|
||||
panel.setAlpha(0);
|
||||
this.settingsPanel = panel;
|
||||
this.tweens.add({ targets: panel, alpha: 1, y: y + 228, duration: 160, ease: 'Sine.easeOut' });
|
||||
this.tweens.add({ targets: panel, alpha: 1, y: y + ui(228), duration: 160, ease: 'Sine.easeOut' });
|
||||
}
|
||||
|
||||
private createSettingsButton(x: number, y: number, label: string) {
|
||||
const text = this.add.text(x, y, label, {
|
||||
fontSize: '20px',
|
||||
fontSize: uiPx(20),
|
||||
color: '#d8b15f',
|
||||
fixedWidth: 210,
|
||||
fixedWidth: ui(210),
|
||||
align: 'center',
|
||||
padding: { top: 8, bottom: 8 }
|
||||
padding: { top: ui(8), bottom: ui(8) }
|
||||
});
|
||||
text.setOrigin(0.5);
|
||||
text.setInteractive({ useHandCursor: true });
|
||||
@@ -445,8 +449,8 @@ export class TitleScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
const { width, height } = this.scale;
|
||||
const compact = width < 720;
|
||||
const menuX = compact ? width / 2 : width - 318;
|
||||
const compact = width < ui(720);
|
||||
const menuX = compact ? width / 2 : width - ui(318);
|
||||
const menuY = height * (compact ? 0.36 : 0.43);
|
||||
this.openSaveSlotPanel(menuX, menuY);
|
||||
}
|
||||
@@ -461,33 +465,33 @@ export class TitleScene extends Phaser.Scene {
|
||||
this.closeSettingsPanel();
|
||||
this.closeNewGameConfirmPanel();
|
||||
|
||||
const panel = this.add.container(x, y + 252);
|
||||
const backdrop = this.add.rectangle(0, 0, 318, 280, 0x0e151d, 0.95);
|
||||
backdrop.setStrokeStyle(1, palette.gold, 0.58);
|
||||
const panel = this.add.container(x, y + ui(252));
|
||||
const backdrop = this.add.rectangle(0, 0, ui(318), ui(280), 0x0e151d, 0.95);
|
||||
backdrop.setStrokeStyle(ui(1), palette.gold, 0.58);
|
||||
|
||||
const title = this.add.text(0, -116, '이어갈 기록 선택 (1~3)', {
|
||||
const title = this.add.text(0, -ui(116), '이어갈 기록 선택 (1~3)', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '22px',
|
||||
fontSize: uiPx(22),
|
||||
color: '#f1e3c2',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 266,
|
||||
fixedWidth: ui(266),
|
||||
align: 'center'
|
||||
});
|
||||
title.setOrigin(0.5);
|
||||
|
||||
const rows = listCampaignSaveSlots().map((slot, index) => this.createSaveSlotRow(slot, -82 + index * 58));
|
||||
const close = this.createSettingsButton(0, 96, '닫기');
|
||||
const rows = listCampaignSaveSlots().map((slot, index) => this.createSaveSlotRow(slot, -ui(82) + index * ui(58)));
|
||||
const close = this.createSettingsButton(0, ui(96), '닫기');
|
||||
close.on('pointerdown', () => {
|
||||
soundDirector.playSelect();
|
||||
this.closeSaveSlotPanel();
|
||||
});
|
||||
|
||||
const hint = this.add.text(0, 126, '숫자키 1~3 선택 · Esc 닫기', {
|
||||
const hint = this.add.text(0, ui(126), '숫자키 1~3 선택 · Esc 닫기', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
fontSize: uiPx(11),
|
||||
color: '#9fb0bf',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 260,
|
||||
fixedWidth: ui(260),
|
||||
align: 'center'
|
||||
});
|
||||
hint.setOrigin(0.5);
|
||||
@@ -495,50 +499,50 @@ export class TitleScene extends Phaser.Scene {
|
||||
panel.add([backdrop, title, ...rows, close, hint]);
|
||||
panel.setAlpha(0);
|
||||
this.saveSlotPanel = panel;
|
||||
this.tweens.add({ targets: panel, alpha: 1, y: y + 242, duration: 160, ease: 'Sine.easeOut' });
|
||||
this.tweens.add({ targets: panel, alpha: 1, y: y + ui(242), duration: 160, ease: 'Sine.easeOut' });
|
||||
}
|
||||
|
||||
private createSaveSlotRow(slot: CampaignSaveSlotSummary, y: number) {
|
||||
const row = this.add.container(0, y);
|
||||
const enabled = slot.exists;
|
||||
const background = this.add.rectangle(0, 0, 270, 48, enabled ? 0x1b2530 : 0x121820, enabled ? 0.9 : 0.56);
|
||||
background.setStrokeStyle(1, enabled ? palette.gold : 0x56616d, enabled ? 0.42 : 0.2);
|
||||
const background = this.add.rectangle(0, 0, ui(270), ui(48), enabled ? 0x1b2530 : 0x121820, enabled ? 0.9 : 0.56);
|
||||
background.setStrokeStyle(ui(1), enabled ? palette.gold : 0x56616d, enabled ? 0.42 : 0.2);
|
||||
|
||||
const campaign = enabled ? loadCampaignState(slot.slot) : undefined;
|
||||
const isEndingComplete = campaign?.step === 'ending-complete';
|
||||
const title = this.add.text(-122, -12, `슬롯 ${slot.slot}`, {
|
||||
const title = this.add.text(-ui(122), -ui(12), `슬롯 ${slot.slot}`, {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '16px',
|
||||
fontSize: uiPx(16),
|
||||
color: enabled ? '#f6e6bd' : '#7d8189',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 70,
|
||||
fixedWidth: ui(70),
|
||||
align: 'left'
|
||||
});
|
||||
title.setOrigin(0, 0.5);
|
||||
|
||||
const detail = this.add.text(-42, -12, campaign ? this.campaignSaveDetail(campaign, isEndingComplete) : '저장 없음', {
|
||||
const detail = this.add.text(-ui(42), -ui(12), campaign ? this.campaignSaveDetail(campaign, isEndingComplete) : '저장 없음', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '13px',
|
||||
fontSize: uiPx(13),
|
||||
color: enabled ? '#d8b15f' : '#747c86',
|
||||
fixedWidth: 154,
|
||||
fixedWidth: ui(154),
|
||||
align: 'left'
|
||||
});
|
||||
detail.setOrigin(0, 0.5);
|
||||
|
||||
const meta = this.add.text(-42, 12, campaign ? this.campaignSaveMeta(campaign) : '빈 슬롯', {
|
||||
const meta = this.add.text(-ui(42), ui(12), campaign ? this.campaignSaveMeta(campaign) : '빈 슬롯', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
fontSize: uiPx(11),
|
||||
color: enabled ? '#9fb0bf' : '#626b75',
|
||||
fixedWidth: 154,
|
||||
fixedWidth: ui(154),
|
||||
align: 'left'
|
||||
});
|
||||
meta.setOrigin(0, 0.5);
|
||||
|
||||
const keycap = this.add.rectangle(112, 0, 28, 28, enabled ? 0x263647 : 0x151c25, enabled ? 0.92 : 0.58);
|
||||
keycap.setStrokeStyle(1, enabled ? palette.gold : 0x53606c, enabled ? 0.54 : 0.24);
|
||||
const keyText = this.add.text(112, 0, String(slot.slot), {
|
||||
const keycap = this.add.rectangle(ui(112), 0, ui(28), ui(28), enabled ? 0x263647 : 0x151c25, enabled ? 0.92 : 0.58);
|
||||
keycap.setStrokeStyle(ui(1), enabled ? palette.gold : 0x53606c, enabled ? 0.54 : 0.24);
|
||||
const keyText = this.add.text(ui(112), 0, String(slot.slot), {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '15px',
|
||||
fontSize: uiPx(15),
|
||||
color: enabled ? '#f2e3bf' : '#737c86',
|
||||
fontStyle: '700'
|
||||
});
|
||||
@@ -550,12 +554,12 @@ export class TitleScene extends Phaser.Scene {
|
||||
background.setInteractive({ useHandCursor: true });
|
||||
background.on('pointerover', () => {
|
||||
background.setFillStyle(0xd8b15f, 0.22);
|
||||
background.setStrokeStyle(1, palette.gold, 0.72);
|
||||
background.setStrokeStyle(ui(1), palette.gold, 0.72);
|
||||
soundDirector.playHover();
|
||||
});
|
||||
background.on('pointerout', () => {
|
||||
background.setFillStyle(0x1b2530, 0.9);
|
||||
background.setStrokeStyle(1, palette.gold, 0.42);
|
||||
background.setStrokeStyle(ui(1), palette.gold, 0.42);
|
||||
});
|
||||
background.on('pointerdown', () => {
|
||||
this.activateSaveSlot(slot.slot);
|
||||
@@ -637,8 +641,8 @@ export class TitleScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
const { width, height } = this.scale;
|
||||
const compact = width < 720;
|
||||
const menuX = compact ? width / 2 : width - 318;
|
||||
const compact = width < ui(720);
|
||||
const menuX = compact ? width / 2 : width - ui(318);
|
||||
const menuY = height * (compact ? 0.36 : 0.43);
|
||||
this.openNewGameConfirmPanel(menuX, menuY);
|
||||
}
|
||||
@@ -653,48 +657,48 @@ export class TitleScene extends Phaser.Scene {
|
||||
this.closeSettingsPanel();
|
||||
this.closeSaveSlotPanel();
|
||||
|
||||
const panel = this.add.container(x, y + 240);
|
||||
const backdrop = this.add.rectangle(0, 0, 286, 198, 0x0e151d, 0.94);
|
||||
backdrop.setStrokeStyle(1, palette.gold, 0.58);
|
||||
const panel = this.add.container(x, y + ui(240));
|
||||
const backdrop = this.add.rectangle(0, 0, ui(286), ui(198), 0x0e151d, 0.94);
|
||||
backdrop.setStrokeStyle(ui(1), palette.gold, 0.58);
|
||||
|
||||
const title = this.add.text(0, -72, '새로 시작', {
|
||||
const title = this.add.text(0, -ui(72), '새로 시작', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '23px',
|
||||
fontSize: uiPx(23),
|
||||
color: '#f1e3c2',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 220,
|
||||
fixedWidth: ui(220),
|
||||
align: 'center'
|
||||
});
|
||||
title.setOrigin(0.5);
|
||||
|
||||
const message = this.add.text(0, -32, '현재 저장을 덮고\n처음부터 시작합니다.', {
|
||||
const message = this.add.text(0, -ui(32), '현재 저장을 덮고\n처음부터 시작합니다.', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '15px',
|
||||
fontSize: uiPx(15),
|
||||
color: '#bfc8d3',
|
||||
fixedWidth: 236,
|
||||
fixedWidth: ui(236),
|
||||
align: 'center',
|
||||
lineSpacing: 4
|
||||
lineSpacing: ui(4)
|
||||
});
|
||||
message.setOrigin(0.5);
|
||||
|
||||
const hint = this.add.text(0, 13, 'Enter 새 게임 · Esc 취소', {
|
||||
const hint = this.add.text(0, ui(13), 'Enter 새 게임 · Esc 취소', {
|
||||
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
|
||||
fontSize: '11px',
|
||||
fontSize: uiPx(11),
|
||||
color: '#9fb0bf',
|
||||
fontStyle: '700',
|
||||
fixedWidth: 220,
|
||||
fixedWidth: ui(220),
|
||||
align: 'center'
|
||||
});
|
||||
hint.setOrigin(0.5);
|
||||
|
||||
const confirm = this.createSettingsButton(0, 48, '새 게임 시작');
|
||||
const confirm = this.createSettingsButton(0, ui(48), '새 게임 시작');
|
||||
confirm.setColor('#f1e3c2');
|
||||
confirm.on('pointerdown', () => {
|
||||
this.closeNewGameConfirmPanel();
|
||||
this.startGame();
|
||||
});
|
||||
|
||||
const cancel = this.createSettingsButton(0, 88, '취소');
|
||||
const cancel = this.createSettingsButton(0, ui(88), '취소');
|
||||
cancel.on('pointerdown', () => {
|
||||
soundDirector.playSelect();
|
||||
this.closeNewGameConfirmPanel();
|
||||
@@ -703,7 +707,7 @@ export class TitleScene extends Phaser.Scene {
|
||||
panel.add([backdrop, title, message, hint, confirm, cancel]);
|
||||
panel.setAlpha(0);
|
||||
this.newGameConfirmPanel = panel;
|
||||
this.tweens.add({ targets: panel, alpha: 1, y: y + 230, duration: 160, ease: 'Sine.easeOut' });
|
||||
this.tweens.add({ targets: panel, alpha: 1, y: y + ui(230), duration: 160, ease: 'Sine.easeOut' });
|
||||
}
|
||||
|
||||
private closeNewGameConfirmPanel() {
|
||||
|
||||
Reference in New Issue
Block a user