Overlay叠加层实战:从《我的世界》终末之诗到直播滚动字幕
很多玩《我的世界》的玩家,第一次通关末地,盯着屏幕上那两段缓缓滚动的“终末之诗”时,都会停下手里的鼠标。
那感觉不像是在结束一个游戏,更像是读完了一部长篇小说的结尾。如果你恰好是一个喜欢“折腾”的技术玩家,大概率会冒出这样一个念头:这段文字能不能改掉?能不能把它做成一个浮在屏幕上的文字层?能不能在我录视频、开直播的时候,也放一个属于自己的“终末之诗”?
这就是这篇文章要聊的核心:overlay,也就是“叠加层”。
我们借一个很具体的场景切入——有玩家在自己的世界第 25 天通关,在 17:22 进入终末之诗,并尝试用“拼好种”的思路去测试 overlay。所谓“拼好种”,通俗点说,就是把不同来源的文字、图片、进度条拼到一起,再叠加到原始画面之上。这件事听起来很游戏化,但背后的 overlay 技术,正好串起了游戏 UI、资源包修改、直播字幕、甚至最近很火的“overlay 相机”滤镜效果。
读完这篇文章,你会得到三样东西:
- 真正理解 overlay 是什么,以及游戏、直播、前端、相机里的“叠加层”为什么是同一个逻辑;
- 一个可以照做的《我的世界》终末之诗文本修改示例;
- 一个能直接在 OBS 直播或本地录屏里使用的 HTML 滚动字幕 overlay。
先说结论:overlay 不是一个复杂的高端技术,它最大的价值在于“在不破坏底层画面的前提下,增加一层可控信息”。理解了这一点,你再看很多工具,思路会一下子打开。
1. 这篇文章真正要解决的问题
很多玩家卡在同一个地方:想让《我的世界》里的终末之诗变成自己的版本,但不知道从哪里下手。
我在各个社区看到过不少类似的问题:
- 用资源包改了文字,进游戏却没有生效;
- 命令明明写了 title,屏幕上却什么都没有;
- 直播时想做一个显示坐标、时间和“通关进度”的字幕层,却只会用 OBS 自带的默认文本源;
- 听别人说“overlay 相机”很流行,却分不清那是滤镜、贴纸还是图层叠加。
这些问题表面上是操作问题,核心其实是同一个知识点:在《我的世界》里,“终末之诗”并不是一段写死在代码里的动画,它是一份可以被替换的文本资源;而你在屏幕上看到的所有额外信息,不管是标题、进度条、字幕还是图标,本质上都是一种 overlay 层。
所以我这篇文章不会只谈“改文字”这一个动作。我打算把 overlay 拆开,从“概念”讲到“实操”,再从“游戏内”延伸到“游戏外”。适合这几类读者:
- 正在玩《我的世界》Java 版,对资源包、数据包感兴趣但没系统学过的玩家;
- 想要在直播或视频里添加个性化字幕、进度条、提示信息的内容创作者;
- 对“overlay 相机”这类应用好奇,想知道它与普通滤镜有什么本质区别的开发者或设计师。
如果你属于其中之一,这篇文章可以收藏备用。
2. overlay 的核心概念与常见误解
2.1 overlay 到底是什么
overlay 直译过来是“覆盖层”或“叠加层”。它的定义其实很简单:在所有已经渲染完成的底层内容之上,再加入一个或多个独立的信息层,这些信息层并不修改底层画面的原始像素,而是直接“盖”在上面。
最容易搞混的两个概念是“滤镜”和“叠加层”。
- 滤镜会修改底层画面的颜色、亮度、对比度,它改变的是底图本身;
- overlay 不会修改底图,它只是在底图之上增加新的内容,例如一行文字、一个头像、一个边框、一个悬浮的进度条。
举几个常见的例子:
| 场景 | 底层内容 | 叠加层内容 | 典型工具 |
|---|---|---|---|
| 游戏画面 | 3D 世界渲染结果 | 血量、物品栏、boss 条、聊天栏 | 《我的世界》HUD |
| 直播画面 | 游戏或摄像头画面 | 字幕、礼物提醒、Logo、滚动公告 | OBS 的文本源/浏览器源 |
| 手机相机 | 摄像头取景画面 | 时间水印、地点标签、AR 模型、滤镜边框 | 各种“overlay 相机”App |
| 前端网页 | 页面内容 | 弹窗、Toast 提示、视频画中画 | HTML/CSS 的 fixed 定位层 |
从这个表可以看出来,overlay 并不是某一个具体的软件功能,而是一种“分层渲染”的思路。
2.2 为什么 overlay 在游戏里这么常见
在《我的世界》里,overlay 几乎无处不在。HUD(血量、饥饿值、经验条)是 overlay,BossBar(Boss 血条)是 overlay,Title(屏幕中央的大标题)是 overlay,字幕系统也是 overlay。
这些信息层有一个共同特点:它们和游戏世界本身是分离的。玩家转头、跑动、跳跃,这些 HUD 元素并不会跟着变化,它们永远固定在屏幕上的某个位置,由游戏引擎单独维护。
理解了这一点,就能明白一个关键结论:我们想要打造属于自己的“终末之诗”体验,本质上就是在控制游戏的 overlay 层。
2.3 一个容易被忽略的误区
很多人以为 overlay 必须有“半透明效果”,或者必须有“混合模式”。
其实这是一个误区。半透明只是 overlay 的一种常见表现方式,并不是必要条件。一个完全不透明的黑底白字弹窗,也可以是 overlay;一个边缘镂空、只显示文字的浏览器字幕层,同样是 overlay。
真正决定 overlay 的,是“层次关系”,而不是“透明度”。
所以当你看到“overlay 相机”这个词时,不要把它理解成一种滤镜。它其实是把时间、地点、日期、云彩、贴纸等信息,以叠加层的形式“贴”在相机取景画面上。这和《我的世界》里的 Title 提示,逻辑完全相通。
3. 终末之诗的文本结构:把游戏文本当成可编辑资源
《我的世界》Java 版通关末地后播放的“终末之诗”,看起来神秘,实际上它的文本就存放在一个文本资源文件里。资源包机制允许玩家修改这些文本内容,从而实现“自定义终末之诗”。
这里要先说明一个关键认识:在默认情况下,这段文本不是随便写死的,而是以特定格式存在。它通常是两列内容,一列代表第一段讲述者的台词,另一列代表第二段讲述者的台词,两列之间用制表符分隔。
不同版本的游戏,资源包结构可能略有差异。以下是一个常见的结构示意:
assets/minecraft/texts/end.txt如果你使用的是较新的原版资源包,解压后往往能在assets/minecraft/texts/目录下找到类似的文件。
文件内容的格式大致如下:
I see the player you mean. I see the player. ...每一行分成两段,中间用一个 Tab 制表符隔开。游戏播放时,左边一列和右边一列会分别以两个声音/两段文字的形式展示出来。
实际修改时,如果格式不对,游戏可能出现解析失败、文本空白或显示异常。所以修改之前,最好先把原来的文件备份一份。
同时要提醒一下:如果你玩的是联机服务器,最好不要擅自修改与服务器校验相关的资源内容,也不要通过修改资源包去伪造游戏内提示信息,避免违反服务器规则。本文的所有操作建议在单机存档或本地测试环境中完成。
3.1 为什么文本会以这种格式存在
《我的世界》的资源包机制,把很多“看起来像代码实现”的内容,都做成了“可替换资源”。终末之诗文本就是典型例子。这样做的好处是:
- 材质、文本、音效可以在不修改游戏代码的情况下替换;
- 玩家社区可以用资源包制作各种语言版本的终末之诗;
- 服务器可以通过资源包下发自定义文本。
理解了这一点,你再看“修改终末之诗”这件事,就不会觉得它是一个灰魔法,而只是“替换一份文本资源”而已。
4. 用资源包修改终末之诗文本的完整示例
下面我们做一个最小可用的示例:新建一个资源包,把终末之诗替换成一段自定义文本。
4.1 准备目录结构
在.minecraft/resourcepacks目录下新建一个文件夹,比如叫my_end_poem,然后按下面的结构创建文件:
my_end_poem/ └── assets/ └── minecraft/ └── texts/ └── end.txt同时,还需要一个pack.mcmeta文件放在资源包根目录,用来告诉游戏“这是一个资源包”。
4.2 创建 pack.mcmeta
文件路径:my_end_poem/pack.mcmeta
{ "pack": { "description": "My custom End Poem", "pack_format": 15 } }说明:pack_format的数值会根据游戏版本变化。如果你的版本较新,游戏会提示“此资源包由较新版本创建,是否加载”,有时候仍然可以加载,但最稳妥的方式是查阅当前版本对应的pack_format。这里的 15 只是一个示例值,实际请以自己使用的游戏版本为准。
4.3 写入自定义终末之诗文本
文件路径:my_end_poem/assets/minecraft/texts/end.txt
这是我们自定义的终末之诗。 这是第二列的一句话。 你在屏幕前读到了它。 意味着你已经完成了一次旅途。注意:
- 文件建议保存为 UTF-8 编码;
- 每一行的两列之间使用 Tab 制表符分隔;
- 如果只有一列,也可以只写一段文本,但不保证所有版本都能正确解析;
- 强烈建议先备份原版
end.txt。
4.4 加载资源包并验证
进入游戏,打开“选项” -> “资源包...”,把my_end_poem加入已选列表,点击“完成”。然后进入一个已经准备打末影龙的存档,击败末影龙后观察终末之诗是否变成你的自定义内容。
如果没生效,优先检查三点:
- 资源包是否真的被启用;
pack.mcmeta是否存在且 JSON 格式正确;end.txt文件路径是否与资源包结构一致。
这个示例虽然简单,但它已经完成了“修改游戏 overlay 层文本”的完整闭环。
5. 用数据包或命令实现 Title 与 BossBar 叠加层
资源包修改终末之诗,属于“静态文本替换”。如果你想在游戏过程中,自己控制一段文字的出现时间、出现方式、显示颜色,那就需要用到命令层面的 overlay 控制。
《我的世界》命令中,最典型的两类 overlay 控制是:
title:在屏幕中央显示大号文字;bossbar:在屏幕上方显示一个可自定义名称、颜色和进度的条。
5.1 用 title 模拟终末之诗式的中央字幕
在游戏里开启作弊(或单人世界允许作弊)后,在聊天框输入:
/title @a title {"text":"终末之诗","color":"gold","bold":true}执行后,屏幕中央会出现一行金色的“终末之诗”。
也可以使用 subtitle,在标题下方增加一行小字:
/title @a subtitle {"text":"一个新的故事开始","color":"white"}还可以控制显示时间。默认标题显示时间较短,如果文字比较长,可以用 times 子命令:
/title @a times 10 80 20三个数字分别代表“淡入时间”“停留时间”“淡出时间”,单位是游戏刻(1 秒 = 20 游戏刻)。
注意:如果先执行了title @a reset,再执行 title 命令,之前设置的标题会立即清除。
5.2 用 bossbar 做一个进度叠加条
终末之诗在演出时,是慢慢滚动出现的。如果我们想在屏幕上加一个“阅读进度条”,BossBar 是最合适的 overlay 方案。
创建一条 BossBar:
/bossbar add poem_progress {"text":"终末之诗阅读进度"}设置颜色和样式:
/bossbar set poem_progress color blue /bossbar set poem_progress style progress设置初始进度为 0:
/bossbar set poem_progress value 0 /bossbar set poem_progress max 100把 BossBar 显示给所有玩家:
/bossbar set poem_progress players @a如果要模拟进度递增,可以手动执行:
/bossbar set poem_progress value 25如果希望自动递增,可以考虑使用数据包中的 tick 函数,配合记分板来增加 value。这里给出一个最简单的函数示例:
文件路径:data/example/function/poem_progress.mcfunction
# 先执行初始化 bossbar add poem_progress {"text":"终末之诗阅读进度"} bossbar set poem_progress max 100 bossbar set poem_progress value 0 bossbar set poem_progress players @a # 在 tick 函数中每 20 tick 增加 1 scoreboard objectives add poemTime dummy scoreboard players add @a poemTime 1 execute if score @a poemTime matches 20.. run bossbar set poem_progress value 1这只是一个示意,实际项目中你需要定义 tick 标签函数,并把函数挂到data/minecraft/tags/function/tick.json中。由于不同版本的数据包结构略有不同,建议先用命令方块手动设置 value,验证效果后再考虑自动化。
5.3 清除叠加层
如果你不再需要 BossBar,可以执行:
/bossbar remove poem_progress如果要清空当前屏幕上所有 title 效果:
/title @a reset这些命令并不复杂,但它们展示了 overlay 层的核心逻辑:你拥有对屏幕信息层的“绝对控制权”。
6. 用 HTML overlay 做直播或录制用的滚动字幕
如果说《我的世界》里的 overlay 受限于游戏引擎,那么游戏之外的 overlay 就自由得多。现在很多直播工具、录屏软件都支持“浏览器源”,也就是说,你可以用 HTML/CSS/JavaScript 写一个完全自定义的透明叠加层。
这正好可以对应标题里提到的“拼好种”思路:把一段写好的文字、一个进度条、甚至一组图片拼在一起,作为一个整体叠在画面上。
下面是一个模拟“终末之诗”滚动字幕的 HTML overlay 示例。
文件路径:end_poem_overlay.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; width: 100%; height: 100%; } .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .poem { font-family: "Noto Serif SC", "Songti SC", serif; font-size: 32px; color: #ffffff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.7); text-align: center; line-height: 2; white-space: pre-line; animation: scrollPoem 25s linear forwards; } @keyframes scrollPoem { 0% { transform: translateY(100vh); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(-100vh); opacity: 0; } } </style> </head> <body> <div class="overlay"> <div class="poem"> 我从一个终点走来, 也将走向另一个起点。 屏幕前的你, 正在见证一段新的旅程。 </div> </div> </body> </html>这段 HTML 做了什么?
background: transparent让整个页面背景透明;.overlay使用fixed定位覆盖整个屏幕,pointer-events: none让这个层不会拦截鼠标事件;.poem通过 CSS 动画从屏幕下方滚动到屏幕上方,效果非常接近游戏里的终末之诗文本滚动;white-space: pre-line让文本中的换行能够正常显示。
在 OBS 中使用这个 overlay 的步骤:
- 在来源面板点击“+”;
- 选择“浏览器”;
- 勾选“本地文件”;
- 选择
end_poem_overlay.html; - 设置宽度和高度,例如 1920x1080;
- 确定后,字幕就会叠加在游戏画面或摄像头画面上。
如果你的 OBS 画面出现黑底,说明浏览器源的透明背景没有生效。需要检查:
- 浏览器源属性里是否勾选了“关闭源可见时隐藏”之外的透明选项;
- HTML 的
body和html是否设置了background: transparent; - 某些旧版 OBS 需要开启“允许对浏览器源进行透明度混合”或使用
obs-browser插件。
如果想让字幕循环播放,可以把 CSS 动画改成infinite,再用 JavaScript 控制显示与隐藏。比如使用requestAnimationFrame或定时器,制造一个“每隔一段时间出现一次”的效果。
7. 常见问题与排查方法
以下这些问题是玩家和创作者最常遇到的,建议收藏备用。
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 资源包加载后没有任何变化 | 资源包未被启用,或路径不对 | 检查资源包列表、确认文件路径 | 重新启用资源包,核对assets/minecraft/texts/end.txt |
| 终末之诗显示为空白 | 文本格式错误、编码错误 | 用文本编辑器打开文件,检查 Tab 分隔 | 使用 UTF-8 编码,恢复一行中的两列结构 |
| 游戏提示资源包版本不兼容 | pack_format与实际版本不匹配 | 查阅当前版本对应的资源包格式号 | 修改pack.mcmeta中的pack_format |
| title 命令没有反应 | 未开启作弊,或权限不足 | 在创造模式下达命令,检查聊天框返回 | 开启作弊,给玩家管理员权限 |
| title 文字显示时间太短 | 未设置 times 参数 | 执行 times 命令调整停留时长 | 使用title @a times 10 80 20 |
| OBS 浏览器源出现黑底 | 页面背景未设置为透明 | 检查 HTML 的 CSS | 将html, body的 background 设为 transparent |
| overay 挡住了游戏操作 | 上层元素接收了鼠标事件 | 检查 CSS 中的 pointer-events | 给 overlay 根节点设置pointer-events: none |
| 直播字幕文字看不清 | 颜色与游戏画面相似,没有阴影 | 检查对比度 | 增加文字阴影、半透明背景或高亮边框 |
如果一个问题对应多个可能原因,不要一次性改所有配置。优先检查“最可能出错”的一步,改完立刻验证。
8. 最佳实践与工程建议
如果你是在自己的项目里长期使用 overlay,而不是只做一次实验,下面这些建议会比较有用。
8.1 先备份,再修改
无论修改游戏资源,还是写 OBS 浏览器源,都要保留一份原始文件。尤其是end.txt,一旦格式改乱,游戏中的终末之诗可能直接变成空白,备份可以让你随时恢复。
8.2 小步验证,不要一次写完所有功能
很多资源包新手喜欢一次性写好完整文本,再进游戏测试。结果发现没生效,根本不知道是哪一步错了。更好的做法是:
- 先只改动一行文本,进游戏验证能否生效;
- 确认格式没问题后,再扩展成完整内容;
- 命令同理,先执行一条 title,确认能显示,再写完整的时间控制和 BossBar。
8.3 明确 overlay 的层次关系
在设计自己的 overlay 时,要搞清楚每一层的“优先级”:
- 游戏 HUD 层:最接近玩家,会遮挡游戏内容;
- 字幕层:通常放在中下方或屏幕中央,但不能挡住关键战斗信息;
- 装饰层:比如边框、Logo,要放在最上方,但不能影响点击操作;
- 在 OBS 里,来源列表越靠上,渲染时越靠前。
8.4 注意可读性和美学
overlay 的核心是“信息可读”,而不是“元素越多越好”。
- 文字必须有足够对比度,使用阴影或描边;
- 滚动速度不能太快,参考电影字幕的阅读速度;
- 半透明背景可以提升可读性,但要注意不要遮挡游戏的关键区域;
- 选择与场景风格匹配的字体,避免用力过猛。
8.5 遵循安全边界
- 单机测试:修改资源包和命令是完全没问题的;
- 联机服务器:要遵守服务器规则,不要用 overlay 或资源包去欺骗、干扰其他玩家;
- 直播:如果叠加层中包含音乐、图片或文字素材,注意版权问题。
8.6 把 overlay 复用成一套“模板”
如果在直播或视频制作中经常使用叠加层,可以把自己写好的 CSS 动画、HTML 结构、BossBar 命令存成模板。例如:
poem_scroll.html用于滚动字幕;info_hud.html用于显示时间、直播间信息;game_progress.mcfunction用于显示游戏内进度条。
这样下次只需要改文字内容,不需要重新写整套逻辑。
9. 总结与后续学习方向
这篇文章从一个很具体的游戏场景出发聊了 overlay,前面提到的“第 25 天”“17:22 进入终末之诗”只是引子,真正希望大家带走的是几个可复用的认知。
overlay 的本质是“层次”。它不修改底层画面,只在上方增加一层可控信息。这个规律在《我的世界》的资源包、OBS 的浏览器源、前端的 fixed 定位、以及“overlay 相机”的取景叠加层里,都是一样的。
《我的世界》里的“自定义终末之诗”,是体验 overlay 最直观的入口:一段静态文本,通过资源包替换,就变成了自己的故事。而 title 和 bossbar 命令,则让你从“改文本”升级成“写动态 UI”。游戏之外,HTML 滚动字幕又把这个思路带到了直播和视频里。
如果你玩的是《我的世界》Java 版,建议先从“用资源包替换终末之诗”开始,跑通之后,再试着用命令做标题和进度条,最后把同样的文本做成 OBS 浏览器源,放在直播画面里对比一下。这三次实践做完,你对 overlay 的理解会比看很多篇文章都扎实。
接下来还可以往两个方向深入:
- 继续研究《我的世界》资源包格式,比如自定义模型、自定义音效、文本本地化,这些底层资源的结构和终末之诗文本是同一套机制;
- 继续研究直播工具的浏览器源生态,比如用 JavaScript 读取游戏数据、用 WebSocket 做实时字幕,把 overlay 从“静态装饰”变成“动态数据层”。
最终你会发现,所谓的高端玩法,其实只是把很多个“简单叠加层”组合在一起。下次再听到“overlay”这个词,你可以直接判断出它到底在说什么,以及自己该在哪里动手。
