简介成套麻将牌美术资源面向游戏开发者、UI设计师与独立游戏团队用于快速搭建包含完整牌库的麻将桌游场景解决牌面素材分散、风格不统一和整理耗时的问题。资源压缩包共218个文件由217张PNG图片与1个XML索引文件组成包体仅1.43MB体积紧凑便于集成。PNG图片系统收录筒、条、万、东南西北、中发白及花牌等常规麻将牌型并提供多视角素材满足2D精灵与3D模型在不同镜头角度下的呈现XML索引采用PList结构记录图像分组与布局配合Unity、Cocos2d-x等引擎的图集加载接口可自动批量映射牌面位置、旋转角度与大小降低手工摆放成本。整套资源采用低饱和暗色调视觉上克制柔和既贴合传统牌桌氛围也可缓解长时间对局带来的疲劳感。目前已有783人学习下载适合需要快速完成美术准备、集中精力打磨玩法和交互细节的开发者。 做了好几年游戏美术接手过不少棋牌项目说实话最容易被低估的就是“麻将牌完整美术资源”这件事。别人乍一看觉得不就是一百多张牌吗找对参考图描一描就完事了。真到自己动手才会发现一套能直接落地到引擎里的麻将资源难点根本不在“画得好看”而在于视角全不全、规格稳不稳、放到不同界面里会不会露怯。我最近完成的这套麻将牌资源核心目标非常明确包含全部视角从手牌区玩家看到的正面特写到牌墙俯视时的顶面堆叠再到对家视角的牌背、出牌动画里的翻转中间帧所有你能想到的展示角度全部单独做好、单独导出、单独命名。这篇文章把整套资源从需求拆解、美术规范、建模渲染到引擎适配的过程完整记录下来方便后续做棋牌游戏或者独立项目的美术同学直接参考。1. 项目概述与需求拆解1.1 为什么“全部视角”是刚需很多新手美术第一次做麻将素材只交付一张牌面正面图等到程序那边开始搭界面就发现问题了手牌区需要微微倾斜的立体感牌墙是俯视叠加对家出的牌要展示牌背特效播放时需要牌翻转的中间状态。这些画面如果都靠一张正面图硬拉伸、硬旋转效果会非常假尤其是带厚度的牌旋转之后像纸片一样玩家一眼就能看出来。我这次做资源前先找程序同事对了一遍使用场景列了一个角度需求表玩家自己手牌是斜45度左右正视能看见一点顶面牌山和牌墙是纯俯视顶面细节最重要已经打出去的牌会横置展示侧面厚度露出来动画特效需要正面到背面的完整旋转序列还有结算界面偶尔会给大特写。也就是说一套真正完整的麻将牌资源绝不是“一张正面图走天下”而是同一张牌要有多角度输出。把这层需求想清楚了再开始动手后面才不会返工。1.2 牌种构成与资源清单标准麻将一套144张包含万子、条子、筒子各36张字牌东南西北中发白28张花牌8张。但如果只按“有牌面的牌”来做很容易漏掉一些辅助资源比如游戏加载界面要放一张占位牌、商店展示需要一块单独的牌背图标、主界面的大厅背景可能要用几张精致的大尺寸渲染图。类别具体内容数量美术注意点万子一万至九万36数字加汉字五万可做红色点缀版本条子一条至九条36一条是孔雀造型不能简化成一根棍筒子一筒至九筒36圆饼阵列间距必须均匀风牌东南西北16蓝色底黑字手写书法体箭牌中发白12红中、绿发、白板白板需要纹理衬托花牌春夏秋冬梅兰竹菊8四君子风格插画色彩可以放开算下来正常情况是136张主力牌带花牌则144张。我这套资源按144张做并且在文件结构里预留了“通用牌背”“通用白牌”“光影特效牌”这几个特殊槽位因为程序后面经常会临时找你要一张“没有任何字、纯装饰的牌面”用来做新手引导或者空状态。1.3 视角体系划分与交付标准我把“全部视角”拆成了六个固定角度类别避免制作时凭感觉乱输出正视视角镜头正对牌面主要用于图鉴、列表图标。斜视45度视角玩家手牌常用角度能看到牌面加一点点顶部厚度立体感最强。俯视视角模拟牌墙和牌堆顶面占据主要画面。侧视视角展示牌体厚度出牌区横置时使用。纯背面视角牌背纹样配合斜视或俯视的背面对应角度。动态序列帧绕Y轴旋转一圈每15度一帧共24张用于出牌、碰杠等特效。按这个标准计算一张牌至少需要30张图全套144张牌就是4320张输出图。这个数量在实际项目里确实太大所以我会在后面的“引擎适配”部分说明如何通过图集和运行时合成来瘦身。但最初制作流程一定要按全视角来做因为后期缩减容易缺图补图才最麻烦。2. 美术规范与视觉设计细节2.1 造型比例与轮廓处理麻将牌的实物比例基本固定长宽比大约1.33比1厚度约为长度的三分之一。游戏里为了方便识别通常会把牌体稍微加宽一点但也不能太夸张太宽了就没有牌的感觉太窄了文字会挤在一起。我这次采用的是1.25比1的长宽比例视觉上既饱满又保留了真实麻将的辨识度。牌体四周的倒角是一个非常关键的细节。倒角太小渲染出来边缘会有明显的锯齿感倒角太大整张牌看起来像一块圆润的积木缺少硬朗气质。实践下来倒角半径控制在牌宽度的4%左右比较合适也就是一张宽512像素的牌倒角范围做20像素左右。在这个基础上我还会在牌体上下边沿做一圈非常微小的内凹这样高光扫过时会产生一条精致的轮廓光立体感立刻就不一样了。2.2 牌面纹样与雕刻细节麻将牌的牌面不是简单印上去的图案而是带浮雕感的刻痕。真实麻将的图案是凹进牌面里的边缘有明确的受光面行内常说的“浮雕感”就是指这个。制作时要特别注意一个图案不管在正面看多精细一旦转到斜45度视角如果凹槽深度不够图案就会直接“消失”在反光里。我这次的解决方案是在Substance Painter里给牌面单独做了一层高度贴图图案刻痕深度控制在0.6毫米左右并在凹槽内部叠加深色环境光遮蔽。渲染方向光的时候凹槽一侧会有明显阴影另一侧被照亮这样即使牌面缩小到128像素图案轮廓依然清晰可辨。针对不同的牌种我还做了细分处理万子的汉字笔画粗壮刻痕可以稍微浅一点筒子的饼状图形面积大刻痕稍深会显得更有质感条子里的一条比较特殊是孔雀缠绕竹枝的图形细节多刻痕要浅否则会糊成一团。2.3 材质与颜色体系牌面底色不要用纯白色。纯白在多数引擎的默认光照下很容易过曝高光一打整个牌面就白成一片文字反倒看不清。我采用的是偏暖的象牙白色值大约在F5F0E8也就是带一点点米色调既显得有质感又能压制高光的溢出。配色上万子和筒子一般用蓝色系作为图案主色建议偏深蓝接近24548B条子用竹绿色系接近1B7A43红中不用正红而用偏朱砂的红接近C92A1E看起来会有一种传统漆器的厚重感发财的绿色要偏翠绿接近0E8C4A不能发黄白板比较考验功力表面完全没有图案只能靠材质纹理和阴影来表现我给它加了一层很淡的云纹和高光渐变让它看起来是“有内容的空白”而不是一块秃秃的白砖。2.4 牌背与侧边设计牌背是最容易被敷衍、但玩家最容易注意到的部分。麻将游戏里牌背会在牌墙、对方手牌、出牌区反复出现如果做得粗糙整个游戏的精致度都会被拉低。牌背纹样我选择了传统织物纹理加上菱形网格压花类似帆布质感同时在四周做一圈窄边框让中心图案有内容而不拥挤。颜色上牌背我用的是深墨绿和深藏蓝两个版本因为不同游戏大厅的氛围不一样深色牌背在暖色桌面上更耐脏也更有质感。侧面厚度区域我也做了专门处理颜色比牌底略深并且在靠近牌背的那一侧加了一条浅浅的分界线这样当牌横置在桌面上时玩家可以清晰区分牌面和牌背的方向。3. 实操流程一套牌从模型到全套资源3.1 前期参考与风格定调动手之前我花了一天时间专门看实物麻将图片和市面上的游戏参考。实物照片最好的地方在于能看到真实的光影细节高光位置、侧面反射、凹槽阴影。这些细节空想是想不到的。我最后定下来的风格是“半写实国风”也就是造型比例贴近真实麻将但整体色调更统一、更干净适合游戏界面展示。这个阶段还需要确定一个最重要的技术参数基础分辨率。我采用512像素作为主分辨率因为128像素太小粗糙的纹理完全藏不住1024像素又太重一张牌面就占掉不少内存。512像素是棋牌UI图标的黄金档位既清晰又容易压缩。如果需要做大厅背景的特写展示我会重新渲染4K大图但只用于特定活动页面不会进入运行时资源包。3.2 建模与雕刻环节要点我这次用Blender建模整体流程并不复杂但有几个步骤很关键。第一步是创建牌体基座一个带倒角的立方体。第二步是在牌面上通过曲线和文字工具生成各种牌面图形转成网格后调整高度得到浮雕结构。这一步最难处理的是“一条”的孔雀造型和“花牌”的插画图案因为曲线多转网格后容易出现交叉面我通常会手动清理一遍。浮雕细节做完后我会去“雕刻模式”里用黏土笔刷和标准笔刷扫一遍尤其是图案边缘和倒角区域。这一步是为了消除程序化参数留下的过度整齐感让牌面看起来更像手工制品。雕刻时注意笔刷力度不要太大一个地方反复刷补会让表面的起伏变得油腻光影一打全是杂乱的亮斑。3.3 多视角渲染输出方案渲染环节我用的是Blender的Cycles引擎虽然慢一点但牌面这种小物件的材质效果确实更扎实。为了方便批量输出我搭建了一套固定的“转台式”拍摄场景灯光固定相机固定牌体放在场景中央通过旋转牌体自身来输出不同角度。具体到拍摄角度我会在基座模型中预置一组旋转角度参数正面为0度斜视为45度俯视为75度侧视为90度背面为180度。加上动态序列帧的24个角度每张牌要渲染约30张图。为了减少重复劳动我写了一个简单的Blender Python脚本批量控制渲染import bpy import math import os scene bpy.context.scene obj bpy.data.objects[Tile] angles list(range(0, 360, 15)) # 每15度一帧 output_dir //output/Tile_1Wan/ for ang in angles: obj.rotation_euler[2] math.radians(ang) scene.render.filepath os.path.join(output_dir, fTile_1Wan_angle_{ang}.png) bpy.ops.render.render(write_stillTrue)脚本跑起来之后我只需要检查每个角度是否正常即可。整套144张牌全部渲染完毕我大概用了两天时间其中大部分时间其实是在等渲染和检查坏帧。这里提醒一下正式跑量之前先用三张不同类型的牌万子、筒子、字牌跑通全流程确认材质和灯光没问题后再用脚本跑批量不然144张牌全部渲染完才发现光线不对返工成本非常高。3.4 批量处理、命名规范与图集打包渲染出来的原始图是4K的不能直接用需要按规格批量缩图。我习惯用Python的Pillow库统一处理成512、256、128三档导出同时按使用场景分类。命名规范是美术和程序沟通的桥梁格式必须严格统一没有商量余地。命名方案我采用前缀Mj 牌种缩写 牌值 视角 尺寸。Mj_Wan_01_Front_512.png Mj_Wan_01_Angle45_512.png Mj_Wan_01_Top_512.png Mj_Wan_01_Back_512.png Mj_Tiao_01_Front_512.png Mj_Feng_Dong_Front_512.png Mj_Hua_Spring_Front_512.png目录结构则按照项目惯例来Art/Mahjong/Tiles/ ├── WanZ / 01 / ... ├── TiaoZ / 01 / ... ├── TongZ / 01 / ... ├── FengPai / Dong_Nan_Xi_Bei / ... ├── JianPai / Zhong_Fa_Bai / ... └── Common / Back / ...图集打包我用TexturePacker处理把正向视角的牌面打包成一组图集牌背单独打包成一组侧面和顶面再各成一组。这样做的好处是程序加载时按需加载不会一上来就把所有大图塞进内存。4. 引擎适配与常见问题排查4.1 缩放进锯齿与糊边问题全套资源做出来后放进Unity做真机测试第一个遇到的就是缩小后牌面发糊的问题。4K原图直接建成512像素会丢失大量纹理细节尤其是细小的文字笔画缩小后几乎糊成一团。这个问题我调整了两轮才解决。第一轮是修改缩图算法使用Lanczos重采样替代默认的双线性插值同时先把4K图降到1024再做一次轻度锐化最后降到512。这样中间多一步等于给细节一个过渡保留的机会。第二轮是引擎侧的设置所有麻将贴图开启Mipmap并且把纹理的过滤模式设置为Trilinear这样在牌面旋转或拉近拉远时不会出现明显的闪烁或者模糊跳跃。4.2 视角切换时的识别度问题斜45度视角在渲染时最容易出现的问题是筒子的圆饼形状变形。真实透视下俯视角度稍微大一点一排圆饼就会歪掉九筒看起来像是被人踩过一脚完全没法用。这个问题让我意识到固定相机视角不能使用透视投影必须使用正交投影。正交投影下牌面图案的大小和相对位置不会因为角度变化而变形只是整体产生面积收缩识别度和正面完全一致只是多了立体感。这让手牌区的显示效果好了非常多。另外如果项目里有“带角度的特写”需求我会做一个专门的视角控制在35度以内而不是45度因为超过45度后牌面文字的顶部会被牌檐遮挡识别会很吃力。4.3 包体优化与运行时拼接最开始我说的“一张牌30张图、144张牌4000多张图”如果真按原样放进包体那游戏安装包会大得离谱。实际工程里的做法是“多视角静态图 运行时合成”结合使用。具体来说正式版只内置三个视角的静态图牌面正视、牌背正视、顶面俯视。斜视角和动态序列帧不再单独存图而是在运行时通过Shader或简单的旋转动画来模拟。针对黄铜、翡翠、纯金等特殊皮肤再做少量的高精度特写图但只用于商店展示界面。这样一套144张牌实际运行时的贴图数量可以控制在400张以内加载速度和包体大小都回归正常。4.4 几个我踩过的坑白板高光过曝。白板没有图案材质反射一旦过高整张牌就会亮成一片。解决方法是把白板材质的高光强度单独调低并用一层非常细的云纹遮罩控制光照区域。法线贴图方向不一致。我最初做左右侧视角时法线贴图做了水平镜像结果灯光从左打和从右打同一张牌的明暗完全不同。排查了很久才发现是镜像时没有把法线X轴反向。命名大小写混乱。早期我自己导出的图叫Mj_Wan_01_Front后来程序收到一批是mj_wan_01_frontWindows下没问题打包到安卓和iOS后有一部分文件找不到。后来我们约定所有文件名全小写下划线分割彻底避免了这个问题。花牌容易被忽略。花牌不是每局都出现但玩法里一旦需要缺图就会造成界面空白。我建议在制作初期就把花牌放进牌种清单即使不用也先把图做出来备用。5. 资源扩展与复用思路5.1 颜色变体与换皮能力一套完整的麻将牌资源做完后最大的价值不在第一次交付而在后续的换皮能力。我这个项目目前已经用同一个模型和渲染管线派生出了金色边框、翡翠底色、暗金描边等三个主题版本每次只需要改材质参数和少量贴图通过脚本重跑一遍批量渲染半天就能出全套新主题。5.2 动态出牌动画的帧复用动态序列帧虽然不作为常规运行时资源但在某些特效中非常有用。比如出牌时的“飞牌”效果、胡牌时的庆祝动画都直接调用了最初渲染的24帧序列图通过图集序列帧的方式播放效果比纯代码旋转要顺滑很多而且美术可控性强想要什么节奏调什么节奏。5.3 牌面组件化改造如果接着往下做我建议把牌面拆成三个独立层底纹图案层、数字文字层、装饰边框层。这样程序运行时可以自由组合比如给一万换上特殊活动的金色数字或者给白板配上节日边框。组件化的基础就是初期建模时就把这三层分开制作渲染时再合并输出。万一后面需要做合成功能就不用重新拆资产了。最后再分享一点个人体会做这种重复度很高的批量资源最大的坑不是制作本身而是流程不够“工业化”。把所有角度、所有命名、所有尺寸都提前定死用脚本批量处理做出来的资源才真正可靠。只要前期标准和管线搭得稳后面换皮、扩展、多端适配都会非常省心。本文还有配套的精品资源点击获取