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