艺术品般精湛的游戏「纪念碑谷」的设计之路（多图）
「纪念碑谷」（Monument Valley）游戏的空间结构是如何设计的？
伍一峰，Create games in the way of samurai.
很有意思的一个问题，吃晚饭的时候看到，就忍不住技痒写了个小 demo。
demo 里面我用的是 2D 的方法：
人物行走的路线和背景是分开的。
也就是说，背景如何荒谬，都不会影响到路线
——一般游戏都是这样做的，而关键之处就在于，
路线和背景的改变需要配合得天衣无缝，造成一种“悖论式”的错觉。
demo 中“悖论式”的背景，其实是由三张图片组成的，
在图一中可以看到，“悖论”主体中间有一条细微的分割线，没错，是两张图片 Upper 和 Lower 组合而成的。这样，Moving Cube 就可以插到两者中间，形成空间感。
1.在没有触发世界改变结构的时候，可行走路径是图中的白色部分。
2.触发世界改变之后，就更新路径。
3.配合上改变了的建筑结构，例如位置变化、渲染顺序等等，就形成了所谓的空间的悖论。
但是根据《纪念碑谷》的游戏视频，
它有许多的方块旋转、升起、场景颠倒等等的动画，应该是 3d 游戏无疑。
只是它将游戏的视角设为 isometric 而不是 perspective，也就是没有“远近”
——因为我们知道在真实的三维世界中是不可能存在这种“彭罗斯阶梯”的 [1]。
这样的话，上面提到的方法就可以运用了。
perspective 镜头是这样的
isometric 镜头是这样的
当然，上面的方案离《纪念碑谷》达到的高度，还差得很远。
--------------Update 1---------------
demo 小修改，完全利用左键进行。
--------------Update 2---------------
增加 3d 实现方案
参考资料：
David Chang
补充 USTWO 提供的一个 Behind the Scenes 视频 >>登录手工客
没有帐号，从 > >【纪念碑谷】图腾，我们一起玩吧！【纪念碑谷】图腾，我们一起玩吧！主要材料：超轻粘土见图～所需工具：手一双制作步骤：第1步：照样成品镇楼（手越发残了～）第2步：整个没什么技术含量，就是我手残才变成那副模样。来张原图作参考。第3步：这就是本次所需材料（PS.那个蓝是偏绿的那种，不是照片中那种）第4步：先弄四个正方体（我弄得不好别打脸?）第5步：搓一根长长的黄色粘土，如图弄好（话说我是从下往上做的，因为下面相对来说简单）第6步：此处不多言第7步：如图，看不清请看步骤2中的网图（话说我这倒数第二层放反了？游戏里是我这样的的说……）第8步：就这样一层一层地弄第9步：完工！大家不喜勿喷好么～小贴士：手残的我都敢发教程出来，你有没有胆量在下面发学习作品来挑战，看看谁的更萌？分享到：大家参照《【纪念碑谷】图腾，我们一起玩吧！》教程做的作品关于《【纪念碑谷】图腾，我们一起玩吧！》教程的评论：猜你喜欢人气 393人气 752人气 1127手工客版权声明
《【纪念碑谷】图腾，我们一起玩吧！》教程创建于
版权归作者所有，没有作者本人的书面许可任何人不得转载或使用整体或任何部分的内容。
24小时更新•••••小编力荐•••••7被浏览1,350分享邀请回答0添加评论分享收藏感谢收起手把手教你用AE和AI做纪念碑谷风格场景动画
书接上一回，这次我们就让小树小鱼们都动起来吧！
这次更新是紧接上一回的的，有感兴趣的同学可以先回头学学。这次翻译已经得到原作者的同意和授权，原作者非常nice，但很遗憾的是原作者由于现在的工作和自己在开发游戏，所以暂时这段时间都不会再有教程更新了。由于我也喜欢这类型风格的插画，在今后肯定也会带来自己学习的一些经验和教程，请大家敬请期待。在上次的教程，我们做了一个矢量等距视图的岛屿，今天我们将让岛屿中一些元素动起来。我们将使用Adobe Illustrator中准备的文件和After Effects制作动画。本教程的目的是要采取这个例子，来为我们以后制作动画增添一点生活色彩。我已经准备了一些文件（附件下载），可帮助您按照教程制作。下载完成后，我们就可以开始准备开始制作了。1.动画制作前的准备（这一步可以略过，原文作者已经准备好需要的文件了，此步骤主要针对有跟上一教程制作的同学）打开Ai，动画中会动的元素包含：水和球的波纹环游小岛的小鱼那些随风摇曳的树与阳伞理清这里的关系，这有助我们集中于动画的制作，并有一个明确的目标，还有我们要实现的效果。步骤1为了将ai文件导入至AE更好地进行编辑，我们一定要在Ai图层中进行一些调整。为了制作时更清楚，我们将需要动起来的元素分开来。打开(Command-O)文件"Ressource_animation.ai"和"Island.ai".步骤2首先，在“Island.ai”中选择一条鱼，复制(Command-C) 和粘贴(Command-F) 到 文件"Ressource_animation.ai"中“Fish”图层。现在，更改透明度（窗口&透明度）至100％正常，并设置颜色（#652C90）。这样做的原因步骤是，我们将所有的元素转换成可编辑的矢量图形，在AE里面清理这些文件要比Ai棘手很多。这个任务是乏味的，当然你可以使用文件“Final_Ressource_Animation.ai”直接开始。2.让小岛的波纹动起来。步骤1打开After Effects和文件“Animation_island.aep”，并导入文件“Final_Ressource_Animation.ai”文件。选择“合成－保持图层大小”并且将此拖入"resources"文件夹里。创建一个新的合成&(Command-N)，设置如图。步骤2双击该合成，并且将"Ressources" 文件中的"Ripple"图层加入其中。然后，将该层转换为矢量图形（图层&从矢量图层创建形状）。添加修改偏移（添加&位移路径），并设置偏移量为1个像素。改变图层Ripple混合模式为叠加，不透明度（T）为40％。步骤3要添加关键帧，请单击秒表图标，然后1秒后增加一个关键帧，其值为8像素。完成动画的循环。创建一个新的合成“Loop_ripple”，并将其拖放至合成“Ripple”中。现在，点击合成“Ripple”激活时间重映射（Command-Option-T）。'此处原文应该有误快捷键写为了Command-Option-R'在秒表图标按住Alt键单击添加Loopout表达式，如下图所示loopOut("pingpong");乒乓球方法会做1和8之间的来回和两个关键帧之间来回循环。您可能会注意到动画消失在1秒。为了解决这个问题，扩展合成“Ripple”的持续时间（单击并拖动）。那么最后一个关键帧前添加一个关键帧，并删除最后一个关键帧。3.动起来吧！环游小岛的小鱼们！步骤1创建一个新的合成，设置如下图所示。步骤2双击该合成，并添加在资源文件夹中的图层“Fish”进来。然后，将矢量图层转换为形状并且用锚点工具（Y）改变小鱼的锚点。用钢笔工具（G）去创造小鱼游动的路径。确保路径包含最少三个顶点。步骤3在组1添加关键帧（位置和旋转），而不是图层"Fish"。选择您之前创建的路径，展开并选择路径，复制并粘贴到组1的位置。现在的鱼跟着你画的路径，因此延长关键帧六秒。复制(Command-D)组1。选择之前画的路径，并双击选择另一个顶点。左键单击更改它的顶点（蒙版和形状路径&设置第一个顶点）。选择路径，展开并选择属性路径，复制并粘贴到组2的位置变换。重复之前的操作创建第三条小鱼。步骤4现在，每两秒钟调整旋转，以配合它们走的那条路。点击图形编辑器中，选择所有关键帧。拖动黄色手柄更改插值贝塞尔曲线来匹配每个关键帧之间的曲线。添加关键帧，如果你觉得转换还不够自然。你可以重复这一步以到达你想要的效果，由于时间的关系我做了做了三条路径。如果你满意的你创造欢乐的效鱼群，那我们就去把小树们动起来吧！4.制作随风摇曳的小树和阳伞步骤1创建一个新的合成，设置如下图所示。步骤2添加图层"Tree"，然后矢量图层转换成形状。添加两个组，一组为树干（形状和高光），一个用于树叶（形状和高光）。在树干组内拖动树叶组。然后复制图层，删除其他东西剩下树干，并在Trunk_texture上创建一个透明通道。最后，改变这两个组和图层的锚点（Y），并调整光线（包括树和叶）的混合模式为叠加，60％。步骤3添加关键帧（倾斜），并添加另一个关键帧，树干组（1秒的值 -8）的倾斜和树叶组（1秒的值 12）。树干组的值分别复制粘贴到Mask_texture和Trunk_texture的关键帧属（倾斜）。步骤4完成动画的循环。&创建一个新的合成“Loop_tree”，并将其拖放至合成“Tree”中。现在，也是在合成“Tree”激活时间重映射。在秒表图标按住Alt键单击添加Loopout表达式，如下所示。loopOut("pingpong");现在，使用图形编辑器以自己的喜好调整动效。继续丰满场景，复制和粘贴树木。你可以用"background_top.png"和&"background_bot.png"作为位置的参考。阳伞的制作也是同样的步骤。完成后，可以继续调整一下动画。5.导出和调整GIF动画步骤1创建一个新的合成，设置如下图所示。步骤2将每个动画和“background_top.png”、&"background_bot.png"完成最后的场景。然后添加沙滩巾到场景里。然后，添加排球进入现场，将它们转换成形状，阴影部分混合模式为正片叠底 40%，高光部分为叠加，60％。添加蒙版，使用钢笔工具，修改蒙版的类型并且画出排球在水下的阴影。这样复制每个球（Command-D键），反转这些球的蒙版，拖放第一批至合成“Loop_ripple”下。步骤3添加纯色(Command-Y)，然后添加渐变效果(效果&生成)。改变渐变到起始色（＃D3E169）和终结色（＃091098）和混合模式设置为叠加,80％不透明度（T）。步骤4添加到渲染队列(Command-M／Ctrl-Command-M) 。FLV（输出模块& FLV），或者直接预览。借此机会看看动画，并调整。如果你满意动画效果，添加到另一个渲染文件(Command-M／Ctrl-Command-M) 并且导出为PNG序列。步骤5打开PS,并且打开你的PNG序列。使用调整面板（窗口&调整）进行调整，例如是修改一下亮度和对比度，主要根据个人所需。步骤6然后，导出GIF&(Command-Alt-Shift-E)&以保存你的GIF动画。循环选项选择永远并且调整GIF的质量。如果你想分享你的作品这一步是非常重要的。在Dribbble平台上分享GIF格式必须是8MB以下的，UI中国是5MB以下。上面是我的输出设置，仅供参考。恭喜了！哈哈！在本教程中，您可以通过让几个元素动起来和调整场景的色调就营造了一个很有活泼的场景。请自由发表意见，并告诉我你的结果，非常很乐意看到你的作品。
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
160人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的首页推荐大作
手把手教你用AE和AI做纪念碑谷风格场景动画
在她入驻到UI中国的日子里
总共吸引了14575位设计师的驻足流连
总共收获了69位设计师的由衷赞赏
总共获得了160位设计师的悉心珍藏
总共引起了22位设计师的深入讨论
依然要删除吗？