refactor: 新增富文本描边工具并优化深色面板文案可读性
1. 新增RichOutline工具类，封装cc.RichText的outline标签包裹逻辑 2. 为所有道具/技能/英雄描述富文本添加黑色2px描边，提升深色背景下的可读性 3. 优化技能描述渲染逻辑： - 调整数值高亮色为更鲜亮的绿色 - 使用罗马数字作为技能等级徽章 - 移除升级预览弹窗的重复描述，改为当前/升级后双版本对比 - 简化升级确认弹窗的格式排版 4. 调整道具/技能预制体的文字颜色为白色，适配深色面板
This commit is contained in:
panFD
37
assets/script/game/common/RichOutline.ts
Normal file
37
assets/script/game/common/RichOutline.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* @file RichOutline.ts
|
||||
* @description RichText 描边（outline）BBCode 包裹工具
|
||||
*
|
||||
* 背景：
|
||||
* Cocos Creator 3.x 的 cc.RichText 原生支持 <outline> 标签：
|
||||
* <outline color=#000000 width=2>文本</outline>
|
||||
* 无需新增组件即可为富文本提供描边能力。
|
||||
*
|
||||
* 使用：
|
||||
* import { outlineRich } from "./RichOutline";
|
||||
* this.info_rich.string = outlineRich(desc); // 默认黑色 2px
|
||||
* this.info_rich.string = outlineRich(desc, "#000", 1); // 自定义
|
||||
*
|
||||
* 注意：
|
||||
* - <outline> 为包裹型标签，需成对出现；内部可嵌套 <color>/<size> 等标签。
|
||||
* - width 为像素宽度（int），color 支持 #RGB/#RRGGBB。
|
||||
* - 空字符串直接返回，不包裹空标签。
|
||||
*/
|
||||
|
||||
/** 默认描边颜色（深黑，深色面板通用） */
|
||||
export const RICH_OUTLINE_COLOR = "#000000";
|
||||
|
||||
/** 默认描边宽度（像素） */
|
||||
export const RICH_OUTLINE_WIDTH = 2;
|
||||
|
||||
/**
|
||||
* 为 RichText 富文本串包裹描边标签
|
||||
* @param text 原始 BBCode 富文本（可为空串）
|
||||
* @param color 描边颜色（默认 #000000）
|
||||
* @param width 描边宽度像素（默认 2）
|
||||
* @returns 包裹 <outline> 后的富文本串；空串原样返回
|
||||
*/
|
||||
export function outlineRich(text: string, color: string = RICH_OUTLINE_COLOR, width: number = RICH_OUTLINE_WIDTH): string {
|
||||
if (!text) return text;
|
||||
return `<outline color=${color} width=${width}>${text}</outline>`;
|
||||
}
|
||||
9
assets/script/game/common/RichOutline.ts.meta
Normal file
9
assets/script/game/common/RichOutline.ts.meta
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"ver": "4.0.24",
|
||||
"importer": "typescript",
|
||||
"imported": true,
|
||||
"uuid": "567d290a-d379-4074-ba04-05d463cc8f7b",
|
||||
"files": [],
|
||||
"subMetas": {},
|
||||
"userData": {}
|
||||
}
|
||||
@@ -88,8 +88,8 @@ const ATTR_NAME: Partial<Record<Attrs, string>> = {
|
||||
[Attrs.hp_max]: "最大生命",
|
||||
};
|
||||
|
||||
/** 富文本数值高亮色（亮绿色，与项目绿色系同源，深色面板上清晰可读） */
|
||||
const RICH_VALUE_COLOR = "#27AE60";
|
||||
/** 富文本数值高亮色（鲜亮绿色，深色面板上高亮醒目） */
|
||||
const RICH_VALUE_COLOR = "#3CE66E";
|
||||
|
||||
/** 富文本技能名高亮色（蓝色，与数值绿色区分，标识技能名「」片段） */
|
||||
const RICH_NAME_COLOR = "#2E86C1";
|
||||
@@ -100,6 +100,9 @@ const RICH_LOCKED_COLOR = "#95A5A6";
|
||||
/** 技能名「」匹配模式（仅本模块行首/行中技能名片段使用） */
|
||||
const SKILL_NAME_PATTERN = /「([^」]*)」/g;
|
||||
|
||||
/** 技能等级罗马数字徽章（索引 = 技能等级 1~5），用于技能名后的品质感等级标识 */
|
||||
const SKILL_LV_BADGE = ["", "Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ"];
|
||||
|
||||
/** "持续X秒"匹配模式（卡片描述后处理：把持续时间数值也高亮） */
|
||||
const DURATION_PATTERN = /持续(\d+)秒/g;
|
||||
|
||||
@@ -510,8 +513,8 @@ export function buildEquipRich(fieldUuids: number[], showName: boolean = false):
|
||||
*
|
||||
* 格式：
|
||||
* 「技能名」 Lv.当前技能等级：当前档技能效果
|
||||
* 升级提示：Lv.当前 → Lv.下一级：下一级技能效果（金色，仅有更高档时出现）
|
||||
*
|
||||
* 仅展示当前生效档位，不含升级提示；升级前后对比由升级确认框单独提供。
|
||||
* 数据源为运行时 HeroAttrsComp（lv 取当前英雄等级），逐触发类型逐技能渲染。
|
||||
* 技能等级取 LvTriggerEntry.s_lv，未标注时按档位序号（1/2/3...）兜底。
|
||||
*
|
||||
@@ -555,19 +558,14 @@ export function buildSkillDescMoreRich(source: ISkillDescSource): string {
|
||||
const curIdx = activeIdx >= 0 ? activeIdx : 0;
|
||||
const cur = sorted[curIdx];
|
||||
const curSLv = cur.s_lv ?? (curIdx + 1);
|
||||
const curTrig = needCount ? `${trigName}×${cur.t_num}` : trigName;
|
||||
const curHead = `「${skillName}」 Lv.${curSLv}: ${curTrig}，`;
|
||||
// 触发次数直接写为富文本（数字绿色高亮），如 "受伤3次"
|
||||
const curTrig = needCount
|
||||
? `${trigName}<color=${RICH_VALUE_COLOR}>${cur.t_num}</color>次`
|
||||
: trigName;
|
||||
// 技能名 + 罗马数字等级徽章（如 "不屈壁垒Ⅰ"），等级徽标随技能名一并蓝色高亮
|
||||
const badge = SKILL_LV_BADGE[curSLv] ?? `${curSLv}`;
|
||||
const curHead = `「${skillName}${badge}」: ${curTrig}，`;
|
||||
lines.push(effectRich(buildEffectLine(curHead, mergeSkillParams(base, cur.overrides))));
|
||||
|
||||
// 升级提示：存在更高档时，金色预览下一档
|
||||
if (curIdx + 1 < sorted.length) {
|
||||
const next = sorted[curIdx + 1];
|
||||
const nextSLv = next.s_lv ?? (curIdx + 2);
|
||||
const nextTrig = needCount ? `${trigName}×${next.t_num}` : trigName;
|
||||
const nextLine = buildEffectLine(`${nextTrig}，`, mergeSkillParams(base, next.overrides));
|
||||
const nextText = `${nextLine.prefix}${nextLine.value}${nextLine.suffix}`;
|
||||
lines.push(`<color=${RICH_UPGRADE_COLOR}>升级 Lv.${curSLv}→Lv.${nextSLv}: ${nextText}</color>`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -600,9 +598,6 @@ function highlightDuration(text: string): string {
|
||||
return text.replace(DURATION_PATTERN, `持续<color=${RICH_VALUE_COLOR}>$1</color>秒`);
|
||||
}
|
||||
|
||||
/** 富文本升级提示色（金色，标识"升级后"的下一档预览，与未激活灰区分） */
|
||||
const RICH_UPGRADE_COLOR = "#E8A33D";
|
||||
|
||||
/**
|
||||
* 结构化行 → 富文本串（技能名蓝色、数值绿色）。
|
||||
* buildEquipRich / buildCardDescRich / buildSkillDescRich 共用，保证渲染规则唯一。
|
||||
|
||||
Reference in New Issue
Block a user