jakciehan
431 lines
15 KiB
TypeScript
431 lines
15 KiB
TypeScript
import { _decorator, Component, director, Node, Label, Button, UITransform, Color, Vec3, Graphics, Sprite, SpriteFrame, Texture2D, resources, Rect, Size, ImageAsset } from 'cc';
|
||
import { UIFlowMgr, ISceneEnter } from '../ui/UIFlowMgr';
|
||
import { DESIGN_WIDTH, DESIGN_HEIGHT } from '../common/Constants';
|
||
|
||
const { ccclass, property } = _decorator;
|
||
|
||
/** Maps abstract SceneId → physical Cocos Creator scene name. */
|
||
const SCENE_MAP: Record<string, string> = {
|
||
boot: 'Boot',
|
||
story_intro: 'StoryIntro',
|
||
main_menu: 'MainMenu',
|
||
// level_select currently reuses MainMenu until a dedicated LevelSelect scene exists.
|
||
level_select: 'MainMenu',
|
||
// `gameplay` is dispatched by levelId — resolved at runtime.
|
||
gameplay: 'Level_1_1',
|
||
settlement: 'Settlement',
|
||
// Settings panel is overlayed on MainMenu for the MVP.
|
||
settings: 'MainMenu',
|
||
};
|
||
|
||
/** levelId → physical scene name mapping (chapter 1 only). */
|
||
const LEVEL_SCENE_MAP: Record<string, string> = {
|
||
'1-1': 'Level_1_1',
|
||
'1-2': 'Level_1_2',
|
||
'1-3': 'Level_1_3',
|
||
'1-4': 'Level_1_4',
|
||
'1-5': 'Level_1_5',
|
||
'1-5-boss': 'Boss_ShuangHuanFang',
|
||
};
|
||
|
||
/** Level definitions for the level-select screen (chapter 1 MVP). */
|
||
const LEVEL_DEFS: ReadonlyArray<{ id: string; label: string }> = [
|
||
{ id: '1-1', label: '1-1 森林入口' },
|
||
{ id: '1-2', label: '1-2 竹林深处' },
|
||
{ id: '1-3', label: '1-3 城墙之下' },
|
||
{ id: '1-4', label: '1-4 密道暗行' },
|
||
{ id: '1-5', label: '1-5 魔城前庭' },
|
||
{ id: '1-5-boss', label: 'Boss 双幻坊' },
|
||
];
|
||
|
||
/**
|
||
* MainMenu scene entry (task 9.2 hookup).
|
||
*
|
||
* Owns a `UIFlowMgr` instance and translates each abstract `onSceneEnter`
|
||
* callback into a concrete `director.loadScene` call. Attach this component
|
||
* to the root node of `MainMenu.scene`.
|
||
*
|
||
* Supports two display modes reusing the same scene:
|
||
* - **main_menu**: title + Start / Settings buttons
|
||
* - **level_select**: chapter heading + level buttons + Back button
|
||
*
|
||
* When `autoBuildUI` is enabled (default), all UI is created
|
||
* programmatically so the scene is usable out of the box even before
|
||
* any art pass.
|
||
*/
|
||
@ccclass('MainMenuEntry')
|
||
export class MainMenuEntry extends Component {
|
||
@property({ tooltip: '是否自动生成 Start / Settings 按钮 (方便没美术时就能跑通)' })
|
||
public autoBuildUI: boolean = true;
|
||
|
||
private flow: UIFlowMgr | undefined;
|
||
/** Nodes created in main-menu mode, so we can remove them when switching. */
|
||
private menuNodes: Node[] = [];
|
||
/** Nodes created in level-select mode, so we can remove them when switching. */
|
||
private levelSelectNodes: Node[] = [];
|
||
|
||
protected onLoad(): void {
|
||
this.flow = new UIFlowMgr(undefined, {
|
||
onSceneEnter: (ev) => this.handleSceneEnter(ev),
|
||
});
|
||
if (this.autoBuildUI) this.buildMainMenuUI();
|
||
}
|
||
|
||
/** Bind this to the "Start" button's click event in the Inspector. */
|
||
public onPressStart(): void {
|
||
this.flow?.onPressStartGame();
|
||
}
|
||
|
||
/** Bind this to the "Settings" button's click event. */
|
||
public onPressSettings(): void {
|
||
this.flow?.onOpenSettings();
|
||
}
|
||
|
||
/** Pick a level from the level-select screen. */
|
||
public onPressLevel(levelId: string): void {
|
||
this.flow?.onPickLevel(levelId);
|
||
}
|
||
|
||
/** Go back from level-select to main-menu. */
|
||
public onPressBackToMenu(): void {
|
||
this.showMainMenu();
|
||
}
|
||
|
||
private handleSceneEnter(ev: ISceneEnter): void {
|
||
const payload = ev.payload ?? {};
|
||
|
||
// gameplay: always load a different scene.
|
||
if (ev.scene === 'gameplay' && typeof payload.levelId === 'string') {
|
||
const physical = LEVEL_SCENE_MAP[payload.levelId];
|
||
if (physical) {
|
||
director.loadScene(physical);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// level_select: we reuse this scene — just swap UI panels.
|
||
if (ev.scene === 'level_select') {
|
||
this.showLevelSelect();
|
||
return;
|
||
}
|
||
|
||
// settings: for MVP, overlayed on MainMenu — just swap to menu mode.
|
||
if (ev.scene === 'settings') {
|
||
this.showMainMenu();
|
||
return;
|
||
}
|
||
|
||
// For any other scene (boot / story_intro / settlement / main_menu),
|
||
// load the physical scene normally.
|
||
const physical = SCENE_MAP[ev.scene];
|
||
if (physical && ev.scene !== 'main_menu') {
|
||
director.loadScene(physical);
|
||
} else if (ev.scene === 'main_menu') {
|
||
this.showMainMenu();
|
||
}
|
||
}
|
||
|
||
// ------------------------------------------------------------------
|
||
// UI mode switching
|
||
// ------------------------------------------------------------------
|
||
|
||
private showMainMenu(): void {
|
||
this.clearNodes(this.levelSelectNodes);
|
||
if (this.menuNodes.length === 0 && this.autoBuildUI) {
|
||
this.buildMainMenuUI();
|
||
}
|
||
}
|
||
|
||
private showLevelSelect(): void {
|
||
this.clearNodes(this.menuNodes);
|
||
if (this.levelSelectNodes.length === 0 && this.autoBuildUI) {
|
||
this.buildLevelSelectUI();
|
||
}
|
||
}
|
||
|
||
private clearNodes(arr: Node[]): void {
|
||
for (const n of arr) {
|
||
if (n.isValid) {
|
||
n.removeFromParent();
|
||
n.destroy();
|
||
}
|
||
}
|
||
arr.length = 0;
|
||
}
|
||
|
||
// ------------------------------------------------------------------
|
||
// Auto-built UI (development affordance; art pass will replace it)
|
||
// ------------------------------------------------------------------
|
||
private buildMainMenuUI(): void {
|
||
// Ensure the host node has a UITransform matching the design resolution.
|
||
ensureCanvasSize(this.node);
|
||
|
||
// Title.
|
||
this.menuNodes.push(createLabel(this.node, '影 之 传 说', 0, 140, 44, Color.WHITE));
|
||
|
||
// Start button (centered, 40 above origin).
|
||
this.menuNodes.push(createButton(this.node, 'Start', 0, 40, 220, 60, () => this.onPressStart()));
|
||
|
||
// Settings button (centered, 40 below origin).
|
||
this.menuNodes.push(createButton(this.node, 'Settings', 0, -40, 220, 60, () => this.onPressSettings()));
|
||
|
||
// Hint line at the bottom.
|
||
this.menuNodes.push(createLabel(this.node, 'Chapter 1 · MVP', 0, -200, 20, new Color(180, 180, 180, 255)));
|
||
}
|
||
|
||
private buildLevelSelectUI(): void {
|
||
ensureCanvasSize(this.node);
|
||
|
||
// Chapter heading.
|
||
this.levelSelectNodes.push(
|
||
createLabel(this.node, '第一章 青叶之刃', 0, 220, 36, Color.WHITE),
|
||
);
|
||
|
||
// Level buttons — laid out vertically with even spacing.
|
||
const startY = 140;
|
||
const gapY = 55;
|
||
for (let i = 0; i < LEVEL_DEFS.length; i++) {
|
||
const def = LEVEL_DEFS[i];
|
||
const y = startY - i * gapY;
|
||
this.levelSelectNodes.push(
|
||
createButton(this.node, def.label, 0, y, 280, 44, () => this.onPressLevel(def.id)),
|
||
);
|
||
}
|
||
|
||
// Back button at the bottom.
|
||
this.levelSelectNodes.push(
|
||
createButton(this.node, 'Back', 0, -200, 160, 44, () => this.onPressBackToMenu()),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ======================================================================
|
||
// Shared UI helpers — intentionally kept inline (no external module) so
|
||
// each Scene Entry stays self-contained and easy to remove once real UI is
|
||
// authored in the editor.
|
||
// ======================================================================
|
||
|
||
function ensureCanvasSize(host: Node): void {
|
||
let ut = host.getComponent(UITransform);
|
||
if (!ut) ut = host.addComponent(UITransform);
|
||
ut.setContentSize(DESIGN_WIDTH, DESIGN_HEIGHT);
|
||
host.setPosition(0, 0, 0);
|
||
}
|
||
|
||
function createLabel(parent: Node, text: string, x: number, y: number, fontSize: number, color: Color): Node {
|
||
const n = new Node('AutoLabel');
|
||
n.layer = parent.layer;
|
||
parent.addChild(n);
|
||
const ut = n.addComponent(UITransform);
|
||
ut.setContentSize(DESIGN_WIDTH, fontSize * 1.6);
|
||
const lb = n.addComponent(Label);
|
||
lb.useSystemFont = true;
|
||
lb.string = text;
|
||
lb.fontSize = fontSize;
|
||
lb.lineHeight = Math.floor(fontSize * 1.2);
|
||
lb.color = color;
|
||
lb.horizontalAlign = 1; // CENTER
|
||
lb.verticalAlign = 1; // CENTER
|
||
n.setPosition(new Vec3(x, y, 0));
|
||
return n;
|
||
}
|
||
|
||
function createButton(
|
||
parent: Node,
|
||
text: string,
|
||
x: number,
|
||
y: number,
|
||
w: number,
|
||
h: number,
|
||
onClick: () => void
|
||
): Node {
|
||
const n = new Node(`Btn_${text}`);
|
||
n.layer = parent.layer;
|
||
parent.addChild(n);
|
||
const ut = n.addComponent(UITransform);
|
||
ut.setContentSize(w, h);
|
||
|
||
// Background drawn via Graphics — avoids needing any texture asset.
|
||
const g = n.addComponent(Graphics);
|
||
g.fillColor = new Color(40, 40, 60, 230);
|
||
g.rect(-w / 2, -h / 2, w, h);
|
||
g.fill();
|
||
g.strokeColor = new Color(200, 200, 220, 255);
|
||
g.lineWidth = 2;
|
||
g.rect(-w / 2, -h / 2, w, h);
|
||
g.stroke();
|
||
|
||
// Label child for the text.
|
||
const labelNode = new Node('Label');
|
||
labelNode.layer = parent.layer;
|
||
n.addChild(labelNode);
|
||
const lut = labelNode.addComponent(UITransform);
|
||
lut.setContentSize(w, h);
|
||
const lb = labelNode.addComponent(Label);
|
||
lb.useSystemFont = true;
|
||
lb.string = text;
|
||
lb.fontSize = 24;
|
||
lb.lineHeight = 28;
|
||
lb.color = Color.WHITE;
|
||
lb.horizontalAlign = 1;
|
||
lb.verticalAlign = 1;
|
||
|
||
const btn = n.addComponent(Button);
|
||
btn.transition = Button.Transition.SCALE;
|
||
btn.target = n;
|
||
btn.zoomScale = 0.95;
|
||
n.on(Node.EventType.TOUCH_END, onClick, n);
|
||
|
||
n.setPosition(new Vec3(x, y, 0));
|
||
return n;
|
||
}
|
||
|
||
// Re-export helpers so sibling Scene Entries can reuse them.
|
||
export { ensureCanvasSize, createLabel, createButton, createSprite, createSpriteSheetFrame, createSolidRect };
|
||
|
||
// ======================================================================
|
||
// Sprite helpers (task 10.1 hookup) — load a PNG from `resources/` and
|
||
// attach it to a fresh child Node. Returned synchronously; the Sprite's
|
||
// `spriteFrame` is assigned once `resources.load` resolves.
|
||
//
|
||
// Paths passed in are **relative to `assets/resources`** and **without
|
||
// extension**. Example: `textures/characters/kage_red` — the helper will
|
||
// append `/spriteFrame` automatically.
|
||
// ======================================================================
|
||
|
||
// ======================================================================
|
||
// Internal: Load a PNG from `resources/` as a SpriteFrame.
|
||
//
|
||
// Strategy — try two paths so it works regardless of .meta type:
|
||
// 1. `resources.load(path, SpriteFrame)` — works when the .meta has
|
||
// `type: "sprite-frame"` (Creator auto-generates the sub-asset).
|
||
// 2. Fallback: `resources.load(path, ImageAsset)` → Texture2D →
|
||
// SpriteFrame — works when .meta has `type: "texture"`.
|
||
// ======================================================================
|
||
|
||
function _loadSpriteFrameFromImage(
|
||
resPath: string,
|
||
onReady: (sf: SpriteFrame) => void,
|
||
): void {
|
||
// Try the direct SpriteFrame path first (works with sprite-frame meta).
|
||
resources.load(resPath, SpriteFrame, (err, sf) => {
|
||
if (!err && sf) {
|
||
onReady(sf as SpriteFrame);
|
||
return;
|
||
}
|
||
// Fallback: load raw image and build SpriteFrame manually.
|
||
resources.load(resPath, ImageAsset, (err2, imgAsset) => {
|
||
if (err2 || !imgAsset) {
|
||
console.warn(`[_loadSpriteFrameFromImage] Failed to load '${resPath}' (both paths):`, err, err2);
|
||
return;
|
||
}
|
||
const tex = new Texture2D();
|
||
tex.image = imgAsset as ImageAsset;
|
||
const frame = new SpriteFrame();
|
||
frame.texture = tex;
|
||
frame.rect = new Rect(0, 0, tex.width, tex.height);
|
||
frame.originalSize = new Size(tex.width, tex.height);
|
||
onReady(frame);
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Create a child Node with a Sprite that displays the entire PNG at
|
||
* `resPath`. If `w` / `h` are omitted the node will be resized to the
|
||
* native image size once the texture finishes loading.
|
||
*
|
||
* NOTE: Loads via `ImageAsset` → `Texture2D` → `SpriteFrame` pipeline
|
||
* instead of relying on a `/spriteFrame` sub-asset, because PNG .meta
|
||
* files may not have `type: "sprite-frame"`.
|
||
*/
|
||
function createSprite(
|
||
parent: Node,
|
||
resPath: string,
|
||
x: number,
|
||
y: number,
|
||
w?: number,
|
||
h?: number,
|
||
opts?: { name?: string; color?: Color; flipX?: boolean }
|
||
): Node {
|
||
const n = new Node(opts?.name ?? `Sprite_${resPath.split('/').pop()}`);
|
||
n.layer = parent.layer;
|
||
parent.addChild(n);
|
||
const ut = n.addComponent(UITransform);
|
||
if (w != null && h != null) ut.setContentSize(w, h);
|
||
const sp = n.addComponent(Sprite);
|
||
sp.sizeMode = Sprite.SizeMode.CUSTOM;
|
||
if (opts?.color) sp.color = opts.color;
|
||
n.setPosition(new Vec3(x, y, 0));
|
||
if (opts?.flipX) n.setScale(-Math.abs(n.scale.x), n.scale.y, n.scale.z);
|
||
|
||
_loadSpriteFrameFromImage(resPath, (sf) => {
|
||
if (!n.isValid) return;
|
||
sp.spriteFrame = sf;
|
||
if (w == null || h == null) {
|
||
ut.setContentSize(sf.rect.width, sf.rect.height);
|
||
}
|
||
});
|
||
return n;
|
||
}
|
||
|
||
/**
|
||
* Create a child Node that renders a single frame out of a horizontal
|
||
* sprite-sheet PNG. `frameIndex` is 0-based; `frameW`/`frameH` describe
|
||
* each frame's pixel size; the sheet is expected to lay frames left-to-
|
||
* right in one row (matches `gen_pixel_art_assets.py`).
|
||
*
|
||
* The returned Node is shown at `displayW`×`displayH` (defaults to the
|
||
* native frame size — i.e. 1 CSS px per source px).
|
||
*/
|
||
function createSpriteSheetFrame(
|
||
parent: Node,
|
||
resPath: string,
|
||
frameIndex: number,
|
||
frameW: number,
|
||
frameH: number,
|
||
x: number,
|
||
y: number,
|
||
displayW?: number,
|
||
displayH?: number,
|
||
opts?: { name?: string; flipX?: boolean }
|
||
): Node {
|
||
const n = new Node(opts?.name ?? `Frame_${resPath.split('/').pop()}_${frameIndex}`);
|
||
n.layer = parent.layer;
|
||
parent.addChild(n);
|
||
const ut = n.addComponent(UITransform);
|
||
ut.setContentSize(displayW ?? frameW, displayH ?? frameH);
|
||
const sp = n.addComponent(Sprite);
|
||
sp.sizeMode = Sprite.SizeMode.CUSTOM;
|
||
n.setPosition(new Vec3(x, y, 0));
|
||
if (opts?.flipX) n.setScale(-Math.abs(n.scale.x), n.scale.y, n.scale.z);
|
||
|
||
_loadSpriteFrameFromImage(resPath, (sf) => {
|
||
if (!n.isValid) return;
|
||
// Slice a single frame out of the full sheet.
|
||
const sliced = new SpriteFrame();
|
||
sliced.texture = sf.texture;
|
||
sliced.rect = new Rect(frameIndex * frameW, 0, frameW, frameH);
|
||
sliced.originalSize = new Size(frameW, frameH);
|
||
sp.spriteFrame = sliced;
|
||
});
|
||
return n;
|
||
}
|
||
|
||
/**
|
||
* Utility for semi-transparent overlays (e.g. story-page text backdrop).
|
||
*/
|
||
function createSolidRect(parent: Node, x: number, y: number, w: number, h: number, color: Color): Node {
|
||
const n = new Node('SolidRect');
|
||
n.layer = parent.layer;
|
||
parent.addChild(n);
|
||
const ut = n.addComponent(UITransform);
|
||
ut.setContentSize(w, h);
|
||
const g = n.addComponent(Graphics);
|
||
g.fillColor = color;
|
||
g.rect(-w / 2, -h / 2, w, h);
|
||
g.fill();
|
||
n.setPosition(new Vec3(x, y, 0));
|
||
return n;
|
||
}
|