302 行
10 KiB
TypeScript
302 行
10 KiB
TypeScript
|
import { _decorator, Component, Node, Label, Sprite, Color, UITransform, Size, Layout, Widget } from 'cc';
|
|||
|
|
import { UITheme } from '../common/UITheme';
|
|||
|
|
import { UIBase } from '../common/UIBase';
|
|||
|
|
|
|||
|
|
const { ccclass, property } = _decorator;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 主界面 - 吐纳（修炼）界面
|
|||
|
|
* 基于江湖截图：顶部角色信息栏 + 修炼区域 + 底部导航
|
|||
|
|
*/
|
|||
|
|
@ccclass('MainScreen')
|
|||
|
|
export class MainScreen extends UIBase {
|
|||
|
|
|
|||
|
|
@property(Node) topBar: Node = null!;
|
|||
|
|
@property(Node) characterArea: Node = null!;
|
|||
|
|
@property(Node) cultivationArea: Node = null!;
|
|||
|
|
@property(Node) newsArea: Node = null!;
|
|||
|
|
@property(Node) bottomNav: Node = null!;
|
|||
|
|
|
|||
|
|
start() {
|
|||
|
|
this.initTopBar();
|
|||
|
|
this.initCharacterArea();
|
|||
|
|
this.initCultivationArea();
|
|||
|
|
this.initNewsArea();
|
|||
|
|
this.initBottomNav();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 顶部信息栏
|
|||
|
|
* 包含：角色头像、身家财产、江湖名望、内力/悟性
|
|||
|
|
*/
|
|||
|
|
private initTopBar() {
|
|||
|
|
if (!this.topBar) return;
|
|||
|
|
|
|||
|
|
const topBarLayout = this.topBar.addComponent(Layout);
|
|||
|
|
topBarLayout.type = Layout.Type.VERTICAL;
|
|||
|
|
topBarLayout.resizeMode = Layout.ResizeMode.CONTAINER;
|
|||
|
|
|
|||
|
|
// 资源栏
|
|||
|
|
const resourceBar = this.createResourceBar();
|
|||
|
|
resourceBar.setParent(this.topBar);
|
|||
|
|
|
|||
|
|
// 角色信息
|
|||
|
|
const charInfo = this.createCharacterInfo();
|
|||
|
|
charInfo.setParent(this.topBar);
|
|||
|
|
|
|||
|
|
// 内力/悟性
|
|||
|
|
const statsBar = this.createStatsBar();
|
|||
|
|
statsBar.setParent(this.topBar);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createResourceBar(): Node {
|
|||
|
|
const node = new Node('ResourceBar');
|
|||
|
|
const transform = node.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(720, 80));
|
|||
|
|
node.setParent(this.topBar);
|
|||
|
|
|
|||
|
|
// 身家财产标签
|
|||
|
|
const wealthLabel = new Node('WealthLabel');
|
|||
|
|
const label = wealthLabel.addComponent(Label);
|
|||
|
|
label.string = '身家财产';
|
|||
|
|
label.fontSize = UITheme.FONT_SIZE.SM;
|
|||
|
|
label.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
|
|||
|
|
wealthLabel.setParent(node);
|
|||
|
|
|
|||
|
|
// 铜钱图标+数值
|
|||
|
|
const copperNode = new Node('Copper');
|
|||
|
|
const copperLabel = copperNode.addComponent(Label);
|
|||
|
|
copperLabel.string = '🪙 389953';
|
|||
|
|
copperLabel.fontSize = UITheme.FONT_SIZE.MD;
|
|||
|
|
copperLabel.color = this.hexToColor(UITheme.COLORS.GOLD_PRIMARY);
|
|||
|
|
copperNode.setParent(node);
|
|||
|
|
|
|||
|
|
// 灵石图标+数值
|
|||
|
|
const stoneNode = new Node('SpiritStone');
|
|||
|
|
const stoneLabel = stoneNode.addComponent(Label);
|
|||
|
|
stoneLabel.string = '💎 0';
|
|||
|
|
stoneLabel.fontSize = UITheme.FONT_SIZE.MD;
|
|||
|
|
stoneLabel.color = this.hexToColor(UITheme.COLORS.TEXT_BLUE);
|
|||
|
|
stoneNode.setParent(node);
|
|||
|
|
|
|||
|
|
return node;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createCharacterInfo(): Node {
|
|||
|
|
const node = new Node('CharacterInfo');
|
|||
|
|
const transform = node.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(720, 100));
|
|||
|
|
node.setParent(this.topBar);
|
|||
|
|
|
|||
|
|
// 角色名
|
|||
|
|
const nameLabel = new Node('Name');
|
|||
|
|
const label = nameLabel.addComponent(Label);
|
|||
|
|
label.string = '角色名';
|
|||
|
|
label.fontSize = UITheme.FONT_SIZE.LG;
|
|||
|
|
label.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
|
|||
|
|
nameLabel.setParent(node);
|
|||
|
|
|
|||
|
|
// 称号
|
|||
|
|
const titleNode = new Node('Title');
|
|||
|
|
const titleLabel = titleNode.addComponent(Label);
|
|||
|
|
titleLabel.string = '锐不可挡';
|
|||
|
|
titleLabel.fontSize = UITheme.FONT_SIZE.SM;
|
|||
|
|
titleLabel.color = this.hexToColor(UITheme.COLORS.TEXT_ORANGE);
|
|||
|
|
titleNode.setParent(node);
|
|||
|
|
|
|||
|
|
// 江湖名望
|
|||
|
|
const fameNode = new Node('Fame');
|
|||
|
|
const fameLabel = fameNode.addComponent(Label);
|
|||
|
|
fameLabel.string = '江湖名望：独孤求败 | 3387598';
|
|||
|
|
fameLabel.fontSize = UITheme.FONT_SIZE.SM;
|
|||
|
|
fameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
|
|||
|
|
fameNode.setParent(node);
|
|||
|
|
|
|||
|
|
return node;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createStatsBar(): Node {
|
|||
|
|
const node = new Node('StatsBar');
|
|||
|
|
const transform = node.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(720, 60));
|
|||
|
|
node.setParent(this.topBar);
|
|||
|
|
|
|||
|
|
const neiLiLabel = new Node('NeiLi');
|
|||
|
|
const label = neiLiLabel.addComponent(Label);
|
|||
|
|
label.string = '内力：65,075,153,913';
|
|||
|
|
label.fontSize = UITheme.FONT_SIZE.SM;
|
|||
|
|
label.color = this.hexToColor(UITheme.COLORS.TEXT_WHITE);
|
|||
|
|
neiLiLabel.setParent(node);
|
|||
|
|
|
|||
|
|
const wuXingLabel = new Node('WuXing');
|
|||
|
|
const wuXing = wuXingLabel.addComponent(Label);
|
|||
|
|
wuXing.string = '悟性：26,459,801';
|
|||
|
|
wuXing.fontSize = UITheme.FONT_SIZE.SM;
|
|||
|
|
wuXing.color = this.hexToColor(UITheme.COLORS.TEXT_GREEN);
|
|||
|
|
wuXingLabel.setParent(node);
|
|||
|
|
|
|||
|
|
return node;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 角色展示区域
|
|||
|
|
* 包含：角色立绘/头像 + 火焰特效
|
|||
|
|
*/
|
|||
|
|
private initCharacterArea() {
|
|||
|
|
if (!this.characterArea) return;
|
|||
|
|
|
|||
|
|
const transform = this.characterArea.getComponent(UITransform) || this.characterArea.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(720, 400));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 修炼区域
|
|||
|
|
* 包含：经脉信息、修炼按钮、丹田、外练/内练
|
|||
|
|
*/
|
|||
|
|
private initCultivationArea() {
|
|||
|
|
if (!this.cultivationArea) return;
|
|||
|
|
|
|||
|
|
const layout = this.cultivationArea.addComponent(Layout);
|
|||
|
|
layout.type = Layout.Type.VERTICAL;
|
|||
|
|
layout.resizeMode = Layout.ResizeMode.CONTAINER;
|
|||
|
|
|
|||
|
|
// 经脉信息
|
|||
|
|
const meridianInfo = this.createMeridianInfo();
|
|||
|
|
meridianInfo.setParent(this.cultivationArea);
|
|||
|
|
|
|||
|
|
// 修炼按钮区
|
|||
|
|
const cultivationBtns = this.createCultivationButtons();
|
|||
|
|
cultivationBtns.setParent(this.cultivationArea);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createMeridianInfo(): Node {
|
|||
|
|
const node = new Node('MeridianInfo');
|
|||
|
|
const transform = node.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(680, 120));
|
|||
|
|
node.setParent(this.cultivationArea);
|
|||
|
|
|
|||
|
|
const titleLabel = new Node('Title');
|
|||
|
|
const label = titleLabel.addComponent(Label);
|
|||
|
|
label.string = '督脉';
|
|||
|
|
label.fontSize = UITheme.FONT_SIZE.MD;
|
|||
|
|
label.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
|
|||
|
|
titleLabel.setParent(node);
|
|||
|
|
|
|||
|
|
const detailLabel = new Node('Detail');
|
|||
|
|
const detail = detailLabel.addComponent(Label);
|
|||
|
|
detail.string = '神庭穴 | 逆行十七阶三层';
|
|||
|
|
detail.fontSize = UITheme.FONT_SIZE.SM;
|
|||
|
|
detail.color = this.hexToColor(UITheme.COLORS.TEXT_WHITE);
|
|||
|
|
detailLabel.setParent(node);
|
|||
|
|
|
|||
|
|
return node;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createCultivationButtons(): Node {
|
|||
|
|
const node = new Node('CultivationButtons');
|
|||
|
|
const transform = node.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(680, 200));
|
|||
|
|
node.setParent(this.cultivationArea);
|
|||
|
|
|
|||
|
|
// 丹田按钮
|
|||
|
|
const danTianBtn = this.createButton(node, '丹 田', {
|
|||
|
|
width: 160, height: 50,
|
|||
|
|
bgColor: UITheme.COLORS.BG_CARD,
|
|||
|
|
textColor: UITheme.COLORS.TEXT_GOLD,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 江湖历练按钮
|
|||
|
|
const lianLiBtn = this.createButton(node, '江湖历练', {
|
|||
|
|
width: 160, height: 50,
|
|||
|
|
bgColor: UITheme.COLORS.BG_CARD,
|
|||
|
|
textColor: UITheme.COLORS.TEXT_GOLD,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 外练按钮
|
|||
|
|
const waiLianBtn = this.createButton(node, '外 练', {
|
|||
|
|
width: 160, height: 50,
|
|||
|
|
bgColor: UITheme.COLORS.BG_CARD,
|
|||
|
|
textColor: UITheme.COLORS.TEXT_GOLD,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 内练中按钮
|
|||
|
|
const neiLianBtn = this.createButton(node, '内练中', {
|
|||
|
|
width: 160, height: 50,
|
|||
|
|
bgColor: UITheme.COLORS.BG_CARD,
|
|||
|
|
textColor: UITheme.COLORS.TEXT_GREEN,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return node;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 江湖见闻录区域
|
|||
|
|
* 显示游戏世界动态消息
|
|||
|
|
*/
|
|||
|
|
private initNewsArea() {
|
|||
|
|
if (!this.newsArea) return;
|
|||
|
|
|
|||
|
|
const transform = this.newsArea.getComponent(UITransform) || this.newsArea.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(720, 300));
|
|||
|
|
|
|||
|
|
const titleLabel = new Node('Title');
|
|||
|
|
const label = titleLabel.addComponent(Label);
|
|||
|
|
label.string = '江湖见闻录';
|
|||
|
|
label.fontSize = UITheme.FONT_SIZE.MD;
|
|||
|
|
label.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
|
|||
|
|
titleLabel.setParent(this.newsArea);
|
|||
|
|
|
|||
|
|
// 新闻内容列表
|
|||
|
|
const contentNode = new Node('Content');
|
|||
|
|
const contentLabel = contentNode.addComponent(Label);
|
|||
|
|
contentLabel.string = '百晓生：江湖动态将在这里显示...';
|
|||
|
|
contentLabel.fontSize = UITheme.FONT_SIZE.SM;
|
|||
|
|
contentLabel.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
|
|||
|
|
contentLabel.overflow = Label.Overflow.CLAMP;
|
|||
|
|
contentNode.setParent(this.newsArea);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 底部导航栏
|
|||
|
|
* 吐纳 | 门派 | 武学 | 江湖 | 游历
|
|||
|
|
*/
|
|||
|
|
private initBottomNav() {
|
|||
|
|
if (!this.bottomNav) return;
|
|||
|
|
|
|||
|
|
const transform = this.bottomNav.getComponent(UITransform) || this.bottomNav.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(720, 120));
|
|||
|
|
|
|||
|
|
const tabs = [
|
|||
|
|
{ name: '吐纳', icon: '🧘', active: true },
|
|||
|
|
{ name: '门派', icon: '🏯', active: false },
|
|||
|
|
{ name: '武学', icon: '⚔️', active: false },
|
|||
|
|
{ name: '江湖', icon: '🗺️', active: false },
|
|||
|
|
{ name: '游历', icon: '🚶', active: false },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
tabs.forEach((tab, index) => {
|
|||
|
|
const tabNode = new Node(`Tab_${tab.name}`);
|
|||
|
|
const transform = tabNode.addComponent(UITransform);
|
|||
|
|
transform.setContentSize(new Size(144, 120));
|
|||
|
|
tabNode.setParent(this.bottomNav);
|
|||
|
|
|
|||
|
|
// 图标
|
|||
|
|
const iconNode = new Node('Icon');
|
|||
|
|
const iconLabel = iconNode.addComponent(Label);
|
|||
|
|
iconLabel.string = tab.icon;
|
|||
|
|
iconLabel.fontSize = UITheme.FONT_SIZE.XL;
|
|||
|
|
iconNode.setParent(tabNode);
|
|||
|
|
|
|||
|
|
// 文字
|
|||
|
|
const textNode = new Node('Text');
|
|||
|
|
const textLabel = textNode.addComponent(Label);
|
|||
|
|
textLabel.string = tab.name;
|
|||
|
|
textLabel.fontSize = UITheme.FONT_SIZE.XS;
|
|||
|
|
textLabel.color = tab.active
|
|||
|
|
? this.hexToColor(UITheme.COLORS.TEXT_GOLD)
|
|||
|
|
: this.hexToColor(UITheme.COLORS.TEXT_DIM);
|
|||
|
|
textNode.setParent(tabNode);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
