import { _decorator, Component, Node, Label, Sprite, Color, UITransform, Size } from 'cc'; import { UITheme } from './UITheme'; const { ccclass, property } = _decorator; /** * UI基础组件 - 提供通用的UI操作方法 */ @ccclass('UIBase') export class UIBase extends Component { /** * 设置标签文字和样式 */ protected setLabel(node: Node, text: string, options?: { fontSize?: number; color?: string; horizontalAlign?: number; }) { const label = node.getComponent(Label); if (label) { label.string = text; if (options?.fontSize) label.fontSize = options.fontSize; if (options?.color) { const c = options.color; label.color = new Color( parseInt(c.substr(1, 2), 16), parseInt(c.substr(3, 2), 16), parseInt(c.substr(5, 2), 16), 255 ); } } } /** * 创建面板背景 */ protected createPanelBg(parent: Node, options?: { color?: string; width?: number; height?: number; opacity?: number; }) { const node = new Node('PanelBg'); const sprite = node.addComponent(Sprite); const transform = node.getComponent(UITransform) || node.addComponent(UITransform); if (options?.width) transform.setContentSize(new Size(options.width, options.height || options.width)); if (options?.opacity !== undefined) sprite.color = new Color(255, 255, 255, options.opacity); node.setParent(parent); return node; } /** * 创建金色边框装饰 */ protected createGoldBorder(parent: Node, width: number, height: number) { const node = new Node('GoldBorder'); const transform = node.addComponent(UITransform); transform.setContentSize(new Size(width, height)); node.setParent(parent); return node; } /** * 创建按钮 */ protected createButton(parent: Node, text: string, options?: { width?: number; height?: number; bgColor?: string; textColor?: string; fontSize?: number; }) { const node = new Node('Button'); const transform = node.addComponent(UITransform); const w = options?.width || 200; const h = options?.height || 60; transform.setContentSize(new Size(w, h)); node.setParent(parent); // 按钮背景 const bgNode = new Node('Bg'); bgNode.addComponent(Sprite); bgNode.getComponent(UITransform)?.setContentSize(new Size(w, h)); bgNode.setParent(node); // 按钮文字 const labelNode = new Node('Label'); const label = labelNode.addComponent(Label); label.string = text; label.fontSize = options?.fontSize || UITheme.FONT_SIZE.MD; label.color = new Color( parseInt((options?.textColor || UITheme.COLORS.TEXT_WHITE).substr(1, 2), 16), parseInt((options?.textColor || UITheme.COLORS.TEXT_WHITE).substr(3, 2), 16), parseInt((options?.textColor || UITheme.COLORS.TEXT_WHITE).substr(5, 2), 16), 255 ); labelNode.setParent(node); return node; } /** * 创建属性条(HP/MP/EXP) */ protected createBar(parent: Node, options: { width: number; height: number; fillColor: string; bgColor: string; value: number; maxValue: number; }) { const node = new Node('Bar'); const transform = node.addComponent(UITransform); transform.setContentSize(new Size(options.width, options.height)); node.setParent(parent); // 背景 const bgNode = new Node('Bg'); bgNode.addComponent(Sprite); bgNode.getComponent(UITransform)?.setContentSize(new Size(options.width, options.height)); bgNode.setParent(node); // 填充 const fillNode = new Node('Fill'); fillNode.addComponent(Sprite); const fillWidth = options.width * (options.value / options.maxValue); fillNode.getComponent(UITransform)?.setContentSize(new Size(fillWidth, options.height)); fillNode.setParent(node); return node; } /** * 颜色字符串转Color */ protected hexToColor(hex: string, alpha: number = 255): Color { const r = parseInt(hex.substr(1, 2), 16); const g = parseInt(hex.substr(3, 2), 16); const b = parseInt(hex.substr(5, 2), 16); return new Color(r, g, b, alpha); } }