create-pixifact 0.17.0 → 0.19.0

package/templates/game/src/GameApp.ts

@@ -0,0 +1,118 @@
+import { Group, setFrameLayout } from 'pixifact/runtime';
+import project from '../pixifact.project.json';
+import { GameSession } from './core/GameSession';
+import { ScreenManager } from './core/ScreenManager';
+import { WebRecordStore } from './core/WebRecordStore';
+import { MainMenu } from './screens/MainMenu';
+import { PlayScreen } from './screens/PlayScreen';
+import { ResultScreen } from './screens/ResultScreen';
+import { Dialog } from './ui/Dialog';
+
+export class GameApp extends Group {
+    private readonly session: GameSession;
+    private readonly screens = new ScreenManager();
+    private readonly modals = new ScreenManager();
+    private modalOpen = false;
+
+    constructor(private readonly records: WebRecordStore) {
+        super(project.resolution);
+        this.session = new GameSession(records.read());
+        for (const layer of [this.screens, this.modals]) {
+            setFrameLayout(layer, { left: 0, right: 0, top: 0, bottom: 0 });
+        }
+        this.addChild(this.screens, this.modals);
+        this.showMenu();
+    }
+
+    snapshot() {
+        const screen = this.screens.children[0];
+        return {
+            ...this.session.snapshot(),
+            modalOpen: this.modalOpen,
+            showcase: screen instanceof MainMenu ? screen.snapshot() : null,
+        };
+    }
+
+    pause() {
+        if (this.session.snapshot().phase !== 'playing') return;
+        this.session.pause();
+        this.screens.interactiveChildren = false;
+        this.modalOpen = true;
+        const dialog = new Dialog();
+        dialog.title = '休息一下';
+        dialog.message = '星光会等你回来。';
+        dialog.confirmText = '继续游戏';
+        dialog.cancelText = '返回组件展台';
+        this.modals.replace(dialog);
+        this.modals.track(dialog.confirmed.connect(() => {
+            this.session.resume();
+            this.closeModal();
+        }));
+        this.modals.track(dialog.cancelled.connect(() => this.showMenu()));
+    }
+
+    private start() {
+        this.closeModal();
+        this.session.start();
+        const screen = new PlayScreen();
+        this.screens.replace(screen);
+        screen.renderProgress(0, this.session.snapshot().goal);
+        this.screens.track(screen.paused.connect(() => this.pause()));
+        this.screens.track(screen.collected.connect(() => {
+            const previousBest = this.session.snapshot().bestScore;
+            this.session.collect();
+            const state = this.session.snapshot();
+            if (state.bestScore > previousBest) this.records.write(state.bestScore);
+            if (state.phase === 'finished') {
+                this.showResult();
+            } else {
+                screen.renderProgress(state.score, state.goal);
+            }
+        }));
+    }
+
+    private showMenu() {
+        this.closeModal();
+        this.session.menu();
+        const screen = new MainMenu();
+        screen.bestText = `最高记录 · ${this.session.snapshot().bestScore}`;
+        this.screens.replace(screen);
+        this.screens.track(screen.started.connect(() => this.start()));
+        this.screens.track(screen.dialogRequested.connect(() => this.previewDialog(screen)));
+    }
+
+    private previewDialog(screen: MainMenu) {
+        this.screens.interactiveChildren = false;
+        this.modalOpen = true;
+        const dialog = new Dialog();
+        dialog.title = 'Dialog · 弹窗预览';
+        dialog.message = '确认或取消后，按钮会显示结果。';
+        dialog.confirmText = '确认';
+        dialog.cancelText = '取消';
+        this.modals.replace(dialog);
+        this.modals.track(dialog.confirmed.connect(() => {
+            this.closeModal();
+            screen.reportDialog(true);
+        }));
+        this.modals.track(dialog.cancelled.connect(() => {
+            this.closeModal();
+            screen.reportDialog(false);
+        }));
+    }
+
+    private showResult() {
+        const state = this.session.snapshot();
+        const screen = new ResultScreen();
+        screen.scoreText = `本局 · ${state.score} 份星光`;
+        screen.bestText = `最高记录 · ${state.bestScore}`;
+        this.screens.replace(screen);
+        this.screens.track(screen.restarted.connect(() => this.start()));
+        this.screens.track(screen.returned.connect(() => this.showMenu()));
+    }
+
+    private closeModal() {
+        this.modals.clear();
+        this.modalOpen = false;
+        this.screens.interactiveChildren = true;
+    }
+}

package/templates/game/src/core/GameSession.ts

@@ -0,0 +1,43 @@
+export interface GameSnapshot {
+    phase: 'menu' | 'playing' | 'paused' | 'finished';
+    score: number;
+    goal: number;
+    bestScore: number;
+}
+
+export class GameSession {
+    private state: GameSnapshot;
+
+    constructor(bestScore: number, goal = 8) {
+        this.state = { phase: 'menu', score: 0, goal, bestScore };
+    }
+
+    start() {
+        this.state.phase = 'playing';
+        this.state.score = 0;
+    }
+
+    collect() {
+        if (this.state.phase !== 'playing') return;
+        this.state.score += 1;
+        this.state.bestScore = Math.max(this.state.bestScore, this.state.score);
+        if (this.state.score === this.state.goal) this.state.phase = 'finished';
+    }
+
+    pause() {
+        if (this.state.phase === 'playing') this.state.phase = 'paused';
+    }
+
+    resume() {
+        if (this.state.phase === 'paused') this.state.phase = 'playing';
+    }
+
+    menu() {
+        this.state.phase = 'menu';
+        this.state.score = 0;
+    }
+
+    snapshot(): GameSnapshot {
+        return { ...this.state };
+    }
+}

package/templates/game/src/core/ScreenManager.ts

@@ -0,0 +1,26 @@
+import type { DestroyOptions } from 'pixi.js';
+import { Group, setFrameLayout } from 'pixifact/runtime';
+
+export class ScreenManager extends Group {
+    private disconnects: (() => void)[] = [];
+
+    replace(screen: Group) {
+        this.clear();
+        setFrameLayout(screen, { left: 0, right: 0, top: 0, bottom: 0 });
+        this.addChild(screen);
+    }
+
+    track(disconnect: () => void) {
+        this.disconnects.push(disconnect);
+    }
+
+    clear() {
+        for (const disconnect of this.disconnects.splice(0)) disconnect();
+        for (const screen of this.removeChildren()) screen.destroy({ children: true });
+    }
+
+    override destroy(options?: DestroyOptions) {
+        this.clear();
+        super.destroy(options);
+    }
+}

package/templates/game/src/core/WebRecordStore.ts

@@ -0,0 +1,14 @@
+const recordKey = 'pixifact-game-starter.best-score';
+
+export class WebRecordStore {
+    constructor(private readonly storage: Pick<Storage, 'getItem' | 'setItem'>) {}
+
+    read(): number {
+        const saved = this.storage.getItem(recordKey);
+        return saved === null ? 0 : JSON.parse(saved) as number;
+    }
+
+    write(bestScore: number) {
+        this.storage.setItem(recordKey, JSON.stringify(bestScore));
+    }
+}

package/templates/game/src/main.ts

@@ -0,0 +1,64 @@
+import './styles.css';
+import 'pixifact:scenes';
+import { Assets } from 'pixi.js';
+import { createApplication } from 'pixifact:platform';
+import manifest from 'pixifact:assets';
+import type { PixifactProjectConfig } from 'pixifact';
+import { applyPixifactViewportLayout, calculatePixifactViewportLayout } from 'pixifact/runtime';
+import { prepareSceneClass } from 'pixifact/scene';
+import projectJson from '../pixifact.project.json';
+import { GameApp } from './GameApp';
+import { WebRecordStore } from './core/WebRecordStore';
+import { MainMenu } from './screens/MainMenu';
+import { PlayScreen } from './screens/PlayScreen';
+import { ResultScreen } from './screens/ResultScreen';
+import { Dialog } from './ui/Dialog';
+
+const root = document.querySelector<HTMLElement>('#game')!;
+const screen = root.getBoundingClientRect();
+const app = await createApplication({
+    width: screen.width,
+    height: screen.height,
+    backgroundColor: 0xe5e9e3,
+    antialias: true,
+    autoDensity: true,
+    resolution: Math.min(window.devicePixelRatio, 2),
+});
+root.append(app.canvas);
+
+await Assets.init({ manifest });
+await Promise.all([MainMenu, PlayScreen, ResultScreen, Dialog].map((scene) => prepareSceneClass(scene)));
+const game = new GameApp(new WebRecordStore(window.localStorage));
+app.stage.addChild(game);
+
+const project = projectJson as PixifactProjectConfig;
+function resize() {
+    const bounds = root.getBoundingClientRect();
+    app.renderer.resize(bounds.width, bounds.height);
+    applyPixifactViewportLayout({ root: game, stage: app.stage }, calculatePixifactViewportLayout({
+        resolution: project.resolution,
+        screen: { width: bounds.width, height: bounds.height },
+        mode: project.viewport.mode,
+    }));
+}
+resize();
+const observer = new ResizeObserver(resize);
+observer.observe(root);
+
+function onVisibilityChange() {
+    if (document.hidden) game.pause();
+}
+document.addEventListener('visibilitychange', onVisibilityChange);
+
+if (import.meta.env.DEV) {
+    const { registerPixiRuntime } = await import('pixifact/runtime-dev');
+    registerPixiRuntime(app, { getState: () => game.snapshot() });
+}
+
+if (import.meta.hot) {
+    import.meta.hot.dispose(() => {
+        observer.disconnect();
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+        app.destroy({ removeView: true }, { children: true });
+    });
+}

package/templates/game/src/screens/MainMenu.scene

@@ -0,0 +1,57 @@
+<Scene name="MainMenu" width="1080" height="1920">
+  <Panel id="page" scene="../ui/Panel.scene" left="0" right="0" top="0" bottom="0" title="Pixifact / UI 组件库">
+    <ScrollContainer id="menuScroll" slot="content" left="0" right="0" top="0" bottom="0" direction="vertical">
+      <VBoxContainer id="menuContent" width="1016" height="1424" gap="24" alignX="center">
+        <Group id="intro" width="1016" height="144">
+          <Label id="headline" left="8" right="8" top="0" height="72" text="基础组件，直接试用" fontSize="54" fontWeight="700" fill="#25322d" alignY="center" />
+          <Label id="description" left="8" right="8" top="88" height="48" text="四个基础组件，点击查看状态。" fontSize="32" fill="#516158" alignY="center" />
+        </Group>
+
+        <Panel id="buttonsPanel" scene="../ui/Panel.scene" width="1016" height="384" title="01 / Button 按钮">
+          <Group id="buttonsContent" slot="content" left="0" right="0" top="0" bottom="0">
+            <Group id="sizeRow" horizontal="0" top="0" width="888" height="96">
+              <Button id="sampleButton" scene="../ui/Button.scene" left="0" top="0" width="360" height="96" size="large" text="大号" @clicked="click">
+                <Group id="sampleIcon" slot="icon" left="0" right="0" top="0" bottom="0" eventMode="none">
+                  <Label id="star" left="0" right="0" top="0" bottom="0" text="★" fontSize="36" fill="#25322d" alignX="center" alignY="center" />
+                </Group>
+              </Button>
+              <Button id="mediumButton" scene="../ui/Button.scene" left="384" top="8" width="280" height="80" size="medium" text="中号" @clicked="click" />
+              <Button id="smallButton" scene="../ui/Button.scene" right="0" top="16" width="200" height="64" size="small" text="小号" @clicked="click" />
+            </Group>
+            <Group id="stateRow" horizontal="0" top="120" width="584" height="80">
+              <Button id="disabledButton" scene="../ui/Button.scene" left="0" top="0" width="280" height="80" text="{previewText}" disabled="{previewDisabled}" @clicked="click" />
+              <Button id="toggleButton" scene="../ui/Button.scene" right="0" top="0" width="280" height="80" text="{toggleText}" @clicked="togglePreview" />
+            </Group>
+            <Label id="clickCount" left="0" right="0" top="216" height="40" text="{clickText}" fontSize="32" fill="#516158" alignX="center" alignY="center" />
+          </Group>
+        </Panel>
+
+        <Panel id="progressPanel" scene="../ui/Panel.scene" width="1016" height="288" title="02 / ProgressBar 进度条">
+          <Group id="progressContent" slot="content" left="0" right="0" top="0" bottom="0">
+            <Label id="progressLabel" left="0" right="0" top="0" height="40" text="{progressText}" fontSize="30" fill="#516158" alignY="center" />
+            <ProgressBar id="progressBar" scene="../ui/ProgressBar.scene" left="0" right="0" top="44" height="20" />
+            <Group id="progressActions" horizontal="0" top="96" width="424" height="64">
+              <Button id="decreaseButton" scene="../ui/Button.scene" left="0" top="0" width="200" height="64" size="small" text="− 25%" @clicked="decrease" />
+              <Button id="increaseButton" scene="../ui/Button.scene" right="0" top="0" width="200" height="64" size="small" text="+ 25%" @clicked="increase" />
+            </Group>
+          </Group>
+        </Panel>
+
+        <Panel id="panelSample" scene="../ui/Panel.scene" width="1016" height="184" title="03 / Panel 面板">
+          <Group id="panelContent" slot="content" left="0" right="0" top="0" bottom="0">
+            <Label id="slotDescription" left="0" top="0" width="550" height="48" text="内容区可组合任意组件" fontSize="30" fill="#516158" alignY="center" />
+            <Label id="record" right="0" top="0" width="300" height="48" text="{bestText}" fontSize="30" fill="#516158" alignX="end" alignY="center" />
+          </Group>
+        </Panel>
+
+        <Panel id="dialogPanel" scene="../ui/Panel.scene" width="1016" height="224" title="04 / Dialog 弹窗">
+          <Group id="dialogContent" slot="content" left="0" right="0" top="0" bottom="0">
+            <Button id="dialogButton" scene="../ui/Button.scene" horizontal="0" top="8" width="360" height="80" text="{dialogText}" @clicked="openDialog" />
+          </Group>
+        </Panel>
+
+        <Button id="startButton" scene="../ui/Button.scene" width="360" height="80" text="体验游戏流程" @clicked="start" />
+      </VBoxContainer>
+    </ScrollContainer>
+  </Panel>
+</Scene>

package/templates/game/src/screens/MainMenu.ts

@@ -0,0 +1,101 @@
+import { Group } from 'pixifact/runtime';
+import { createEvent, event, part, prop, scene } from 'pixifact/scene';
+import { Button } from '../ui/Button';
+import { ProgressBar } from '../ui/ProgressBar';
+
+@scene()
+export class MainMenu extends Group {
+    @prop({ default: '最高记录 · 0' })
+    declare bestText: string;
+
+    @prop({ default: '已点击 · 0 次' })
+    declare clickText: string;
+
+    @prop({ default: true })
+    declare previewDisabled: boolean;
+
+    @prop({ default: '已禁用' })
+    declare previewText: string;
+
+    @prop({ default: '启用按钮' })
+    declare toggleText: string;
+
+    @prop({ default: '当前进度 · 50%' })
+    declare progressText: string;
+
+    @prop({ default: '打开弹窗' })
+    declare dialogText: string;
+
+    @part()
+    protected declare progressBar: ProgressBar;
+
+    @part()
+    protected declare decreaseButton: Button;
+
+    @part()
+    protected declare increaseButton: Button;
+
+    @event()
+    readonly started = createEvent();
+
+    @event()
+    readonly dialogRequested = createEvent();
+
+    private buttonClicks = 0;
+    private progress = 50;
+    private dialogResult: 'confirmed' | 'cancelled' | null = null;
+
+    onMounted() {
+        this.renderProgress();
+    }
+
+    snapshot() {
+        return {
+            buttonClicks: this.buttonClicks,
+            previewDisabled: this.previewDisabled,
+            progress: this.progress,
+            dialogResult: this.dialogResult,
+        };
+    }
+
+    click() {
+        this.buttonClicks += 1;
+        this.clickText = `已点击 · ${this.buttonClicks} 次`;
+    }
+
+    togglePreview() {
+        this.previewDisabled = !this.previewDisabled;
+        this.previewText = this.previewDisabled ? '已禁用' : '可点击';
+        this.toggleText = this.previewDisabled ? '启用按钮' : '禁用按钮';
+    }
+
+    decrease() {
+        this.progress = Math.max(0, this.progress - 25);
+        this.renderProgress();
+    }
+
+    increase() {
+        this.progress = Math.min(100, this.progress + 25);
+        this.renderProgress();
+    }
+
+    openDialog() {
+        this.dialogRequested.emit();
+    }
+
+    reportDialog(confirmed: boolean) {
+        this.dialogResult = confirmed ? 'confirmed' : 'cancelled';
+        this.dialogText = confirmed ? '已确认 · 再试' : '已取消 · 再试';
+    }
+
+    start() {
+        this.started.emit();
+    }
+
+    private renderProgress() {
+        this.progressBar.setProgress(this.progress, 100);
+        this.progressText = `当前进度 · ${this.progress}%`;
+        this.decreaseButton.disabled = this.progress === 0;
+        this.increaseButton.disabled = this.progress === 100;
+    }
+}

package/templates/game/src/screens/PlayScreen.scene

@@ -0,0 +1,13 @@
+<Scene name="PlayScreen" width="1080" height="1920">
+  <Panel id="page" scene="../ui/Panel.scene" left="0" right="0" top="0" bottom="0" title="收集星光">
+    <ScrollContainer id="playScroll" slot="content" left="0" right="0" top="0" bottom="0" direction="vertical">
+      <Group id="playContent" width="1016" height="840">
+        <Label id="score" left="48" right="48" top="100" height="72" text="{scoreText}" fontSize="42" fontWeight="700" fill="#25322d" alignX="center" alignY="center" />
+        <ProgressBar id="progress" scene="../ui/ProgressBar.scene" left="80" right="80" top="218" height="24" />
+        <Label id="instruction" left="48" right="48" top="330" height="80" text="点击下方按钮，收集一份星光。" fontSize="26" fill="#516158" alignX="center" alignY="center" />
+        <Button id="collectButton" scene="../ui/Button.scene" horizontal="0" top="520" width="420" height="96" size="large" text="✦  收集星光" @clicked="collect" />
+        <Button id="pauseButton" scene="../ui/Button.scene" horizontal="0" bottom="60" width="280" height="80" text="暂停" @clicked="pause" />
+      </Group>
+    </ScrollContainer>
+  </Panel>
+</Scene>

package/templates/game/src/screens/PlayScreen.ts

@@ -0,0 +1,31 @@
+import { Group } from 'pixifact/runtime';
+import { createEvent, event, part, prop, scene } from 'pixifact/scene';
+import { ProgressBar } from '../ui/ProgressBar';
+
+@scene()
+export class PlayScreen extends Group {
+    @prop({ default: '星光 · 0 / 8' })
+    declare scoreText: string;
+
+    @part()
+    protected declare progress: ProgressBar;
+
+    @event()
+    readonly collected = createEvent();
+
+    @event()
+    readonly paused = createEvent();
+
+    collect() {
+        this.collected.emit();
+    }
+
+    pause() {
+        this.paused.emit();
+    }
+
+    renderProgress(score: number, goal: number) {
+        this.scoreText = `星光 · ${score} / ${goal}`;
+        this.progress.setProgress(score, goal);
+    }
+}

package/templates/game/src/screens/ResultScreen.scene

@@ -0,0 +1,13 @@
+<Scene name="ResultScreen" width="1080" height="1920">
+  <Panel id="page" scene="../ui/Panel.scene" left="0" right="0" top="0" bottom="0" title="本局完成">
+    <ScrollContainer id="resultScroll" slot="content" left="0" right="0" top="0" bottom="0" direction="vertical">
+      <Group id="resultContent" width="1016" height="840">
+        <Label id="headline" left="44" right="44" top="174" height="100" text="星光已收集" fontSize="50" fontWeight="700" fill="#25322d" alignX="center" alignY="center" />
+        <Label id="score" left="48" right="48" top="348" height="64" text="{scoreText}" fontSize="32" fill="#25322d" alignX="center" />
+        <Label id="record" left="48" right="48" top="438" height="56" text="{bestText}" fontSize="26" fill="#516158" alignX="center" />
+        <Button id="restartButton" scene="../ui/Button.scene" horizontal="0" top="598" width="280" height="80" text="再玩一次" @clicked="restart" />
+        <Button id="menuButton" scene="../ui/Button.scene" horizontal="0" top="694" width="360" height="80" text="返回组件展台" @clicked="menu" />
+      </Group>
+    </ScrollContainer>
+  </Panel>
+</Scene>

package/templates/game/src/screens/ResultScreen.ts

@@ -0,0 +1,25 @@
+import { Group } from 'pixifact/runtime';
+import { createEvent, event, prop, scene } from 'pixifact/scene';
+
+@scene()
+export class ResultScreen extends Group {
+    @prop({ default: '本局 · 8 份星光' })
+    declare scoreText: string;
+
+    @prop({ default: '最高记录 · 8' })
+    declare bestText: string;
+
+    @event()
+    readonly restarted = createEvent();
+
+    @event()
+    readonly returned = createEvent();
+
+    restart() {
+        this.restarted.emit();
+    }
+
+    menu() {
+        this.returned.emit();
+    }
+}

package/templates/game/src/styles.css

@@ -0,0 +1,21 @@
+html,
+body,
+#game {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    overflow: hidden;
+    background: #e5e9e3;
+}
+
+#game {
+    overflow: hidden;
+    touch-action: none;
+}
+
+canvas {
+    display: block;
+}

package/templates/game/src/ui/Button.scene

@@ -0,0 +1,10 @@
+<Scene name="Button" width="280" height="80" eventMode="static" cursor="pointer" on:pointerdown="press" on:pointerup="release" on:pointerupoutside="release" on:pointerout="release" on:pointertap="activate">
+  <Group id="visual" left="0" right="0" top="0" bottom="0" eventMode="none">
+    <ButtonBackground id="background" scene="./nine/ButtonBackground.scene" left="0" right="0" top="0" bottom="0" />
+    <Label id="label" text="{text}" left="{size.labelPadding}" right="{size.labelPadding}" top="0" bottom="0" fontSize="{size.fontSize}" fontFamily="sans-serif" fontWeight="700" fill="#25322d" alignX="center" alignY="center" eventMode="none" />
+    <Group id="iconHost" left="{size.iconInset}" vertical="0" width="{size.iconSize}" height="{size.iconSize}" eventMode="none">
+      <slot name="icon" />
+    </Group>
+    <Rect id="disabledShade" left="0" right="0" top="0" bottom="0" fillColor="#25322d" fillAlpha="0.18" radius="18" visible="{disabled}" eventMode="none" />
+  </Group>
+</Scene>

package/templates/game/src/ui/Button.ts

@@ -0,0 +1,84 @@
+import type { Container } from 'pixi.js';
+import { Group } from 'pixifact/runtime';
+import { bindSceneNodeProp, createEvent, defineVariants, event, part, prop, scene, slot } from 'pixifact/scene';
+
+const buttonSizes = defineVariants({
+    large: { width: 360, height: 96, fontSize: 42, labelPadding: 60, iconInset: 28, iconSize: 36 },
+    medium: { width: 280, height: 80, fontSize: 36, labelPadding: 48, iconInset: 24, iconSize: 32 },
+    small: { width: 200, height: 64, fontSize: 32, labelPadding: 32, iconInset: 16, iconSize: 28 },
+});
+
+@scene()
+export class Button extends Group {
+    @prop({ default: '按钮' })
+    declare text: string;
+
+    @prop({ default: false })
+    declare disabled: boolean;
+
+    @prop({ default: 'medium', variants: buttonSizes })
+    declare size: keyof typeof buttonSizes;
+
+    @part()
+    protected declare visual: Group;
+
+    @event()
+    readonly clicked = createEvent();
+
+    @slot()
+    declare readonly icon: Container;
+
+    private releasedAt: number | null = null;
+
+    onMounted() {
+        bindSceneNodeProp(this, { kind: 'binding', path: ['size', 'width'] }, this, 'width');
+        bindSceneNodeProp(this, { kind: 'binding', path: ['size', 'height'] }, this, 'height');
+        this.on('pointercancel', this.release, this);
+    }
+
+    press() {
+        if (this.disabled) return;
+        this.releasedAt = null;
+        this.setVisualScale(0.97);
+        this.onRender = this.updateAnimation;
+    }
+
+    release() {
+        if (this.visual.scale.x === 1) return;
+        this.releasedAt = performance.now();
+    }
+
+    activate() {
+        if (this.disabled) return;
+        this.press();
+        this.release();
+        this.clicked.emit();
+    }
+
+    override layout() {
+        super.layout();
+        // Group 在 Scene 挂载完成前也会布局；@part 在挂载后注入。
+        if (this.visual) this.setVisualScale(this.visual.scale.x);
+    }
+
+    private setVisualScale(scale: number) {
+        this.visual.scale.set(scale);
+        this.visual.position.set(this.width * (1 - scale) / 2, this.height * (1 - scale) / 2);
+    }
+
+    private updateAnimation = () => {
+        if (this.disabled) {
+            this.setVisualScale(1);
+            this.releasedAt = null;
+            this.onRender = null;
+            return;
+        }
+        if (this.releasedAt === null) return;
+        const progress = Math.min(1, (performance.now() - this.releasedAt) / 140);
+        this.setVisualScale(1 - 0.03 * (1 - progress) ** 3);
+        if (progress === 1) {
+            this.releasedAt = null;
+            this.onRender = null;
+        }
+    };
+}

package/templates/game/src/ui/Dialog.scene

@@ -0,0 +1,10 @@
+<Scene name="Dialog" width="1080" height="1920" eventMode="static">
+  <Rect id="shade" left="0" right="0" top="0" bottom="0" fillColor="#25322d" fillAlpha="0.42" eventMode="none" />
+  <Group id="body" horizontal="0" vertical="0" width="800" height="400">
+    <PanelBackground id="background" scene="./nine/PanelBackground.scene" left="0" right="0" top="0" bottom="0" />
+    <Label id="titleLabel" text="{title}" left="40" right="40" top="24" height="64" fontSize="44" fontFamily="sans-serif" fontWeight="700" fill="#25322d" alignX="center" alignY="center" eventMode="none" />
+    <Label id="messageLabel" text="{message}" left="40" right="40" top="112" height="136" fontSize="36" fontFamily="sans-serif" fill="#52635b" alignX="center" alignY="center" wordWrap="true" eventMode="none" />
+    <Button id="confirm" scene="./Button.scene" left="40" bottom="32" width="320" height="80" size="medium" text="{confirmText}" @clicked="confirm" />
+    <Button id="cancel" scene="./Button.scene" right="40" bottom="32" width="320" height="80" size="medium" text="{cancelText}" @clicked="cancel" />
+  </Group>
+</Scene>