[{"data":1,"prerenderedAt":1310},["ShallowReactive",2],{"page-NPR-1":3,"page-count-NPR":319},[4,355,972],{"id":5,"title":6,"body":7,"date":332,"description":13,"extension":333,"meta":334,"navigation":337,"path":349,"seo":350,"stem":351,"tags":352,"__hash__":354},"blogs\u002F_legacy\u002F2021\u002F2021-01-24-cedec-2016-sfv-note.md","CEDEC2016-《街头霸王5》的美术设计笔记",{"type":8,"value":9,"toc":316},"minimark",[10,14,17,26,33,36,40,43,46,53,56,60,63,69,72,75,81,84,90,93,96,109,115,118,121,127,130,133,136,142,145,151,154,157,160,166,169,175,178,182,185,188,194,197,203,206,209,217,220,223,229,232,235,241,244,250,253,256,259,265,271,277,280,286,289,295,298,301,304,310,313],[11,12,13],"p",{},"CEDEC2016上街霸5的分享。",[11,15,16],{},"主要参考以下内容：",[11,18,19,20],{},"PPT: ",[21,22,23],"a",{"href":23,"rel":24},"https:\u002F\u002Fcedil.cesa.or.jp\u002Fcedil_sessions\u002Fview\u002F1540",[25],"nofollow",[11,27,28,29],{},"gamesindustry.biz: ",[21,30,31],{"href":31,"rel":32},"https:\u002F\u002Fjp.gamesindustry.biz\u002Farticle\u002F1609\u002F16090703\u002F",[25],[11,34,35],{},"街霸5，是使用UE4制作的。",[37,38,39],"h2",{"id":39},"格斗游戏美术制作",[11,41,42],{},"格斗游戏要让玩家能够瞬间对状况进行把握，所以很多地方不会遵循现实规律。",[11,44,45],{},"卡普空的街霸项目组内部，有一整套相关的方法论：",[11,47,48],{},[49,50],"img",{"alt":51,"src":52},"image-20210120205628473","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120205628473_thumb.png",[11,54,55],{},"在像素时代有着非常大的作用，但是由于并不是完全按照现实的身体构造来的，要使用3D来制作就会有些问题。",[57,58,59],"h3",{"id":59},"模型身高",[11,61,62],{},"在官方设定中，隆的身高是175cm，而贝卡的身高是182cm。",[11,64,65],{},[49,66],{"alt":67,"src":68},"image-20210120210652818","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210652818_thumb.png",[11,70,71],{},"但是在3D模型上看，两人的身高基本差不多。",[11,73,74],{},"最终选择以玩家能看到的印象为主，在战斗中待机时，让贝卡的动作改为直立来解决",[11,76,77],{},[49,78],{"alt":79,"src":80},"image-20210120210717273","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210717273_thumb.png",[11,82,83],{},"实际上就变成了这样：",[11,85,86],{},[49,87],{"alt":88,"src":89},"image-20210120210739498","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210739498_thumb.png",[57,91,92],{"id":92},"动画",[11,94,95],{},"角色的动画在制作时主要考虑三个方面：",[97,98,99,103,106],"ul",{},[100,101,102],"li",{},"格斗技：空手道专家一眼就明白是怎样的攻击方式",[100,104,105],{},"重心与节奏：看起来要帅要流畅",[100,107,108],{},"性能：格斗游戏设计上的攻击判定",[11,110,111],{},[49,112],{"alt":113,"src":114},"image-20210120211322219","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120211322219_thumb.png",[11,116,117],{},"例如：桑吉尔夫的行走动画，刻意采用了正面视角进行动作的修正。防止实际上是以一种怪异的姿势在走路。",[11,119,120],{},"另外，为了表现原本的2D游戏中的感觉，部分角色的姿势采取了旋转5度的形式。",[11,122,123],{},[49,124],{"alt":125,"src":126},"image-20210120212141746","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212141746_thumb.png",[11,128,129],{},"必杀技的设计上，一定要让玩家能够轻松的使用语句对其进行描述，这样才能让玩家方便的共享感动的情绪。",[57,131,132],{"id":132},"背景中的颜色设计",[11,134,135],{},"要让背景与角色有很好的层次感，以下是2D时代的例子：",[11,137,138],{},[49,139],{"alt":140,"src":141},"image-20210120212427714","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212427714_thumb.png",[11,143,144],{},"为了在3D世界上达到这个效果，实现了Multi Color Grading的功能：",[11,146,147],{},[49,148],{"alt":149,"src":150},"image-20210120212640514","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212640514_thumb.png",[11,152,153],{},"场景的不同区域采用了不同的LookupTable。上图的例子并不是针对所有的场景，对于不同的场景会根据其特点采用不同的Multi Color Grading分布。",[57,155,156],{"id":156},"摄像角度修正",[11,158,159],{},"如果使用默认的3D摄像，角色越靠近边缘时，就会出现扭曲，导致影响玩家对攻击判定的感觉。",[11,161,162],{},[49,163],{"alt":164,"src":165},"image-20210120212904843","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212904843_thumb.png",[11,167,168],{},"对投影的方式进行了修改，采用了Fix Projection",[11,170,171],{},[49,172],{"alt":173,"src":174},"image-20210120213012818","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213012818_thumb.png",[11,176,177],{},"这种投影的修正只针对角色，可以让角色从背景中突显出来的同时保证角色不会因为在画面中移动出现“扭曲”。",[37,179,181],{"id":180},"npr","NPR",[11,183,184],{},"SFV的画面目标是油画的风格以及丰富的色彩。",[11,186,187],{},"在光照向量与模型法线上作了很多的研究。",[11,189,190],{},[49,191],{"alt":192,"src":193},"image-20210120213351356","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213351356_thumb.png",[11,195,196],{},"最终的材质并不会特别复杂：",[11,198,199],{},[49,200],{"alt":201,"src":202},"image-20210120213524861","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213524861_thumb.png",[57,204,205],{"id":205},"笔触感的再现",[11,207,208],{},"前作SFIV，是通过在法线贴图上直接添加皱纹感来实现的。",[11,210,211,212,216],{},"操作上，是在PhostoShop中使用",[213,214,215],"em",{},"ちりめんじわ","的功能对法线贴图直接进行处理。",[11,218,219],{},"SFV由于包括法线贴图在内的所有贴图的分辨率都上升了，导致使用这个方法产生的纹路很难在渲染结果上体现纹路感。最终，使用了Photoshop的SnapArt插件来对图片进行修正，这个插件本来是给图片添加油画感的。",[11,221,222],{},"为了能够使用这个插件，法线贴图的处理流程稍稍变长了：",[11,224,225],{},[49,226],{"alt":227,"src":228},"image-20210120214144524","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214144524_thumb.png",[11,230,231],{},"会先将法线贴图转换到Object Space，经过SnapArt的处理后再重新转换回来。",[11,233,234],{},"对于身体的不同部分，会采用不同的处理程度：",[11,236,237],{},[49,238],{"alt":239,"src":240},"image-20210120214255524","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214255524_thumb.png",[11,242,243],{},"以实现在游戏中信息密度的控制：",[11,245,246],{},[49,247],{"alt":248,"src":249},"image-20210120214326820","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214326820_thumb.png",[57,251,252],{"id":252},"边界的强调",[11,254,255],{},"与传统的根据法线计算轮廓线的方法不同，是使用颜色来进行的。在渲染结果中，当像素的RGB的颜色差很大时，填充轮廓线。",[11,257,258],{},"首先将渲染结果左右移位n个像素然后相减：",[11,260,261],{},[49,262],{"alt":263,"src":264},"image-20210120214718395","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214718395_thumb.png",[11,266,267],{},[49,268],{"alt":269,"src":270},"image-20210120214733171","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214733171_thumb.png",[11,272,273],{},[49,274],{"alt":275,"src":276},"image-20210120214744645","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214744645_thumb.png",[11,278,279],{},"同样的操作在上下方向上再执行一次，然后将两个结果相加：",[11,281,282],{},[49,283],{"alt":284,"src":285},"image-20210120214812460","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214812460_thumb.png",[11,287,288],{},"再乘以当前场景所设置的轮廓线颜色，最后叠加到原图上就可以了。",[11,290,291],{},[49,292],{"alt":293,"src":294},"image-20210120215208468","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120215208468_thumb.png",[11,296,297],{},"这个效果是在PostProcess上完成的。",[57,299,300],{"id":300},"间接光",[11,302,303],{},"SFV引入Enlighten，在虚幻默认的ILC的基础上更加强化了间接光照的效果",[11,305,306],{},[49,307],{"alt":308,"src":309},"image-20210120215346772","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120215346772_thumb.png",[11,311,312],{},"Enlighten的作用是，可以实时的对间接光照的效果进行调整。比如，想要让间接光的色调变青的话，就加重青的要素。这与想要接近油画画风而不是真实的物理光照的目标相一致。",[11,314,315],{},"Enlighten只要在场景构造没有变的情况下，可以自由的调整间接光的效果，可以说非常的符合需求。",{"title":317,"searchDepth":318,"depth":319,"links":320},"",2,3,[321,327],{"id":39,"depth":318,"text":39,"children":322},[323,324,325,326],{"id":59,"depth":319,"text":59},{"id":92,"depth":319,"text":92},{"id":132,"depth":319,"text":132},{"id":156,"depth":319,"text":156},{"id":180,"depth":318,"text":181,"children":328},[329,330,331],{"id":205,"depth":319,"text":205},{"id":252,"depth":319,"text":252},{"id":300,"depth":319,"text":300},"2021-01-24","md",{"layout":335,"status":336,"published":337,"author":338,"author_login":340,"author_email":341,"wordpress_id":342,"wordpress_url":343,"date_gmt":344,"excerpt":345},"post","publish",true,{"display_name":339,"login":340,"email":341,"url":317},"风铃","flinkor","flinkor@foxmail.com",3350,"\u002F?p=3350","2021-01-24 04:00:44 +0000",{"type":8,"value":346},[347],[11,348,13],{},"\u002F2021-01-24-cedec-2016-sfv-note",{"title":6,"description":13},"_legacy\u002F2021\u002F2021-01-24-cedec-2016-sfv-note",[353,181],"CEDEC","r_blFGbTBPV57haZRO6BbQsvxGh0ZuZR2in9HkJMans",{"id":356,"title":357,"body":358,"date":332,"description":362,"extension":333,"meta":957,"navigation":337,"path":966,"seo":967,"stem":968,"tags":969,"__hash__":971},"blogs\u002F_legacy\u002F2021\u002F2021-01-24-ue4-fest-npr-note.md","UE4-Fest-NPR笔记",{"type":8,"value":359,"toc":934},[360,363,370,377,380,383,386,389,392,395,401,404,407,410,416,419,428,431,434,437,467,470,473,476,479,482,489,492,495,498,501,507,510,516,519,533,536,539,545,548,556,559,562,568,571,577,580,583,589,592,598,602,605,611,614,620,624,627,633,639,642,648,651,654,657,663,666,669,672,683,686,689,695,698,709,712,715,721,724,728,731,734,748,751,754,760,763,769,772,778,781,787,791,794,800,803,809,813,816,819,827,830,836,839,842,845,854,857,864,870,873,877,880,883,892,896,899,928,931],[11,361,362],{},"UEFest2020上一篇关于NPR效果实现的演讲。",[11,364,365,366],{},"PPT在这里：",[21,367,368],{"href":368,"rel":369},"https:\u002F\u002Fwww.slideshare.net\u002FEpicGamesJapan\u002Funreal-festext2020winter-npr",[25],[11,371,372,373],{},"后面发现的视频在这里：",[21,374,375],{"href":375,"rel":376},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=L1tC6wnub2k",[25],[11,378,379],{},"npr是个很宽泛的概念，这边主要是讲ToonShader。",[11,381,382],{},"演讲的内容基于U4.25.4。",[11,384,385],{},"这边由于没有一个明确的生产目标，所以更多的关注流程的实现。",[11,387,388],{},"由于原始的PPT有很多思考和选择过程的记录，在这里会稍微重新组织下内容。",[11,390,391],{},"笔记是基于PPT制作的，后面虽然找到Youtube的视频，不过没找到时间从头看一遍……所以可能有的地方和视频说的不一样~",[11,393,394],{},"完成之后的效果：",[11,396,397],{},[49,398],{"alt":399,"src":400},"image-20210117215700253","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117215700253_thumb.png",[11,402,403],{},"角色名 :齋藤胡桃",[11,405,406],{},"原本是准备做来放到MarketPlace上去卖的，为了这次演示重新设计，全部重做了一下。",[11,408,409],{},"角色设计方案：",[11,411,412],{},[49,413],{"alt":414,"src":415},"image-20210117220008747","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117220008747_thumb.png",[11,417,418],{},"最初的目标：",[420,421,422,425],"blockquote",{},[11,423,424],{},"不是实现单纯的CellShader，而是希望将一些插画绘制的手法融合进来。",[11,426,427],{},"希望是能够在相对较暗的空间中也能够很好的渲染出结果来。",[37,429,430],{"id":430},"引擎改造",[11,432,433],{},"和Unity不同，要在UE4实现渲染的改造是需要修改引擎代码的。",[11,435,436],{},"网络上也能找到一些改造UE4的Shading Model的方法介绍。",[97,438,439,446,453,460],{},[100,440,441],{},[21,442,445],{"href":443,"rel":444},"https:\u002F\u002Fqiita.com\u002Fdgtanaka\u002Fitems\u002F41f96ef2090820035609",[25],"UE4のShading Modelを拡張する",[100,447,448],{},[21,449,452],{"href":450,"rel":451},"https:\u002F\u002Fforums.unrealengine.com\u002Fcommunity\u002Fwork-in-progress\u002F41288-toon-shading-model",[25],"Toon shading model",[100,454,455],{},[21,456,459],{"href":457,"rel":458},"https:\u002F\u002Fforums.unrealengine.com\u002Fdevelopment-discussion\u002Frendering\u002F1537277-toon-shading-models-stylized-rendering-experiments",[25],"Toon Shading Models, Stylized Rendering Experiments",[100,461,462],{},[21,463,466],{"href":464,"rel":465},"https:\u002F\u002Fforums.unrealengine.com\u002Fdevelopment-discussion\u002Frendering\u002F1704696-wip-anime-toon-stylized-shading-model",[25],"[WIP] Anime\u002FToon Stylized Shading Model",[11,468,469],{},"改造引擎主要的问题是实现方式很难和别人共享，改造后的版本只能内部使用。",[11,471,472],{},"重新编译C++和Shader的成本也很高，最大的麻烦是，引擎升级。",[11,474,475],{},"所以演讲中使用的制作流程没有对引擎进行改造。",[37,477,478],{"id":478},"基于向量",[11,480,481],{},"基于向量计算，使用蓝图和材质节点来达到目标。",[11,483,484,485],{},"参考的文章是这篇：",[21,486,487],{"href":487,"rel":488},"https:\u002F\u002Funrealengine.hatenablog.com\u002Fentry\u002F2019\u002F12\u002F01\u002F000735",[25],[11,490,491],{},"使用向量的内积来在材质节点中获取更多的信息。",[57,493,494],{"id":494},"光照向量",[11,496,497],{},"由于材质中的Light Vector只能在前向渲染中使用，所以在蓝图中写入到Material Parameter Collection中。",[11,499,500],{},"之后便可以使用法线与光照向量相乘来达到模拟计算光照的效果",[11,502,503],{},[49,504],{"alt":505,"src":506},"image-20210118232253776","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210118232253776_thumb.png",[11,508,509],{},"前面的内积结果会在模型上生成灰阶的渲染值，使用这个值作为下一步的Mask的基础。上图比较简单，当前的渲染结果是这样的：",[11,511,512],{},[49,513],{"alt":514,"src":515},"image-20210118233129915","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210118233129915_thumb.png",[11,517,518],{},"为了模仿通常ToonShader的效果，基于上面的内积的结果，总共计算了四个层的内容：",[97,520,521,524,527,530],{},[100,522,523],{},"Shadow: 模拟阴影计算，连接到SubSurface",[100,525,526],{},"HightLight: 模拟高光，连接到Emmisive",[100,528,529],{},"RimLight: 连接到Emmisive",[100,531,532],{},"Patten: 连接到SubSurface",[11,534,535],{},"上面三种都是比较常见的效果，所谓的Patten，其实是模仿有的漫画里的那种网点图的感觉",[11,537,538],{},"对于用于计算基础的内积结果，根据贴图会采用不同的插值方式。",[11,540,541],{},[49,542],{"alt":543,"src":544},"image-20210119230758187_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230758187_thumb.png",[11,546,547],{},"同时会按照需求使用一些其他的向量节点：CameraVector、ReflectionVector。",[11,549,550,551,555],{},"贴图提供的信息并不一定会按照0",[552,553,554],"del",{},"1来插值，有的会设定为1.0是必然使用，而0","0.5才会插值，总之这个可以按照需求来进行灵活的控制，毕竟贴图是自己制作的。",[57,557,558],{"id":558},"阴影",[11,560,561],{},"用于模仿阴影计算：",[11,563,564],{},[49,565],{"alt":566,"src":567},"image-20210119230028530_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230028530_thumb.png",[11,569,570],{},"效果是这样的：",[11,572,573],{},[49,574],{"alt":575,"src":576},"image-20210119230049261_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230049261_thumb.png",[57,578,579],{"id":579},"高光",[11,581,582],{},"用于高光模拟计算，由于是连接到Emmisive，所以可以受到Bloom的影响。",[11,584,585],{},[49,586],{"alt":587,"src":588},"image-20210119230329943_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230329943_thumb.png",[11,590,591],{},"最终结果是这样的：",[11,593,594],{},[49,595],{"alt":596,"src":597},"image-20210119230350972_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230350972_thumb.png",[57,599,601],{"id":600},"rimlight","RimLight",[11,603,604],{},"就是边缘高光，通常用Fresnel进行模拟的那个效果。",[11,606,607],{},[49,608],{"alt":609,"src":610},"image-20210119230505405_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230505405_thumb.png",[11,612,613],{},"最终效果是这样的：",[11,615,616],{},[49,617],{"alt":618,"src":619},"image-20210119230527413_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230527413_thumb.png",[57,621,623],{"id":622},"patten","Patten",[11,625,626],{},"这个不是很常见，是用于模仿漫画的那种类似网点的感觉：",[11,628,629],{},[49,630],{"alt":631,"src":632},"image-20210119230616663_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230616663_thumb.png",[11,634,635],{},[49,636],{"alt":637,"src":638},"image-20210119230707458_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119230707458_thumb.png",[11,640,641],{},"最终结果像是这样：",[11,643,644],{},[49,645],{"alt":646,"src":647},"image-20210119225712396_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119225712396_thumb.png",[37,649,650],{"id":650},"光照问题",[11,652,653],{},"光照模型选用的是SubSurface，虽然有尝试过Preintegrated Skin和Subsurface Profile，但是效果都有些微妙。",[11,655,656],{},"SubSurface存在一个问题，就是从上面来的DirectionalLight会对模型造成一种类似贯通的效果：",[11,658,659],{},[49,660],{"alt":661,"src":662},"image-20210119231317537_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119231317537_thumb.png",[11,664,665],{},"使用Mesh进行遮挡也无法取消掉这个效果，似乎是SubSurface光照模型的计算特性导致的。只能暂时放弃。",[11,667,668],{},"对于主导的DirectionalLight向上的时候，会出现阴影很重的感觉。只能通过限制光的角度，或者额外的打一些光来解决。",[11,670,671],{},"另外就是拟似计算的光照不够硬，通过调整自己的参数来解决：",[97,673,674,677,680],{},[100,675,676],{},"『Shadow Bias 』=>『1.0 』",[100,678,679],{},"『Shadow Slope Bias 』=>『0.0 』",[100,681,682],{},"『Shadow Filter Sharpe 』=>『1.0 』",[57,684,685],{"id":685},"法线整理",[11,687,688],{},"脸部不需要阴影，所以对模型进行处理，让法线全部朝向一个方向。",[11,690,691],{},[49,692],{"alt":693,"src":694},"image-20210119231922084_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119231922084_thumb.png",[11,696,697],{},"这种处理方式参照的是：",[420,699,700,703],{},[11,701,702],{},"GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS",[11,704,705],{},[21,706,707],{"href":707,"rel":708},"https:\u002F\u002Fwww.slideshare.net\u002FASW_Yokohama\u002Fguilty-gear-xrdtips-124324946",[25],[57,710,711],{"id":711},"眼球高光",[11,713,714],{},"很强的那个高光是靠UnLit的材质内部计算出来的。",[11,716,717],{},[49,718],{"alt":719,"src":720},"image-20210119232139763_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119232139763_thumb.png",[11,722,723],{},"眼球有添加一个假的各向异性光照来提高立体感，根据光照的方向不同这个高光的位置会移动。",[57,725,727],{"id":726},"outline","OutLine",[11,729,730],{},"没有使用PostProcess，而是在Blender里面制作了一个反转的Mesh，直接包含在骨骼模型里面。",[11,732,733],{},"此外还提供了以下的功能：",[97,735,736,739,742,745],{},[100,737,738],{},"使用VertexColor来控制OutLine的粗细",[100,740,741],{},"轮廓线是带颜色的",[100,743,744],{},"根据摄像的距离调整粗细",[100,746,747],{},"根据FOV调整粗细",[11,749,750],{},"粗细控制基于Vertex Color，会使用Opacity Mask额外的处理，当数值小于0.1时，就不会绘制轮廓线。",[11,752,753],{},"不过主要的还是依靠将计算结果连接到World Position Offset进行的控制：",[11,755,756],{},[49,757],{"alt":758,"src":759},"image-20210119233127332_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119233127332_thumb.png",[11,761,762],{},"颜色则是通过UV查找基础颜色，并与另外准备的OutLine颜色进行叠加计算，实际进行的计算比较简单：",[11,764,765],{},[49,766],{"alt":767,"src":768},"image-20210119233437571_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119233437571_thumb.png",[11,770,771],{},"摄像的距离来调整Offset，这是通过内置的相机位置和Actor位置节点来计算的：",[11,773,774],{},[49,775],{"alt":776,"src":777},"image-20210119233551957_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119233551957_thumb.png",[11,779,780],{},"FOV也是类似的，直接用Hlsl的custom node去取出来：",[11,782,783],{},[49,784],{"alt":785,"src":786},"image-20210119233636756_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119233636756_thumb.png",[57,788,790],{"id":789},"textureinline","TextureInline",[11,792,793],{},"最后还使用了TextureInLine的技巧，实际上并不在OutLine的计算中，只是专门的准备了贴图，用于模拟一些不是很容易计算出来的描画效果。",[11,795,796],{},[49,797],{"alt":798,"src":799},"image-20210119233840764_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119233840764_thumb.png",[11,801,802],{},"并不是单纯的打包在角色贴图里面，而是另外有一张贴图，可以动态的在叠加时对RGBA通道进行强弱和颜色调整。计算节点：",[11,804,805],{},[49,806],{"alt":807,"src":808},"image-20210119233935788_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210119233935788_thumb.png",[37,810,812],{"id":811},"postprocess","PostProcess",[11,814,815],{},"主要不是介绍UE4本身的pp，而是指希望达到的一些后处理效果，主要有",[57,817,818],{"id":818},"模造纸效果",[11,820,821,826],{},[21,822,825],{"href":823,"rel":824},"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%91%E3%83%A9%E3%83%95%E3%82%A3%E3%83%B3%E7%B4%99",[25],"パラフィン紙","，一时找不到准确的术语翻译，就硬翻成模造纸吧。总之是一种纸，在上个世代的动画制作中用到。这种带颜色的透明的纸叠加到原画上，能够模拟出类似反光或者阴影的效果。",[11,828,829],{},"实现上使用了PP的Dirt Mask功能：",[11,831,832],{},[49,833],{"alt":834,"src":835},"image-20210120193421631_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120193421631_thumb.png",[11,837,838],{},"贴图使用黑白的就ok了。",[57,840,841],{"id":841},"柔光滤镜",[11,843,844],{},"Diffusion Filter",[420,846,847],{},[11,848,849,850,853],{},"似乎是摄影术语，不是很明确是否采用了正确的翻译。虽然在镜片厂商看到的繁中译法是",[213,851,852],{},"擴散濾光片","，但是其他一些地方又似乎分类为柔光滤镜。不纠结了……",[11,855,856],{},"总之就是这样一种滤镜，会将光线进行柔和的扩散，对降低图像在高光区域的对比度非常有效。据说可以在摄影时消除脸部的毛刺和皱纹，不是很确定是不是一个东西~",[11,858,859,860],{},"参考的这里：",[21,861,862],{"href":862,"rel":863},"https:\u002F\u002Ftwitter.com\u002Fmonsho1977\u002Fstatus\u002F670634806124920832",[25],[11,865,866],{},[49,867],{"alt":868,"src":869},"image-20210120195648749_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120195648749_thumb.png",[11,871,872],{},"印象中虚幻应该也有模糊用的节点，可能有什么限制达不到需求吧。",[57,874,876],{"id":875},"kuwahara滤镜","Kuwahara滤镜",[11,878,879],{},"桑原道義老师所发明的平滑化用的滤镜。",[11,881,882],{},"能够让画面产生油画一样的效果，有利于让渲染结果看起来更接近动画的背景的感觉。",[11,884,885,886,891],{},"这边这篇介绍的很详细的实现方式：",[21,887,890],{"href":888,"rel":889},"https:\u002F\u002Fwww.raywenderlich.com\u002F100-unreal-engine-4-paint-filter-tutorial#toc-anchor-004",[25],"Unreal Engine 4 Paint Filter Tutorial","。",[57,893,895],{"id":894},"其他pp特效","其他PP特效",[11,897,898],{},"还列出了一些其他的后处理特效，应该都是默认的特效",[97,900,901,904,907,910,913,916,919,922,925],{},[100,902,903],{},"Cinematic DoF",[100,905,906],{},"Lens Flares",[100,908,909],{},"Bloom",[100,911,912],{},"Exposure",[100,914,915],{},"Chromatic Aberration",[100,917,918],{},"Vignette Intensity",[100,920,921],{},"Color Grading LUT",[100,923,924],{},"Motion Blur",[100,926,927],{},"etc ...",[37,929,930],{"id":930},"总结",[11,932,933],{},"总之在不使用自定义引擎特效的情况下达到了一开始设定的ToonShader的效果。",{"title":317,"searchDepth":318,"depth":319,"links":935},[936,937,944,950,956],{"id":430,"depth":318,"text":430},{"id":478,"depth":318,"text":478,"children":938},[939,940,941,942,943],{"id":494,"depth":319,"text":494},{"id":558,"depth":319,"text":558},{"id":579,"depth":319,"text":579},{"id":600,"depth":319,"text":601},{"id":622,"depth":319,"text":623},{"id":650,"depth":318,"text":650,"children":945},[946,947,948,949],{"id":685,"depth":319,"text":685},{"id":711,"depth":319,"text":711},{"id":726,"depth":319,"text":727},{"id":789,"depth":319,"text":790},{"id":811,"depth":318,"text":812,"children":951},[952,953,954,955],{"id":818,"depth":319,"text":818},{"id":841,"depth":319,"text":841},{"id":875,"depth":319,"text":876},{"id":894,"depth":319,"text":895},{"id":930,"depth":318,"text":930},{"layout":335,"status":336,"published":337,"author":958,"author_login":340,"author_email":341,"wordpress_id":959,"wordpress_url":960,"date_gmt":961,"excerpt":962},{"display_name":339,"login":340,"email":341,"url":317},3258,"\u002F?p=3258","2021-01-24 04:01:00 +0000",{"type":8,"value":963},[964],[11,965,362],{},"\u002F2021-01-24-ue4-fest-npr-note",{"title":357,"description":362},"_legacy\u002F2021\u002F2021-01-24-ue4-fest-npr-note",[970,181],"unreal fest","okWPDXLenIskJvqhFh5Rbfa9MxWxVV-ezWOKLVF8v64",{"id":973,"title":974,"body":975,"date":332,"description":979,"extension":333,"meta":1296,"navigation":337,"path":1305,"seo":1306,"stem":1307,"tags":1308,"__hash__":1309},"blogs\u002F_legacy\u002F2021\u002F2021-01-24-unreal-fest-trials-of-mana-3-note.md","UE4-Fest-圣剑传说3笔记",{"type":8,"value":976,"toc":1277},[977,980,987,994,997,1000,1003,1006,1009,1012,1015,1021,1024,1030,1033,1037,1040,1046,1049,1057,1060,1063,1066,1069,1072,1075,1078,1081,1084,1087,1095,1101,1104,1113,1116,1119,1122,1125,1128,1131,1134,1137,1144,1147,1150,1153,1159,1163,1166,1172,1175,1178,1181,1184,1190,1193,1197,1200,1203,1212,1219,1222,1225,1228,1236,1239,1242,1245,1248,1252,1255,1258,1261,1265,1268,1271,1274],[11,978,979],{},"UEFest2020的圣剑传说3的分享",[11,981,982,983],{},"PPT参考的这里：",[21,984,985],{"href":985,"rel":986},"https:\u002F\u002Fwww.slideshare.net\u002FEpicGamesJapan\u002Funreal-festext2020winter-xeen",[25],[11,988,989,990],{},"后面才发现有原始视频：",[21,991,992],{"href":992,"rel":993},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=NHZRn4OHa1g",[25],[11,995,996],{},"最终使用引擎版本4.22.3",[11,998,999],{},"渲染方面没有使用任何引擎改造，全部使用引擎标准机能实现。",[37,1001,1002],{"id":1002},"角色",[11,1004,1005],{},"美术上的参考主要有：原作的像素风格、插画。以及本作的插画。",[11,1007,1008],{},"从中寻找共通的魅力，以手绘的风格为目标进行制作。",[57,1010,1011],{"id":1011},"轮廓线",[11,1013,1014],{},"轮廓线使用PostProcess来制作。",[11,1016,1017],{},[49,1018],{"alt":1019,"src":1020},"image-20210117185504080","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117185504080_thumb.png",[11,1022,1023],{},"使用深度数据比较的方法来计算轮廓线，对于深度差别不大的地方，会并用Detail normal map进行角度比较，抽出轮廓线数据。",[11,1025,1026],{},[49,1027],{"alt":1028,"src":1029},"image-20210117185821442","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117185821442_thumb.png",[11,1031,1032],{},"轮廓线的粗细使用World normal进行Mask来控制。",[57,1034,1036],{"id":1035},"shading","Shading",[11,1038,1039],{},"使用NPR渲染，作为特征的Specular和阴影是在材质中实现的。",[11,1041,1042],{},[49,1043],{"alt":1044,"src":1045},"image-20210117190629938","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117190629938_thumb.png",[11,1047,1048],{},"阴影的部分使用了两种颜色的阶调来进行实现，在计算的时候使用Rim进行遮罩，就能在原本的颜色上表现出RimLight的感觉。在对边界和背光进行表现时能够起作用。（这部分不是很确定是不是理解正确了……）",[11,1050,1051,1052,1056],{},"法线贴图在制作时会在Photoshop中使用滤镜来实现最终渲染时类似笔触的画风，这个应该和",[21,1053,1055],{"href":1054},"\u002F2021-01-24-cedec-2016-sfv-note\u002F","街霸5的分享","里面提到的操作方法类似。但是使用的滤镜没有明确说明。",[57,1058,1059],{"id":1059},"光照",[11,1061,1062],{},"在地图中使用一个Stationary的直射光作为天光来使用，其他的光照基本上都是static light。",[11,1064,1065],{},"对于每一个关卡，都有一个曲线来控制24小时的光照。",[57,1067,1068],{"id":1068},"菜单画面",[11,1070,1071],{},"游戏中的菜单画面没有使用RenderTarget，而是直接进行3D绘制。",[11,1073,1074],{},"主要原因是开发时出于抗锯齿、处理负荷等因素，以及无法准备高分辨率的贴图等原因。",[11,1076,1077],{},"这样直接绘制的问题是，场景内的光照因素会反映到菜单画面来。",[11,1079,1080],{},"处理的方法是，首先使用light channel来避免被场景中的光达到。",[11,1082,1083],{},"同时从PostProcess中关闭GI的影响。",[11,1085,1086],{},"最后将r.SkyLightingQuality置为0。",[11,1088,1089,1090,1094],{},"消除掉环境的影响后，使用",[1091,1092,1093],"strong",{},"Ambient Cubemaps","来添加光照。",[11,1096,1097],{},[49,1098],{"alt":1099,"src":1100},"image-20210117195359304","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117195359304_thumb.png",[57,1102,1103],{"id":1103},"动态装饰物体",[11,1105,1106,1107,1112],{},"混合使用了",[21,1108,1111],{"href":1109,"rel":1110},"https:\u002F\u002Fgithub.com\u002Fpafuhana1213\u002FKawaiiPhysics",[25],"KawaiiPhysics","与AnimDynamics。",[11,1114,1115],{},"使用KawaiiPhysics是因为其设置简单，动作起来很萌。",[11,1117,1118],{},"开发初期使用的是PhysicsAsset，由于初期性能优化不好，在帧率下降时，出现了穿模等一系列物理模拟不准确的问题，在各个平台上进行运行测试后，判断要使用需要花费的成本过高。",[11,1120,1121],{},"于是中期就切换到了AnimDynamics，虽然比PhysicsAsset要安定许多，但是在性能下降时还是会出现穿模的现象。为了达到理想的效果，进行了很多试错……",[11,1123,1124],{},"在开发终盘，性能已经稳定下来了。再次对PhysicsAsset进行验证，发现在帧率下降时还是会有穿模现象，同时从AnimDnamic切换过去会花费额外的成本，放弃使用了。",[11,1126,1127],{},"最后发现了KawaiiPhysics，KawaiiPhysics本身在帧率下降后的表现依然很稳定，很少发生穿模，形状出现问题的情况也必须少。与现存的AnimDynamic可以并用，替换的成本也较低，在终盘也能安定的进行。",[37,1129,1130],{"id":1130},"程序编制",[57,1132,1133],{"id":1133},"过场动画",[11,1135,1136],{},"圣剑传说3在游戏过程中，需要从6个主要角色中选择3个人来进行游戏。可组合的方式导致过场动画制作起来有不少的难度。在有的场景中，由于所选的角色组合不同，所播放的内容会有很大不同。",[11,1138,1139,1140,1143],{},"对应方法是，在",[213,1141,1142],{},"Sequencer","中使用一个专用的共通Actor来进行表演的设置，在游戏运行时。则将对应的角色替换到这个共通Actor中。这样就能让队伍的角色成员反映出来，也能保持玩家所携带的装备。",[11,1145,1146],{},"为了实现这一点，所有的角色都会采用一样的命名规范。在进行Sequencer播放时，会由代码按照规则取出对应角色的对应动画。各个角色的动画会通过转换器进行自动收集并输入到csv文件中，最终在UE4中加载成为DataTable。",[11,1148,1149],{},"语音台词和LipSync动画也遵循类似的规则进行取出。",[11,1151,1152],{},"动画在设置上，分为身体、眉毛、眼睛和嘴巴四个层次进行控制。",[11,1154,1155],{},[49,1156],{"alt":1157,"src":1158},"image-20210117204320733","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117204320733_thumb.png",[57,1160,1162],{"id":1161},"event","Event",[11,1164,1165],{},"有的时候，对于特定的组合而言，需要额外的播放一些场景。此时会对当前的角色进行判定，来决定是否播放特定的子动画。",[11,1167,1168],{},[49,1169],{"alt":1170,"src":1171},"image-20210117204241149","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117204241149_thumb.png",[57,1173,1174],{"id":1174},"视线和头的朝向",[11,1176,1177],{},"分为角度型和目标指定型的LookAt两种。",[11,1179,1180],{},"但是主角色的眼球大小会有所不同，所以需要设定眼睛的可达角度限制，在实际运行时进行控制。",[11,1182,1183],{},"由于各个角色的身高不同，所以根据角色的不同会使用不同的摄像。在Sequencer中会提供不同的角色的相机位置设置，可以在运行时进行取出。",[11,1185,1186],{},[49,1187],{"alt":1188,"src":1189},"image-20210117205036407","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117205036407_thumb.png",[11,1191,1192],{},"似乎会通过代码进行CameraTrack的实时替换。",[57,1194,1196],{"id":1195},"lipsync","LipSync",[11,1198,1199],{},"语音对应了日语和英语两种，分别有相应的LipSync数据。",[11,1201,1202],{},"规则上，要求台词的文本ID与语音的文件名一致。",[11,1204,1205,1206,1211],{},"使用SE的",[21,1207,1210],{"href":1208,"rel":1209},"https:\u002F\u002Fcedil.cesa.or.jp\u002Fcedil_sessions\u002Fview\u002F1742",[25],"Byblos","进行文本的管理。",[11,1213,1214,1215,891],{},"LipSync使用了Oculus的OVRLipSync进行录制，参考这个",[21,1216,1217],{"href":1217,"rel":1218},"https:\u002F\u002Fpafuhana1213.hatenablog.com\u002Fentry\u002F2018\u002F11\u002F26\u002F011057",[25],[11,1220,1221],{},"对于录制的LipSync数据，必要的话会手工进行调整。",[11,1223,1224],{},"流程上，同样是使用转换器收集成csv并导入到UE4成为DataTable。",[11,1226,1227],{},"运行时在场景中生成时，由台词的文本显示同步触发：",[97,1229,1230,1233],{},[100,1231,1232],{},"同名的语音文件播放",[100,1234,1235],{},"在对应的角色上播放LipSync动画",[37,1237,1238],{"id":1238},"其他",[11,1240,1241],{},"避免使用资源的硬链接",[11,1243,1244],{},"使用Interface在设计上避免耦合。",[11,1246,1247],{},"蓝图C++化，由于游戏逻辑9成使用的都是蓝图，实际处理时风险过大。最后只将一部分比较重的逻辑移植到了C++中。",[57,1249,1251],{"id":1250},"削减load时间比较有效的方法","削减Load时间比较有效的方法",[11,1253,1254],{},"玩家相关、特效相关、SE相关的常驻处理",[11,1256,1257],{},"Widget、图标贴图事先进行Cache缓存",[11,1259,1260],{},"防止不必要的资源进入地图",[57,1262,1264],{"id":1263},"对于cpu性能改善比较有效的方法","对于CPU性能改善比较有效的方法",[11,1266,1267],{},"尽可能的关掉Tick，在新建项目的时候一起关掉，只有必要的Actor才Tick",[11,1269,1270],{},"复杂的处理果然还是放到C++里面比较快",[11,1272,1273],{},"PGO(Profile Guided Optimization)，利用游戏中的Profile结果进行最优化处理",[11,1275,1276],{},"URO(Enable Update Rate Optimizations)，对远离摄像的动画更新进行降频",{"title":317,"searchDepth":318,"depth":319,"links":1278},[1279,1286,1292],{"id":1002,"depth":318,"text":1002,"children":1280},[1281,1282,1283,1284,1285],{"id":1011,"depth":319,"text":1011},{"id":1035,"depth":319,"text":1036},{"id":1059,"depth":319,"text":1059},{"id":1068,"depth":319,"text":1068},{"id":1103,"depth":319,"text":1103},{"id":1130,"depth":318,"text":1130,"children":1287},[1288,1289,1290,1291],{"id":1133,"depth":319,"text":1133},{"id":1161,"depth":319,"text":1162},{"id":1174,"depth":319,"text":1174},{"id":1195,"depth":319,"text":1196},{"id":1238,"depth":318,"text":1238,"children":1293},[1294,1295],{"id":1250,"depth":319,"text":1251},{"id":1263,"depth":319,"text":1264},{"layout":335,"status":336,"published":337,"author":1297,"author_login":340,"author_email":341,"wordpress_id":1298,"wordpress_url":1299,"date_gmt":1300,"excerpt":1301},{"display_name":339,"login":340,"email":341,"url":317},3243,"\u002F?p=3243","2021-01-24 04:08:31 +0000",{"type":8,"value":1302},[1303],[11,1304,979],{},"\u002F2021-01-24-unreal-fest-trials-of-mana-3-note",{"title":974,"description":979},"_legacy\u002F2021\u002F2021-01-24-unreal-fest-trials-of-mana-3-note",[970,181],"w76ga3vPnRwZGTYJffVzsbZqAiFFfGMDM85SQ_10Ka8",1788763177400]