关于图片附加的文本域
基础要求
| 先尝试回答下面的问题：什么是文本域、文本光标？什么是窗口字符、底层字符？窗口字符分为哪些类型？窗口字符、底层字符有哪些固定格式？ |  需要先了解基础知识哦！ |
如果你对上述问题有疑问，那么说明你还不了解 窗口字符。
需要去看看：”23.窗口字符 > 关于窗口字符.docx”。
相关插件
核心插件：
◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
插件本体：
◆Drill_PictureAdditionalTextArea 图片 - 图片附加的文本域
该插件能够在图片贴图中，开辟出一个文本域，并能在上面绘制文本。
附加的文本域
1）原理
文本域：是指绘制窗口字符的区域，文本域具有高度和宽度。
字符或字符效果如果越出了边界，则会被遮挡。
（文本域详细原理介绍，可以看看“23.窗口字符 > 关于窗口字符.docx”的绘制原理）
图片的文本域： 指在图片中建立的文本域。
图片的文本域大小就是 图片资源 的高宽。
如果文本过长，会超出边界范围，如下图。
2）逐个绘制
插件在设置文本前，可以开启逐个绘制：
默认是一次性绘制（不支持消息输入字符），
开启后变为逐个绘制（支持消息输入字符），
逐个绘制会在一个时间段内持续绘制每个字符，但消耗的插件性能也更多。
| 并不是所有的文本域都用 逐个绘制 就好看哦。大部分情况下，用户都想立即看到全部文本内容，不喜欢慢慢显示文字的磨叽。 |
从零开始设计（DIY）
设计一张简单卡片
1. 设置一个目标
2024年10月6日，上个月大改了窗口字符底层，这个月终于能在图片上绘制文本了。
所以这里我先介绍最基本的用法。
2. 结构规划/流程梳理
首先，需要图片文本域插件：
◆Drill_PictureAdditionalTextArea 图片 - 图片附加的文本域
然后，文本域中要添加许多窗口字符，这里先用几个基础的窗口字符插件：
◆Drill_CoreOfCharDraw 系统 - 字符绘制核心
◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
◆Drill_DialogTextAlign 窗口字符 - 文本居中
就可以开始绘制了。
（你可以单独开一个新工程，然后自己试一下效果）
3. 图片设置
首先，创建一张图片。
就用示例里的蓝卡片资源图片。
然后，添加插件指令，添加一个临时的文本。
其它可用的插件指令如下。
测试游戏，就能看见图片的左上角有文本了。
4. 添加窗口字符
前面的步骤，只是添加了一串临时文本。
但常规的卡片里面，会写很多文字。
这时候，就可以在插件配置中写小文章。
前面提到了，用 文本居中 插件，可以让文本居中。
这里可以空几行，然后写一行居中的文本，然后再写一段描述。
由图可知，描述文字太长了，要换行。
这里可以使用自动换行<wordwrap>，在任意位置加就行。
加了之后会发现文字自动换行了，但是全挤在一起。
这是因为自动换行开启后，会排除所有普通换行符。
即图中”文本内容-1”的换行效果，全部被去除了。
你需要加 手动强制换行符
，才能在自动换行生效的情况下，继续换行。
（加在每行的末尾即可）
接下来，可以加一些其它自定义的窗口字符作为装饰了。
（里面修改了字体大小\fs[]、\{、\}，并且加了文本颜色\c[]）
（窗口字符核心自带这些基本字符设置）
5. 定时重绘设置
上述操作能实现一张基本的卡片制作。
但是在游戏中，还有一种常见情况，就是卡片描述中的 文本、数字（指代字符）会变。
以卡片中的“分数”为例，如果显示分数，写成下面的样子即可。
但是，这个分数，绘制一次后，就不会再改变了，后面如果分数更新了值。
该卡片上的文本，也不会变化。
这时候，可以使用文本域插件提供 定时重绘 的功能，
该功能每隔几帧重新绘制一次，这样就能实时变化了。
设计一张完整卡牌
1. 设置一个目标
首先你需要先设想或看到一个目标，来根据目标的卡牌来设计你自己的卡牌。
说起来，要找好的参考还真不好找。
现在百度随便一搜就是游戏王、炉石传说的卡…
感觉找个不一样的参考还有点难。（也许是我抽卡类游戏玩的少？）
后来，2024年9月12日，我管理员和群友拉我到kk平台联机玩魔兽，
再后来，我偶尔在kk平台里面逛了逛其它游戏，发现里面有很多抽卡的可参考对象。
（虽然大家都说现在的魔兽地图已经完完全全变成氪金图了）
（但是吧，氪金图也有不少做还不错的地方，学习一下是没问题的）
比如 魔兽的《即将通关II》：
比如 Y3的《无限火力》：
然后作者我就尝试开坑了。
2. 结构规划/流程梳理
在规划卡牌之前，你需要先了解有哪些窗口字符，建议去 窗口字符管理层 转一圈。
前面章节介绍了如何设计一张简单的卡片，
我们知道了 卡片的文本域范围、自动换行、定时重绘 的功能。
接下来需要考虑的，是如何围绕这些功能，进一步打磨卡片的装饰与内容。
（当然，你也可以直接用ps把文字直接写在卡片上，这样就不需要窗口字符设计了）
3. 卡面设计
首先，需要规划一下屏幕中到底放置几张卡，这里我打算以最多放3张为准。
另外，感觉默认这个空白卡有点小，需要加大一点点。
所以重新设计新的卡片大小吧。
新建一张卡片，比原来卡片大一点点。
如下图，设置故意缺一个角，然后加个渐变描边。
（初始想法是右下角缺的角做个按钮之类的）
然后渐变的上侧和左侧加一层亮边，右侧和下侧加暗边，
让卡片看起来有凹凸感。
最后，在卡面上加一个反光层。
目前感觉卡片好像太大了点，与其说是卡片，这更像告示板。
先写上字看看情况吧，后面可能会再改。
4. 设置窗口字符
根据前面简单卡片的文本设计，这里也按照一样的来。
加自动换行，加
强制换行，然后设置居中和左对齐。
然后在游戏中，建立三张卡片，
并且三张卡片分别绑定不同的内容。
5. 初步测试效果
完成上述操作后，进入游戏测试。
看看初步设计的卡面和文本的关系。
放在游戏中实际测试之后，
能看起来很糟，的确没有作者我之前想的那种卡片感觉。
仔细分析了一下，有下面几点要改：
》卡片太大了，感觉文字像写在了一张空旷的a4纸一样。
》方角太硬了，不像一张卡，应该改成圆角。
》描边要加粗一点，因为卡的镶边要厚一点才能感觉好些。
》卡片标题和卡片内容没有明显的区分，应该加一条线突出一下标题。
6. 重新设计
好了，之前的设计需要丢弃，现在重新设计。
把之前的方角，换成圆角和圆形。
重新加上亮边和暗边，然后加标题分隔线和透明背景。
将之前的卡片换掉，然后再测试游戏看看效果。
（因为开了自动换行，所以窗口字符不需要改，直接换图片就够了）
目前看起来，结构没问题了，只是需要修改一些细节：
》标题线要平移一下。
》右下角描边需要去掉。
》窗口字符贴着描边线，需要加内边距。
7. 窗口字符与范围盒设置
窗口字符核心中，提供了内边距的设置，能使得文本域向内压缩。
所以，在卡片中加上内边距即可，
另外，加一下\debug[显示范围盒]，看一下压缩的情况。
（文本域范围会用绿线标出）
游戏中测试，可以看见绿线的效果，文本范围被压缩了。
（只有上侧、左侧、右侧压缩有效，被挤的文本会全部从下侧挤出）
（比如第三张卡的句号就被挤下去了）
由于第三张卡的字太多了，并且字体可能还需要改小一点，
所以再修改窗口字符，原来的20像素大小，改成18像素大小。
然后，在右下角加一个字符，用于表示卡片的品级。（N、R、SR、SSR、UR）
修改效果如下图。
（窗口字符和卡片资源需要随时同步改，来回改了几次，得到下面的最终效果）
最后，去掉绿色方框（\debug[显示范围盒]）的窗口字符即可。
如果你觉得N、R、SR的位置不太合适，
你可以使用\px[1]\py[1]修改字符偏移，或者直接在卡面上写这些字母。
另外说一下，测试过程中你还可以加其它的debug字符，
比如\debug[显示字符方框]，看一下每个字符的排列情况。
如果多了空格、多了隐藏的字符，都被白色方框标出来。
8. 其它细节
前面介绍了单张卡片的设计细节。
而卡牌，一般都是成套，成系统的组合，卡牌中包含不同品级的卡片，颜色也不一样。
由于最初设计的卡片只用了紫色这一种颜色，
所以直接使用ps进行色调变色即可，如下图。
最终在游戏中呈现的效果如下图。
