一般在塞尔达游戏完成度中表示完成度用什么图标表示？
点击联系发帖人
时间：2018-08-08 06:44
14026 条评论分享收藏感谢收起赞同 45042 条评论分享收藏感谢收起经过核实后将会做出处理，感谢您为社区和谐做出贡献。
请选择删除原因
确定推荐该回答？
魔兽世界为何0MBPS的网络带宽,下载完成度0%,原本屏幕下方小电脑图标变成一个红色问号,求解决
第一网络带宽0MBPS，下载完成度0％没什么特别的意义，除非是在线更新的时候，如没下载完成但是可以进游戏的情况下才有数字第二 那个红色的问号是帮助系统，意思是你有问题可以点击查看，红色是为了明显第三，你这是明显的帧数低：检查下你游戏的效果，开到最低是帧数是多少，如果还是低，那么就检查下显卡的驱动，驱动没问题检查下显卡的设置&figure&&img src=&https://pic3.zhimg.com/v2-bc3f300fdebd_b.jpg& data-rawwidth=&1383& data-rawheight=&692& class=&origin_image zh-lightbox-thumb& width=&1383& data-original=&https://pic3.zhimg.com/v2-bc3f300fdebd_r.jpg&&&/figure&&p&本文核心内容为《GPU Gems 2》中讲到的真实感水体渲染，以及真实感头发渲染、通用的折射模拟、改进的Perlin噪声等次核心内容。&/p&&p&&br&&/p&&h2&&b&前言&/b&&/h2&&p&之前和同事们讨论水体渲染时，大家说到目前业界水体实时渲染效果领先的游戏引擎，是Cry Engine。Cry Engine中的水体渲染可谓目前水体渲染方案中的集大成者，汲取了图形业界近几十年水体渲染各种思路的精华。以下是Cry Engine 中的水体渲染实时画面：&/p&&a class=&video-box& href=&https://link.zhihu.com/?target=https%3A//www.zhihu.com/video/7651072& target=&_blank& data-video-id=&& data-video-playable=&& data-name=&& data-poster=&https://pic1.zhimg.com/80/v2-c4c2b670a165fe7499efc4_b.jpg& data-lens-id=&7651072&&
&img class=&thumbnail& src=&https://pic1.zhimg.com/80/v2-c4c2b670a165fe7499efc4_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/7651072&/span&
&figure&&img src=&https://pic3.zhimg.com/v2-bc62ed5fc450feac5ad3ccff76d70785_b.jpg& data-rawwidth=&1280& data-rawheight=&720& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-bc62ed5fc450feac5ad3ccff76d70785_r.jpg&&&/figure&&p&注意这是6年前Cry Engine 3的水体渲染实时画面，很多人感觉其效果已经达到了近乎真实。&/p&&p&而目前的Cry Engine 5，渲染质量还会更胜一筹。&/p&&p&值得开心的是，Cry Engine已经开源，其水体渲染的具体shader实现代码可以在Cry Engine源码中找到，以下是其中核心代码Water.cfx的传送门，感兴趣的朋友不妨了解一下：&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/CRYTEK/CRYENGINE/blob/adcbc820/Engine/Shaders/HWScripts/CryFX/Water.cfx& data-image=&https://pic3.zhimg.com/v2-e0e395ef6b8e44b7df826_ipico.jpg& data-image-width=&400& data-image-height=&400& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CRYTEK/CRYENGINE&/a&&p&值得注意的是，本文中提到的一些渲染水体的策略与思路，在Cry Engine 5实现水体渲染中，也有所体现。&/p&&p&OK，下面开始正题。&/p&&p&&br&&/p&&h2&&b&目录 · 本文核心内容Highlight&/b&&/h2&&p&本文将进行重点提炼总结《GPU Gems 2》中的主核心内容有：&/p&&ul&&li&一、将顶点纹理位移用于水的真实感渲染（Using Vertex Texture Displacement for&br&Realistic Water Rendering）&/li&&/ul&&p&本文将进行提炼总结《GPU Gems 2》中的次核心内容有：&/p&&ul&&li&二、利用像素着色器分支的高效模糊边缘阴影（Efficient Soft-Edged Shadows Using Pixel Shader Branching）&/li&&li&三、通用的折射模拟（Generic Refraction）&/li&&li&四、快速三阶纹理过滤（Fast Third-Order Texture Filtering）&/li&&li&五、高质量反走样的光栅化（High-Quality Antialiased Rasterization）&/li&&li&六、快速预过滤线条（Fast Prefiltered Lines）&/li&&li&七、Nalu Demo中的头发动画与渲染（Hair Animation and Rendering in the Nalu Demo）&/li&&li&八、使用查找表加速颜色变换（Using Lookup Tables to Accelerate Color Transformations）&/li&&li&九、实现改进的Perlin噪声（Implementing Improved Perlin Noise）&/li&&li&十、高级高质量过滤（Advanced High-Quality Filtering）&/li&&li&十一、Mipmap层级测定（Mipmap-Level Measurement）&/li&&/ul&&p&&br&&/p&&p&&br&&/p&&h2&&b&I、核心章节提炼篇&/b&&/h2&&h2&&b&一、将顶点纹理位移用于水的真实感渲染（Using Vertex Texture Displacement for Realistic Water Rendering）&/b&&/h2&&h2&&b&【内容概览】&/b&&/h2&&p&真实地渲染出水的质感是一个困难的问题，因为水表面的运动具有高度的视觉复杂性，且水的光影效果也很复杂。而这章中，介绍了为游戏《太平洋战机》开发的对海水的真实感渲染技术。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-00de2d88fecd22b3a01045d_b.jpg& data-rawwidth=&500& data-rawheight=&375& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/v2-00de2d88fecd22b3a01045d_r.jpg&&&/figure&&p&图 《太平洋战机》中的海水渲染&/p&&h2&&b&【核心要点】&/b&&/h2&&h2&&b&1.1 水体渲染模型的分析&/b&&/h2&&p&Gems2中这篇文章问世期间（2005年），当时最真实的水体渲染实现方法是基于流体动力学和快速傅里叶变换（FFT）[Tessendorf 2001],但遗憾的是这种方法需要大量的计算，不适用于交互应用程序。&/p&&p&大多数游戏当时使用的是很简单的水模型，而其中的大多数采用了法线贴图来生成视觉细节，优点是计算量小，缺点是很多时候不能提供足够的真实感，并且不能真实重现水面的波浪。&/p&&p&而本文中介绍了一种能达到简单法线贴图方法的速度，但渲染质量类似于FFT方法的水面渲染技术。&/p&&h2&&b&1.2 实现思路概览&/b&&/h2&&p&本文的水体渲染主要实现思路是基于法线贴图计算光照的渲染算法。因为法线图在高频的波浪中能够真实地产生精细的细节，所以将它用于光照的计算。除此之外，还对水模型的几何表面做了大振幅低频波浪的扰动。&/p&&h2&&b&1.3 水体的表面模拟&/b&&/h2&&p&水体表面的模型是基于几张高度图（Height maps）的叠加，这些高度图在空间和时间上不断重复。每张纹理表示一个“谐波（harmonic）”或“倍频（octave）”频谱，然后这些纹理被叠加到一起，类似傅里叶分析中的做法。&/p&&p&而这些纹理之所以称为高度图，因为其中每个值代表了对应点相对于水平面的高度值。高度图对于美术同学来说创建非常容易，与创建和渲染灰度图一样简单。利用高度图，水的动画参数规约成一些独立的波，美术同学只要绘出它们的形状就可以很容易地控制水的动画。高度图也对顶点纹理有用：因为可以很容易地对顶点进行竖直方向的位移。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-4ca98d3d9aa_b.jpg& data-rawwidth=&250& data-rawheight=&250& data-caption=&& data-size=&normal& class=&content_image& width=&250&&&/figure&&p&图18-2 一张用于水面位移的高度图&/p&&p&通过用不同的空间和时间范围来结合若干高度图，可以得到视觉上非常复杂的动画：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-0c953f82b_b.jpg& data-rawwidth=&450& data-rawheight=&49& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&450& data-original=&https://pic2.zhimg.com/v2-0c953f82b_r.jpg&&&/figure&&p&系数A和B以及求和的项数是由经验决定的，以求达到美学角度上最好的结果，同时减少重复图案的痕迹。在《太平洋战机》中，叠加4张高度图用于计算光照，其中最大范围的两张用于位移贴图。这对模拟动态的海洋表面来说已经足够了，可选范围为10cm到40km（10厘米到40千米）之高。&/p&&h2&&b&1.4 实现细节概述&/b&&/h2&&p&可以把所有需要实现的计算分为两部分：&/p&&ul&&li&几何位移计算&/li&&li&光照计算&/li&&/ul&&p&因为水面细分得很精细，所以可以只在片段程序级实现光照计算，而把位移映射的工作移交给顶点级，以减轻片段的负担。需要注意，如果在顶点级实现光照计算可能产生明显的走样，尤其是远处的物体。&/p&&h2&&b&1.5 对高度图采样&/b&&/h2&&p&文中的实现是在每个顶点上对高度图进行采样，并且在顶点程序中计算应该取的位移值。为了计算采样，使用了一个中心在相机位置的径向栅格（radial grid）。这个栅格的细分特点是离视点越近则提供越多的细节，如下图所示&/p&&figure&&img src=&https://pic4.zhimg.com/v2-081c4ecd9a42618a_b.jpg& data-rawwidth=&275& data-rawheight=&285& data-caption=&& data-size=&normal& class=&content_image& width=&275&&&/figure&&p&下面的方程表示了径向栅格上的顶点位置的计算方法：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-08ccae37f79a_b.jpg& data-rawwidth=&152& data-rawheight=&89& data-caption=&& data-size=&normal& class=&content_image& width=&152&&&/figure&&p&&br&&/p&&p&其中，i=[0..N - 1], j = [0..M - 1]。选择a0，a1，使&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3d60c938aceb_b.jpg& data-rawwidth=&253& data-rawheight=&61& data-caption=&& data-size=&normal& class=&content_image& width=&253&&&/figure&&p&使用这种方法，可以得到根据距离细分的栅格，也体现了一个简单的层次细节LOD策略。其他方案，如ROAM或SOAR地形渲染算法，也可以用于此处，但是它们需要在CPU上进行大量计算，会减弱使用顶点纹理的优势。而我们也可以尝试在GPU中渲染自适应镶嵌栅格的高度域。&/p&&p&下面的代码列出了着色器的实现细节，用一个径向栅格对单张高度图进行采样。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&float4 main(float4 position : POSITION,
uniform sampler2D tex0,
uniform float4x4 ModelViewProj,
uniform float4 DMParameters, // displacement map parameters
uniform float4 VOfs) : POSITION
// Read vertex packed as (cos(), sin(), j)
float4 INP =
// Transform to radial grid vertex
INP.xy = INP.xy * (pow(INP.z, 4) * VOfs.z);
// Find displacement map texture coordinates
// VOfs.xy, DMParameters.x - Height texture offset and scale
float2 t = (INP.xy + VOfs.xy) * DMParameters.x;
// Fetch displacement value from texture (lod 0)
float vDisp = tex2D(tex0, t).x;
// Scale fetched value from 0..1:
// DMParameters.y - water level
// DMParameters.z - wavy amplitude
INP.z = DMParameters.y + (vDisp - 0.5) * DMParameters.z;
// Displace current position with water height
// and project it
return mul(ModelViewProj, INP);
&/code&&/pre&&/div&&h2&&b&1.6 提高渲染质量与优化性能的一些方案&/b&&/h2&&h2&&b&1.6.1 为双线性过滤打包高度值&/b&&/h2&&p&访问顶点纹理的代价十分昂贵，在旧的GeForce 6系列的硬件上，一个顶点纹理的访问会在顶点程序中产生明显的延迟。所以比较合适的策略是把顶点程序中访问纹理的次数降到最低。另一方面，过滤纹理值非常必要，否则图像质量就会显著降低。&/p&&p&为了减小插值时纹理访问的次数，可以用一种特别的方法创建纹理，这样使每个纹理包含了一次双线性纹理查找必需的所有数据。因为高度图本质上是单通道的纹理，可以把四个高度值打包到一张四通道纹理的一个纹素内，以实现优化。&/p&&h2&&b&1.6.2 使用分支避免不需要的工作&/b&&/h2&&p&即使使用了优化的纹理过滤，渲染水体时，访问纹理的次数仍然很高，这会严重影响性能。一种方法是减少渲染的顶点数，但是这将全面地降低视觉上的细节并且增加失真度。&/p&&p&需要渲染的水体含有大量的几何数据，但其中有些三角面完全在屏幕之外。对这样的三角形，顶点程序仍然要进行处理，这其实是一种浪费。如果能跳过在相机视野之外三角形的相关计算，就可以在每个顶点上节约大量的工作。&/p&&p&以下的伪代码表达了这个方法的实现：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&float4 ClipPos = mul(ModelViewProj, INP);
float3 b0 = abs(ClipPos.xyz) & (ClipPos.www * C0 + C1);
if (all(b0))
// Vertex belongs to visible triangle,
// Perform texture sampling and displace vertex accordingly
&/code&&/pre&&/div&&p&在上面的代码中，使用了裁剪空间的顶点位置来确定当前的顶点是否位于视野之中，然后只对需要的顶点进行复杂运算即可。&/p&&h2&&b&1.6.3 使用渲染到纹理策略（Render-to-Texture）&/b&&/h2&&p&仍然可以使用上文提到的，用一张浮点纹理来压缩存储高度纹理的方法，先将其作为单独的pass来执行，以提高运行速度。而在顶点着色器里面实现多次昂贵的插值操作就变得没有太多必要。另外，可以用一个更紧凑的16位浮点纹理格式来存储原始的高度图。也可以存储一系列高度图序列帧作为三维纹理的切片，以使动画更加流畅。&/p&&p&经过上述优化，我们的渲染循环变成了如下两个pass：&/p&&p&（1）通过使用将单个四边形渲染为32位浮点纹理的特殊像素着色器，来组合高度贴图。而此纹理中的各个纹素映射到径向栅格的各个顶点。&/p&&p&（2）使用生成的高度贴图作为顶点纹理来平移径向栅格顶点。&/p&&h2&&b&1.6.4 处理波浪的背面&/b&&/h2&&p&大量的光照计算是在像素着色器中实现的。其假设了水面是水平的，而这个假设在某些情况下可能导致视觉效果的走样。&/p&&p&在下图所示的情况下，我们看到了波浪的背面，它在平面上是能被看见的，但是因为几何位移的关系它会背向观察者，所以在现实世界中并不应该出现。而这样的错误会在波浪的顶部产生奇怪的过亮区域。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-2ad3c092f8e9bcbf6a33c4_b.jpg& data-rawwidth=&250& data-rawheight=&203& data-caption=&& data-size=&normal& class=&content_image& width=&250&&&/figure&&p&&br&&/p&&p&图 渲染走样的产生&/p&&p&图注：波浪（绿色）的背面也可能被渲染出来，尽管它并不应该出现。调整计算光照的法线将大大减少这种错误。&/p&&p&为了尽量减少这种错误，可以将计算光照时使用的法线稍微做调整，将他们朝向观察者方向“倾斜”一些，这样他们会更接近于波浪的正向面。&/p&&h2&&b&1.7 渲染局部扰动的策略&/b&&/h2&&p&有时渲染渲染因为浮起物或者掉入水中的物体引起的波浪局部的起伏。这对游戏来说尤为重要，因为游戏需要产生类似于爆炸，船的行进痕迹等效果。因为很难继承物理上正确的方法将其用于这个基于高度图的水面模型中来，所以这里只根据经验讨论一些简单的方法。&/p&&h2&&b&1.7.1 解析型形变模型（Analytical Deformation Model）&/b&&/h2&&p&造成局部波浪起伏最简单的方法是把顶点的位移值做成一个解析上的扰动，把扰动和顶点着色器中计算好的顶点位置结合起来。&/p&&p&实现局部波浪起伏最简单的方法是通过将顶点位移与顶点着色器中计算的顶点位置相结合，来解析地扰动位移的顶点位置。对爆炸而言，可以用下面的公式：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-30b0ec752eee991f30ffb2b4b69e8cf5_b.jpg& data-rawwidth=&271& data-rawheight=&56& data-caption=&& data-size=&normal& class=&content_image& width=&271&&&/figure&&p&其中，r是水平面上该点到爆炸中心的距离，b是一个常数，I_0，ω和k的值根据一个给定的爆炸及其参数决定。&/p&&p&在渲染时，可以使用和普通水体渲染时相同的径向栅格，尤其是在爆炸点。&/p&&h2&&b&1.7.2 动态位移贴图（Dynamic Displacement Mapping）&/b&&/h2&&p&另一个选择是将所有的局部创建的位移量直接渲染到顶点纹理，本质上是和GPU通用编程（GPGPU）类似的方法。这样，在第一个pass中生成顶点纹理，而在后续pass中，用此纹理来进行实际的水体渲染。另一个好处是，通过在像素着色器中过滤基础高度图和累加倍频程（octaves），可以把一些工作从顶点着色器转移到像素着色器中。&/p&&p&为了计算位移量，既可以采用前面提到的解析型模型，也可以用自动控制单元（cellular-automata）的方法，将局部位移进行逐帧衍变。也可以考虑风的效果，对纹理沿着适当的方向进行模糊。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-eff130f27e1d0d5cb51c_b.jpg& data-rawwidth=&500& data-rawheight=&193& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/v2-eff130f27e1d0d5cb51c_r.jpg&&&/figure&&p&图 用位移贴图渲染的水表面（左）和不用位移图渲染的水表面（右）对比&/p&&h2&&b&1.7.3 泡沫的生成（Foam Generation）&/b&&/h2&&p&在波浪足够强时，可以通过制造泡沫来加强真实感。最简单的方法是把一个预先创建的泡沫纹理在高于某一高度H0的顶点上进行混合。泡沫纹理的透明度根据以下公式进行计算：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-345ebd12e79d64c1f48d9fd75ef2e416_b.jpg& data-rawwidth=&300& data-rawheight=&61& data-caption=&& data-size=&normal& class=&content_image& width=&300&&&/figure&&p&其中，H_max是泡沫最大时的高度，H_0是基准高度，H是当前高度。&/p&&p&泡沫纹理可以做成动画来表示泡沫的产生和消失的进化过程。这个动画序列既可以由美术同学制作，也可以由程序生成。&/p&&h2&&b&【核心要点总结】&/b&&/h2&&p&本文的水体渲染实现思路是基于法线贴图计算光照的渲染算法，水体表面的模型为基于几张高度图（Height maps）的叠加。在每个顶点上对高度图进行采样，并且在顶点程序中计算应该取的位移值。计算采样方面，使用了一个中心在相机位置的径向栅格（radial grid），以及结合了一些优化的策略。&/p&&h2&&b&1.提高渲染质量与优化性能的方案&/b&&/h2&&p&1）为双线性过滤打包高度值:因为高度图本质上是单通道的纹理，可以把四个高度值打包到一张四通道纹理的一个纹素内，以实现优化。&/p&&p&2）使用分支避免不需要的工作：使用裁剪空间的顶点位置来确定当前的顶点是否位于视野之中，然后只对需要的顶点进行复杂运算即可。&/p&&p&3）使用渲染到纹理策略（Render-to-Texture）&/p&&p&4）处理波浪背面：将计算光照时使用的法线稍微做调整，将他们朝向观察者方向“倾斜”一些，这样他们会更接近于波浪的正向面。&/p&&h2&&b&2.渲染局部扰动的策略&/b&&/h2&&p&1）解析型形变模型（Analytical Deformation Model）&/p&&p&2.动态位移贴图（Dynamic Displacement Mapping）&/p&&p&3.泡沫的生成：预先创建的泡沫纹理在高于某一高度H0的顶点上进行混合，其中泡沫纹理的透明度根据公式进行计算。&/p&&h2&&b&【配套源代码】&/b&&/h2&&p&&b&这篇文章公开了其详细的实现源码，具体可以在这里找到：&/b&&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/QianMo/GPU-Gems-Book-Source-Code/tree/master/GPU-Gems-2-CD-Content/Shading_Lighting_and_Shadows/Ch_18_Using_Vertex_Texture_Displacement_for_Realistic_Water_Rendering& data-image=&https://pic2.zhimg.com/v2-5e14b339cd_ipico.jpg& data-image-width=&200& data-image-height=&200& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QianMo/GPU-Gems-Book-Source-Code&/a&&p&其中shader代码位于fpWaterDM.cg，vpWaterDM.cg两个文件中。其中也提供了可运行的demo exe，其运行效果如下：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f16b87210fcd6d86c6fe1_b.jpg& data-rawwidth=&737& data-rawheight=&464& data-caption=&& data-size=&normal& data-thumbnail=&https://pic3.zhimg.com/v2-f16b87210fcd6d86c6fe1_b.jpg& class=&origin_image zh-lightbox-thumb& width=&737& data-original=&https://pic3.zhimg.com/v2-f16b87210fcd6d86c6fe1_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-7a5f5a44a95fe6bca913b_b.jpg& data-rawwidth=&812& data-rawheight=&634& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&812& data-original=&https://pic1.zhimg.com/v2-7a5f5a44a95fe6bca913b_r.jpg&&&/figure&&h2&&b&【关键词】&/b&&/h2&&p&水渲染（Water Rendering）&/p&&p&顶点纹理位移（Vertex Texture Displacement）&/p&&p&高度贴图（Height Mapping）&/p&&p&双线性过滤（Bilinear Filtering）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&II、次核心章节提炼篇&/b&&/h2&&p&&br&&/p&&h2&&b&二、利用像素着色器分支的高效模糊边缘阴影（Efficient Soft-Edged Shadows Using Pixel Shader Branching）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&在计算机图形学中，渲染真实的阴影一直是难题之一，尤其是软阴影（soft&br&shadow）的渲染。且阴影是一种非常重要的视觉信息，它们有助于确立场景中物体的空间相对关系。&/p&&p&这章介绍了一种通过片段着色器中的PCF技术达到的实时渲染模糊（软）边界阴影的快速方法。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&文中首先讲到阴影渲染技术中最常见的两种流派模板阴影/阴影体（Stencil Shadow /
Shadow volume）和阴影贴图（Shadow Map）。&/p&&p&两种方法都各有其优缺点。且提到了这两种方法都不能直接用于“超出框”的模糊边界阴影。&/p&&p&随后这章介绍了一种以交互速率渲染模糊阴影的方法，其能高质量地模拟真实的模糊阴影。该方法使用了百分比邻近过滤（Percentage-Loser Filtering, PCF）技术，在片段着色器中不断对阴影图自适应地多次采样。这章自适应的采样方法与采样方法与采样数固定的方法相比，能在保证高性能的同时提高画面质量。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8a3ea2ee7d535d5fd6f739_b.jpg& data-rawwidth=&500& data-rawheight=&375& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-8a3ea2ee7d535d5fd6f739_r.jpg&&&/figure&&p&图 基于文中方法实时渲染出的模糊边缘阴影&/p&&h2&&b&【关键词】&/b&&/h2&&p&软阴影（Soft Shadows）&/p&&p&模糊边缘阴影（Soft-Edged Shadows）&/p&&p&模板阴影/阴影体（Stencil Shadow /Shadow volume）&/p&&p&阴影贴图（Shadow Map）&/p&&p&百分比邻近过滤（Percentage-Loser Filtering, PCF）&/p&&p&&br&&/p&&h2&&b&三、通用的折射模拟（Generic Refraction）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&本章介绍了一种折射的实现方案，思路是对场景中非折射的物体生成一幅图像，把该图像当做纹理，然后对查找该纹理的坐标进行扰动来达到模拟折射的目的。这种技术效率很高，而且很多情况下都有效。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&折射（Refraction）是当光从一种媒介穿到另一种折射率不同的媒介（如从空气到水，从空气到玻璃等）时产生的弯曲现象。&/p&&p&要模拟折射有很多种方法：其中一些方法是先预计算环境映射，然后在运行时使用；而其他方法是直接在运行时计算环境映射。这些技术的缺点是耗费大量的纹理存储空间并损失运行效率，尤其是当场景中有很多折射表面时，需要不同的环境映射。&/p&&p&而目前的水折射模拟技术的另一个问题是他们需要渲染两遍：第一个pass通过水面上的几何信息来生成折射图，另一个pass渲染水面。这种方案的性能很低，尤其对复杂的场景而言。&/p&&p&本章介绍了一种简单的技术来克服这些问题。从介绍基本想法开始，把现有的后台缓存当做一个折射贴图来用，并且通过对纹理坐标进行位移来模拟折射的效果。最基本的实现可能导致走样，因此文中讨论了如何将几何图形从折射图贴图中标注出来。最后演示了一些用该方法渲染真实的水和玻璃的通用技术。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-47cfca938a_b.jpg& data-rawwidth=&500& data-rawheight=&149& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/v2-47cfca938a_r.jpg&&&/figure&&p&图 彩色玻璃的渲染步骤（a）折射 （b）环境凹凸映射 （c）最终的合成&/p&&p&这章给出的模拟折射的方法，虽然不是基于物理的，但是能得到质量很好的结果，且速度非常快。&/p&&p&但此方法的缺陷是，当应用到不同颜色的折射表面上时，在表面重叠的地方会得到不正确的结果。只要折射表面的颜色相近，结果看上去就是正确的。一个正确的解决方案就是，对折射网格从后到前进行排序，然后每次渲染一个折射网格时都更新一次折射图。或者用另一个不够准确的方案，对折射网格从后到前进行排序，在用alpha混合来渲染它们。&/p&&h2&&b&【关键词】&/b&&/h2&&p&折射（Refraction）&/p&&p&水的渲染（Water Rendering）&/p&&p&玻璃的渲染（Glass Rendering）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&四、快速三阶纹理过滤（Fast Third-Order Texture Filtering）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&&br&&/p&&p&对可编程图形硬件可以在使用片段着色器上使用通用的卷积过滤器来实现高质量的纹理过滤，如立方（cubic）过滤器[Bjorke 2004]。这些方法通常有许多缺点：它们需要进行多次纹理采样，而且无法对mipmap的纹理进行反失真处理。&/p&&p&而在本章中，介绍了一种能有效减少三阶纹理过滤需要输入的纹理数量的方法，使用了1D、2D及3D空间中的三次B样条（B-spline）曲线的卷积核和它的一阶、二阶导数来解决这些过滤问题。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&高阶纹理过滤的主要性能瓶颈是需要大量的纹理采样作为输入。通常是通过对输入纹理进行重复最近邻近（Repeated Nearest-Neighbor）采样实现。为了减少采样的次数，基于线性采样来建立过滤器，这种方法能大量减少纹理采样的次数，尤其是2D和3D过滤。特别是能通过8次三线性纹理采样来完成一个需要64次累加操作的三立方（tricubic，也译作三重三次）过滤器。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-39cbe619e0bfd05f32d10fd_b.jpg& data-rawwidth=&500& data-rawheight=&137& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-39cbe619e0bfd05f32d10fd_r.jpg&&&/figure&&p&图 三次B样条（Cubic B-Spline）和其导数&/p&&p&（a）f_1和过滤器权重w_i（x）的卷积&br&（b）三次样条曲线的一阶导数；（c）三次样条曲线的二阶导数&/p&&p&&br&&/p&&p&总而言之，本章介绍了一个能有效减少高阶纹理过滤需要的对输入纹理进行采样的次数。而前提是假设一个线性采样操作和一个最邻近采样一样快（至少不慢太多）。对三阶过滤器核（如三次B样条）曲线过滤器进行了优化，让它只需要非常少的线性纹理采样次数。&/p&&p&而事实上，片元着色器里的代码更像一个手工写的线性插值程序，而不是一个立方过滤器。&/p&&h2&&b&【关键词】&/b&&/h2&&p&纹理过滤（Texture Filtering）&/p&&p&高阶过滤（Higher-Order Filtering）&/p&&p&B样条过滤（ B-Spline Filtering）&/p&&p&三次B样条（Cubic B-Spline）&/p&&p&快速递归三次卷积（Fast Recursive Cubic Convolution）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&五、高质量反走样的光栅化（High-Quality Antialiased Rasterization）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章介绍了一种分块的超采样（supersampling）技术，使用任意宽度和高采样率的自定义过滤器，可以用来渲染任意分辨率的图像，以实现高质量的反走样光栅化。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&如上所言，文中介绍了一种分块的超采样（supersampling）技术，描述了如何把一个图像分成块（tiles，也称为buckers），用高分辨率渲染每一块，然后降采样（downsample，即收缩）每一块以达到最终分辨率，在即使构造的片元程序中使用分离式的降采样。文中也介绍了如何在图像分块之间进行正确的重叠和延伸的细节问题。文中提供的代码可以很轻易地集成到现有的渲染系统中，而不需要对现有的代码进行大的改动。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b40c8f8fbeabe001a96d_b.jpg& data-rawwidth=&500& data-rawheight=&357& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-b40c8f8fbeabe001a96d_r.jpg&&&/figure&&p&图 将图像分解成tiles&/p&&p&对于最终图像的每一个分块，总体算法如下：&/p&&p&（1）把图像块渲染到一个大的离屏缓冲区中，调整投影矩阵，以现有的渲染代码把3D几何体用高采样率的分辨率渲染出来。&/p&&p&（2）把高分辨率的图像块用一个分离式的过滤器核进行降采样，通过使用实时生成的片元程序在屏幕上渲染两个全屏的四边形来实现。&/p&&p&（3）把低分辨率的图像块累加到最终图像中，或通过把图像块的数据读回到CPU中，或使用另外一个片元程序把图像块加入到最终图像中。&/p&&h2&&b&【关键词】&/b&&/h2&&p&反走样光栅化（Antialiased Rasterization）&/p&&p&分块超采样（tiled supersampling）&/p&&p&降采样（downsample）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&六、快速预过滤线条（Fast Prefiltered Lines）&/b&&/h2&&p&&br&&/p&&h2&&b&【章节概览】&/b&&/h2&&p&这章介绍了一种简单有效的绘制反走样（抗锯齿）的线条的方法。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&本章提到的预过滤（Prefiltered）方法最早由McNamara, McCormack, 和 Jouppi在2000年提出，其有诸多优点。首先该方法能使对称的过滤器在运行时提供固定的开销；其次，和一般硬件支持的过滤器不同，本方法不仅仅对只处于像素内的点进行采样，它能支持更大范围的过滤器，反走样的结果是硬件无关的，这保证了在不同GPU上能得到相同的反走样结果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-3b7bff29e36a872ca8f11291bbe1f482_b.jpg& data-rawwidth=&500& data-rawheight=&224& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-3b7bff29e36a872ca8f11291bbe1f482_r.jpg&&&/figure&&p&图 比较细线和粗线的反走样效果&/p&&p&总之，通过对从中心到边界不同距离处，把直线和过滤器的卷积结果进行卷积，并将结果存储在一个查找表中来预过滤线条。&/p&&p&该方法允许相同的运行时开销开使用任意的对称过滤器。而且，该算法只需要很少的CPU和GPU运算、带宽及存储空间开销。这些特性使这种算法对大部分的实时渲染程序都有实用价值，如绘制围栏、电线以及游戏中其他细长的物体。&/p&&h2&&b&【关键词】&/b&&/h2&&p&预过滤线条（Prefiltered Lines）&/p&&p&反走样/抗锯齿（Antialiasing ）&/p&&p&线条的反走样（Antialiasing Lines）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&七、Nalu Demo中的头发动画与渲染（Hair Animation and Rendering in the Nalu Demo）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章讲到了NVIDIA公司的Nalu Demo中的头发动画和渲染技术。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f4fb6c813e50c5f77c08_b.jpg& data-rawwidth=&300& data-rawheight=&323& data-caption=&& data-size=&normal& class=&content_image& width=&300&&&/figure&&p&图 Nalu的头发&/p&&h2&&b&【核心要点】&/b&&/h2&&p&NVIDIA的Nalu demo中，要达到的目标是渲染在水中飘动的金色长发。这章将介绍用于实时达到这个目标所用的技术。这种技术包含一个模拟头发运动系统，一个计算头发自阴影的阴影生成算法，还有一个通过每一串头发来模拟光线散射的发射模型。把这些结合起来，就能实时创建出极其真实的头发渲染效果。&/p&&p&在Nalu头发的后台着色处理中，有一个在每帧里生成头发几何和控制动感与碰撞的系统。基本上分成两部分：几何生成器和动感/碰撞的计算。&/p&&p&这些头发是由4095条用直线图元来渲染的独立发丝组成。仅仅在渲染头发上就使用了123000个顶点。让所有这些顶点通过动力学和碰撞检测就将慢得无法接受，因此使用受控发丝（control hair）：尽管需要渲染成千次，但Nalu的发型能通过一组每组几百根发丝来描述和控制。所有开销大的动态计算都运用于这些受控发丝。&/p&&p&头发的实时反射模型方面，选用了Marschner反射模型（2003）。而在渲染头发的阴影方面，采用了一种针对渲染头发阴影设计的近似阴影——非透明阴影图（Opacity shadow maps）(Kim and Neumann 2001)。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-1057dab03a_b.jpg& data-rawwidth=&500& data-rawheight=&444& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-1057dab03a_r.jpg&&&/figure&&p&图 基于Marschner反射模型的头发渲染&/p&&figure&&img src=&https://pic1.zhimg.com/v2-262badf9d1be8ebd5ad4_b.jpg& data-rawwidth=&500& data-rawheight=&207& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-262badf9d1be8ebd5ad4_r.jpg&&&/figure&&p&图 Marschner反射模型的查找纹理（Lookup Textures）&/p&&h2&&b&【关键词】&/b&&/h2&&p&头发渲染（Hair Rendering）&/p&&p&头发动画（Hair Animation）&/p&&p&Marschner反射模型（Marschner Reflectance Model）&/p&&p&非透明阴影图（Opacity Shadow Maps）&/p&&p&&br&&/p&&h2&&b&八、使用查找表加速颜色变换（Using Lookup Tables to Accelerate Color Transformations）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章中，介绍了一种利用三维查找表的算法来实时处理高分辨率图像的方法。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&在函数的计算开销很大，但是把计算结果缓存起来的开销比较小时，用查找表（Lookup&br&Table，简称LUT）优化这种函数的计算是一种非常好的方法。通过预先把一些常见输入的对应结果计算出来，花费不多的查找操作就能代替开销较大的运行时计算。如果查找比开头开始计算结果（或者有不断重复的相同输入）要快，那么使用查找表就能提高程序性能。&/p&&p&这章中，介绍了一种利用三维查找表的算法来实时处理高分辨率图像的方法。这种方法有非常出色的性能，它与执行颜色操作的数量无关，与颜色操作的复杂度也无关，即能独立于颜色运算的数量和颜色变换的复杂度。涉及到的主要实现有，把查找表映射到GPU、着色器的实现、系统集成以及把三维查找表扩展到高动态范围图像等步骤。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-6a012c35b8ce340cda7c_b.jpg& data-rawwidth=&500& data-rawheight=&196& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/v2-6a012c35b8ce340cda7c_r.jpg&&&/figure&&p&图 一个三维的查找表&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-2bdf5cfa1ddb33ffffa23223_b.jpg& data-rawwidth=&500& data-rawheight=&412& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-2bdf5cfa1ddb33ffffa23223_r.jpg&&&/figure&&p&图 颜色校正流水线的比较。左图为传统的颜色校正流水线，通过发送低分辨率的图像来用作硬件加速的基础。右图为基于三维查找表的加速流水线。&/p&&h2&&b&【关键词】&/b&&/h2&&p&查找表（Lookup Table， LUT）&/p&&p&颜色变换（Color Transformations）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&九、实现改进的Perlin噪声（Implementing Improved Perlin Noise）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章上接《GPU Gems 1》中奥斯卡得主大牛Ken Perlin撰写的第五章[Perlin&br&2004]，《GPU Gems 1》中Ken Perlin的章节讨论了该如何使用3D纹理实现过程噪声的快速近似，在这里描述一个改进噪声算法的GPU实现，其也完全符合用CPU进行实现。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&Perlin算法由两个主要阶段组成。&/p&&p&第一阶段在3D空间的每个整数（x，y，z）位置产生一个可重复的伪随机值。这可以以多种方式思想，但是Perlin的算法是使用一个散列函数。散列函数基于一个包含以随机顺序0~255的整数排列的表（这张表可以在实现之间进行标准化，以便它们产生相同结果）。首先，这张表是基于位置的x坐标索引，然后将y坐标添加到表中该位置的值中，并使用结果再次在表中查一次表。然后为z坐标重复一次此过程。对z坐标重复此过程后，结果为每个可能的（x，y，z）位置的伪随机整数。&/p&&p&在算法中的第二阶段，将上述伪随机整数用于索引入一个3D梯度向量的表中。在“改良的”算法中，只用8个不同的梯度。这个梯度和噪声空间中的小数位置求点积可以得到一个标量值。最后的值通过空间中相邻8个点的噪声值插值获得。&/p&&p&Perlin改良的噪声算法是将CPU实现的排列表和梯度表存储在数组中。由于像素着色器当时不支持索引入常量存储器中，所以将这些表存储在纹理中，并使用纹理查找来访问它们。纹理寻址设为环绕（或重复）模式，因此不必考虑扩充表以避免索引越过数组结尾，如同在CPU实现中一样。&/p&&p&本章介绍了对像素着色器中的程序化噪声的实现。程序化噪声是丰富渲染外观一个重要的部分，而且它可以用于凹凸贴图和其他效果。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8cf5b8f9a_b.jpg& data-rawwidth=&400& data-rawheight=&375& data-caption=&& data-size=&normal& class=&content_image& width=&400&&&/figure&&p&图 基于过程凹凸贴图的pixel着色器噪声&/p&&h2&&b&【关键词】&/b&&/h2&&p&Perlin噪声（Improved Perlin Noise）&/p&&p&改进的Perlin噪声（Improved Perlin Noise）&/p&&p&&br&&/p&&h2&&b&十、高级高质量过滤（Advanced High-Quality Filtering）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章提供了一个基于GPU纹理过滤的实现细节和解决方案，其中重点放在纹理插值和反走样问题。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&本章阐述了一系列用于渲染纹理表面的高质量纹理过滤方法。这些技术可以用来执行许多常见的图像任务，如缩放、扭曲、锐化等。除此之外，用这些方法渲染简单的带纹理的3D场景时，还可以提供比图形硬件上的标准过滤器更好的渲染效果。&/p&&p&这章提到的技术是为质量最优的渲染而设计的，对高帧率的实时交互的程序和游戏来说依然显得昂贵，它更适合哪些渲染质量比速度更重要的程序，如医疗和科学图像、照片和电影编辑、图片合成、视频格式转换、专业3D渲染等。它也能用于游戏中与分辨率无关的纹理准备（预处理）当中。&/p&&p&另外，文中还介绍了一种适合用于增强重建图像的锐化过滤方法——冲击过滤冲击过滤（Shock Filtering），其能把纹理插值平滑地变换成陡峭的变换。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-6ff3d52f50d8_b.jpg& data-rawwidth=&500& data-rawheight=&423& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/v2-6ff3d52f50d8_r.jpg&&&/figure&&p&图 冲击过滤（Shock Filtering）方法&/p&&h2&&b&【关键词】&/b&&/h2&&p&GPU纹理过滤（GPU-based texture-filter）&/p&&p&纹理插值（ texture interpolation）&/p&&p&反走样/抗锯齿（antialiasing ）&/p&&p&冲击过滤（Shock Filtering）&/p&&p&&br&&/p&&h2&&b&十一、Mipmap层级测定（Mipmap-Level Measurement）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章讲到了使用“伪着色”（false-colored）的mipmap来代替原来的多级纹理进行场景渲染的方法。这样的mipmap每层都有不同的比对色。且这章展示了如何用GPU来自动化伪着色的整个过程。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&伪着色（false-colored）的mipmap，结合基于GPU的方法，可以高效地运用在游戏引擎中，可见的mip层次将被动态地反馈入引擎的纹理管理程序以减少内存消耗量。而所节省的内存可以用来增加别处的纹理分辨率，改进场景的华丽程度。Climax在Leviathan引擎中对地形场景使用了这项技术，使纹理空间节约了80%的内存，并没有任何可察觉的视觉质量损失。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-6beae192bc08bce1bf49f58be8c35964_b.jpg& data-rawwidth=&500& data-rawheight=&178& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic3.zhimg.com/v2-6beae192bc08bce1bf49f58be8c35964_r.jpg&&&/figure&&p&图 对地形场景应用伪着色mipmap方法&/p&&p&图（a）地形场景适用Climax的Leviathan引擎渲染（b）通过下图“定标纹理”，将原纹理替换成伪着色的mipmap后的效果。可以看到最高的层（黄颜色）几乎不可见。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5f5aed8ad253dba4f7ba1de_b.jpg& data-rawwidth=&500& data-rawheight=&250& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/v2-5f5aed8ad253dba4f7ba1de_r.jpg&&&/figure&&p&图 定标纹理&/p&&h2&&b&【关键词】&/b&&/h2&&p&纹理管理（texture management）&/p&&p&伪着色（false-colored）&/p&&p&Mipmap层级（Mipmap-Level）&/p&&h2&&br&&b&本文的GitHub版&/b&&br&&br&&/h2&&p&不少朋友们喜欢看GitHub版本的文章，我也很喜欢。&/p&&p&首先，MarkDown可以很方便地插入快捷导航目录，能进行瞬间跳转到指定子章节。其次，GitHub版本的文章中没有单篇文章的字数限制，少了很多篇幅方面的桎梏。而且因为Git的便利性，版本管理的优势，最新的勘误和修订,以及新文章的更新，第一时间会在GitHub的Repo中进行。&/p&&p&&b&【本文的GitHub版本传送门】：&/b&&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/QianMo/Game-Programmer-Study-Notes/tree/master/Content/%25E3%AGPU%2520Gems%%E5%%25E4%25B9%25A6%25E6%258F%%2582%25BC%25E6%2580%25BB%25E7%25BB%2593/Part2& data-image=&https://pic2.zhimg.com/v2-5e14b339cd_ipico.jpg& data-image-width=&200& data-image-height=&200& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QianMo/Game-Programmer-Study-Notes&/a&&p&&br&&/p&&h2&&b&附录：配套资源与源代码下载&/b&&/h2&&p&这里提供了一些，《GPU Gems 2》书本的配套资源以及源代码的下载地点。&/p&&p&PS:配套的不少工程中不仅包含完整的源码，也直接包含经过编译后的exe执行文件，可以直接运行后查看效果。&/p&&p&《GPU Gems 2》全文的Web版本：&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//developer.nvidia.com/gpugems/GPUGems2/gpugems2_inside_front_cover.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GPU Gems&/a&&p&也有维护一个名为“GPU-Gems-Book-Source-Code”的GitHub仓库，以备份《GPU&br&Gems》系列书籍相关的珍贵资源，《GPU Gems 2》的随书CD和源代码可以在这里下载到：&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/QianMo/GPU-Gems-Book-Source-Code& data-image=&https://pic2.zhimg.com/v2-5e14b339cd_ipico.jpg& data-image-width=&200& data-image-height=&200& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QianMo/GPU-Gems-Book-Source-Code&/a&&p&以上。&/p&&p&&/p&
本文核心内容为《GPU Gems 2》中讲到的真实感水体渲染，以及真实感头发渲染、通用的折射模拟、改进的Perlin噪声等次核心内容。 前言之前和同事们讨论水体渲染时，大家说到目前业界水体实时渲染效果领先的游戏引擎，是Cry Engine。Cry Engine中的水体渲染可…
&figure&&img src=&https://pic1.zhimg.com/30ff84aeb6ca2b3b14e4c90c_b.jpg& data-rawwidth=&800& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic1.zhimg.com/30ff84aeb6ca2b3b14e4c90c_r.jpg&&&/figure&&p&&b&本文禁止任何机构和个人，以任何形式进行转载。&/b&&/p&&p&2015年秋季学期，我师从「火星总统」Geoff Engelstein 学习桌游设计（哦，上帝啊，我用我的人格担保，这是NYU Game Center最值得上的课。）。课上Geoff提供了一份清单，以帮助我们自查游戏设计的完成度。「游戏设计的完成度」不同于「游戏的完成度」，它更多是集中在&b&游戏玩法规则的有效性、趣味性和自洽性&/b&上。对于游戏完成度的自查对工程方面的要求很低，在纸上原型阶段就可以开始，并且贯穿从构思/立项到最终版本锁定的所有开发阶段。这也是为什么我非常想跟大家分享这份清单。如果有需求，我会在接下来的专栏文章中进行评注。&br&&/p&&p&1.
玩家为什么要来玩这个游戏？&br&&/p&&p&2.
游戏的核心体验是什么？&/p&&p&3.
是否游戏中所有的机制都在支撑核心体验？&/p&&p&4.
你的目标用户是什么人？&/p&&p&5.
游戏需要玩家做什么决策和判断？&/p&&p&6.
有什么规则是贯穿始终的？游戏进行到什么阶段会发生规则的变化？&/p&&p&7.
游戏的时长是否有碍核心体验？&/p&&p&8.
游戏中有什么可以学习的技巧？这些技巧是否契合游戏的核心体验和时长？&/p&&p&9.
你用什么东西来激励玩家继续游戏？&/p&&p&10. 有什么机制是可以被简化或砍掉的？&/p&&p&11. 有哪些优势/劣势策略？是否有必胜策略？&/p&&p&12. 玩家是不是处于一个公平的起点？&/p&&p&13. 游戏的体验曲线/叙事曲线是否契合游戏的核心体验和时长？&/p&&p&14. 游戏的赢家是否是在游戏结束时才知晓？弱势方是否有翻盘的几率？会不会出现强者恒强的情况？&/p&&p&15. 游戏中是否有无聊的时刻？这种无聊的时刻是否会引起目标用户的反感或背离核心体验？&/p&&p&16. 是什么驱动游戏的进程？&/p&&p&17. 你是如何奖励玩家的？这种奖励是否契合游戏的核心体验、目标用户和时长？&/p&&p&18. 有哪些玩法与奖励相关？&/p&&p&19. 有哪些内容是直接支持核心体验的？&/p&&p&20. 有哪些内容是直接支持核心机制的？&/p&&p&21. 有哪些机制还不够直观？如何让玩家进行学习？&/p&&p&22. 规则书和教程是否有效？&/p&&p&23. 有没有其他人检查或改动过规则？&/p&&p&24. 游戏中的指示物是否清晰？&/p&&p&25. 游戏是否有被盲测（blind test）过？&/p&&p&26. 游戏的画面是否契合主题、核心体验和目标用户？&/p&&p&27. 游戏的字体和字号是不是易于阅读？&/p&&p&28. 游戏中的图标是否能清晰的传递你想要传递的信息？&/p&&p&29. 游戏中的图文是否会产生歧义？&/p&&p&30. 游戏的配色是否对色盲用户友好？&/p&&p&31. 游戏是否支持对于其他语言的本地化？&/p&&br&&p&题图：保罗高更《我们从哪里来？我们是谁？我们到哪里去？》&/p&
本文禁止任何机构和个人，以任何形式进行转载。2015年秋季学期，我师从「火星总统」Geoff Engelstein 学习桌游设计（哦，上帝啊，我用我的人格担保，这是NYU Game Center最值得上的课。）。课上Geoff提供了一份清单，以帮助我们自查游戏设计的完成度。「游…
入门阶级的书可以看Tracy Fullerton的Game Design Workshop 几乎是北美各大游戏高校的通用课本 其余 编剧 Production Coding 等都有各个领域的书 等我慢慢来填坑&br&&br&论权威的话就是Tracy这本Game Design Workshop了 她是北美著名的游戏教育家 没错 她把游戏作为一个正儿八经的学科搞深层次的研究 她花了几十年一直在探讨游戏的本质 一手发扬了北美的游戏教育（USC电影学院的互动传媒是北美最早提供游戏设计学位的科系 之后NYU CMU UT等等各大高校纷纷加入了这个大军） 她所提出的理念就是Playcentric- Design （一切&b&以玩家为中心&/b&） &br&&br&&b&我想让我的游戏给玩家带来什么？ &/b&这是一个每个游戏设计师都应该最先思考但又会经常被忽略的问题 很少有设计师在开发过程中能做到一直不偏离初衷 导致的后果就是 -- 不好玩 &br&Tracy的书就是围绕这个核心的 无论你是新手还是从业N年的经验人士 看看Tracy的书都会有所启发&br&&br&更新 我在USC学游戏设计 所以列一个我们课程中都用的书单造福广大人民群众 所以我这里列的书都是英文 亚马逊基本都可以买到&br&&br&&b&设计类：&/b&&br&Introduction to Game Design, Prototyping, and Development &br&十分全面的一本书 900度页厚 涵盖了设计理念 游戏开发过程 数值 谜题设计 基础C#到Unity开发完整的小游戏都有 强烈推荐任何对游戏设计感兴趣的朋友&br&&br&Level Design: Concept, Theory, and Practice
by Rudolf Kremers&br&学游戏怎么能不学关卡设计？ Amazon上有很多此类的书 但这本是比较广泛使用的&br&&br&&b&Production类&/b&&br&The Game Production Handbook by Heather Chandler&br&针对想成为制作人的书 全面地介绍了游戏开发过程和游戏制作人的职责&br&&br&Introduction to Game Development by Steven Rabin&br&介绍游戏开发的 推荐对游戏业感兴趣的人 如果在业界从事多年的就没必要看了&br&&br&&b&文案/剧情类：&/b&&br&The Ultimate Guide to Video Game Writing and Design&br&如何写一个出色的游戏剧本？ 这本书很薄 但涵盖了世界观设定 角色设定 如何设置戏剧冲突将观众带入剧情等等 我现在上的游戏写作课就在用这本书&br&&br&Character Development and Storytelling for Games by Lee Sheldon&br&这本没看过 但Amazon评价很高 光看标题很合我胃口 等我有时间了也会买一本来看
&br&&br&&b&测试类&/b&&br&Handbook
of Usability Testing: How to Plan, Design, and Conduct Effective Tests, &u&Second
Edition&/u&; Rubin, Jeffrey, Wiley Press, 2008&br&用户体验和性能测试的 判断你游戏好不好玩 最简单有效的方法就是不停地Playtest 那么如何设置test得到有效的feedback也是一门技巧 &br&&br&&b&Coding类&/b&&br&这方面的书就太多太多了 但如果是针对开发游戏的话还是建议选特定引擎的 比如Unreal， Unity + C#
看自己需求&br&&br&其他关于游戏发行的还有Secrets of Game Business 这本书倾向于教你怎么做人（怎么跟游戏高层谈笑风声pitch你的游戏） 但总感觉国外和国内做发行挺不一样的 而且这种东西我觉得没法看书学 所以不推荐 另外USC课程设置是偏理论的 所以涉及到用户调研和市场研究的书没有很多 这方面还是多靠自己在网络上搜集资料吧
入门阶级的书可以看Tracy Fullerton的Game Design Workshop 几乎是北美各大游戏高校的通用课本 其余 编剧 Production Coding 等都有各个领域的书 等我慢慢来填坑 论权威的话就是Tracy这本Game Design Workshop了 她是北美著名的游戏教育家 没错 她把游戏作…
最近在做游戏，想要自动生成随机的地图，找到了一篇文章：&a href=&//link.zhihu.com/?target=http%3A//www-cs-students.stanford.edu/%7Eamitp/game-programming/polygon-map-generation/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Polygonal Map Generation for Games&/a& 这里有文章的 Flash Demo &a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www-cs-students.stanford.edu/%7Eamitp/game-programming/polygon-map-generation/demo.html& target=&_blank& rel=&nofollow noreferrer&&Polygon Map Generation demo&/a&&br&（下面的图片都是转自这篇文章，不知道合适吗。）&br&&figure&&img data-rawheight=&600& data-rawwidth=&600& src=&https://pic4.zhimg.com/50/fbc4b0decc5a714f50b9be_b.jpg& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic4.zhimg.com/50/fbc4b0decc5a714f50b9be_r.jpg&&&/figure&&br&如何生成这样的地图呢？可能是 Perlin 噪音（&a href=&//link.zhihu.com/?target=http%3A//zh.wikipedia.org/zh/Perlin%25E5%2599%25AA%25E5%25A3%25B0& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Perlin噪声&/a&），确实能有类似的效果，但是你 Perlin 出来的只是一堆点，看似连续，实际上离散的点，你没办法生成出区块。河流也不可能简单地生成。&br&&br&如何生成地图中各种区块呢？我们需要生成无限个比较随机的多边形，并且铺满整个平面。这样的多边形就是&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Voronoi_diagram& target=&_blank& rel=&nofollow noreferrer&&Voronoi diagram&/a&：&br&&figure&&img data-rawheight=&400& data-rawwidth=&400& src=&https://pic4.zhimg.com/50/ccdbdfcd21f242b1e5c923935dac05a7_b.jpg& class=&content_image& width=&400&&&/figure&生成这货的算法叫做 &b&&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Fortune%2527s_algorithm& target=&_blank& rel=&nofollow noreferrer&&Fortune's algorithm&/a&&/b& 。&br&算法特别复杂 &a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.cnblogs.com/Seiyagoo/p/3339886.html& target=&_blank& rel=&nofollow noreferrer&&Voronoi Diagram——维诺图&/a&。这里有算法的动态演示：&a class=& external& href=&//link.zhihu.com/?target=http%3A//www.raymondhill.net/voronoi/rhill-voronoi.html& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&raymondhill.net/voronoi&/span&&span class=&invisible&&/rhill-voronoi.html&/span&&span class=&ellipsis&&&/span&&/a& （也有 JS 源代码 &a class=& wrap external& href=&//link.zhihu.com/?target=https%3A//github.com/gorhill/Javascript-Voronoi/blob/master/rhill-voronoi-core.js& target=&_blank& rel=&nofollow noreferrer&&Javascript-Voronoi/rhill-voronoi-core.js at master · gorhill/Javascript-Voronoi · GitHub&/a& 1718 行）&br&这个算法我花了很长时间才搞懂，也需要不少前置知识。实际上我也搞不懂为了避免暴露所以不细说了……但这个回答主要是想要提到这个算法。因为这个算法需要几何知识，也需要图论知识，为了实现还需要一颗AVL树或者红黑树，并且有几个麻烦的边界条件，如果有选手比赛的时候码出来就太厉害了……&br&&br&先生成随机的点，然后将随机的点稍微搞得均匀一点（&a href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Lloyd%2527s_algorithm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Lloyd's algorithm&/a&），就以点生成维诺图。&br&生成了以后，用 Perlin 函数（或者别的噪音函数）给每一个区块着色，大致的地形就出来了（还需要用一个简单的洪水填充区分海与湖。）&figure&&img data-rawheight=&400& data-rawwidth=&400& src=&https://pic4.zhimg.com/50/a5da5ec7bc91f48f1f7c49bdf2b648b7_b.jpg& class=&content_image& width=&400&&&/figure&&br&然后，河怎么做呢？看这些区块的交点处，随机挑选一些交点，然后按照 Perlin 函数生成的高度图用 &b&A* 算法&/b&走出一个搜索路径，就是河了。A* 在游戏开发里面实在太常用了，如萌萌哒的岛娘所说，寻路和搜素多多少少都要用到。&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.redblobgames.com/pathfinding/a-star/introduction.html& target=&_blank& rel=&nofollow noreferrer&&Introduction to A*&/a&&figure&&img data-rawheight=&400& data-rawwidth=&400& src=&https://pic1.zhimg.com/50/d4bf7cab3f61b9a6dff983_b.jpg& class=&content_image& width=&400&&&/figure&文章中还讲了道路和降雨之类的。&br&&br&相比之下，房间的生成就简单多了。&br&&a href=&//link.zhihu.com/?target=http%3A//gamedev.stackexchange.com/questions/47917/procedural-house-with-rooms-generator& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&algorithm - Procedural... house with rooms generator&/a&&br&&br&最后推荐一下这个网站 &a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.redblobgames.com/& target=&_blank& rel=&nofollow noreferrer&&Red Blob Games&/a& 里面有很多游戏里面的算法，并且呢有很多动态的实例。&br&另外此网站的这个页面 &a href=&//link.zhihu.com/?target=http%3A//www-cs-students.stanford.edu/%7Eamitp/gameprog.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Amit’s Game Programming Information&/a& 干货非常多，应该是这个问题的最佳答案。&br&&br&比如说迷宫的十种生成算法：&a href=&//link.zhihu.com/?target=http%3A//weblog.jamisbuck.org//maze-generation-algorithm-recap%23article_body& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&the { buckblogs :here }: Maze Generation: Algorithm Recap&/a&&br&&br&都是搬运这个网站的内容，特别羞愧，但是我游戏也才刚开始写……没有干货了……
最近在做游戏，想要自动生成随机的地图，找到了一篇文章： 这里有文章的 Flash Demo
（下面的图片都是转自这篇文章，不知道合适吗。） 如何生成这样的地图呢？可能是 Perlin 噪音（…
&figure&&img src=&https://pic2.zhimg.com/v2-665c4b28b10fcaa01b5a89a_b.jpg& data-rawwidth=&4096& data-rawheight=&2304& class=&origin_image zh-lightbox-thumb& width=&4096& data-original=&https://pic2.zhimg.com/v2-665c4b28b10fcaa01b5a89a_r.jpg&&&/figure&&p&本文是对&a href=&https://www.zhihu.com/question/& class=&internal&&2d横版像素游戏的制作流程是怎样的？&/a&问题的回答。&/p&&blockquote&&b&一个2d横版像素游戏的制作流程是怎样的？&/b&&br&题主是一个像素游戏爱好者，有意制作一部2d横版像素游戏，准备登陆iOS，大概就像像莫莫多拉，洞穴探险，泰拉瑞亚，这样的横版2d像素游戏，一般是用的什么游戏引擎制作？又用的什么绘图工具和动画制作工具和用什么编程语言好？请大神们多多指导，感谢。&/blockquote&&hr&&p&作为一个像素风格的爱好者。&br&&br&&/p&&p&分享一下自己的经验吧。&/p&&h2&&b&一、像素游戏使用的引擎&/b&&/h2&&p&&br&&/p&&p&先介绍题主感兴趣的这些作品使用的引擎吧。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-d5e3fb0e14b6a66e6afd3a_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-d5e3fb0e14b6a66e6afd3a_r.jpg&&&/figure&&p&&b&StardewVally 星露谷物语 &/b&&/p&&p&由呵呵鱼发行。&/p&&p&开发者是ConcernedAPE&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b2b5d01ffe61ba27ca04e5e333fe91be_b.jpg& data-caption=&& data-rawwidth=&879& data-rawheight=&192& class=&origin_image zh-lightbox-thumb& width=&879& data-original=&https://pic3.zhimg.com/v2-b2b5d01ffe61ba27ca04e5e333fe91be_r.jpg&&&/figure&&p&根据开发者的答疑，游戏使用的是C# XNA。&/p&&p&&br&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.reddit.com/r/nintendo/comments/75ag0g/im_concernedape_creator_of_stardew_valley_ask_me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发者本人在Reddit上的答疑链接&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//twitter.com/ConcernedApe& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ConcernedAPE的轻博客链接&/a&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ed7bea3c1f2ce_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-ed7bea3c1f2ce_r.jpg&&&/figure&&p&&b&Terraria&/b&也同样是使用C# XNA &/p&&p&程序是Andrew Spinks&/p&&p&可以参考GIT上泰拉瑞亚代码 &a href=&http://link.zhihu.com/?target=https%3A//github.com/csnxs/Terraria& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&csnxs/Terraria&/a&&/p&&p&StarBound我就不多赘述了。&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-e7ef9c81c6d06f61af02_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-e7ef9c81c6d06f61af02_r.jpg&&&/figure&&p&&b&OwlBoy&/b&&/p&&p&这款游戏也是题主想要做的横版2D类型。&/p&&p&同样使用C# XNA开发&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&b&下面介绍的这些作品都是使用GameMakerStudio开发的&/b&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-cac7450efd770c13668b97_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic4.zhimg.com/v2-cac7450efd770c13668b97_r.jpg&&&/figure&&p&&b&HyperLightDrifter&/b&&/p&&p&使用GameMakerStudio开发&/p&&p&这款游戏在steam 以及 PlayStation上均有上架&/p&&p&&br&&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//heartmachinez.tumblr.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发者的tumblr链接&/a&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-60a61d6ce4d8bb_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic4.zhimg.com/v2-60a61d6ce4d8bb_r.jpg&&&/figure&&p&&b&undertale&/b&&/p&&p&IGN满分作品 &/p&&p&作者是 Toby Fox &/p&&p&使用GameMakerStudio开发&/p&&p&个人觉得不好玩 T_T&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ce95b860d5aac55a4327a6_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-ce95b860d5aac55a4327a6_r.jpg&&&/figure&&p&&b&downwell &/b&&/p&&p&作者是 Moppin&/p&&p&使用GameMakerStudio开发&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//downwellgame.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&downwellgame.com/&/span&&span class=&invisible&&&/span&&/a&&/p&&p&&br&&/p&&p&另外推荐观看《Branching Paths》这个纪录片。&/p&&p&相对于《独立游戏大电影》，《Branching Paths&b&》&/b&的知名度没有那么高，但是对于从业者来说绝对值得一看。&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//store.steampowered.com/app/494680/Branching_Paths/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&影片链接&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&NintendoSwitch以及任天堂其他主机上的一些像素游戏，我不是很清楚，现在懒得去查。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-281e7fbe540fbb048a88_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic1.zhimg.com/v2-281e7fbe540fbb048a88_r.jpg&&&/figure&&p&Octopath Traveler &/p&&p&开发商SquareEnix&/p&&p&使用的是虚幻4引擎 (开发团队是过去的勇气默示录开发团队)&/p&&p&这款游戏应该会在NS上首发，体验版很惊艳。&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&下面着重介绍一下国产的像素游戏。&/p&&p&如果题主有心的话，可以直接联系上开发者。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-e9874338fdbec411592ec_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic1.zhimg.com/v2-e9874338fdbec411592ec_r.jpg&&&/figure&&p&&b&CatchMe&/b&&/p&&p&作者是 &a class=&member_mention& href=&http://www.zhihu.com/people/941015febcf0bf4903d3& data-hash=&941015febcf0bf4903d3& data-hovercard=&p$b$941015febcf0bf4903d3&&@玫瑰狗&/a& &a class=&member_mention& href=&http://www.zhihu.com/people/3cb531f5e0a3cb28c58f1c406d5d51e0& data-hash=&3cb531f5e0a3cb28c58f1c406d5d51e0& data-hovercard=&p$b$3cb531f5e0a3cb28c58f1c406d5d51e0&&@绯色de弦月&/a& &/p&&p&使用的是UNITY引擎&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//store.steampowered.com/app/421030/Catch_Me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Steam链接&/a&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-4aa2b8d5393dfb48ba729c_b.jpg& data-caption=&& data-rawwidth=&520& data-rawheight=&293& class=&origin_image zh-lightbox-thumb& width=&520& data-original=&https://pic1.zhimg.com/v2-4aa2b8d5393dfb48ba729c_r.jpg&&&/figure&&p&&b&元气骑士&/b&&/p&&p&作者是 凉屋游戏 &a class=&member_mention& href=&http://www.zhihu.com/people/2ef5021660bddecc12e9c67cc118d5b0& data-hash=&2ef5021660bddecc12e9c67cc118d5b0& data-hovercard=&p$b$2ef5021660bddecc12e9c67cc118d5b0&&@一张钞票&/a& &/p&&p&使用的是Unity引擎&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.taptap.com/app/34751& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TapTap链接&/a&&/p&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-10d066ee651b4091ecebef5ae0d7da9d_b.jpg& data-caption=&& data-rawwidth=&497& data-rawheight=&260& class=&origin_image zh-lightbox-thumb& width=&497& data-original=&https://pic2.zhimg.com/v2-10d066ee651b4091ecebef5ae0d7da9d_r.jpg&&&/figure&&p&&b&锻冶屋英雄谭&/b&&/p&&p&作者是 &a class=&member_mention& href=&http://www.zhihu.com/people/7cca4ffcac5aecdf36633abc& data-hash=&7cca4ffcac5aecdf36633abc& data-hovercard=&p$b$7cca4ffcac5aecdf36633abc&&@拼命玩三郎&/a& &/p&&p&引擎未知（希望可以告知补充 T_T）&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.taptap.com/app/11836& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TapTap链接&/a&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-64c6cafa5_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic2.zhimg.com/v2-64c6cafa5_r.jpg&&&/figure&&p&&b&武器店物语&/b&&/p&&p&作者是 &a class=&member_mention& href=&http://www.zhihu.com/people/null& data-hash=&null& data-hovercard=&p$b$null&&@timchen&/a& &/p&&p&使用的是UNITY引擎&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//store.steampowered.com/app/599460/Weapon_Shop_Fantasy/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Steam链接&/a&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-bfc1c64ad4147c17dbcc95aad4eb85c3_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic4.zhimg.com/v2-bfc1c64ad4147c17dbcc95aad4eb85c3_r.jpg&&&/figure&&p&To The Moon &/p&&p&作者是 高瞰（加拿大华人）&/p&&p&使用的是rpgmaker&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.taptap.com/app/12547& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TapTap链接&/a&&/p&&p&&br&&/p&&p&当然还有很多国人开发的像素游戏，如有忽略还请见谅。&/p&&p&&br&&/p&&p&引擎介绍用了很多篇幅，主要是因为这一部分确实很重要。&/p&&p&&b&建议题主根据自己的能力选择合适的引擎。&/b&&/p&&p&个人推荐使用UNITY引擎，其次推荐GameMakerStudio。&/p&&p&我自己在用的就是UNITY引擎。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5a4beefca1eae7b99de895f_b.jpg& data-caption=&& data-rawwidth=&358& data-rawheight=&530& data-thumbnail=&https://pic4.zhimg.com/v2-5a4beefca1eae7b99de895f_b.jpg& class=&content_image& width=&358&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&我在开发中的小游戏&/p&&p&&br&&/p&&hr&&p&&br&&/p&&h2&二、像素游戏开发经验&/h2&&p&&br&&/p&&p&绘图工具的话，我使用的是PhotoShop&/p&&p&其他工具的话推荐Aseprite&/p&&p&&br&&/p&&p&介绍一些PS像素资源处理的基础知识吧。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aedfa5da62af1f4a55df8b4_b.jpg& data-caption=&& data-rawwidth=&592& data-rawheight=&220& class=&origin_image zh-lightbox-thumb& width=&592& data-original=&https://pic1.zhimg.com/v2-aedfa5da62af1f4a55df8b4_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/v2-7eae0a0e7b6eeaf8e89ebe6_b.jpg& data-caption=&& data-rawwidth=&422& data-rawheight=&219& class=&origin_image zh-lightbox-thumb& width=&422& data-original=&https://pic3.zhimg.com/v2-7eae0a0e7b6eeaf8e89ebe6_r.jpg&&&/figure&&p&开始所有工作之前，首选项里把图像插值改为“邻近”，标尺改为“像素”，文字改为“点”。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a4b2c08561edf31f4ec3ab3_b.jpg& data-caption=&& data-rawwidth=&200& data-rawheight=&125& class=&content_image& width=&200&&&/figure&&p&在放大像素资源的时候记得使用“邻近”&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-1f932a5bee7d88c6c762842d_b.jpg& data-caption=&& data-rawwidth=&731& data-rawheight=&342& class=&origin_image zh-lightbox-thumb& width=&731& data-original=&https://pic2.zhimg.com/v2-1f932a5bee7d88c6c762842d_r.jpg&&&/figure&&p&效果示意&/p&&p&不使用邻近插值放大会导致资源“糊&掉&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&b&PS资源导出&/b&&/p&&p&动作的每一帧都制作完毕后，使用PS自带的脚本就可以快速导出了。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-bec4a22ec0b5_b.jpg& data-caption=&& data-rawwidth=&626& data-rawheight=&293& class=&origin_image zh-lightbox-thumb& width=&626& data-original=&https://pic2.zhimg.com/v2-bec4a22ec0b5_r.jpg&&&/figure&&p&点击【文件】-&【脚本】-&【将图层导出到文件】&/p&&figure&&img src=&https://pic2.zhimg.com/v2-77adc3ebb749e53350e39d_b.jpg& data-caption=&& data-rawwidth=&398& data-rawheight=&456& class=&content_image& width=&398&&&/figure&&p&记得修改资源的文件名格式，勾选上透明区域。（根据自己需求）&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7cdc17ea26e86e081726c_b.jpg& data-caption=&& data-rawwidth=&376& data-rawheight=&192& class=&content_image& width=&376&&&/figure&&p&这样就可以把动作的每一帧都导出了。&/p&&p&&br&&/p&&p&不过这样导出的文件名字里会有 “_xxxx”的无用字符，如果手动一个一个删去就太麻烦了。&/p&&p&这里给大家提供一个PYTHON脚本。（这里要感谢我们组的程序同学）&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&import sys
png_file = re.compile(&.*\d{4}_.*\.png&)
png_file2 = re.compile(&.*\d{4}[a-zA-Z]_.*\.png&)
png_file3 = re.compile(&\d{4}_&)
png_file4 = re.compile(&\d{4}[a-zA-Z]_&)
files = os.listdir(&.&)
for filename in files:
if png_file.match(filename):
newFilename = re.sub(png_file3, &&, filename)
if png_file2.match(newFilename):
newFilename = re.sub(png_file4, &&, newFilename)
os.rename(filename, newFilename)
print &rename&, filename, &-&&, newFilename
&/code&&/pre&&/div&&p&使用这个脚本就可以把文件名中的 &_xxxx&去除了。&/p&&p&&br&&/p&&p&&b&字体相关&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-cb55e492c_b.jpg& data-caption=&& data-rawwidth=&237& data-rawheight=&284& class=&content_image& width=&237&&&/figure&&p&上上图中的字体是使用宋体12点&/p&&p&其他像素字体的话推荐&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c9f8bf1cba102fa_b.jpg& data-caption=&& data-rawwidth=&321& data-rawheight=&23& class=&content_image& width=&321&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-812a418af4d826e9c3657c_b.jpg& data-caption=&& data-rawwidth=&303& data-rawheight=&43& class=&content_image& width=&303&&&/figure&&p&不过一般宋体就够用了，实在不行可以自己点。&/p&&p&&br&&/p&&p&&br&&/p&&p&&b&像素画教程&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d81ad02d2a134e50700de0_b.jpg& data-caption=&& data-rawwidth=&512& data-rawheight=&512& data-thumbnail=&https://pic1.zhimg.com/v2-d81ad02d2a134e50700de0_b.jpg& class=&origin_image zh-lightbox-thumb& width=&512& data-original=&https://pic1.zhimg.com/v2-d81ad02d2a134e50700de0_r.jpg&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5bd23da0587bca7b950709_b.jpg& data-caption=&& data-rawwidth=&512& data-rawheight=&512& data-thumbnail=&https://pic2.zhimg.com/v2-5bd23da0587bca7b950709_b.jpg& class=&origin_image zh-lightbox-thumb& width=&512& data-original=&https://pic2.zhimg.com/v2-5bd23da0587bca7b950709_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&推荐看这位大神的&a href=&http://link.zhihu.com/?target=https%3A//twitter.com/saint11& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&轻博客（需要科学上网）&/a&&/p&&p&&br&&/p&&p&&b&UNITY使用相关&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f1ebb9e79d7287d78ecc1e65b818351e_b.jpg& data-caption=&& data-rawwidth=&368& data-rawheight=&154& class=&content_image& width=&368&&&/figure&&p&Unity资源导入后 记得勾选 point&/p&&p&Point对应 邻近插值&/p&&p&Bilinear对应 两次立方&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-1ece1e720d7b82ae5cee3a_b.jpg& data-caption=&& data-rawwidth=&494& data-rawheight=&229& class=&origin_image zh-lightbox-thumb& width=&494& data-original=&https://pic3.zhimg.com/v2-1ece1e720d7b82ae5cee3a_r.jpg&&&/figure&&p&左侧资源FilterMode为Point&/p&&p&右侧资源FilterMode为Bilinear&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&b&音效相关&/b&&/p&&p&一般来说开发像素游戏的话，一般都会配上8bit音效。&/p&&p&在这里就加上一些8bit音效的小知识吧。&/p&&p&在开发初期一般都需要临时的音效资源。&/p&&p&这部分音效资源可以在&b&魔王魂&/b&找到完全免费的音效资源&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f172b3bf_b.jpg& data-caption=&& data-rawwidth=&303& data-rawheight=&187& class=&content_image& width=&303&&&/figure&&p&&a href=&http://link.zhihu.com/?target=https%3A//maoudamashii.jokersounds.com/music_bgm.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&魔王魂网站链接&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&当然如果你想自己制作音效，那当然更好。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3e64a7496b_b.jpg& data-caption=&& data-rawwidth=&576& data-rawheight=&95& class=&origin_image zh-lightbox-thumb& width=&576& data-original=&https://pic4.zhimg.com/v2-3e64a7496b_r.jpg&&&/figure&&p&FamiTracker 专门制作NES 8BIT音效，这个软件完全免费。&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//www.famitracker.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FamiTracker&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1c50f45d72a_b.jpg& data-caption=&& data-rawwidth=&800& data-rawheight=&250& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic4.zhimg.com/v2-1c50f45d72a_r.jpg&&&/figure&&p&SFX MIXER 专业制作音效&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//andrio.itch.io/sfxmixer& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SFX MIXER网页链接&/a&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-296ebb01c3f389f1af2fe17e5d2daaf4_b.jpg& data-caption=&& data-rawwidth=&640& data-rawheight=&360& data-thumbnail=&https://pic1.zhimg.com/v2-296ebb01c3f389f1af2fe17e5d2daaf4_b.jpg& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-296ebb01c3f389f1af2fe17e5d2daaf4_r.jpg&&&/figure&&p&&br&&/p&&hr&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-dabcafb2c92de65de19b8fc1_b.jpg& data-caption=&& data-rawwidth=&156& data-rawheight=&104& class=&content_image& width=&156&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-16e2dbc9_b.jpg& data-caption=&& data-rawwidth=&950& data-rawheight=&328& class=&origin_image zh-lightbox-thumb& width=&950& data-original=&https://pic2.zhimg.com/v2-16e2dbc9_r.jpg&&&/figure&&p&YMCK是日本一个8BIT音乐创作团队，他们有免费提供 &b&Magical 8bit Plug &/b&插件&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//ymck.net/download/magical8bitplug/index.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&YMCK链接&/a&&/p&&p&&br&&/p&&p&其他的还有&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.bfxr.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Bfxr. Make sound effects for your games.&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//bedroomproducersblog.com//bpb-freeware-studio-best-free-bitcrusher-vstau-plugins/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Best Free Bitcrusher VST/AU Plugins!&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//8bitmixtape.github.io/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&8bitmixtape.github.io/&/span&&span class=&invisible&&&/span&&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&br&&/p&&p&有一些比较细或者深入的知识我没有放在文章里面。&/p&&p&如果还有别的问题也可以留言回复或者私信我，我尽量解答。&/p&&p&&br&&/p&&p&&b&有想从事像素游戏开发的美术、音效、程序、策划同学欢迎私信联系我！！&/b&&/p&&p&&b&有想从事像素游戏开发的美术、音效、程序、策划同学欢迎私信联系我！！&/b&&/p&&p&&b&有想从事像素游戏开发的美术、音效、程序、策划同学欢迎私信联系我！！&/b&&/p&&p&&br&&/p&&p&例行附图&/p&&figure&&img src=&https://p}
请选择删除原因
确定推荐该回答？
魔兽世界为何0MBPS的网络带宽,下载完成度0%,原本屏幕下方小电脑图标变成一个红色问号,求解决
第一网络带宽0MBPS，下载完成度0％没什么特别的意义，除非是在线更新的时候，如没下载完成但是可以进游戏的情况下才有数字第二 那个红色的问号是帮助系统，意思是你有问题可以点击查看，红色是为了明显第三，你这是明显的帧数低：检查下你游戏的效果，开到最低是帧数是多少，如果还是低，那么就检查下显卡的驱动，驱动没问题检查下显卡的设置&figure&&img src=&https://pic3.zhimg.com/v2-bc3f300fdebd_b.jpg& data-rawwidth=&1383& data-rawheight=&692& class=&origin_image zh-lightbox-thumb& width=&1383& data-original=&https://pic3.zhimg.com/v2-bc3f300fdebd_r.jpg&&&/figure&&p&本文核心内容为《GPU Gems 2》中讲到的真实感水体渲染，以及真实感头发渲染、通用的折射模拟、改进的Perlin噪声等次核心内容。&/p&&p&&br&&/p&&h2&&b&前言&/b&&/h2&&p&之前和同事们讨论水体渲染时，大家说到目前业界水体实时渲染效果领先的游戏引擎，是Cry Engine。Cry Engine中的水体渲染可谓目前水体渲染方案中的集大成者，汲取了图形业界近几十年水体渲染各种思路的精华。以下是Cry Engine 中的水体渲染实时画面：&/p&&a class=&video-box& href=&https://link.zhihu.com/?target=https%3A//www.zhihu.com/video/7651072& target=&_blank& data-video-id=&& data-video-playable=&& data-name=&& data-poster=&https://pic1.zhimg.com/80/v2-c4c2b670a165fe7499efc4_b.jpg& data-lens-id=&7651072&&
&img class=&thumbnail& src=&https://pic1.zhimg.com/80/v2-c4c2b670a165fe7499efc4_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/7651072&/span&
&figure&&img src=&https://pic3.zhimg.com/v2-bc62ed5fc450feac5ad3ccff76d70785_b.jpg& data-rawwidth=&1280& data-rawheight=&720& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-bc62ed5fc450feac5ad3ccff76d70785_r.jpg&&&/figure&&p&注意这是6年前Cry Engine 3的水体渲染实时画面，很多人感觉其效果已经达到了近乎真实。&/p&&p&而目前的Cry Engine 5，渲染质量还会更胜一筹。&/p&&p&值得开心的是，Cry Engine已经开源，其水体渲染的具体shader实现代码可以在Cry Engine源码中找到，以下是其中核心代码Water.cfx的传送门，感兴趣的朋友不妨了解一下：&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/CRYTEK/CRYENGINE/blob/adcbc820/Engine/Shaders/HWScripts/CryFX/Water.cfx& data-image=&https://pic3.zhimg.com/v2-e0e395ef6b8e44b7df826_ipico.jpg& data-image-width=&400& data-image-height=&400& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CRYTEK/CRYENGINE&/a&&p&值得注意的是，本文中提到的一些渲染水体的策略与思路，在Cry Engine 5实现水体渲染中，也有所体现。&/p&&p&OK，下面开始正题。&/p&&p&&br&&/p&&h2&&b&目录 · 本文核心内容Highlight&/b&&/h2&&p&本文将进行重点提炼总结《GPU Gems 2》中的主核心内容有：&/p&&ul&&li&一、将顶点纹理位移用于水的真实感渲染（Using Vertex Texture Displacement for&br&Realistic Water Rendering）&/li&&/ul&&p&本文将进行提炼总结《GPU Gems 2》中的次核心内容有：&/p&&ul&&li&二、利用像素着色器分支的高效模糊边缘阴影（Efficient Soft-Edged Shadows Using Pixel Shader Branching）&/li&&li&三、通用的折射模拟（Generic Refraction）&/li&&li&四、快速三阶纹理过滤（Fast Third-Order Texture Filtering）&/li&&li&五、高质量反走样的光栅化（High-Quality Antialiased Rasterization）&/li&&li&六、快速预过滤线条（Fast Prefiltered Lines）&/li&&li&七、Nalu Demo中的头发动画与渲染（Hair Animation and Rendering in the Nalu Demo）&/li&&li&八、使用查找表加速颜色变换（Using Lookup Tables to Accelerate Color Transformations）&/li&&li&九、实现改进的Perlin噪声（Implementing Improved Perlin Noise）&/li&&li&十、高级高质量过滤（Advanced High-Quality Filtering）&/li&&li&十一、Mipmap层级测定（Mipmap-Level Measurement）&/li&&/ul&&p&&br&&/p&&p&&br&&/p&&h2&&b&I、核心章节提炼篇&/b&&/h2&&h2&&b&一、将顶点纹理位移用于水的真实感渲染（Using Vertex Texture Displacement for Realistic Water Rendering）&/b&&/h2&&h2&&b&【内容概览】&/b&&/h2&&p&真实地渲染出水的质感是一个困难的问题，因为水表面的运动具有高度的视觉复杂性，且水的光影效果也很复杂。而这章中，介绍了为游戏《太平洋战机》开发的对海水的真实感渲染技术。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-00de2d88fecd22b3a01045d_b.jpg& data-rawwidth=&500& data-rawheight=&375& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/v2-00de2d88fecd22b3a01045d_r.jpg&&&/figure&&p&图 《太平洋战机》中的海水渲染&/p&&h2&&b&【核心要点】&/b&&/h2&&h2&&b&1.1 水体渲染模型的分析&/b&&/h2&&p&Gems2中这篇文章问世期间（2005年），当时最真实的水体渲染实现方法是基于流体动力学和快速傅里叶变换（FFT）[Tessendorf 2001],但遗憾的是这种方法需要大量的计算，不适用于交互应用程序。&/p&&p&大多数游戏当时使用的是很简单的水模型，而其中的大多数采用了法线贴图来生成视觉细节，优点是计算量小，缺点是很多时候不能提供足够的真实感，并且不能真实重现水面的波浪。&/p&&p&而本文中介绍了一种能达到简单法线贴图方法的速度，但渲染质量类似于FFT方法的水面渲染技术。&/p&&h2&&b&1.2 实现思路概览&/b&&/h2&&p&本文的水体渲染主要实现思路是基于法线贴图计算光照的渲染算法。因为法线图在高频的波浪中能够真实地产生精细的细节，所以将它用于光照的计算。除此之外，还对水模型的几何表面做了大振幅低频波浪的扰动。&/p&&h2&&b&1.3 水体的表面模拟&/b&&/h2&&p&水体表面的模型是基于几张高度图（Height maps）的叠加，这些高度图在空间和时间上不断重复。每张纹理表示一个“谐波（harmonic）”或“倍频（octave）”频谱，然后这些纹理被叠加到一起，类似傅里叶分析中的做法。&/p&&p&而这些纹理之所以称为高度图，因为其中每个值代表了对应点相对于水平面的高度值。高度图对于美术同学来说创建非常容易，与创建和渲染灰度图一样简单。利用高度图，水的动画参数规约成一些独立的波，美术同学只要绘出它们的形状就可以很容易地控制水的动画。高度图也对顶点纹理有用：因为可以很容易地对顶点进行竖直方向的位移。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-4ca98d3d9aa_b.jpg& data-rawwidth=&250& data-rawheight=&250& data-caption=&& data-size=&normal& class=&content_image& width=&250&&&/figure&&p&图18-2 一张用于水面位移的高度图&/p&&p&通过用不同的空间和时间范围来结合若干高度图，可以得到视觉上非常复杂的动画：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-0c953f82b_b.jpg& data-rawwidth=&450& data-rawheight=&49& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&450& data-original=&https://pic2.zhimg.com/v2-0c953f82b_r.jpg&&&/figure&&p&系数A和B以及求和的项数是由经验决定的，以求达到美学角度上最好的结果，同时减少重复图案的痕迹。在《太平洋战机》中，叠加4张高度图用于计算光照，其中最大范围的两张用于位移贴图。这对模拟动态的海洋表面来说已经足够了，可选范围为10cm到40km（10厘米到40千米）之高。&/p&&h2&&b&1.4 实现细节概述&/b&&/h2&&p&可以把所有需要实现的计算分为两部分：&/p&&ul&&li&几何位移计算&/li&&li&光照计算&/li&&/ul&&p&因为水面细分得很精细，所以可以只在片段程序级实现光照计算，而把位移映射的工作移交给顶点级，以减轻片段的负担。需要注意，如果在顶点级实现光照计算可能产生明显的走样，尤其是远处的物体。&/p&&h2&&b&1.5 对高度图采样&/b&&/h2&&p&文中的实现是在每个顶点上对高度图进行采样，并且在顶点程序中计算应该取的位移值。为了计算采样，使用了一个中心在相机位置的径向栅格（radial grid）。这个栅格的细分特点是离视点越近则提供越多的细节，如下图所示&/p&&figure&&img src=&https://pic4.zhimg.com/v2-081c4ecd9a42618a_b.jpg& data-rawwidth=&275& data-rawheight=&285& data-caption=&& data-size=&normal& class=&content_image& width=&275&&&/figure&&p&下面的方程表示了径向栅格上的顶点位置的计算方法：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-08ccae37f79a_b.jpg& data-rawwidth=&152& data-rawheight=&89& data-caption=&& data-size=&normal& class=&content_image& width=&152&&&/figure&&p&&br&&/p&&p&其中，i=[0..N - 1], j = [0..M - 1]。选择a0，a1，使&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3d60c938aceb_b.jpg& data-rawwidth=&253& data-rawheight=&61& data-caption=&& data-size=&normal& class=&content_image& width=&253&&&/figure&&p&使用这种方法，可以得到根据距离细分的栅格，也体现了一个简单的层次细节LOD策略。其他方案，如ROAM或SOAR地形渲染算法，也可以用于此处，但是它们需要在CPU上进行大量计算，会减弱使用顶点纹理的优势。而我们也可以尝试在GPU中渲染自适应镶嵌栅格的高度域。&/p&&p&下面的代码列出了着色器的实现细节，用一个径向栅格对单张高度图进行采样。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&float4 main(float4 position : POSITION,
uniform sampler2D tex0,
uniform float4x4 ModelViewProj,
uniform float4 DMParameters, // displacement map parameters
uniform float4 VOfs) : POSITION
// Read vertex packed as (cos(), sin(), j)
float4 INP =
// Transform to radial grid vertex
INP.xy = INP.xy * (pow(INP.z, 4) * VOfs.z);
// Find displacement map texture coordinates
// VOfs.xy, DMParameters.x - Height texture offset and scale
float2 t = (INP.xy + VOfs.xy) * DMParameters.x;
// Fetch displacement value from texture (lod 0)
float vDisp = tex2D(tex0, t).x;
// Scale fetched value from 0..1:
// DMParameters.y - water level
// DMParameters.z - wavy amplitude
INP.z = DMParameters.y + (vDisp - 0.5) * DMParameters.z;
// Displace current position with water height
// and project it
return mul(ModelViewProj, INP);
&/code&&/pre&&/div&&h2&&b&1.6 提高渲染质量与优化性能的一些方案&/b&&/h2&&h2&&b&1.6.1 为双线性过滤打包高度值&/b&&/h2&&p&访问顶点纹理的代价十分昂贵，在旧的GeForce 6系列的硬件上，一个顶点纹理的访问会在顶点程序中产生明显的延迟。所以比较合适的策略是把顶点程序中访问纹理的次数降到最低。另一方面，过滤纹理值非常必要，否则图像质量就会显著降低。&/p&&p&为了减小插值时纹理访问的次数，可以用一种特别的方法创建纹理，这样使每个纹理包含了一次双线性纹理查找必需的所有数据。因为高度图本质上是单通道的纹理，可以把四个高度值打包到一张四通道纹理的一个纹素内，以实现优化。&/p&&h2&&b&1.6.2 使用分支避免不需要的工作&/b&&/h2&&p&即使使用了优化的纹理过滤，渲染水体时，访问纹理的次数仍然很高，这会严重影响性能。一种方法是减少渲染的顶点数，但是这将全面地降低视觉上的细节并且增加失真度。&/p&&p&需要渲染的水体含有大量的几何数据，但其中有些三角面完全在屏幕之外。对这样的三角形，顶点程序仍然要进行处理，这其实是一种浪费。如果能跳过在相机视野之外三角形的相关计算，就可以在每个顶点上节约大量的工作。&/p&&p&以下的伪代码表达了这个方法的实现：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&float4 ClipPos = mul(ModelViewProj, INP);
float3 b0 = abs(ClipPos.xyz) & (ClipPos.www * C0 + C1);
if (all(b0))
// Vertex belongs to visible triangle,
// Perform texture sampling and displace vertex accordingly
&/code&&/pre&&/div&&p&在上面的代码中，使用了裁剪空间的顶点位置来确定当前的顶点是否位于视野之中，然后只对需要的顶点进行复杂运算即可。&/p&&h2&&b&1.6.3 使用渲染到纹理策略（Render-to-Texture）&/b&&/h2&&p&仍然可以使用上文提到的，用一张浮点纹理来压缩存储高度纹理的方法，先将其作为单独的pass来执行，以提高运行速度。而在顶点着色器里面实现多次昂贵的插值操作就变得没有太多必要。另外，可以用一个更紧凑的16位浮点纹理格式来存储原始的高度图。也可以存储一系列高度图序列帧作为三维纹理的切片，以使动画更加流畅。&/p&&p&经过上述优化，我们的渲染循环变成了如下两个pass：&/p&&p&（1）通过使用将单个四边形渲染为32位浮点纹理的特殊像素着色器，来组合高度贴图。而此纹理中的各个纹素映射到径向栅格的各个顶点。&/p&&p&（2）使用生成的高度贴图作为顶点纹理来平移径向栅格顶点。&/p&&h2&&b&1.6.4 处理波浪的背面&/b&&/h2&&p&大量的光照计算是在像素着色器中实现的。其假设了水面是水平的，而这个假设在某些情况下可能导致视觉效果的走样。&/p&&p&在下图所示的情况下，我们看到了波浪的背面，它在平面上是能被看见的，但是因为几何位移的关系它会背向观察者，所以在现实世界中并不应该出现。而这样的错误会在波浪的顶部产生奇怪的过亮区域。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-2ad3c092f8e9bcbf6a33c4_b.jpg& data-rawwidth=&250& data-rawheight=&203& data-caption=&& data-size=&normal& class=&content_image& width=&250&&&/figure&&p&&br&&/p&&p&图 渲染走样的产生&/p&&p&图注：波浪（绿色）的背面也可能被渲染出来，尽管它并不应该出现。调整计算光照的法线将大大减少这种错误。&/p&&p&为了尽量减少这种错误，可以将计算光照时使用的法线稍微做调整，将他们朝向观察者方向“倾斜”一些，这样他们会更接近于波浪的正向面。&/p&&h2&&b&1.7 渲染局部扰动的策略&/b&&/h2&&p&有时渲染渲染因为浮起物或者掉入水中的物体引起的波浪局部的起伏。这对游戏来说尤为重要，因为游戏需要产生类似于爆炸，船的行进痕迹等效果。因为很难继承物理上正确的方法将其用于这个基于高度图的水面模型中来，所以这里只根据经验讨论一些简单的方法。&/p&&h2&&b&1.7.1 解析型形变模型（Analytical Deformation Model）&/b&&/h2&&p&造成局部波浪起伏最简单的方法是把顶点的位移值做成一个解析上的扰动，把扰动和顶点着色器中计算好的顶点位置结合起来。&/p&&p&实现局部波浪起伏最简单的方法是通过将顶点位移与顶点着色器中计算的顶点位置相结合，来解析地扰动位移的顶点位置。对爆炸而言，可以用下面的公式：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-30b0ec752eee991f30ffb2b4b69e8cf5_b.jpg& data-rawwidth=&271& data-rawheight=&56& data-caption=&& data-size=&normal& class=&content_image& width=&271&&&/figure&&p&其中，r是水平面上该点到爆炸中心的距离，b是一个常数，I_0，ω和k的值根据一个给定的爆炸及其参数决定。&/p&&p&在渲染时，可以使用和普通水体渲染时相同的径向栅格，尤其是在爆炸点。&/p&&h2&&b&1.7.2 动态位移贴图（Dynamic Displacement Mapping）&/b&&/h2&&p&另一个选择是将所有的局部创建的位移量直接渲染到顶点纹理，本质上是和GPU通用编程（GPGPU）类似的方法。这样，在第一个pass中生成顶点纹理，而在后续pass中，用此纹理来进行实际的水体渲染。另一个好处是，通过在像素着色器中过滤基础高度图和累加倍频程（octaves），可以把一些工作从顶点着色器转移到像素着色器中。&/p&&p&为了计算位移量，既可以采用前面提到的解析型模型，也可以用自动控制单元（cellular-automata）的方法，将局部位移进行逐帧衍变。也可以考虑风的效果，对纹理沿着适当的方向进行模糊。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-eff130f27e1d0d5cb51c_b.jpg& data-rawwidth=&500& data-rawheight=&193& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/v2-eff130f27e1d0d5cb51c_r.jpg&&&/figure&&p&图 用位移贴图渲染的水表面（左）和不用位移图渲染的水表面（右）对比&/p&&h2&&b&1.7.3 泡沫的生成（Foam Generation）&/b&&/h2&&p&在波浪足够强时，可以通过制造泡沫来加强真实感。最简单的方法是把一个预先创建的泡沫纹理在高于某一高度H0的顶点上进行混合。泡沫纹理的透明度根据以下公式进行计算：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-345ebd12e79d64c1f48d9fd75ef2e416_b.jpg& data-rawwidth=&300& data-rawheight=&61& data-caption=&& data-size=&normal& class=&content_image& width=&300&&&/figure&&p&其中，H_max是泡沫最大时的高度，H_0是基准高度，H是当前高度。&/p&&p&泡沫纹理可以做成动画来表示泡沫的产生和消失的进化过程。这个动画序列既可以由美术同学制作，也可以由程序生成。&/p&&h2&&b&【核心要点总结】&/b&&/h2&&p&本文的水体渲染实现思路是基于法线贴图计算光照的渲染算法，水体表面的模型为基于几张高度图（Height maps）的叠加。在每个顶点上对高度图进行采样，并且在顶点程序中计算应该取的位移值。计算采样方面，使用了一个中心在相机位置的径向栅格（radial grid），以及结合了一些优化的策略。&/p&&h2&&b&1.提高渲染质量与优化性能的方案&/b&&/h2&&p&1）为双线性过滤打包高度值:因为高度图本质上是单通道的纹理，可以把四个高度值打包到一张四通道纹理的一个纹素内，以实现优化。&/p&&p&2）使用分支避免不需要的工作：使用裁剪空间的顶点位置来确定当前的顶点是否位于视野之中，然后只对需要的顶点进行复杂运算即可。&/p&&p&3）使用渲染到纹理策略（Render-to-Texture）&/p&&p&4）处理波浪背面：将计算光照时使用的法线稍微做调整，将他们朝向观察者方向“倾斜”一些，这样他们会更接近于波浪的正向面。&/p&&h2&&b&2.渲染局部扰动的策略&/b&&/h2&&p&1）解析型形变模型（Analytical Deformation Model）&/p&&p&2.动态位移贴图（Dynamic Displacement Mapping）&/p&&p&3.泡沫的生成：预先创建的泡沫纹理在高于某一高度H0的顶点上进行混合，其中泡沫纹理的透明度根据公式进行计算。&/p&&h2&&b&【配套源代码】&/b&&/h2&&p&&b&这篇文章公开了其详细的实现源码，具体可以在这里找到：&/b&&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/QianMo/GPU-Gems-Book-Source-Code/tree/master/GPU-Gems-2-CD-Content/Shading_Lighting_and_Shadows/Ch_18_Using_Vertex_Texture_Displacement_for_Realistic_Water_Rendering& data-image=&https://pic2.zhimg.com/v2-5e14b339cd_ipico.jpg& data-image-width=&200& data-image-height=&200& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QianMo/GPU-Gems-Book-Source-Code&/a&&p&其中shader代码位于fpWaterDM.cg，vpWaterDM.cg两个文件中。其中也提供了可运行的demo exe，其运行效果如下：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f16b87210fcd6d86c6fe1_b.jpg& data-rawwidth=&737& data-rawheight=&464& data-caption=&& data-size=&normal& data-thumbnail=&https://pic3.zhimg.com/v2-f16b87210fcd6d86c6fe1_b.jpg& class=&origin_image zh-lightbox-thumb& width=&737& data-original=&https://pic3.zhimg.com/v2-f16b87210fcd6d86c6fe1_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-7a5f5a44a95fe6bca913b_b.jpg& data-rawwidth=&812& data-rawheight=&634& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&812& data-original=&https://pic1.zhimg.com/v2-7a5f5a44a95fe6bca913b_r.jpg&&&/figure&&h2&&b&【关键词】&/b&&/h2&&p&水渲染（Water Rendering）&/p&&p&顶点纹理位移（Vertex Texture Displacement）&/p&&p&高度贴图（Height Mapping）&/p&&p&双线性过滤（Bilinear Filtering）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&II、次核心章节提炼篇&/b&&/h2&&p&&br&&/p&&h2&&b&二、利用像素着色器分支的高效模糊边缘阴影（Efficient Soft-Edged Shadows Using Pixel Shader Branching）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&在计算机图形学中，渲染真实的阴影一直是难题之一，尤其是软阴影（soft&br&shadow）的渲染。且阴影是一种非常重要的视觉信息，它们有助于确立场景中物体的空间相对关系。&/p&&p&这章介绍了一种通过片段着色器中的PCF技术达到的实时渲染模糊（软）边界阴影的快速方法。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&文中首先讲到阴影渲染技术中最常见的两种流派模板阴影/阴影体（Stencil Shadow /
Shadow volume）和阴影贴图（Shadow Map）。&/p&&p&两种方法都各有其优缺点。且提到了这两种方法都不能直接用于“超出框”的模糊边界阴影。&/p&&p&随后这章介绍了一种以交互速率渲染模糊阴影的方法，其能高质量地模拟真实的模糊阴影。该方法使用了百分比邻近过滤（Percentage-Loser Filtering, PCF）技术，在片段着色器中不断对阴影图自适应地多次采样。这章自适应的采样方法与采样方法与采样数固定的方法相比，能在保证高性能的同时提高画面质量。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8a3ea2ee7d535d5fd6f739_b.jpg& data-rawwidth=&500& data-rawheight=&375& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-8a3ea2ee7d535d5fd6f739_r.jpg&&&/figure&&p&图 基于文中方法实时渲染出的模糊边缘阴影&/p&&h2&&b&【关键词】&/b&&/h2&&p&软阴影（Soft Shadows）&/p&&p&模糊边缘阴影（Soft-Edged Shadows）&/p&&p&模板阴影/阴影体（Stencil Shadow /Shadow volume）&/p&&p&阴影贴图（Shadow Map）&/p&&p&百分比邻近过滤（Percentage-Loser Filtering, PCF）&/p&&p&&br&&/p&&h2&&b&三、通用的折射模拟（Generic Refraction）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&本章介绍了一种折射的实现方案，思路是对场景中非折射的物体生成一幅图像，把该图像当做纹理，然后对查找该纹理的坐标进行扰动来达到模拟折射的目的。这种技术效率很高，而且很多情况下都有效。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&折射（Refraction）是当光从一种媒介穿到另一种折射率不同的媒介（如从空气到水，从空气到玻璃等）时产生的弯曲现象。&/p&&p&要模拟折射有很多种方法：其中一些方法是先预计算环境映射，然后在运行时使用；而其他方法是直接在运行时计算环境映射。这些技术的缺点是耗费大量的纹理存储空间并损失运行效率，尤其是当场景中有很多折射表面时，需要不同的环境映射。&/p&&p&而目前的水折射模拟技术的另一个问题是他们需要渲染两遍：第一个pass通过水面上的几何信息来生成折射图，另一个pass渲染水面。这种方案的性能很低，尤其对复杂的场景而言。&/p&&p&本章介绍了一种简单的技术来克服这些问题。从介绍基本想法开始，把现有的后台缓存当做一个折射贴图来用，并且通过对纹理坐标进行位移来模拟折射的效果。最基本的实现可能导致走样，因此文中讨论了如何将几何图形从折射图贴图中标注出来。最后演示了一些用该方法渲染真实的水和玻璃的通用技术。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-47cfca938a_b.jpg& data-rawwidth=&500& data-rawheight=&149& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/v2-47cfca938a_r.jpg&&&/figure&&p&图 彩色玻璃的渲染步骤（a）折射 （b）环境凹凸映射 （c）最终的合成&/p&&p&这章给出的模拟折射的方法，虽然不是基于物理的，但是能得到质量很好的结果，且速度非常快。&/p&&p&但此方法的缺陷是，当应用到不同颜色的折射表面上时，在表面重叠的地方会得到不正确的结果。只要折射表面的颜色相近，结果看上去就是正确的。一个正确的解决方案就是，对折射网格从后到前进行排序，然后每次渲染一个折射网格时都更新一次折射图。或者用另一个不够准确的方案，对折射网格从后到前进行排序，在用alpha混合来渲染它们。&/p&&h2&&b&【关键词】&/b&&/h2&&p&折射（Refraction）&/p&&p&水的渲染（Water Rendering）&/p&&p&玻璃的渲染（Glass Rendering）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&四、快速三阶纹理过滤（Fast Third-Order Texture Filtering）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&&br&&/p&&p&对可编程图形硬件可以在使用片段着色器上使用通用的卷积过滤器来实现高质量的纹理过滤，如立方（cubic）过滤器[Bjorke 2004]。这些方法通常有许多缺点：它们需要进行多次纹理采样，而且无法对mipmap的纹理进行反失真处理。&/p&&p&而在本章中，介绍了一种能有效减少三阶纹理过滤需要输入的纹理数量的方法，使用了1D、2D及3D空间中的三次B样条（B-spline）曲线的卷积核和它的一阶、二阶导数来解决这些过滤问题。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&高阶纹理过滤的主要性能瓶颈是需要大量的纹理采样作为输入。通常是通过对输入纹理进行重复最近邻近（Repeated Nearest-Neighbor）采样实现。为了减少采样的次数，基于线性采样来建立过滤器，这种方法能大量减少纹理采样的次数，尤其是2D和3D过滤。特别是能通过8次三线性纹理采样来完成一个需要64次累加操作的三立方（tricubic，也译作三重三次）过滤器。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-39cbe619e0bfd05f32d10fd_b.jpg& data-rawwidth=&500& data-rawheight=&137& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-39cbe619e0bfd05f32d10fd_r.jpg&&&/figure&&p&图 三次B样条（Cubic B-Spline）和其导数&/p&&p&（a）f_1和过滤器权重w_i（x）的卷积&br&（b）三次样条曲线的一阶导数；（c）三次样条曲线的二阶导数&/p&&p&&br&&/p&&p&总而言之，本章介绍了一个能有效减少高阶纹理过滤需要的对输入纹理进行采样的次数。而前提是假设一个线性采样操作和一个最邻近采样一样快（至少不慢太多）。对三阶过滤器核（如三次B样条）曲线过滤器进行了优化，让它只需要非常少的线性纹理采样次数。&/p&&p&而事实上，片元着色器里的代码更像一个手工写的线性插值程序，而不是一个立方过滤器。&/p&&h2&&b&【关键词】&/b&&/h2&&p&纹理过滤（Texture Filtering）&/p&&p&高阶过滤（Higher-Order Filtering）&/p&&p&B样条过滤（ B-Spline Filtering）&/p&&p&三次B样条（Cubic B-Spline）&/p&&p&快速递归三次卷积（Fast Recursive Cubic Convolution）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&五、高质量反走样的光栅化（High-Quality Antialiased Rasterization）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章介绍了一种分块的超采样（supersampling）技术，使用任意宽度和高采样率的自定义过滤器，可以用来渲染任意分辨率的图像，以实现高质量的反走样光栅化。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&如上所言，文中介绍了一种分块的超采样（supersampling）技术，描述了如何把一个图像分成块（tiles，也称为buckers），用高分辨率渲染每一块，然后降采样（downsample，即收缩）每一块以达到最终分辨率，在即使构造的片元程序中使用分离式的降采样。文中也介绍了如何在图像分块之间进行正确的重叠和延伸的细节问题。文中提供的代码可以很轻易地集成到现有的渲染系统中，而不需要对现有的代码进行大的改动。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b40c8f8fbeabe001a96d_b.jpg& data-rawwidth=&500& data-rawheight=&357& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-b40c8f8fbeabe001a96d_r.jpg&&&/figure&&p&图 将图像分解成tiles&/p&&p&对于最终图像的每一个分块，总体算法如下：&/p&&p&（1）把图像块渲染到一个大的离屏缓冲区中，调整投影矩阵，以现有的渲染代码把3D几何体用高采样率的分辨率渲染出来。&/p&&p&（2）把高分辨率的图像块用一个分离式的过滤器核进行降采样，通过使用实时生成的片元程序在屏幕上渲染两个全屏的四边形来实现。&/p&&p&（3）把低分辨率的图像块累加到最终图像中，或通过把图像块的数据读回到CPU中，或使用另外一个片元程序把图像块加入到最终图像中。&/p&&h2&&b&【关键词】&/b&&/h2&&p&反走样光栅化（Antialiased Rasterization）&/p&&p&分块超采样（tiled supersampling）&/p&&p&降采样（downsample）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&六、快速预过滤线条（Fast Prefiltered Lines）&/b&&/h2&&p&&br&&/p&&h2&&b&【章节概览】&/b&&/h2&&p&这章介绍了一种简单有效的绘制反走样（抗锯齿）的线条的方法。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&本章提到的预过滤（Prefiltered）方法最早由McNamara, McCormack, 和 Jouppi在2000年提出，其有诸多优点。首先该方法能使对称的过滤器在运行时提供固定的开销；其次，和一般硬件支持的过滤器不同，本方法不仅仅对只处于像素内的点进行采样，它能支持更大范围的过滤器，反走样的结果是硬件无关的，这保证了在不同GPU上能得到相同的反走样结果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-3b7bff29e36a872ca8f11291bbe1f482_b.jpg& data-rawwidth=&500& data-rawheight=&224& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-3b7bff29e36a872ca8f11291bbe1f482_r.jpg&&&/figure&&p&图 比较细线和粗线的反走样效果&/p&&p&总之，通过对从中心到边界不同距离处，把直线和过滤器的卷积结果进行卷积，并将结果存储在一个查找表中来预过滤线条。&/p&&p&该方法允许相同的运行时开销开使用任意的对称过滤器。而且，该算法只需要很少的CPU和GPU运算、带宽及存储空间开销。这些特性使这种算法对大部分的实时渲染程序都有实用价值，如绘制围栏、电线以及游戏中其他细长的物体。&/p&&h2&&b&【关键词】&/b&&/h2&&p&预过滤线条（Prefiltered Lines）&/p&&p&反走样/抗锯齿（Antialiasing ）&/p&&p&线条的反走样（Antialiasing Lines）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&七、Nalu Demo中的头发动画与渲染（Hair Animation and Rendering in the Nalu Demo）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章讲到了NVIDIA公司的Nalu Demo中的头发动画和渲染技术。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f4fb6c813e50c5f77c08_b.jpg& data-rawwidth=&300& data-rawheight=&323& data-caption=&& data-size=&normal& class=&content_image& width=&300&&&/figure&&p&图 Nalu的头发&/p&&h2&&b&【核心要点】&/b&&/h2&&p&NVIDIA的Nalu demo中，要达到的目标是渲染在水中飘动的金色长发。这章将介绍用于实时达到这个目标所用的技术。这种技术包含一个模拟头发运动系统，一个计算头发自阴影的阴影生成算法，还有一个通过每一串头发来模拟光线散射的发射模型。把这些结合起来，就能实时创建出极其真实的头发渲染效果。&/p&&p&在Nalu头发的后台着色处理中，有一个在每帧里生成头发几何和控制动感与碰撞的系统。基本上分成两部分：几何生成器和动感/碰撞的计算。&/p&&p&这些头发是由4095条用直线图元来渲染的独立发丝组成。仅仅在渲染头发上就使用了123000个顶点。让所有这些顶点通过动力学和碰撞检测就将慢得无法接受，因此使用受控发丝（control hair）：尽管需要渲染成千次，但Nalu的发型能通过一组每组几百根发丝来描述和控制。所有开销大的动态计算都运用于这些受控发丝。&/p&&p&头发的实时反射模型方面，选用了Marschner反射模型（2003）。而在渲染头发的阴影方面，采用了一种针对渲染头发阴影设计的近似阴影——非透明阴影图（Opacity shadow maps）(Kim and Neumann 2001)。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-1057dab03a_b.jpg& data-rawwidth=&500& data-rawheight=&444& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-1057dab03a_r.jpg&&&/figure&&p&图 基于Marschner反射模型的头发渲染&/p&&figure&&img src=&https://pic1.zhimg.com/v2-262badf9d1be8ebd5ad4_b.jpg& data-rawwidth=&500& data-rawheight=&207& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-262badf9d1be8ebd5ad4_r.jpg&&&/figure&&p&图 Marschner反射模型的查找纹理（Lookup Textures）&/p&&h2&&b&【关键词】&/b&&/h2&&p&头发渲染（Hair Rendering）&/p&&p&头发动画（Hair Animation）&/p&&p&Marschner反射模型（Marschner Reflectance Model）&/p&&p&非透明阴影图（Opacity Shadow Maps）&/p&&p&&br&&/p&&h2&&b&八、使用查找表加速颜色变换（Using Lookup Tables to Accelerate Color Transformations）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章中，介绍了一种利用三维查找表的算法来实时处理高分辨率图像的方法。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&在函数的计算开销很大，但是把计算结果缓存起来的开销比较小时，用查找表（Lookup&br&Table，简称LUT）优化这种函数的计算是一种非常好的方法。通过预先把一些常见输入的对应结果计算出来，花费不多的查找操作就能代替开销较大的运行时计算。如果查找比开头开始计算结果（或者有不断重复的相同输入）要快，那么使用查找表就能提高程序性能。&/p&&p&这章中，介绍了一种利用三维查找表的算法来实时处理高分辨率图像的方法。这种方法有非常出色的性能，它与执行颜色操作的数量无关，与颜色操作的复杂度也无关，即能独立于颜色运算的数量和颜色变换的复杂度。涉及到的主要实现有，把查找表映射到GPU、着色器的实现、系统集成以及把三维查找表扩展到高动态范围图像等步骤。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-6a012c35b8ce340cda7c_b.jpg& data-rawwidth=&500& data-rawheight=&196& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/v2-6a012c35b8ce340cda7c_r.jpg&&&/figure&&p&图 一个三维的查找表&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-2bdf5cfa1ddb33ffffa23223_b.jpg& data-rawwidth=&500& data-rawheight=&412& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/v2-2bdf5cfa1ddb33ffffa23223_r.jpg&&&/figure&&p&图 颜色校正流水线的比较。左图为传统的颜色校正流水线，通过发送低分辨率的图像来用作硬件加速的基础。右图为基于三维查找表的加速流水线。&/p&&h2&&b&【关键词】&/b&&/h2&&p&查找表（Lookup Table， LUT）&/p&&p&颜色变换（Color Transformations）&/p&&p&&br&&/p&&p&&br&&/p&&h2&&b&九、实现改进的Perlin噪声（Implementing Improved Perlin Noise）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章上接《GPU Gems 1》中奥斯卡得主大牛Ken Perlin撰写的第五章[Perlin&br&2004]，《GPU Gems 1》中Ken Perlin的章节讨论了该如何使用3D纹理实现过程噪声的快速近似，在这里描述一个改进噪声算法的GPU实现，其也完全符合用CPU进行实现。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&Perlin算法由两个主要阶段组成。&/p&&p&第一阶段在3D空间的每个整数（x，y，z）位置产生一个可重复的伪随机值。这可以以多种方式思想，但是Perlin的算法是使用一个散列函数。散列函数基于一个包含以随机顺序0~255的整数排列的表（这张表可以在实现之间进行标准化，以便它们产生相同结果）。首先，这张表是基于位置的x坐标索引，然后将y坐标添加到表中该位置的值中，并使用结果再次在表中查一次表。然后为z坐标重复一次此过程。对z坐标重复此过程后，结果为每个可能的（x，y，z）位置的伪随机整数。&/p&&p&在算法中的第二阶段，将上述伪随机整数用于索引入一个3D梯度向量的表中。在“改良的”算法中，只用8个不同的梯度。这个梯度和噪声空间中的小数位置求点积可以得到一个标量值。最后的值通过空间中相邻8个点的噪声值插值获得。&/p&&p&Perlin改良的噪声算法是将CPU实现的排列表和梯度表存储在数组中。由于像素着色器当时不支持索引入常量存储器中，所以将这些表存储在纹理中，并使用纹理查找来访问它们。纹理寻址设为环绕（或重复）模式，因此不必考虑扩充表以避免索引越过数组结尾，如同在CPU实现中一样。&/p&&p&本章介绍了对像素着色器中的程序化噪声的实现。程序化噪声是丰富渲染外观一个重要的部分，而且它可以用于凹凸贴图和其他效果。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8cf5b8f9a_b.jpg& data-rawwidth=&400& data-rawheight=&375& data-caption=&& data-size=&normal& class=&content_image& width=&400&&&/figure&&p&图 基于过程凹凸贴图的pixel着色器噪声&/p&&h2&&b&【关键词】&/b&&/h2&&p&Perlin噪声（Improved Perlin Noise）&/p&&p&改进的Perlin噪声（Improved Perlin Noise）&/p&&p&&br&&/p&&h2&&b&十、高级高质量过滤（Advanced High-Quality Filtering）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章提供了一个基于GPU纹理过滤的实现细节和解决方案，其中重点放在纹理插值和反走样问题。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&本章阐述了一系列用于渲染纹理表面的高质量纹理过滤方法。这些技术可以用来执行许多常见的图像任务，如缩放、扭曲、锐化等。除此之外，用这些方法渲染简单的带纹理的3D场景时，还可以提供比图形硬件上的标准过滤器更好的渲染效果。&/p&&p&这章提到的技术是为质量最优的渲染而设计的，对高帧率的实时交互的程序和游戏来说依然显得昂贵，它更适合哪些渲染质量比速度更重要的程序，如医疗和科学图像、照片和电影编辑、图片合成、视频格式转换、专业3D渲染等。它也能用于游戏中与分辨率无关的纹理准备（预处理）当中。&/p&&p&另外，文中还介绍了一种适合用于增强重建图像的锐化过滤方法——冲击过滤冲击过滤（Shock Filtering），其能把纹理插值平滑地变换成陡峭的变换。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-6ff3d52f50d8_b.jpg& data-rawwidth=&500& data-rawheight=&423& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/v2-6ff3d52f50d8_r.jpg&&&/figure&&p&图 冲击过滤（Shock Filtering）方法&/p&&h2&&b&【关键词】&/b&&/h2&&p&GPU纹理过滤（GPU-based texture-filter）&/p&&p&纹理插值（ texture interpolation）&/p&&p&反走样/抗锯齿（antialiasing ）&/p&&p&冲击过滤（Shock Filtering）&/p&&p&&br&&/p&&h2&&b&十一、Mipmap层级测定（Mipmap-Level Measurement）&/b&&/h2&&h2&&b&【章节概览】&/b&&/h2&&p&这章讲到了使用“伪着色”（false-colored）的mipmap来代替原来的多级纹理进行场景渲染的方法。这样的mipmap每层都有不同的比对色。且这章展示了如何用GPU来自动化伪着色的整个过程。&/p&&h2&&b&【核心要点】&/b&&/h2&&p&伪着色（false-colored）的mipmap，结合基于GPU的方法，可以高效地运用在游戏引擎中，可见的mip层次将被动态地反馈入引擎的纹理管理程序以减少内存消耗量。而所节省的内存可以用来增加别处的纹理分辨率，改进场景的华丽程度。Climax在Leviathan引擎中对地形场景使用了这项技术，使纹理空间节约了80%的内存，并没有任何可察觉的视觉质量损失。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-6beae192bc08bce1bf49f58be8c35964_b.jpg& data-rawwidth=&500& data-rawheight=&178& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic3.zhimg.com/v2-6beae192bc08bce1bf49f58be8c35964_r.jpg&&&/figure&&p&图 对地形场景应用伪着色mipmap方法&/p&&p&图（a）地形场景适用Climax的Leviathan引擎渲染（b）通过下图“定标纹理”，将原纹理替换成伪着色的mipmap后的效果。可以看到最高的层（黄颜色）几乎不可见。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5f5aed8ad253dba4f7ba1de_b.jpg& data-rawwidth=&500& data-rawheight=&250& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/v2-5f5aed8ad253dba4f7ba1de_r.jpg&&&/figure&&p&图 定标纹理&/p&&h2&&b&【关键词】&/b&&/h2&&p&纹理管理（texture management）&/p&&p&伪着色（false-colored）&/p&&p&Mipmap层级（Mipmap-Level）&/p&&h2&&br&&b&本文的GitHub版&/b&&br&&br&&/h2&&p&不少朋友们喜欢看GitHub版本的文章，我也很喜欢。&/p&&p&首先，MarkDown可以很方便地插入快捷导航目录，能进行瞬间跳转到指定子章节。其次，GitHub版本的文章中没有单篇文章的字数限制，少了很多篇幅方面的桎梏。而且因为Git的便利性，版本管理的优势，最新的勘误和修订,以及新文章的更新，第一时间会在GitHub的Repo中进行。&/p&&p&&b&【本文的GitHub版本传送门】：&/b&&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/QianMo/Game-Programmer-Study-Notes/tree/master/Content/%25E3%AGPU%2520Gems%%E5%%25E4%25B9%25A6%25E6%258F%%2582%25BC%25E6%2580%25BB%25E7%25BB%2593/Part2& data-image=&https://pic2.zhimg.com/v2-5e14b339cd_ipico.jpg& data-image-width=&200& data-image-height=&200& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QianMo/Game-Programmer-Study-Notes&/a&&p&&br&&/p&&h2&&b&附录：配套资源与源代码下载&/b&&/h2&&p&这里提供了一些，《GPU Gems 2》书本的配套资源以及源代码的下载地点。&/p&&p&PS:配套的不少工程中不仅包含完整的源码，也直接包含经过编译后的exe执行文件，可以直接运行后查看效果。&/p&&p&《GPU Gems 2》全文的Web版本：&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//developer.nvidia.com/gpugems/GPUGems2/gpugems2_inside_front_cover.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GPU Gems&/a&&p&也有维护一个名为“GPU-Gems-Book-Source-Code”的GitHub仓库，以备份《GPU&br&Gems》系列书籍相关的珍贵资源，《GPU Gems 2》的随书CD和源代码可以在这里下载到：&/p&&a data-draft-node=&block& data-draft-type=&link-card& href=&https://link.zhihu.com/?target=https%3A//github.com/QianMo/GPU-Gems-Book-Source-Code& data-image=&https://pic2.zhimg.com/v2-5e14b339cd_ipico.jpg& data-image-width=&200& data-image-height=&200& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QianMo/GPU-Gems-Book-Source-Code&/a&&p&以上。&/p&&p&&/p&
本文核心内容为《GPU Gems 2》中讲到的真实感水体渲染，以及真实感头发渲染、通用的折射模拟、改进的Perlin噪声等次核心内容。 前言之前和同事们讨论水体渲染时，大家说到目前业界水体实时渲染效果领先的游戏引擎，是Cry Engine。Cry Engine中的水体渲染可…
&figure&&img src=&https://pic1.zhimg.com/30ff84aeb6ca2b3b14e4c90c_b.jpg& data-rawwidth=&800& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic1.zhimg.com/30ff84aeb6ca2b3b14e4c90c_r.jpg&&&/figure&&p&&b&本文禁止任何机构和个人，以任何形式进行转载。&/b&&/p&&p&2015年秋季学期，我师从「火星总统」Geoff Engelstein 学习桌游设计（哦，上帝啊，我用我的人格担保，这是NYU Game Center最值得上的课。）。课上Geoff提供了一份清单，以帮助我们自查游戏设计的完成度。「游戏设计的完成度」不同于「游戏的完成度」，它更多是集中在&b&游戏玩法规则的有效性、趣味性和自洽性&/b&上。对于游戏完成度的自查对工程方面的要求很低，在纸上原型阶段就可以开始，并且贯穿从构思/立项到最终版本锁定的所有开发阶段。这也是为什么我非常想跟大家分享这份清单。如果有需求，我会在接下来的专栏文章中进行评注。&br&&/p&&p&1.
玩家为什么要来玩这个游戏？&br&&/p&&p&2.
游戏的核心体验是什么？&/p&&p&3.
是否游戏中所有的机制都在支撑核心体验？&/p&&p&4.
你的目标用户是什么人？&/p&&p&5.
游戏需要玩家做什么决策和判断？&/p&&p&6.
有什么规则是贯穿始终的？游戏进行到什么阶段会发生规则的变化？&/p&&p&7.
游戏的时长是否有碍核心体验？&/p&&p&8.
游戏中有什么可以学习的技巧？这些技巧是否契合游戏的核心体验和时长？&/p&&p&9.
你用什么东西来激励玩家继续游戏？&/p&&p&10. 有什么机制是可以被简化或砍掉的？&/p&&p&11. 有哪些优势/劣势策略？是否有必胜策略？&/p&&p&12. 玩家是不是处于一个公平的起点？&/p&&p&13. 游戏的体验曲线/叙事曲线是否契合游戏的核心体验和时长？&/p&&p&14. 游戏的赢家是否是在游戏结束时才知晓？弱势方是否有翻盘的几率？会不会出现强者恒强的情况？&/p&&p&15. 游戏中是否有无聊的时刻？这种无聊的时刻是否会引起目标用户的反感或背离核心体验？&/p&&p&16. 是什么驱动游戏的进程？&/p&&p&17. 你是如何奖励玩家的？这种奖励是否契合游戏的核心体验、目标用户和时长？&/p&&p&18. 有哪些玩法与奖励相关？&/p&&p&19. 有哪些内容是直接支持核心体验的？&/p&&p&20. 有哪些内容是直接支持核心机制的？&/p&&p&21. 有哪些机制还不够直观？如何让玩家进行学习？&/p&&p&22. 规则书和教程是否有效？&/p&&p&23. 有没有其他人检查或改动过规则？&/p&&p&24. 游戏中的指示物是否清晰？&/p&&p&25. 游戏是否有被盲测（blind test）过？&/p&&p&26. 游戏的画面是否契合主题、核心体验和目标用户？&/p&&p&27. 游戏的字体和字号是不是易于阅读？&/p&&p&28. 游戏中的图标是否能清晰的传递你想要传递的信息？&/p&&p&29. 游戏中的图文是否会产生歧义？&/p&&p&30. 游戏的配色是否对色盲用户友好？&/p&&p&31. 游戏是否支持对于其他语言的本地化？&/p&&br&&p&题图：保罗高更《我们从哪里来？我们是谁？我们到哪里去？》&/p&
本文禁止任何机构和个人，以任何形式进行转载。2015年秋季学期，我师从「火星总统」Geoff Engelstein 学习桌游设计（哦，上帝啊，我用我的人格担保，这是NYU Game Center最值得上的课。）。课上Geoff提供了一份清单，以帮助我们自查游戏设计的完成度。「游…
入门阶级的书可以看Tracy Fullerton的Game Design Workshop 几乎是北美各大游戏高校的通用课本 其余 编剧 Production Coding 等都有各个领域的书 等我慢慢来填坑&br&&br&论权威的话就是Tracy这本Game Design Workshop了 她是北美著名的游戏教育家 没错 她把游戏作为一个正儿八经的学科搞深层次的研究 她花了几十年一直在探讨游戏的本质 一手发扬了北美的游戏教育（USC电影学院的互动传媒是北美最早提供游戏设计学位的科系 之后NYU CMU UT等等各大高校纷纷加入了这个大军） 她所提出的理念就是Playcentric- Design （一切&b&以玩家为中心&/b&） &br&&br&&b&我想让我的游戏给玩家带来什么？ &/b&这是一个每个游戏设计师都应该最先思考但又会经常被忽略的问题 很少有设计师在开发过程中能做到一直不偏离初衷 导致的后果就是 -- 不好玩 &br&Tracy的书就是围绕这个核心的 无论你是新手还是从业N年的经验人士 看看Tracy的书都会有所启发&br&&br&更新 我在USC学游戏设计 所以列一个我们课程中都用的书单造福广大人民群众 所以我这里列的书都是英文 亚马逊基本都可以买到&br&&br&&b&设计类：&/b&&br&Introduction to Game Design, Prototyping, and Development &br&十分全面的一本书 900度页厚 涵盖了设计理念 游戏开发过程 数值 谜题设计 基础C#到Unity开发完整的小游戏都有 强烈推荐任何对游戏设计感兴趣的朋友&br&&br&Level Design: Concept, Theory, and Practice
by Rudolf Kremers&br&学游戏怎么能不学关卡设计？ Amazon上有很多此类的书 但这本是比较广泛使用的&br&&br&&b&Production类&/b&&br&The Game Production Handbook by Heather Chandler&br&针对想成为制作人的书 全面地介绍了游戏开发过程和游戏制作人的职责&br&&br&Introduction to Game Development by Steven Rabin&br&介绍游戏开发的 推荐对游戏业感兴趣的人 如果在业界从事多年的就没必要看了&br&&br&&b&文案/剧情类：&/b&&br&The Ultimate Guide to Video Game Writing and Design&br&如何写一个出色的游戏剧本？ 这本书很薄 但涵盖了世界观设定 角色设定 如何设置戏剧冲突将观众带入剧情等等 我现在上的游戏写作课就在用这本书&br&&br&Character Development and Storytelling for Games by Lee Sheldon&br&这本没看过 但Amazon评价很高 光看标题很合我胃口 等我有时间了也会买一本来看
&br&&br&&b&测试类&/b&&br&Handbook
of Usability Testing: How to Plan, Design, and Conduct Effective Tests, &u&Second
Edition&/u&; Rubin, Jeffrey, Wiley Press, 2008&br&用户体验和性能测试的 判断你游戏好不好玩 最简单有效的方法就是不停地Playtest 那么如何设置test得到有效的feedback也是一门技巧 &br&&br&&b&Coding类&/b&&br&这方面的书就太多太多了 但如果是针对开发游戏的话还是建议选特定引擎的 比如Unreal， Unity + C#
看自己需求&br&&br&其他关于游戏发行的还有Secrets of Game Business 这本书倾向于教你怎么做人（怎么跟游戏高层谈笑风声pitch你的游戏） 但总感觉国外和国内做发行挺不一样的 而且这种东西我觉得没法看书学 所以不推荐 另外USC课程设置是偏理论的 所以涉及到用户调研和市场研究的书没有很多 这方面还是多靠自己在网络上搜集资料吧
入门阶级的书可以看Tracy Fullerton的Game Design Workshop 几乎是北美各大游戏高校的通用课本 其余 编剧 Production Coding 等都有各个领域的书 等我慢慢来填坑 论权威的话就是Tracy这本Game Design Workshop了 她是北美著名的游戏教育家 没错 她把游戏作…
最近在做游戏，想要自动生成随机的地图，找到了一篇文章：&a href=&//link.zhihu.com/?target=http%3A//www-cs-students.stanford.edu/%7Eamitp/game-programming/polygon-map-generation/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Polygonal Map Generation for Games&/a& 这里有文章的 Flash Demo &a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www-cs-students.stanford.edu/%7Eamitp/game-programming/polygon-map-generation/demo.html& target=&_blank& rel=&nofollow noreferrer&&Polygon Map Generation demo&/a&&br&（下面的图片都是转自这篇文章，不知道合适吗。）&br&&figure&&img data-rawheight=&600& data-rawwidth=&600& src=&https://pic4.zhimg.com/50/fbc4b0decc5a714f50b9be_b.jpg& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic4.zhimg.com/50/fbc4b0decc5a714f50b9be_r.jpg&&&/figure&&br&如何生成这样的地图呢？可能是 Perlin 噪音（&a href=&//link.zhihu.com/?target=http%3A//zh.wikipedia.org/zh/Perlin%25E5%2599%25AA%25E5%25A3%25B0& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Perlin噪声&/a&），确实能有类似的效果，但是你 Perlin 出来的只是一堆点，看似连续，实际上离散的点，你没办法生成出区块。河流也不可能简单地生成。&br&&br&如何生成地图中各种区块呢？我们需要生成无限个比较随机的多边形，并且铺满整个平面。这样的多边形就是&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Voronoi_diagram& target=&_blank& rel=&nofollow noreferrer&&Voronoi diagram&/a&：&br&&figure&&img data-rawheight=&400& data-rawwidth=&400& src=&https://pic4.zhimg.com/50/ccdbdfcd21f242b1e5c923935dac05a7_b.jpg& class=&content_image& width=&400&&&/figure&生成这货的算法叫做 &b&&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Fortune%2527s_algorithm& target=&_blank& rel=&nofollow noreferrer&&Fortune's algorithm&/a&&/b& 。&br&算法特别复杂 &a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.cnblogs.com/Seiyagoo/p/3339886.html& target=&_blank& rel=&nofollow noreferrer&&Voronoi Diagram——维诺图&/a&。这里有算法的动态演示：&a class=& external& href=&//link.zhihu.com/?target=http%3A//www.raymondhill.net/voronoi/rhill-voronoi.html& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&raymondhill.net/voronoi&/span&&span class=&invisible&&/rhill-voronoi.html&/span&&span class=&ellipsis&&&/span&&/a& （也有 JS 源代码 &a class=& wrap external& href=&//link.zhihu.com/?target=https%3A//github.com/gorhill/Javascript-Voronoi/blob/master/rhill-voronoi-core.js& target=&_blank& rel=&nofollow noreferrer&&Javascript-Voronoi/rhill-voronoi-core.js at master · gorhill/Javascript-Voronoi · GitHub&/a& 1718 行）&br&这个算法我花了很长时间才搞懂，也需要不少前置知识。实际上我也搞不懂为了避免暴露所以不细说了……但这个回答主要是想要提到这个算法。因为这个算法需要几何知识，也需要图论知识，为了实现还需要一颗AVL树或者红黑树，并且有几个麻烦的边界条件，如果有选手比赛的时候码出来就太厉害了……&br&&br&先生成随机的点，然后将随机的点稍微搞得均匀一点（&a href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Lloyd%2527s_algorithm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Lloyd's algorithm&/a&），就以点生成维诺图。&br&生成了以后，用 Perlin 函数（或者别的噪音函数）给每一个区块着色，大致的地形就出来了（还需要用一个简单的洪水填充区分海与湖。）&figure&&img data-rawheight=&400& data-rawwidth=&400& src=&https://pic4.zhimg.com/50/a5da5ec7bc91f48f1f7c49bdf2b648b7_b.jpg& class=&content_image& width=&400&&&/figure&&br&然后，河怎么做呢？看这些区块的交点处，随机挑选一些交点，然后按照 Perlin 函数生成的高度图用 &b&A* 算法&/b&走出一个搜索路径，就是河了。A* 在游戏开发里面实在太常用了，如萌萌哒的岛娘所说，寻路和搜素多多少少都要用到。&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.redblobgames.com/pathfinding/a-star/introduction.html& target=&_blank& rel=&nofollow noreferrer&&Introduction to A*&/a&&figure&&img data-rawheight=&400& data-rawwidth=&400& src=&https://pic1.zhimg.com/50/d4bf7cab3f61b9a6dff983_b.jpg& class=&content_image& width=&400&&&/figure&文章中还讲了道路和降雨之类的。&br&&br&相比之下，房间的生成就简单多了。&br&&a href=&//link.zhihu.com/?target=http%3A//gamedev.stackexchange.com/questions/47917/procedural-house-with-rooms-generator& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&algorithm - Procedural... house with rooms generator&/a&&br&&br&最后推荐一下这个网站 &a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.redblobgames.com/& target=&_blank& rel=&nofollow noreferrer&&Red Blob Games&/a& 里面有很多游戏里面的算法，并且呢有很多动态的实例。&br&另外此网站的这个页面 &a href=&//link.zhihu.com/?target=http%3A//www-cs-students.stanford.edu/%7Eamitp/gameprog.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Amit’s Game Programming Information&/a& 干货非常多，应该是这个问题的最佳答案。&br&&br&比如说迷宫的十种生成算法：&a href=&//link.zhihu.com/?target=http%3A//weblog.jamisbuck.org//maze-generation-algorithm-recap%23article_body& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&the { buckblogs :here }: Maze Generation: Algorithm Recap&/a&&br&&br&都是搬运这个网站的内容，特别羞愧，但是我游戏也才刚开始写……没有干货了……
最近在做游戏，想要自动生成随机的地图，找到了一篇文章： 这里有文章的 Flash Demo
（下面的图片都是转自这篇文章，不知道合适吗。） 如何生成这样的地图呢？可能是 Perlin 噪音（…
&figure&&img src=&https://pic2.zhimg.com/v2-665c4b28b10fcaa01b5a89a_b.jpg& data-rawwidth=&4096& data-rawheight=&2304& class=&origin_image zh-lightbox-thumb& width=&4096& data-original=&https://pic2.zhimg.com/v2-665c4b28b10fcaa01b5a89a_r.jpg&&&/figure&&p&本文是对&a href=&https://www.zhihu.com/question/& class=&internal&&2d横版像素游戏的制作流程是怎样的？&/a&问题的回答。&/p&&blockquote&&b&一个2d横版像素游戏的制作流程是怎样的？&/b&&br&题主是一个像素游戏爱好者，有意制作一部2d横版像素游戏，准备登陆iOS，大概就像像莫莫多拉，洞穴探险，泰拉瑞亚，这样的横版2d像素游戏，一般是用的什么游戏引擎制作？又用的什么绘图工具和动画制作工具和用什么编程语言好？请大神们多多指导，感谢。&/blockquote&&hr&&p&作为一个像素风格的爱好者。&br&&br&&/p&&p&分享一下自己的经验吧。&/p&&h2&&b&一、像素游戏使用的引擎&/b&&/h2&&p&&br&&/p&&p&先介绍题主感兴趣的这些作品使用的引擎吧。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-d5e3fb0e14b6a66e6afd3a_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-d5e3fb0e14b6a66e6afd3a_r.jpg&&&/figure&&p&&b&StardewVally 星露谷物语 &/b&&/p&&p&由呵呵鱼发行。&/p&&p&开发者是ConcernedAPE&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b2b5d01ffe61ba27ca04e5e333fe91be_b.jpg& data-caption=&& data-rawwidth=&879& data-rawheight=&192& class=&origin_image zh-lightbox-thumb& width=&879& data-original=&https://pic3.zhimg.com/v2-b2b5d01ffe61ba27ca04e5e333fe91be_r.jpg&&&/figure&&p&根据开发者的答疑，游戏使用的是C# XNA。&/p&&p&&br&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.reddit.com/r/nintendo/comments/75ag0g/im_concernedape_creator_of_stardew_valley_ask_me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发者本人在Reddit上的答疑链接&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//twitter.com/ConcernedApe& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ConcernedAPE的轻博客链接&/a&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ed7bea3c1f2ce_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-ed7bea3c1f2ce_r.jpg&&&/figure&&p&&b&Terraria&/b&也同样是使用C# XNA &/p&&p&程序是Andrew Spinks&/p&&p&可以参考GIT上泰拉瑞亚代码 &a href=&http://link.zhihu.com/?target=https%3A//github.com/csnxs/Terraria& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&csnxs/Terraria&/a&&/p&&p&StarBound我就不多赘述了。&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-e7ef9c81c6d06f61af02_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-e7ef9c81c6d06f61af02_r.jpg&&&/figure&&p&&b&OwlBoy&/b&&/p&&p&这款游戏也是题主想要做的横版2D类型。&/p&&p&同样使用C# XNA开发&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&b&下面介绍的这些作品都是使用GameMakerStudio开发的&/b&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-cac7450efd770c13668b97_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic4.zhimg.com/v2-cac7450efd770c13668b97_r.jpg&&&/figure&&p&&b&HyperLightDrifter&/b&&/p&&p&使用GameMakerStudio开发&/p&&p&这款游戏在steam 以及 PlayStation上均有上架&/p&&p&&br&&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//heartmachinez.tumblr.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发者的tumblr链接&/a&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-60a61d6ce4d8bb_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic4.zhimg.com/v2-60a61d6ce4d8bb_r.jpg&&&/figure&&p&&b&undertale&/b&&/p&&p&IGN满分作品 &/p&&p&作者是 Toby Fox &/p&&p&使用GameMakerStudio开发&/p&&p&个人觉得不好玩 T_T&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ce95b860d5aac55a4327a6_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic3.zhimg.com/v2-ce95b860d5aac55a4327a6_r.jpg&&&/figure&&p&&b&downwell &/b&&/p&&p&作者是 Moppin&/p&&p&使用GameMakerStudio开发&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//downwellgame.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&downwellgame.com/&/span&&span class=&invisible&&&/span&&/a&&/p&&p&&br&&/p&&p&另外推荐观看《Branching Paths》这个纪录片。&/p&&p&相对于《独立游戏大电影》，《Branching Paths&b&》&/b&的知名度没有那么高，但是对于从业者来说绝对值得一看。&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//store.steampowered.com/app/494680/Branching_Paths/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&影片链接&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&NintendoSwitch以及任天堂其他主机上的一些像素游戏，我不是很清楚，现在懒得去查。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-281e7fbe540fbb048a88_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic1.zhimg.com/v2-281e7fbe540fbb048a88_r.jpg&&&/figure&&p&Octopath Traveler &/p&&p&开发商SquareEnix&/p&&p&使用的是虚幻4引擎 (开发团队是过去的勇气默示录开发团队)&/p&&p&这款游戏应该会在NS上首发，体验版很惊艳。&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&下面着重介绍一下国产的像素游戏。&/p&&p&如果题主有心的话，可以直接联系上开发者。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-e9874338fdbec411592ec_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic1.zhimg.com/v2-e9874338fdbec411592ec_r.jpg&&&/figure&&p&&b&CatchMe&/b&&/p&&p&作者是 &a class=&member_mention& href=&http://www.zhihu.com/people/941015febcf0bf4903d3& data-hash=&941015febcf0bf4903d3& data-hovercard=&p$b$941015febcf0bf4903d3&&@玫瑰狗&/a& &a class=&member_mention& href=&http://www.zhihu.com/people/3cb531f5e0a3cb28c58f1c406d5d51e0& data-hash=&3cb531f5e0a3cb28c58f1c406d5d51e0& data-hovercard=&p$b$3cb531f5e0a3cb28c58f1c406d5d51e0&&@绯色de弦月&/a& &/p&&p&使用的是UNITY引擎&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//store.steampowered.com/app/421030/Catch_Me/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Steam链接&/a&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-4aa2b8d5393dfb48ba729c_b.jpg& data-caption=&& data-rawwidth=&520& data-rawheight=&293& class=&origin_image zh-lightbox-thumb& width=&520& data-original=&https://pic1.zhimg.com/v2-4aa2b8d5393dfb48ba729c_r.jpg&&&/figure&&p&&b&元气骑士&/b&&/p&&p&作者是 凉屋游戏 &a class=&member_mention& href=&http://www.zhihu.com/people/2ef5021660bddecc12e9c67cc118d5b0& data-hash=&2ef5021660bddecc12e9c67cc118d5b0& data-hovercard=&p$b$2ef5021660bddecc12e9c67cc118d5b0&&@一张钞票&/a& &/p&&p&使用的是Unity引擎&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.taptap.com/app/34751& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TapTap链接&/a&&/p&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-10d066ee651b4091ecebef5ae0d7da9d_b.jpg& data-caption=&& data-rawwidth=&497& data-rawheight=&260& class=&origin_image zh-lightbox-thumb& width=&497& data-original=&https://pic2.zhimg.com/v2-10d066ee651b4091ecebef5ae0d7da9d_r.jpg&&&/figure&&p&&b&锻冶屋英雄谭&/b&&/p&&p&作者是 &a class=&member_mention& href=&http://www.zhihu.com/people/7cca4ffcac5aecdf36633abc& data-hash=&7cca4ffcac5aecdf36633abc& data-hovercard=&p$b$7cca4ffcac5aecdf36633abc&&@拼命玩三郎&/a& &/p&&p&引擎未知（希望可以告知补充 T_T）&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.taptap.com/app/11836& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TapTap链接&/a&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-64c6cafa5_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic2.zhimg.com/v2-64c6cafa5_r.jpg&&&/figure&&p&&b&武器店物语&/b&&/p&&p&作者是 &a class=&member_mention& href=&http://www.zhihu.com/people/null& data-hash=&null& data-hovercard=&p$b$null&&@timchen&/a& &/p&&p&使用的是UNITY引擎&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//store.steampowered.com/app/599460/Weapon_Shop_Fantasy/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Steam链接&/a&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-bfc1c64ad4147c17dbcc95aad4eb85c3_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&215& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic4.zhimg.com/v2-bfc1c64ad4147c17dbcc95aad4eb85c3_r.jpg&&&/figure&&p&To The Moon &/p&&p&作者是 高瞰（加拿大华人）&/p&&p&使用的是rpgmaker&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.taptap.com/app/12547& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TapTap链接&/a&&/p&&p&&br&&/p&&p&当然还有很多国人开发的像素游戏，如有忽略还请见谅。&/p&&p&&br&&/p&&p&引擎介绍用了很多篇幅，主要是因为这一部分确实很重要。&/p&&p&&b&建议题主根据自己的能力选择合适的引擎。&/b&&/p&&p&个人推荐使用UNITY引擎，其次推荐GameMakerStudio。&/p&&p&我自己在用的就是UNITY引擎。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5a4beefca1eae7b99de895f_b.jpg& data-caption=&& data-rawwidth=&358& data-rawheight=&530& data-thumbnail=&https://pic4.zhimg.com/v2-5a4beefca1eae7b99de895f_b.jpg& class=&content_image& width=&358&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&我在开发中的小游戏&/p&&p&&br&&/p&&hr&&p&&br&&/p&&h2&二、像素游戏开发经验&/h2&&p&&br&&/p&&p&绘图工具的话，我使用的是PhotoShop&/p&&p&其他工具的话推荐Aseprite&/p&&p&&br&&/p&&p&介绍一些PS像素资源处理的基础知识吧。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aedfa5da62af1f4a55df8b4_b.jpg& data-caption=&& data-rawwidth=&592& data-rawheight=&220& class=&origin_image zh-lightbox-thumb& width=&592& data-original=&https://pic1.zhimg.com/v2-aedfa5da62af1f4a55df8b4_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/v2-7eae0a0e7b6eeaf8e89ebe6_b.jpg& data-caption=&& data-rawwidth=&422& data-rawheight=&219& class=&origin_image zh-lightbox-thumb& width=&422& data-original=&https://pic3.zhimg.com/v2-7eae0a0e7b6eeaf8e89ebe6_r.jpg&&&/figure&&p&开始所有工作之前，首选项里把图像插值改为“邻近”，标尺改为“像素”，文字改为“点”。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a4b2c08561edf31f4ec3ab3_b.jpg& data-caption=&& data-rawwidth=&200& data-rawheight=&125& class=&content_image& width=&200&&&/figure&&p&在放大像素资源的时候记得使用“邻近”&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-1f932a5bee7d88c6c762842d_b.jpg& data-caption=&& data-rawwidth=&731& data-rawheight=&342& class=&origin_image zh-lightbox-thumb& width=&731& data-original=&https://pic2.zhimg.com/v2-1f932a5bee7d88c6c762842d_r.jpg&&&/figure&&p&效果示意&/p&&p&不使用邻近插值放大会导致资源“糊&掉&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&b&PS资源导出&/b&&/p&&p&动作的每一帧都制作完毕后，使用PS自带的脚本就可以快速导出了。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-bec4a22ec0b5_b.jpg& data-caption=&& data-rawwidth=&626& data-rawheight=&293& class=&origin_image zh-lightbox-thumb& width=&626& data-original=&https://pic2.zhimg.com/v2-bec4a22ec0b5_r.jpg&&&/figure&&p&点击【文件】-&【脚本】-&【将图层导出到文件】&/p&&figure&&img src=&https://pic2.zhimg.com/v2-77adc3ebb749e53350e39d_b.jpg& data-caption=&& data-rawwidth=&398& data-rawheight=&456& class=&content_image& width=&398&&&/figure&&p&记得修改资源的文件名格式，勾选上透明区域。（根据自己需求）&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7cdc17ea26e86e081726c_b.jpg& data-caption=&& data-rawwidth=&376& data-rawheight=&192& class=&content_image& width=&376&&&/figure&&p&这样就可以把动作的每一帧都导出了。&/p&&p&&br&&/p&&p&不过这样导出的文件名字里会有 “_xxxx”的无用字符，如果手动一个一个删去就太麻烦了。&/p&&p&这里给大家提供一个PYTHON脚本。（这里要感谢我们组的程序同学）&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&import sys
png_file = re.compile(&.*\d{4}_.*\.png&)
png_file2 = re.compile(&.*\d{4}[a-zA-Z]_.*\.png&)
png_file3 = re.compile(&\d{4}_&)
png_file4 = re.compile(&\d{4}[a-zA-Z]_&)
files = os.listdir(&.&)
for filename in files:
if png_file.match(filename):
newFilename = re.sub(png_file3, &&, filename)
if png_file2.match(newFilename):
newFilename = re.sub(png_file4, &&, newFilename)
os.rename(filename, newFilename)
print &rename&, filename, &-&&, newFilename
&/code&&/pre&&/div&&p&使用这个脚本就可以把文件名中的 &_xxxx&去除了。&/p&&p&&br&&/p&&p&&b&字体相关&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-cb55e492c_b.jpg& data-caption=&& data-rawwidth=&237& data-rawheight=&284& class=&content_image& width=&237&&&/figure&&p&上上图中的字体是使用宋体12点&/p&&p&其他像素字体的话推荐&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c9f8bf1cba102fa_b.jpg& data-caption=&& data-rawwidth=&321& data-rawheight=&23& class=&content_image& width=&321&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-812a418af4d826e9c3657c_b.jpg& data-caption=&& data-rawwidth=&303& data-rawheight=&43& class=&content_image& width=&303&&&/figure&&p&不过一般宋体就够用了，实在不行可以自己点。&/p&&p&&br&&/p&&p&&br&&/p&&p&&b&像素画教程&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d81ad02d2a134e50700de0_b.jpg& data-caption=&& data-rawwidth=&512& data-rawheight=&512& data-thumbnail=&https://pic1.zhimg.com/v2-d81ad02d2a134e50700de0_b.jpg& class=&origin_image zh-lightbox-thumb& width=&512& data-original=&https://pic1.zhimg.com/v2-d81ad02d2a134e50700de0_r.jpg&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5bd23da0587bca7b950709_b.jpg& data-caption=&& data-rawwidth=&512& data-rawheight=&512& data-thumbnail=&https://pic2.zhimg.com/v2-5bd23da0587bca7b950709_b.jpg& class=&origin_image zh-lightbox-thumb& width=&512& data-original=&https://pic2.zhimg.com/v2-5bd23da0587bca7b950709_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&推荐看这位大神的&a href=&http://link.zhihu.com/?target=https%3A//twitter.com/saint11& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&轻博客（需要科学上网）&/a&&/p&&p&&br&&/p&&p&&b&UNITY使用相关&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f1ebb9e79d7287d78ecc1e65b818351e_b.jpg& data-caption=&& data-rawwidth=&368& data-rawheight=&154& class=&content_image& width=&368&&&/figure&&p&Unity资源导入后 记得勾选 point&/p&&p&Point对应 邻近插值&/p&&p&Bilinear对应 两次立方&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-1ece1e720d7b82ae5cee3a_b.jpg& data-caption=&& data-rawwidth=&494& data-rawheight=&229& class=&origin_image zh-lightbox-thumb& width=&494& data-original=&https://pic3.zhimg.com/v2-1ece1e720d7b82ae5cee3a_r.jpg&&&/figure&&p&左侧资源FilterMode为Point&/p&&p&右侧资源FilterMode为Bilinear&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&b&音效相关&/b&&/p&&p&一般来说开发像素游戏的话，一般都会配上8bit音效。&/p&&p&在这里就加上一些8bit音效的小知识吧。&/p&&p&在开发初期一般都需要临时的音效资源。&/p&&p&这部分音效资源可以在&b&魔王魂&/b&找到完全免费的音效资源&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f172b3bf_b.jpg& data-caption=&& data-rawwidth=&303& data-rawheight=&187& class=&content_image& width=&303&&&/figure&&p&&a href=&http://link.zhihu.com/?target=https%3A//maoudamashii.jokersounds.com/music_bgm.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&魔王魂网站链接&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&当然如果你想自己制作音效，那当然更好。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3e64a7496b_b.jpg& data-caption=&& data-rawwidth=&576& data-rawheight=&95& class=&origin_image zh-lightbox-thumb& width=&576& data-original=&https://pic4.zhimg.com/v2-3e64a7496b_r.jpg&&&/figure&&p&FamiTracker 专门制作NES 8BIT音效，这个软件完全免费。&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//www.famitracker.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FamiTracker&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1c50f45d72a_b.jpg& data-caption=&& data-rawwidth=&800& data-rawheight=&250& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic4.zhimg.com/v2-1c50f45d72a_r.jpg&&&/figure&&p&SFX MIXER 专业制作音效&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//andrio.itch.io/sfxmixer& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SFX MIXER网页链接&/a&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-296ebb01c3f389f1af2fe17e5d2daaf4_b.jpg& data-caption=&& data-rawwidth=&640& data-rawheight=&360& data-thumbnail=&https://pic1.zhimg.com/v2-296ebb01c3f389f1af2fe17e5d2daaf4_b.jpg& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-296ebb01c3f389f1af2fe17e5d2daaf4_r.jpg&&&/figure&&p&&br&&/p&&hr&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-dabcafb2c92de65de19b8fc1_b.jpg& data-caption=&& data-rawwidth=&156& data-rawheight=&104& class=&content_image& width=&156&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-16e2dbc9_b.jpg& data-caption=&& data-rawwidth=&950& data-rawheight=&328& class=&origin_image zh-lightbox-thumb& width=&950& data-original=&https://pic2.zhimg.com/v2-16e2dbc9_r.jpg&&&/figure&&p&YMCK是日本一个8BIT音乐创作团队，他们有免费提供 &b&Magical 8bit Plug &/b&插件&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//ymck.net/download/magical8bitplug/index.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&YMCK链接&/a&&/p&&p&&br&&/p&&p&其他的还有&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.bfxr.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Bfxr. Make sound effects for your games.&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//bedroomproducersblog.com//bpb-freeware-studio-best-free-bitcrusher-vstau-plugins/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Best Free Bitcrusher VST/AU Plugins!&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//8bitmixtape.github.io/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&8bitmixtape.github.io/&/span&&span class=&invisible&&&/span&&/a&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&&br&&/p&&p&有一些比较细或者深入的知识我没有放在文章里面。&/p&&p&如果还有别的问题也可以留言回复或者私信我，我尽量解答。&/p&&p&&br&&/p&&p&&b&有想从事像素游戏开发的美术、音效、程序、策划同学欢迎私信联系我！！&/b&&/p&&p&&b&有想从事像素游戏开发的美术、音效、程序、策划同学欢迎私信联系我！！&/b&&/p&&p&&b&有想从事像素游戏开发的美术、音效、程序、策划同学欢迎私信联系我！！&/b&&/p&&p&&br&&/p&&p&例行附图&/p&&figure&&img src=&https://p}
我要回帖
更多关于 电梯图标表示什么 的文章
更多推荐
- ·?新疆和田地区地震民丰县发生了3.0级地震吗
- ·金字塔属于什么文明是哪一个早期文明地区的发源地？
- ·很精辟的人生感悟句子金句,刷爆朋友圈
- ·朋友圈很火的一段话里的幽默金句
- ·仙剑奇侠传56草泥马彩蛋介绍_仙剑奇侠传56草泥马彩蛋是什么
- ·求a darksouls3bgm place这个游戏里的bgm
- ·ps4上古卷轴ol 用ps4错误307怎么办
- ·我今天更新了绝地求生，竟然苹果平板电脑为什么不能玩绝地求生了，一直卡在菜单面，请告诉我怎么办
- ·冒险王国纪元免内购破解版金银岛秘法丛林最后一关怎么过？还有为什么不能跳？
- ·全民k歌怎样唱效果好免费k币软件哪里有
- ·有人关注和了解过梦想帝王手游新手辅助脚本吗？可曾了解过吗？
- ·超人和雷神哪个厉害vs超人
- ·使命召唤7资源3dm8中文版百度网盘
- ·复仇者联盟3彩蛋3
- ·冒险岛天空之城组队任务140级组队任务有吗，在哪？
- ·口袋妖怪究极日月cia联网破解机cia安装打升级补丁v1.2可以正常联网不被ban吗？
- ·机械师f117b游戏台式电脑主机如何，D76那个型号怎么样
- ·pc端求推荐游戏，除了英雄联盟里面的英雄谁最有可能吃鸡，吃鸡，堡垒之夜。要免费的，求推荐一款
- ·混史莱姆视频染色合集，你最喜欢什么颜色
- ·求木鱼我的世界神奇宝贝第十一季世代世代最新版
- ·一般在塞尔达游戏完成度中表示完成度用什么图标表示？
- ·推理大师六人剧本舔食游戏九人剧本， 黄浦江风云，凶手是谁啊
- ·从前有座灵剑仙缘山朱诗瑶和琼华谁厉害?
- ·杀戮空间2豪华版联机问题
- ·没有阀门定位器器，在游戏里能动吗
- ·小米6，MU10开发版，玩狂野飙车9发布时间闪退，怎么办
- ·真的有创造与魔法怎么建村?吗？
- ·有人知道不可思议之梦蝶剑侠情缘3手游官网辅助脚本吗？在哪儿找更好？
- ·朋友推荐说乐视超级电视的EUI人工智能相关专业系统很牛？
- ·谁买过乐视的乐视超级电视投屏啊？感觉如何？内容丰富不？
- ·华为手机解锁界面nova青春版怎么root
- ·苹果手机下载软件能彻底删干净吗的软件删了，那怎么下载软件呢（除开恢复出厂设置）
- ·手机苹果手机要强制开机怎么办也来不了怎么办
- ·2018年最新三星的指纹锁好不好有推荐的吗？功能好用，方便的
- ·武匠W7那款人脸识别武匠指纹锁是那产的如何？安不安全？用照片和视频那些能不能打开，有试过的吗？
- ·蓄电池修复仪骗局揭露项目可靠吗？
