第08章 - Phaser渲染工具箱

export function createPhaserGame(ctx: GameContext, opts: CreateGameOptions): Phaser.Game {
  const { width, height } = ctx.manifest.designSize;

  return new Phaser.Game({
    type: Phaser.AUTO,
    parent: ctx.container,
    width,
    height,
    backgroundColor: THEME.ink,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    audio: { noAudio: true },
    scene: opts.scenes,
  });
}

protected addButton(x, y, label, onClick, opts: ButtonOptions = {}) {
  const w = opts.width ?? 520;
  const h = opts.height ?? 136;
  const color = opts.color ?? THEME.red;
  const container = this.add.container(x, y);

  const lip = this.add.graphics();
  roundRect(lip, -w / 2, -h / 2 + 9, w, h, h / 2, shade(color, 0.72), THEME.outline, 5);
  const face = this.add.graphics();
  roundRect(face, -w / 2, -h / 2, w, h, h / 2, color, THEME.outline, 5);

  const text = this.add.text(0, -2, label, {
    ...textStyle(opts.fontSize ?? 44, opts.textColor ?? CSS.card, true),
    align: 'center',
    // 默认开 wordWrap：长选项曾经直接溢出按钮
    wordWrap: opts.wrap === false ? undefined : { width: w - 64, useAdvancedWrap: true },
  }).setOrigin(0.5);

  container.add([lip, face, text]);
  container.setSize(w, h);
  container.setInteractive(
    new Phaser.Geom.Rectangle(-w / 2, -h / 2, w, h),
    Phaser.Geom.Rectangle.Contains,
  );
  container.on('pointerdown', () => {
    if (opts.disabled) return;
    this.sfx('tap');
    this.tweens.add({ targets: [face, text], y: 9, duration: 60, yoyo: true });
    onClick();
  });
  return container;
}

protected tapToContinue(onDone: () => void, handAt?: { x?: number; y?: number }): void {
  const hand = createHand(this, handAt?.x ?? this.W / 2, handAt?.y ?? this.H - 150, 1.15);
  const zone = this.add.zone(this.W / 2, this.H / 2, this.W, this.H).setInteractive({ useHandCursor: true });
  let done = false;
  const finish = () => { /* 去重 + 清理 */ };
  zone.once('destroy', () => { done = true; });
  // 连点保护：孩子连点两下时，第二下会落在**下一幕刚建好的**点击区上
  const armedAt = this.ctx.services.now() + 350;
  zone.on('pointerdown', () => {
    if (this.ctx.services.now() < armedAt) return;
    this.sfx('tap');
    finish();
  });
  if (this.autoplay) this.time.delayedCall(120, finish);
}

/** 圆润卡通配色：厚描边 + 暖亮色，比纯黑描边更柔和 */
export const THEME = {
  outline: 0x3a2f26, ink: 0x3a2f26, inkSoft: 0x6b5a49,
  paper: 0xfdf3dc, paperDeep: 0xf0e0bd, card: 0xfffaf0,
  red: 0xe0554a, redDeep: 0xb03a31,
  teal: 0x3d8f86, tealDeep: 0x2c6b64,
  gold: 0xf2b134, goldDeep: 0xc98a1c,
  sky: 0xc6e8f5, skyDeep: 0x9fd4ea,
  water: 0x59abda, waterDeep: 0x3283b3,
  sand: 0xf3e0b0, sandDeep: 0xdfc78d,
  wood: 0xc98a4b, woodDeep: 0x96612b,
  stone: 0xaeaaa2, stoneDeep: 0x827d75,
  elephant: 0xb6b1a8, elephantDeep: 0x918c84,
  leaf: 0x74b96c,
} as const;

export const CSS = {
  ink: '#3a2f26', inkSoft: '#6b5a49', paper: '#fdf3dc', card: '#fffaf0',
  red: '#e0554a', teal: '#3d8f86', gold: '#c98a1c', white: '#ffffff',
  /**
   * 深色版本，用于浅底上的文字与图标。
   * 原始色放在浅底上对比度不够：红/纸 3.42:1、青/纸 3.48:1、金/卡 2.83:1，
   * 都过不了 WCAG AA。下面这三个分别是 5.44 / 5.61 / 5.42。
   */
  redDeep: '#b03a31', tealDeep: '#2c6b64', goldDeep: '#8a5f10',
} as const;

export const FONT_STACK =
  '"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif';

export function textStyle(size: number, color: string = CSS.ink, bold = false) {
  return { fontFamily: FONT_STACK, fontSize: size + 'px', color, fontStyle: bold ? 'bold' : 'normal' };
}

circle(g, cx + 92 * s, cy - 12 * s, 58 * s, body, THEME.outline, stroke);   // 头
circle(g, cx + 58 * s, cy - 30 * s, 44 * s, dark, THEME.outline, stroke);   // 耳朵

export function createDragController(scene: Phaser.Scene): DragController {
  const targets: GrabTarget[] = [];
  let active: { target: GrabTarget; dx: number; dy: number } | null = null;

  const onDown = (pointer: Phaser.Input.Pointer): void => {
    if (active) return;
    let best: GrabTarget | null = null;
    let bestDist = Number.POSITIVE_INFINITY;
    for (const target of targets) {
      if (target.enabled && !target.enabled()) continue;
      const dist = Math.hypot(pointer.x - target.obj.x, pointer.y - target.obj.y);
      if (dist <= target.radius && dist < bestDist) { best = target; bestDist = dist; }
    }
    if (!best) return;
    active = { target: best, dx: pointer.x - best.obj.x, dy: pointer.y - best.obj.y };
    best.onGrab?.(best.obj);
  };

  const onMove = (pointer) => { if (active) active.target.obj.setPosition(pointer.x - active.dx, pointer.y - active.dy); };
  const onUp = () => { /* 松手 → onDrop */ };

  scene.input.on('pointerdown', onDown);
  scene.input.on('pointermove', onMove);
  scene.input.on('pointerup', onUp);
  scene.input.on('pointerupoutside', onUp);

  return { add, remove, destroy };
}

export interface GrabTarget {
  obj: Phaser.GameObjects.Container;
  /** 抓取半径：小朋友手指粗，判定必须宽松 */
  radius: number;
  /** 什么时候可以被抓（例如"大象上船后就不能再拖"） */
  enabled?: () => boolean;
  onGrab?: (obj) => void;
  onDrop?: (obj) => void;
}