日本最大规模的游戏行业会议 “CEDEC2025” 于 2025 年 7 月 22 日(周二)至 7 月 24 日(周四)举办。第二天发表了题为 “《Pokémon TCG Pocket》中的数字卡牌表现及其制作手法” 的演讲。
本次演讲围绕以有着悠久历史的宝可梦卡牌游戏为题材的手游《Pokémon TCG Pocket》展开,从工作流程到具体表现技法,广泛介绍了团队在保留实体卡牌优势的同时,如何赋予其数字独有的魅力。
如果你对宝可梦卡牌比较了解,可以直接跳到第三部分开始阅读,前两部分都是介绍性质的内容。
1. 保留宝可梦卡牌游戏原有魅力,增添数字表现特有魅力
本次演讲的登台者包括:Creatures 艺术开发部部长、资深艺术总监长屋悟,以及来自 DeNA 的四位嘉宾 —— 游戏服务事业本部开发运营统括部第一技术部技术推进第一组视觉工程师 / 技术美术半田佑马、同部图形工程师山本真史、游戏服务事业本部开发运营统括部设计部创意第一组技术美术广田隆哉。
首先,长屋介绍了在《宝可梦卡牌》推出前就已作为集换式卡牌游戏存在的宝可梦卡牌游戏的整体理念,以及 2024 年作为手游推出的《宝可梦卡牌》的理念。
宝可梦卡牌游戏(集换式卡牌游戏)的理念
宝可梦卡牌游戏是以游戏《宝可梦》系列世界为主题的集换式卡牌游戏。截至目前,已在以日本、北美、欧洲为中心的 90 多个国家和地区发售,全球出货量超过 750 亿张(截至 2025 年 3 月末)。

宝可梦卡牌是《宝可梦》世界首个日本正统集换式卡牌游戏,以日本、北美、欧洲为中心在 90 多个地区发售,支持 16 种语言(实际成绩),全球出货量超 750 亿张(截至 2025 年 3 月末)。
其走红的原因在于,它兼具了对战游戏的乐趣和收集卡牌的乐趣。
对战时,玩家使用由 60 张卡牌组成的卡组,通过卡牌组合享受战略性对战。
由于在全球范围内举办赛事,它可能给人留下强烈的 “对战游戏” 印象,但作为一款可体验收集乐趣的产品,其开发和设计也十分扎实。
为增强收集性,团队针对不同稀有度的卡牌,在全息效果、光泽表现、UV 印刷等特殊工艺上加以区分,从视觉上呈现出各稀有度的层级感。
例如,从普通(C)、 uncommon(U)、稀有(R)到双稀有(RR),卡牌稀有度越高,视觉冲击力越强,质感也更为丰富。

艺术稀有(AR)和特殊艺术稀有(SAR)卡牌上,绘制了能体现宝可梦生态的插画,设计时在保证插画清晰度的同时进行加工。
超级稀有(SR)卡牌为了体现超编号的珍贵感和图鉴般的作用,插画中的宝可梦姿势便于玩家理解其特性。
宝可梦卡牌有明确的稀有度划分,每种稀有度都有其独特作用。

ultra rare(UR)作为最高级别的稀有卡牌,采用了注重闪耀感的印刷工艺。
以实体卡牌游戏为题材的手游《宝可梦卡牌》
本次介绍的手游《宝可梦卡牌》是宝可梦公司、DeNA、Creatures 三家公司的联合项目。其中,宝可梦公司负责发行和整体制作,DeNA 负责应用开发,Creatures 负责应用策划协助和卡牌游戏开发。
《宝可梦卡牌》的卡牌与实体卡牌的明显区别在于,它能加入数字表现。但在开发时,团队力求让其拥有与实体卡牌相近的质感。

《Pokémon Trading Card Game Pocket》的卡牌明确区别于实体卡牌,可加入数字表现。开发时旨在让玩家感受到与实体卡牌同等的质感。
制作过程中,团队重视那些看似不起眼却十分重要的细节,比如让卡牌可翻转、有厚度,营造出实际触摸卡牌的感觉。
《宝可梦卡牌》旨在打造的并非只是宝可梦卡牌的数字版,而是加入了独特魅力的卡牌,为此加入了可翻转、有厚度等元素。
此外,由于《宝可梦卡牌》考虑到了无实时对战对手情况下的游玩场景,团队也十分重视在这种情况下保留宝可梦卡牌游戏原有的游玩体验。
2. 从零设计并实现《宝可梦卡牌》独有的设计格式
接下来,技术美术半田以数字卡牌《宝可梦卡牌》的格式制作为中心,结合理念和基于理念的规格进行了解说。

本演讲介绍的卡牌格式一览。除基础格式外,还介绍了究极异兽(ウルトラビースト)等特殊格式的例子。
格式制作流程为:首先由 Creatures 制定理念和设计,然后 Creatures 与 DeNA 基于此协商具体实现方法和实施要求;之后由 DeNA 实现格式,并在 Creatures 的检查下反复打磨;最后经宝可梦公司和 Creatures 监修完成。制成的格式会被模板化,用于卡牌套装的批量生产。
格式制作流程:
- 理念设计:Creatures
- 探讨实现方法:Creatures、DeNA
- 格式实现与打磨:DeNA、Creatures
- 最终确认与监修:宝可梦公司、Creatures
本演讲以几种格式为例,讲解了理念设计及后续的实现过程。
《宝可梦卡牌》的实现
在纸质卡牌中,这种稀有度是基本格式。即使宝可梦和游戏设计本身发生新的变化,这些卡牌也能使它们作为宝可梦卡牌游戏成立。
《宝可梦卡牌》将这种稀有度作为基本格式的方针没有改变。

易于游玩是格式设计的概念,前面提到的宝可梦卡牌游戏的格式也导向了考虑到易玩性的设计。
格式的实施要求是满足宝可梦卡牌基本格式的 “类型易懂性”“插画易看性” 等。
♢和♢♢的格式实现
作为卡牌基础的 3D 模型设计为有厚度的板状,这样在卡牌倾斜或翻转时,能隐约看到侧面。
通过给卡牌增加厚度,力求接近纸质卡牌的手感。

作为游戏资产的格式构成

资产分为 “UI”“卡牌边框”“背景” 和 “插画” 四类,并在图层上合成绘制。
“UI” 上载有 HP 和技能等主数据信息以及包含本地化处理的文本。在游戏运行中,处理这些信息,并将离线渲染的纹理作为图层处理。
“卡牌边框” 的资产为了能在其他卡牌和格式中也使用而进行了通用化。
“背景” 按类型通用化。在卡牌资产的批量生产中,基于该卡牌的类型信息,通过编辑器功能自动选择背景色并将其资产化。
而 “插画” 因每张卡牌都不同,所以是该卡牌特有的资产。
通过这样组合图层构成资产,实现了简单的数据结构。据说这样有易于构建开发和批量生产流程等优点。
♢♢♢(钻石 3)的格式与实现
基本部分与♢、♢♢采用共同设计,但挑战在于对卡牌边框和插画进行不同的全息图处理。

我们认为,对于稀有度高于♢♢♢的卡牌,通过积极引入数字的优势,视觉冲击力会越来越大。
对于♢♢♢,在《宝可梦卡牌》中,判断为比纸质卡牌中被称为稀有的卡牌稍微增加一些视觉冲击力,整体平衡会更好,因此设计为加入两种全息图。
虽然这部分是在平衡所有稀有度的同时决定的,但据说正是这样细致的讲究,成为了每种稀有度价值产生的秘诀。

与前面介绍的♢、♢♢一样,在实现类型易懂性、插画易看性的同时,再现与纸质卡牌不相上下的全息图。
♢♢♢的实现格式
与♢、♢♢不同,卡牌边框和插画增加了两种全息图。

由于插画上的全息图 B 采用了图层结构,所以很容易替换。因此,制定了将几种全息图模式模板化,然后选择适合插画的模式(在实际设备上替换)的流程。
关于全息图,是对纸质卡牌的全息图表现在进行模拟。
在纸质卡牌的情况下,照射到卡牌表面的光通过名为 “衍射光栅” 的薄膜,按波长向不同方向衍射,从而产生虹色反射。
在《宝可梦卡牌》的全息图表中,制作相位纹理。通过着色器处理,用模拟的衍射光栅再现光的干涉图案、全息图的反射,并以黑白呈现。
进而,通过用渐变纹理给结果上色,表现出棱镜效果。

对于与插画重叠的全息图 B,通过用蒙版调整强度,兼顾插画中宝可梦的可视性。

力求在卡牌正面朝向时,全息图覆盖整个卡牌,且无论倾斜到哪个角度,颜色和强度的印象都能保持良好的平衡。
☆(星 1)和☆☆(星 2)的格式与实现
“☆(星 1)” 和 “☆☆(星 2)” 的插画绘制在卡牌的整个表面。
☆是从♢、♢♢、♢♢♢中选定的特殊艺术。☆☆是从♢♢♢♢中被称为 EX 卡牌的卡牌中选定的特殊艺术。
☆经常有描绘可爱宝可梦的机会,所以卡牌边框的设计给人柔和的印象。另一方面,☆☆因为是包含强大逻辑的卡牌,所以采用了给人干练印象的卡牌边框设计。

格式的实施要求是 “全息图的加工表现要衬托作为主角的插画”。要让看到卡牌的人首先被插画的魅力所吸引。

关于☆☆的实现,对卡牌边框和插画进行了不同的全息图处理。
在插画上的全息图 B 的实现中,给全息图添加了蒙版。
通过着色器处理,在卡牌正面朝向时,蒙版的效果更强,从而实现了让人们首先将目光投向作为主角的插画这一概念。


当卡牌正面朝向时,由于对全息图 B 施加的蒙版效果较强,主角的插画能清晰可见。当卡牌倾斜时,整体会加入全息图,营造出象征高稀有度的华丽印象。
♢♢♢♢(钻石 4)的格式与实现
♢♢♢♢(钻石 4)卡牌是在对战中经常发挥作用的卡牌。因此,该格式的插画以宝可梦之间有冲击力的战斗和激烈跃动的姿态为主题。
为了描绘出战斗的紧张瞬间,有意识地采用了仿佛要从卡牌边框中跳出的充满气势的姿势、鲜明的技能效果表现、宝可梦根据战斗状况展现出的表情,以及能增加存在感的华丽且有特色的全息图案。

♢♢♢♢格式的概念是,力求在整个卡牌中鲜明且有冲击力地展现宝可梦所拥有的强大、魄力和激烈感。
♢♢♢♢格式的要求是,通过数字特有的视差效果,在有效组合多个能实现更立体、更有魄力的表现的全息图模式的同时,使整个卡牌更鲜明地表现出宝可梦所拥有的强大和魄力。


与迄今为止介绍的卡牌不同,该构成通过增加效果、宝可梦的 3D 模型、有暗示性的背景插画图层,营造出立体感,以实现作为概念的魄力和战斗感。
背景插画在卡牌倾斜时,看起来有深度。这是通过着色器根据相机方向和卡牌角度偏移纹理 UV,虚拟地表现深度。

宝可梦的 3D 模型使用 Houdini 制作。从基础的插画数据生成网格,UV 映射和纹理素材的输出等也在 Houdini 中进行。

3D 模型被处理成仿佛要从卡牌的插画边框中跳出的样子。

绘制时利用模板功能,使 3D 模型部分被卡牌边框遮挡。
♢♢♢♢格式的全息图应用于背景、卡牌边框、ex/ex 规则的 UI、宝可梦的眼睛部分。这些全息图的鲜艳度也表现出了♢♢♢♢概念中宝可梦的强大和魄力。

卡牌在设计上,倾斜时能让人感受到整个卡牌的立体视差,同时能看到各种全息图的反射。宝可梦的眼睛闪闪发光,也营造出了生命感。
☆☆(星 2)的格式与实现
采用全插画的☆☆(星 2)卡牌格式,与♢♢♢♢一样融入了视差效果,同时进一步增强了特别感和获得时的中奖感。

虽然是整个表面都绘有插画的全插画,但让人想仔细确认宝可梦姿态的图鉴式要素也是重要的概念。
因此,插画采用了沉稳的姿势和角度,便于把握该宝可梦原本具有的身体特征、体型、细节等,而非战斗场景中那种动作激烈的姿势。
在纸质卡牌中,通过在这种稀有度特有的素材和加工上不断下功夫,实现了符合高稀有度卡牌的外观和手感。
这种思路在《宝可梦卡牌》中也没有改变。运用视差效果、华丽的全息图案、闪光效果、勾勒宝可梦插画部分边缘的金色轮廓等,充分营造出高稀有度的感觉。
☆☆卡牌的格式构成
全息图处理应用于 “卡牌边框”“宝可梦”“背景插画” 三个地方。

卡牌边框的全息图铺满细小的图案,给人更华丽的印象。
☆☆卡牌的宝可梦也用 3D 模型表现。但是,全插画的 3D 模型对宝可梦整体加入了全息图,并进行了轮廓表现。

全息图处理成只在卡牌倾斜时反射。力求在卡牌正面朝向时能清晰展示宝可梦的特征,而在倾斜时能进一步传达高稀有度的感觉。
轮廓通过蒙版纹理指定插画的轮廓,并设置成具有金色金属反射的着色器处理。
究极异兽的☆☆(星 2)格式与实现
在究极异兽的☆☆(星 2)卡牌格式中,倾斜时背景会动。以此表现究极异兽是特殊的宝可梦。
表现出究极异兽作为角色所具有的不安感和不祥氛围。但是,也力求使其成为让人想要获得、想要收集的卡牌,从而确定了格式。

《宝可梦卡牌》大胆地将究极异兽的类别栏图案也运用到背景插画中。通过施加在卡牌倾斜时背景图案会变化的数字表现,使得究极异兽特有的氛围和作为高稀有度卡牌的特别感都能强烈地被感受到。
究极异兽的☆☆卡牌的格式构成
与普通的☆☆基本构成相同,但在 UI 中添加了写有究极异兽的类别栏,背景插画采用了动画的大理石花纹。

大理石花纹的背景插画,如果过于有机或者不祥感过强,会给人不愉快的印象,因此也考虑到了要让人有想要收集的感觉。

动画采用像粘稠的液体流动一样的有机运动。根据卡牌倾斜的方向,呈现出不同的印象。
通过添加沿着大理石花纹的发光以及卡牌边框周边逐渐变暗的渐晕效果,营造出诡异、不安的印象。
在制作大理石花纹的背景插画时,首先 DeNA 和 Creatures 共同商讨确定了完成后的形象。

在共享格式的概念和参考资料的同时,通过面对面交流,详细地统一了完成后的形象。
关于动画方法,考虑到两点:一是根据卡牌的倾斜方向和角度,图形不断变化;二是当卡牌回到正面方向时,恢复最初的样子,以此研究实现方法。
最初想到的是通过流动图等进行 UV 滚动。
虽然考虑过通过 UV 变形使纹理扭曲来表现大理石花纹,但要根据卡牌的倾斜在各个方向移动 UV,同时又不破坏大理石花纹,难度似乎很高。
此外,流动图中常用的通过透明使动画循环的手法,往往看起来不符合物理规律,也担心会偏离卡牌表现的一致性和手感。

接下来想到的是反馈效果。认为通过递归更新动画,可以表现出类似液体的效果。
但是,这也难以满足当卡牌回到正面方向时自然地恢复最初样子这一限制条件。
于是,重新回顾了参考资料和液体灯光秀(※)的影像。
※ 一种用于 VJ 等的模拟影像表演,将墨水倒入透明板上,通过照明光投射这些墨水的颜色和运动。
回顾这些后,想到了要实现 “墨水被倒入,其范围扩大”“范围之间相互连接或相互挤压” 这两个特征。
认为可以使用细胞噪声(Cellular Noise)来实现按区域上色的手法。

通过以细胞噪声着色器(※)为基础进行实现,逐渐接近完成的形象。
※ 首先放置一些点,在像素着色器中计算该像素到各点的距离。根据到最近点的距离来决定颜色。

在这种细胞噪声着色器的基础上,实现了能够表现区域扩大等效果的大理石着色器。
大理石着色器的基本机制与细胞噪声相同,在放置点之后,让这些点具有影响度。像素不仅根据最近的点,还会根据与多个点的距离和影响度来决定颜色。

进而,添加了 UV 着色器和径向着色器等扭曲功能。
在通过大理石着色器处理测量像素与点的距离之前,通过虚拟移动像素的位置来表现扭曲。

然后进行纹理化处理。通过上述实现,从点扩展的影响值形成了从蓝色到红色的渐变。将该值作为纹理 UV 处理,从红色和黑色的纹理中获取颜色,从而像在山上绘制等高线一样制作出大理石花纹。

最后,为运动增添粘稠的韵味。
通过根据卡牌的倾斜控制用于表现大理石花纹的参数(点的位置和影响度、扭曲),制作出大理石花纹的运动。
为了让这种运动给人粘稠的印象,在参数控制中使用 PD 控制这种反馈控制,使动画的启动和停止产生延迟。
并且通过 Creatures 的检查不断改进。

由于大理石的发生源和细线连续的部分有机感过强,可能会引起不快感,因此在这些地方添加了位移处理等,调整了印象。

此外,还调整了无论向哪个方向倾斜卡牌,动画的速度和幅度都控制在一定范围内。
关于大理石花纹的动画,由于大部分表现采用的是生成式手法而非基于资产的手法,所以制作和微调预期的运动和视觉效果变得很困难。但据说正因如此,才得以营造出有机且符合究极异兽特点的印象。
异色 1、异色 2 的实现
实体卡牌的设计基本沿用了游戏《宝可梦》系列正作的设计。因此,在该系列的异色卡牌中,也采用了游戏中异色宝可梦的登场效果。
而《宝可梦卡牌》的产品设计并未沿用游戏系列,因此其异色宝可梦的登场效果是全新设计的,格式设计也基于这一思路展开。
异色 1、异色 2 卡牌的设计格式,以异色宝可梦登场瞬间的效果为理念。

异色 1、异色 2 的格式实现
格式的实现要求有两点:一是 “宝可梦的体色鲜明、辨识度高,让任何人看了都觉得印象深刻、易于理解”;二是 “通过该卡牌独有的表现,赋予其稀有感和高端感”。

异色 2 的格式构成:以星 2(☆☆)的格式构成为基础,加入了 “轨迹闪光”“弹跳闪光”“棱镜”“镜面球背景” 等异色卡牌特有的表现。
与究极异兽卡牌一样,异色卡牌的特有表现也采用了 “根据卡牌倾斜程度和方向,画面持续变化” 的元素。但严格遵循 “当卡牌转回正面时,恢复初始外观” 的规则。
半田还介绍了实现过程中使用的具体技法。
棱镜表现

当倾斜卡牌时,棱镜会从中心弹出。团队通过调整动画的到达时机、根据弹出距离改变光的分光效果等,实现了自然的表现。
首先,使用 Houdini 制作绘制棱镜所需的网格。
在圆形排列点的同时,通过噪点顶部(noise top)等调整至自然布局,然后自动在这些点上排列网格并分配 UV。

各顶点数据中存储了其所属网格的中心坐标。
通过 Houdini 的【Measure】SOP 节点计算每个网格的重心,并将其传递给各顶点,作为 UV2 存储并输出网格。

通过让各顶点保存部件的中心位置,便于通过顶点着色器制作部件各自的动画。
将生成的网格导入 Unity,通过顶点着色器移动网格。
利用顶点所带的中心位置(x,y)移动顶点,顶点位置 +=(自身中心 – 物体中心)× 移动值。

通过利用顶点附带的网格中心计算移动方向,实现了网格在不改变形状和大小的情况下向外弹出的效果。此外,还通过脚本实现了根据卡牌倾斜程度控制弹出的效果。

棱镜的纹理处理是基于网格的 UV 从纹理中获取颜色。
棱镜弹出的动画同时,通过略微偏移纹理 RGB 的获取值,营造出分光的效果。在颜色插值中使用 OkLab 色空间,能够在保持明度和彩度感知均匀的同时进行颜色插值,使整体格式给人更自然的感觉。
镜面球背景
背景由小圆盘铺满,当卡牌方向改变时,反射的圆盘也会随之切换。

为接近实体卡牌的闪耀感,团队营造出了金属质感。
为确保卡牌正面朝向时外观一致且可重现,团队实现了 “根据卡牌角度,光泽方式唯一确定,同时看起来又在随机地持续产生一定变化” 的机制。
镜面球的着色器处理流程:
- 获取倾斜方向
- 基于倾斜方向从角度反射映射纹理中获取值,转换为 0 到 1 之间的反射指数
- 利用镜面球纹理,在 R 通道中加入圆盘的形状蒙版,在 G 通道中为每个圆盘加入随机的反射指数值。着色器从镜面球纹理中获取反射指数,若与步骤 2 转换的反射指数相近,则让该像素产生反射。

步骤 3 中,同时添加形状蒙版,形成圆盘形状。
通过以上流程,最终实现了 “光泽方式根据角度唯一确定,同时兼具随机感,且随动作持续产生一定变化” 的表现。
角度反射映射与镜面球纹理的制作

角度反射映射和镜面球纹理是使用 Houdini 制作的。
团队曾尝试用噪点纹理制作角度反射映射,但由于变化过快或存在不变化的时刻,导致卡牌动作的变化量不均匀,因此未采用。
经过反复试验,团队实现了 “无论卡牌旋转还是改变倾斜程度,都能持续产生一定量的无冗余变化” 的映射,最终制作出漩涡状纹理。利用 Houdini 特有的程序化机制,高效制作出了参数化纹理以及异色 1、异色 2 等多种模式。
镜面球的纹理生成步骤:

- 圆盘呈球状排列,为每个圆盘赋予反射指数
- 配置网格,叠加镜面球,传递反射指数
- R 通道:镜面球形状蒙版;G 通道:反射指数
步骤 1 中,使用【Copy to points】SOP 节点,将圆盘铺满排列,并为每个圆盘赋予 0 到 1 之间的随机值作为反射指数属性。
步骤 2 中,创建与纹理分辨率和分割一致的网格,叠加镜面球形状,然后通过【Attribute transfer】节点将形状和反射指数传递给网格并着色。
由于在着色器处理中,G 通道需要比形状蒙版覆盖更大的范围,因此调整节点的【Distance threshold】参数,实现无间隙传递。
最后将网格转换为纹理。

本次使用【Top to generator】节点导入网格几何图形,将每个图元的颜色属性转换为像素,从而生成纹理。
此外,通过结合全息和金属感的着色器,力求接近实体卡牌的闪耀感。
轨迹闪光
“轨迹闪光” 是指,当倾斜卡牌时,闪光会旋转着沿半圆移动,其轨迹会沿着轨道延伸。
轨迹闪光的表现由专门开发的脚本和着色器控制。

团队首先对闪光表现进行了研究。初期实现阶段采用了立体表现,但与卡牌整体不协调,显得像独立的效果。

为保持《宝可梦卡牌》表现的一致性,接近该作品特有的真实感和质感,团队将其改为平面表现,且不使用公告牌等三维表现。
闪光的绘制机制
绘制所用的网格是由多个网格叠加而成的单一网格。为实现着色器动画,每个网格都有图元 ID。

闪光旋转绘制步骤:
- 脚本处理:根据卡牌倾斜程度计算图元的旋转等参数,并将参数传递给材质。控制逻辑为:卡牌倾斜时缓慢旋转;卡牌正面朝向时,反向计算减速,使闪光与初始外观一致。
- 顶点着色器基于图元 ID 参考接收的参数,进行旋转动画。
- 片段着色器对旋转后的图元进行纹理处理、亮度调整等。

轨迹表现
团队反复打磨,力求让轨迹不仅是单纯的轨迹,还能呈现出类似相机镜头光效的印象。

轨迹形状在起到沿轨道延伸作用的同时,调整为始终向末端逐渐变细。轨道的折返部分变细,且沿行进方向也有细状部分突出。
此外,为防止卡牌快速移动时两个轨迹重叠,亮度和粗细参数不仅随时间衰减,还随距离衰减,并调整至两者能平滑兼顾。

轨迹的绘制机制:
由于轨迹路径预先确定,无需动态生成或变形网格,因此采用了将轨迹绘制在网格上的方法。
- 脚本控制:根据卡牌倾斜程度处理闪光的轨道和衰减,计算圆周上各顶点的亮度参数,并通过更新网格顶点数据传递。
- 顶点着色器处理:用亮度参数除以 UV 缩放。在基于 UV 获取纹理时,UV 缩放小的部分轨迹粗,UV 缩放大的部分轨迹细。
- 基于 UV 获取纹理的结果。

弹跳闪光
“弹跳闪光” 是指,当倾斜卡牌时,闪光会像弹跳一样动起来的动画。

缩放动画使用了 Unity 的 AnimationCurve。

根据卡牌倾斜程度从曲线中获取缩放值,通过顶点着色器进行缩放。利用曲线实现了高自由度和直观的调整。
本次仅介绍了异色 2,异色 1 也采用了类似的实现方式。
本次介绍的格式一览

4. 积极运用 Houdini 的程序化自动处理 —— 从 2D 插画到网格生成的工作流程
在长屋和半田介绍了卡牌的设计格式及其实现后,广田以艺术作品为例,介绍了数字卡牌的网格制作过程。
在实现数字表现时,由于每批发行的卡牌数量众多,如何减少资产制作量成为一大课题。
为解决这一问题,团队构建了使用 Houdini 的卡牌自动生成工作流程,力求最大限度为艺术家保留打磨表现的时间。
资产制作的整体工作流程
首先,从 Photoshop 输出各图层为 PNG 格式,附属信息(如绘制视角等)输出为 JSON 格式。
将这些文件导入 Houdini,进行 PNG 多边形化、试用深度设置、材质赋予、透视校正等形状生成操作。
接着制作着色器用纹理,生成纹理打包等绘制要素,对细节部分进行非破坏性调整,最后以 FBX 和 PNG 格式输出到 Unity。
数字卡牌制作的课题是提高制作量和速度,为此构建了 Houdini 自动生成工作流程。

通过将数字卡牌制作中艺术家使用的工具限定为 Photoshop、Houdini、Unity 三种,减少了数据转换等工作。
① Photoshop 流程
首先,Creatures 与 DeNA 协商如何将宝可梦插画立体化,确定图层构成。
插画完成后,通过 Photoshop 脚本将头部、手臂、腿部等各部位按图层输出为 PNG 格式。
分别输出原画、涂色、线稿三种类型的图层,同时将图层的叠加、半透明等绘制信息以 JSON 格式输出。
背景插画、效果等稀有度表现所需的非宝可梦插画素材也会适当输出。

② Houdini 流程
着色器用的图像处理不在 Photoshop 中进行,而是在 Houdini 中进行合成。因此,Photoshop 脚本基本只实现必要图层的显示 / 隐藏等简单功能。
在 Houdini 流程中,团队构建了 “多边形化→材质赋予→透视校正→纹理图像生成” 一系列工作的程序化自动处理流程。
多边形化
首先将插画的 2D 图像转换为多边形。导入从 Photoshop 输出的 PNG,从下层开始依次通过【Trace】节点进行多边形化,并在 3D 空间中从后往前排列。
通过在此阶段设置一定的深度,让艺术家能比从头开始工作更快地着手打磨。
在理念阶段,Creatures 就对深度强度进行了研究,最终确定为 “保留实体卡牌质感,同时能感受到视差” 的深度。

材质赋予
材质赋予是通过【Python】节点参考从 Photoshop 图层绘制设置输出的 JSON 进行的。
在此阶段,为各部位设置叠加、半透明等材质。之后,判断与卡牌边框的交叉情况,为卡牌边框前方和后方的绘制部分设置材质。

工作过程中,仅创建带有材质名称的多边形组,在导出前为组赋予实际材质。
由于 Houdini 内几乎所有节点都支持组,且支持使用通配符重命名等便捷控制,因此处理过程中始终保留该组。
透视校正
在 3D 空间中添加深度后,相机视图中靠近相机的部分会显得较大。
为了在从正面观察卡牌时重现插画原本的外观,团队使用【Wrangle】节点,通过免费脚本语言 VEX 进行透视校正。
由于相机从正面拍摄,只需根据与相机的距离计算并设置各点的缩放值。有了这一机制,艺术家无需担心与原始插画的偏差,可放心地按点调整深度。

纹理图像生成
使用可基于节点进行图像处理的 COP 制作轮廓蒙版、全息等着色器用素材。
纹理打包使用 UV 布局节点,将多边形化的插画放入最终纹理尺寸的网格中。
布局完成后,计算原始插画各图层的移动位置,在 COP 中进行同样的移动处理,最终制作出交付给 Unity 的打包纹理。
对于效果,将各素材嵌入 RGB 通道进行整合。由于 COP 便于按通道操作,易于与几何图形联动,因此适合制作着色器用素材。

初期团队曾用 Photoshop 脚本来进行这类图像处理,但改为 Houdini 的 COP 自动处理后,省去了占原始 Photoshop 脚本三分之一的复杂图像处理代码,可维护性也提高了。
此外,COP 节点上会以缩略图显示各阶段的处理内容,无需在脚本断点处停止确认,调试和调整工作也变得更轻松。
③ 艺术家的手动调整
自动处理后,由艺术家进行手动调整。
要提高质量,需要对各部位进行细致调整。但为避免在调整插画或更改参数时破坏编辑内容,团队构建了可通过创建选择区域进行非破坏性调整的机制。

在视差调整中,按宝可梦各部位调整深度感,实现了无顶点数量问题的非破坏性调整。
同时,还通过参数对多边形数量、UV 打包缩放、追踪插画时的阿尔法阈值、透明 / 不透明区域指定等绘制要素进行细致调整。

尽管不同稀有度的输出素材存在差异,但有视差的卡牌基本都通过以上工作流程制作。
从原始插画到网格生成、纹理制作的自动化处理,节省了输出初稿的时间。

通过巧妙运用 Houdini 的程序化处理,让艺术家能有时间调整表现效果。
项目初期采用的是 Maya 工作流程,引入 Houdini 后,工时减少了约 60%。
此外,采用 COP 进行图像自动处理,减少了 Photoshop 脚本的代码量,提高了可维护性。
5. 独立控制卡牌的外观与姿态 —— 运行时数字卡牌的处理方法
最后,图形工程师山本介绍了制作完成的数字卡牌在游戏运行时的处理方法。
如前所述,《宝可梦卡牌》的数字卡牌是作为具有独特全息处理、视差表现等的厚卡牌制作的。
运行时需要能在表现上自由移动这些卡牌。
除了开卡包和对战,卡牌还会在交易、获取挑战等各种场景和表现中出现,每种表现中卡牌的移动方式也各不相同。
此外,全息等表现也需要配合场景中卡牌的移动进行联动。

但在 3D 空间中自由移动制作好的数字卡牌时,出现了各种问题。
例如,在实际游戏中,若将卡牌倾斜到无法移动的范围,皮卡丘卡牌的发光效果会比预期更遮挡角色;火焰卡牌的全息表现会覆盖到角色身上,显示过强。

若为避免出现意外外观而限制卡牌的移动范围,会导致运行时表现中无法自由旋转卡牌,缩小可使用的表现范围。
为解决这一课题,《宝可梦卡牌》的实现需要能独立控制卡牌的姿态和当时的外观。

若能独立控制卡牌的姿态和外观,就能在 3D 空间中自由移动卡牌的同时,确保无论卡牌处于何种姿态,全息、视差等表现都符合预期。此外,还能在一定程度上实现卡牌外观随姿态联动变化。

作为解决方案,《宝可梦卡牌》设计了运用画面外渲染的方法(off screen rendering)。
本次实现的 3D 数字卡牌的画面外渲染中,为体现卡牌的厚度,仅在卡牌表面运用画面外渲染。
为有厚度的卡牌模型表面准备画面外渲染用的平面多边形,将在另设的专用空间中拍摄的卡牌外观应用到该平面多边形上。

3D 卡牌为体现厚度,在专用空间拍摄的数字表现用模型表面运用画面外渲染。
为便于理解,拍摄的纹理外侧设为黑色,实际游戏中通过着色器处理为透明区域。
此外,部分卡牌(如异色宝可梦卡牌)的效果等要素可能会超出卡牌外侧,因此画面外渲染用的多边形比卡牌本身的形状预留了一定余量。
另外,在专用空间拍摄卡牌时,若卡牌倾斜,拍摄到的部件会处于叠加状态,能看出与原始卡牌形状的差异。

分别拍摄不同姿态的卡牌:正面外观(左)呈长方形轮廓,倾斜姿态下呈梯形(右)。此外,由于卡牌左侧靠近前方,拍摄范围更大。
若在此状态下应用画面外渲染纹理,会导致表现用模型的卡牌形状与拍摄的卡牌插画部分错位,出现怪异外观。

因此,在进行画面外渲染时,团队实现了 “在渲染过程中校正纹理 UV,使拍摄的文本插画部分形状与卡牌模型形状一致”。
使用投影变换进行校正:将以不同姿态拍摄的卡牌应用到 3D 模型后,最终在场景中从正面看时,外观会调整为预期效果。
最终,在进行画面外渲染时,为每张卡牌设定基准姿态:当表现用卡牌的姿态在基准姿态的一定范围内时,让表现用卡牌与拍摄用卡牌的姿态联动;反之,若表现用卡牌的姿态相对于相机横向等超出一定范围,则限制拍摄用卡牌的姿态在一定范围内进行拍摄。
通过这种实现方式,无论卡牌处于何种姿态,全息、视差等表现都能保持预期效果,不会出现异常。

实现了可在 3D 场景中自由移动的数字卡牌。

这种方法不依赖卡牌类型和表现类型,可广泛用于各种表现。
最后,本次会议内容总结如下:
在还原实体卡牌的基础上,追求数字独有的表现,设计了众多融合两者的独特表现,构建了能稳定制作大量卡牌的制作环境,开发了可自由且有魅力地移动卡牌的技术,未来也将秉持这种理念继续开发!
原文:紙のカード本来の魅力とデジタル特有の表現を両立させる。『Pokémon TCG Pocket(ポケポケ)』カード表現の制作手法【CEDEC2025】|ゲームメーカーズ