[{"data":1,"prerenderedAt":354},["ShallowReactive",2],{"\u002F2021-01-24-cedec-2016-sfv-note":3},{"id":4,"title":5,"body":6,"date":331,"description":12,"extension":332,"meta":333,"navigation":336,"path":348,"seo":349,"stem":350,"tags":351,"__hash__":353},"blogs\u002F_legacy\u002F2021\u002F2021-01-24-cedec-2016-sfv-note.md","CEDEC2016-《街头霸王5》的美术设计笔记",{"type":7,"value":8,"toc":315},"minimark",[9,13,16,25,32,35,39,42,45,52,55,59,62,68,71,74,80,83,89,92,95,108,114,117,120,126,129,132,135,141,144,150,153,156,159,165,168,174,177,181,184,187,193,196,202,205,208,216,219,222,228,231,234,240,243,249,252,255,258,264,270,276,279,285,288,294,297,300,303,309,312],[10,11,12],"p",{},"CEDEC2016上街霸5的分享。",[10,14,15],{},"主要参考以下内容：",[10,17,18,19],{},"PPT: ",[20,21,22],"a",{"href":22,"rel":23},"https:\u002F\u002Fcedil.cesa.or.jp\u002Fcedil_sessions\u002Fview\u002F1540",[24],"nofollow",[10,26,27,28],{},"gamesindustry.biz: ",[20,29,30],{"href":30,"rel":31},"https:\u002F\u002Fjp.gamesindustry.biz\u002Farticle\u002F1609\u002F16090703\u002F",[24],[10,33,34],{},"街霸5，是使用UE4制作的。",[36,37,38],"h2",{"id":38},"格斗游戏美术制作",[10,40,41],{},"格斗游戏要让玩家能够瞬间对状况进行把握，所以很多地方不会遵循现实规律。",[10,43,44],{},"卡普空的街霸项目组内部，有一整套相关的方法论：",[10,46,47],{},[48,49],"img",{"alt":50,"src":51},"image-20210120205628473","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120205628473_thumb.png",[10,53,54],{},"在像素时代有着非常大的作用，但是由于并不是完全按照现实的身体构造来的，要使用3D来制作就会有些问题。",[56,57,58],"h3",{"id":58},"模型身高",[10,60,61],{},"在官方设定中，隆的身高是175cm，而贝卡的身高是182cm。",[10,63,64],{},[48,65],{"alt":66,"src":67},"image-20210120210652818","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210652818_thumb.png",[10,69,70],{},"但是在3D模型上看，两人的身高基本差不多。",[10,72,73],{},"最终选择以玩家能看到的印象为主，在战斗中待机时，让贝卡的动作改为直立来解决",[10,75,76],{},[48,77],{"alt":78,"src":79},"image-20210120210717273","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210717273_thumb.png",[10,81,82],{},"实际上就变成了这样：",[10,84,85],{},[48,86],{"alt":87,"src":88},"image-20210120210739498","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210739498_thumb.png",[56,90,91],{"id":91},"动画",[10,93,94],{},"角色的动画在制作时主要考虑三个方面：",[96,97,98,102,105],"ul",{},[99,100,101],"li",{},"格斗技：空手道专家一眼就明白是怎样的攻击方式",[99,103,104],{},"重心与节奏：看起来要帅要流畅",[99,106,107],{},"性能：格斗游戏设计上的攻击判定",[10,109,110],{},[48,111],{"alt":112,"src":113},"image-20210120211322219","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120211322219_thumb.png",[10,115,116],{},"例如：桑吉尔夫的行走动画，刻意采用了正面视角进行动作的修正。防止实际上是以一种怪异的姿势在走路。",[10,118,119],{},"另外，为了表现原本的2D游戏中的感觉，部分角色的姿势采取了旋转5度的形式。",[10,121,122],{},[48,123],{"alt":124,"src":125},"image-20210120212141746","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212141746_thumb.png",[10,127,128],{},"必杀技的设计上，一定要让玩家能够轻松的使用语句对其进行描述，这样才能让玩家方便的共享感动的情绪。",[56,130,131],{"id":131},"背景中的颜色设计",[10,133,134],{},"要让背景与角色有很好的层次感，以下是2D时代的例子：",[10,136,137],{},[48,138],{"alt":139,"src":140},"image-20210120212427714","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212427714_thumb.png",[10,142,143],{},"为了在3D世界上达到这个效果，实现了Multi Color Grading的功能：",[10,145,146],{},[48,147],{"alt":148,"src":149},"image-20210120212640514","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212640514_thumb.png",[10,151,152],{},"场景的不同区域采用了不同的LookupTable。上图的例子并不是针对所有的场景，对于不同的场景会根据其特点采用不同的Multi Color Grading分布。",[56,154,155],{"id":155},"摄像角度修正",[10,157,158],{},"如果使用默认的3D摄像，角色越靠近边缘时，就会出现扭曲，导致影响玩家对攻击判定的感觉。",[10,160,161],{},[48,162],{"alt":163,"src":164},"image-20210120212904843","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212904843_thumb.png",[10,166,167],{},"对投影的方式进行了修改，采用了Fix Projection",[10,169,170],{},[48,171],{"alt":172,"src":173},"image-20210120213012818","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213012818_thumb.png",[10,175,176],{},"这种投影的修正只针对角色，可以让角色从背景中突显出来的同时保证角色不会因为在画面中移动出现“扭曲”。",[36,178,180],{"id":179},"npr","NPR",[10,182,183],{},"SFV的画面目标是油画的风格以及丰富的色彩。",[10,185,186],{},"在光照向量与模型法线上作了很多的研究。",[10,188,189],{},[48,190],{"alt":191,"src":192},"image-20210120213351356","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213351356_thumb.png",[10,194,195],{},"最终的材质并不会特别复杂：",[10,197,198],{},[48,199],{"alt":200,"src":201},"image-20210120213524861","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213524861_thumb.png",[56,203,204],{"id":204},"笔触感的再现",[10,206,207],{},"前作SFIV，是通过在法线贴图上直接添加皱纹感来实现的。",[10,209,210,211,215],{},"操作上，是在PhostoShop中使用",[212,213,214],"em",{},"ちりめんじわ","的功能对法线贴图直接进行处理。",[10,217,218],{},"SFV由于包括法线贴图在内的所有贴图的分辨率都上升了，导致使用这个方法产生的纹路很难在渲染结果上体现纹路感。最终，使用了Photoshop的SnapArt插件来对图片进行修正，这个插件本来是给图片添加油画感的。",[10,220,221],{},"为了能够使用这个插件，法线贴图的处理流程稍稍变长了：",[10,223,224],{},[48,225],{"alt":226,"src":227},"image-20210120214144524","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214144524_thumb.png",[10,229,230],{},"会先将法线贴图转换到Object Space，经过SnapArt的处理后再重新转换回来。",[10,232,233],{},"对于身体的不同部分，会采用不同的处理程度：",[10,235,236],{},[48,237],{"alt":238,"src":239},"image-20210120214255524","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214255524_thumb.png",[10,241,242],{},"以实现在游戏中信息密度的控制：",[10,244,245],{},[48,246],{"alt":247,"src":248},"image-20210120214326820","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214326820_thumb.png",[56,250,251],{"id":251},"边界的强调",[10,253,254],{},"与传统的根据法线计算轮廓线的方法不同，是使用颜色来进行的。在渲染结果中，当像素的RGB的颜色差很大时，填充轮廓线。",[10,256,257],{},"首先将渲染结果左右移位n个像素然后相减：",[10,259,260],{},[48,261],{"alt":262,"src":263},"image-20210120214718395","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214718395_thumb.png",[10,265,266],{},[48,267],{"alt":268,"src":269},"image-20210120214733171","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214733171_thumb.png",[10,271,272],{},[48,273],{"alt":274,"src":275},"image-20210120214744645","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214744645_thumb.png",[10,277,278],{},"同样的操作在上下方向上再执行一次，然后将两个结果相加：",[10,280,281],{},[48,282],{"alt":283,"src":284},"image-20210120214812460","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214812460_thumb.png",[10,286,287],{},"再乘以当前场景所设置的轮廓线颜色，最后叠加到原图上就可以了。",[10,289,290],{},[48,291],{"alt":292,"src":293},"image-20210120215208468","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120215208468_thumb.png",[10,295,296],{},"这个效果是在PostProcess上完成的。",[56,298,299],{"id":299},"间接光",[10,301,302],{},"SFV引入Enlighten，在虚幻默认的ILC的基础上更加强化了间接光照的效果",[10,304,305],{},[48,306],{"alt":307,"src":308},"image-20210120215346772","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120215346772_thumb.png",[10,310,311],{},"Enlighten的作用是，可以实时的对间接光照的效果进行调整。比如，想要让间接光的色调变青的话，就加重青的要素。这与想要接近油画画风而不是真实的物理光照的目标相一致。",[10,313,314],{},"Enlighten只要在场景构造没有变的情况下，可以自由的调整间接光的效果，可以说非常的符合需求。",{"title":316,"searchDepth":317,"depth":318,"links":319},"",2,3,[320,326],{"id":38,"depth":317,"text":38,"children":321},[322,323,324,325],{"id":58,"depth":318,"text":58},{"id":91,"depth":318,"text":91},{"id":131,"depth":318,"text":131},{"id":155,"depth":318,"text":155},{"id":179,"depth":317,"text":180,"children":327},[328,329,330],{"id":204,"depth":318,"text":204},{"id":251,"depth":318,"text":251},{"id":299,"depth":318,"text":299},"2021-01-24","md",{"layout":334,"status":335,"published":336,"author":337,"author_login":339,"author_email":340,"wordpress_id":341,"wordpress_url":342,"date_gmt":343,"excerpt":344},"post","publish",true,{"display_name":338,"login":339,"email":340,"url":316},"风铃","flinkor","flinkor@foxmail.com",3350,"\u002F?p=3350","2021-01-24 04:00:44 +0000",{"type":7,"value":345},[346],[10,347,12],{},"\u002F2021-01-24-cedec-2016-sfv-note",{"title":5,"description":12},"_legacy\u002F2021\u002F2021-01-24-cedec-2016-sfv-note",[352,180],"CEDEC","r_blFGbTBPV57haZRO6BbQsvxGh0ZuZR2in9HkJMans",1788763177323]