前端与游戏的碰撞前端的游戏通常是一些h5小游戏和互动性页面，有的案例也过于老旧。本文想从笔者视角讲一讲游戏，同时分享一些

分享目标

让大家在较短的篇幅，能有以下收获：

了解一个游戏的生产全流程
了解游戏策划的基础知识
了解游戏美术的基础知识
了解游戏程序的基础知识

为大家提供一些思路，用游戏化的方式解决更多的问题。

1 前言

1.1 游戏是什么

游戏是什么，相信各位游戏玩家们心中都有自己的答案。“游戏就像调料，虽然不能当饭吃，但没有就吃不下饭”，可见游戏让生活多姿多彩。

其实很久之前的游戏，都是纸面游戏，可见做游戏最重要的是想法和创意。但是在现在的环境下，好游戏层出不穷，要做一个好的游戏，各方面知识都是不可或缺的。

简单来说，游戏就是按照策划的逻辑，用美术资源加上程序实现出来。所以比较重要的就是三块内容，策划、美术和程序，是不是发现前端部分做的事情和做一个游戏很像，需要PM、UI这些协作方，一起完成一个产品。独立游戏开发者就是一个人承接这三块，可能重策划轻程序和美术，比如人生重开游戏，合成大西瓜。目前市面上大部分的文章都是重程序的讲解，脱离了教程，自己就无从下手了，其实游戏有很多需要学习的点，比如玩法机制，美术交互。

1.2 产品游戏化趋势

如果问前端可以做什么，那么相信大家会罗列很多方向，如中后台方向、可视化方向、智能化方向、互动游戏化方向、音视频方向、工程化方向、跨端方向。没错，前端有无限可能，那么我将围绕互动游戏化方向讲述一些有意思的内容。

1.2.1 拉新促活

其实可以看到，现在很多宣传类的拉新促活都采取了游戏化的机制，游戏能够更好的吸引用户，比如阿里巴巴的《集福卡》、《蚂蚁森林》，拼多多的《集金币》。游戏重互动，操作简单、有趣的互动能够调动玩家的积极性。合理的运用游戏，能够通过特定的方式去训练玩家，从而使玩家进行相关实践来收获知识，进而解决社会和行业问题。

1.2.2 GameFi：NFT 市场的下一个赛点

GameFi

区块链技术延伸而出的GameFi模式，让各市场高度注意到NFT和加密货币这类的虚拟数位资产与游戏结合的发展性。GameFi可解释为「游戏化金融」，区块链与加密货币等数位资产的结合发展，使游戏中虚拟资产的所有权被获认可，进而转化真正的经济价值。过往有则推特文，让人难以理解的讯息，天价250万美元卖出游戏虚拟资产，这样的讯息对许多人来说是无法想像的世界；也正因这笔交易引爆出背后关键，就是「NFT」。

NFT游戏化

目前多侧重于NFT而非游戏本身的链游，是否能在游戏品质与好玩程度上真正抓住玩家的心、打入更广大的玩家群，还需要时间来发展，不过可以明显看到的是，GameFi正展现出元宇宙成形的可能性。人们对游戏的兴趣和热情，容易驱动市场去了解和采用新技术，NFT游戏化带来更多投资者与玩家，并激发更多创新的想像，促进游戏化金融世界。我们可以看到区块链相关应用连结已变得更加强大茁壮，强劲的生态持续在快速扩充着，全世正处于元宇宙新时代的历史转捩点上。区块链和加密货币的兴起，众人争相加入游戏世界。

2 策划做了什么

策划其实就是产品经理，只不过负责的产品是游戏。游戏可以重玩法，也可以重剧情。比如文字向游戏，就需要策划去思考有趣的剧情，引人入胜。而重玩法的游戏，就类似格斗、卡牌类，需要设计好各个数值和机制，确保机制的相互作用合理。

2.1 剧情

故事和游戏分属两个类别。故事通常是单线程的，而游戏则可以是线性的，也可以是非线性的，有着更多的可能。剧情故事对游戏的目标有着强化作用，是能引出游戏任务的结构，如果没有一个故事，玩家可能会感到迷惑。当然，故事不需要过于冗长，合适点睛即可，其作用就是铺垫，引起玩家的探索欲。比如就横版跳跃类型的游戏来说，冒险岛和超级马里奥都属于这个类别，可以说游戏机制差异性不大。但两者故事背景设定生动有趣且与众不同，因而吸引了大量玩家。优秀的游戏会让玩家觉得他就在故事之中，而太多的背景铺垫则会让玩家想象力受限，甚至在游戏开始就预见了游戏结果。

2.2 玩法机制

机制在游戏中的地位十分重要，可以说机制的相互作用推动了游戏的进度。当然，机制的种类是较为丰富的。比较常见的机制有物理机制、渐进机制、社交互动、纲要式指引、奖励机制、成就机制等。

2.2.1 物理机制

物理是关于运动和力的自然科学，是决定游戏真实感的重要因素，物体的移动方式和状态表现对玩家体验上的帮助都是尤为重要的。当然在游戏中，物理特性不一定需要与现实生活一致，相反，不一样的特性甚至是夸张的特性反而能让游戏有着不同的体验，比如说卡通物理。《getting over it》的物理机制就做的很不错，能够让玩家清晰感受杠杆作用力。

2.2.2 渐进机制

渐进机制规定了游戏的进度，通过关卡来控制目标的实现。游戏在叙事中，能够给予玩家空间，让玩家能够自由控制。通俗来说，就是一点点的解决问题，突破关卡。同时，根据抽象出来不同的关卡，可以与突显机制相结合。

2.2.3 社交互动

社交互动让玩家不仅与游戏产生交互，还能够与其他玩家交互，比如聊天、互赠礼物、邀请好友等。大部分游戏一开始都是以群体形式进行的，比如桌面游戏——大富翁、飞行棋，传统民间游戏——跳皮筋、拔河。游戏设计可以充分利用竞争、反馈，让用户感知到所作所为能够对自身社会地位有一定的影响，让玩家能够充分表达自己，从而提高玩家粘性。

2.2.4 纲要式指引

纲要式指引在游戏中能够指导玩家进行相关操作，玩家在游戏一开始可能并不清楚该如何操作，这时候新手引导就能够快速向玩家传递核心信息。同样的，例如路标、进度都能够让玩家对游戏的了解更进一步。

2.2.5 奖励机制

奖励作为游戏里面的一种激励手段有着刺激玩家多巴胺分泌的能力，意想不到的奖励能够给玩家带来惊喜。固定的奖励如关卡解锁、等级提升对玩家来说也是一种及时反馈，能够激励玩家更深入探索游戏。

2.2.6 成就机制

成就往往是通过一个个挑战来达成的，完成这些挑战不仅提升了玩家的游戏能力，而且有助于保持玩家对游戏的兴趣。勋章、证书这类物理象征能够证明玩家完成了挑战、达成了目标。在一个个里程碑里挑战所学和掌握的知识，也对游戏的最终目标进度的推进。

2.2.7 机制的平衡

平衡是一种方法，在游戏设计中是十分重要的。平衡的展示依靠机制的调整，通过机制来改变游戏中的道具、流程、策略，从而使游戏趋于平衡。那么关于机制的平衡，其重点在于挑战与成功、奖赏与惩罚、自由体验与受控体验、细节与想象这四个方面。

挑战与成功的平衡能够让玩家一直保留在心流通道内，不会因为游戏难度较高而沮丧，也不会因为游戏难度较低而无趣。挑战是游戏的核心，通关一个游戏本身也是一种挑战。平衡挑战与成功的手段也有很多，比如随着完成每次挑战后将难度提升，这样渐进的方式能够让玩家慢慢成长起来。同时，给成功的也设置一些门槛，比如完成一系列指标才算成功，有一个不符合要求都得重新开始。可以邀请有较为丰富游戏经验的玩家进行游戏试玩，将他们提出的问题进行改进。游戏中也需要有一些较为容易的部分，能够让玩家快速解决，以此获得满足感。

奖赏与惩罚的平衡能够增进玩家在游戏中的乐趣，奖赏与惩罚在游戏中的展现往往为互为对方的相反面。平衡奖赏与惩罚往往依据于游戏心理学，良好的平衡能够满足玩家的心理需求。奖赏能够告诉玩家行为是正确的，给予玩家好评。奖赏的方式有很多种，例如通过赞美、分数、演出、地位、资源来表现。而惩罚则像是一种调味品，游戏里的调节剂。轻度合适的惩罚，能够让玩家做出决定时更加谨慎。惩罚的方式也有很多种，如中断游戏、回退、暂时剥夺能力、消耗资源等。游戏设计时对惩罚程度的把控需要斟酌，过激的惩罚会令玩家丧失斗志。综合来看，奖赏和惩罚都是对玩家的一种反馈，运用合理能够增强玩家粘性。

自由体验与受控体验的平衡能够体现出游戏的互动性。游戏中，玩家需要有控制权，但并不能将控制权完全交予玩家。因为游戏设计者无法在游戏中控制玩家的行为，如果让玩家自由的掌控镜头，倘若让镜头处于一个错误的位置，那么游戏视觉效果可能会受到很大的影响。如果完全固定镜头，又会让玩家觉得自由度受限。给予玩家一个可控的范围，无疑是最好的方式，既满足了玩家的控制欲，让玩家感到自由、有趣，同时游戏设计者也能够对玩家在游戏中的行为进行掌控。

细节与想象的平衡让游戏在提供一定细节元素以此提升游戏丰富度的同时，使玩家的想象力也得以充分发挥。高质量的细节能够提高游戏体验，相反，质量较为一般的细节反倒会对游戏产生负面影响。不如用留白让玩家自由填补，激发玩家的想象力，玩家想象的内容反而有可能比一些耗费精力的制作还要精彩。

2.3 游戏设计要素

游戏中存在许多元素，这些元素共同作用，相互影响。根据Jesse Schell的四元法来看，Schell将游戏组成元素大致分为四类，分别为机制、故事、美学、技术。无论哪种类型的游戏，这四种基本元素都是在其中都是不可缺少的。

2.3.1 核心循环理论

核心循环理论是指玩家在游戏中能够重复的进行一些行动，这些行动存在一定的顺序，同时可以包含多个循环。游戏中信息的传递是呈螺旋状的，从玩家到游戏，再由游戏到玩家，循环往复，整体趋势是上升的。每经历一轮，都会给玩家带来反馈，玩家通过反馈不断强化对游戏的认知，进而对下一步的行为有着更好的把控。良好的核心循环有着清晰的目标和进度，有着一定的深度，玩家对进度有着感知，能够感受到其中的变化。

2.3.2 控制的艺术性

玩家在游戏中，在互动的同时，还需要有控制感。看起来似乎玩家拥有控制权，就可以获得自由。但过度的自由会对游戏本身产生负面影响，所以这种自由并不是无限度的。实际上，在游戏中给玩家自由感的体验即可，并不需要真正的自由。由于游戏设计师是无法控制玩家进入游戏后的行为，因此，间接控制作为调节自由感的手段油然而生。那么，间接控制也有很多种方式，采用合适的方式，能够让游戏体验大幅提升。首先，第一种方式就是限制。限制就像做选择题一样，有着固定数量的选项可以选择，并没有额外的选项，这样就对玩家进行了控制。因为太多的选择，就像噪声一样，会令玩家对游戏的目标产生迷惑，从而干扰游戏正常推进。而第二种方式则是通过目标去控制这些目标能够让玩家意识到应该如何去做，继而做出相应的操作。因为玩家有着清晰的目标，所以他们会直接去做对实现目标有利的事情。所以在游戏中，还可以添加一些其他操作，增强游戏的自由感。比如玩家可以与书籍产生交互，从而了解一些信息，但这些信息可能与游戏的目标并不强相关。间接控制的第三种方式则是通过界面，界面能够承载很多信息。

2.4 规则

游戏操作是指玩家达成游戏目标所采取的行为和进行游戏的方式方法，游戏规则是对玩家在游戏中行为进行约束的一种手段。可以说，操作与规则定义了游戏。规则设计伊始，需要考虑规则的数量是否合适，规则的描述是否清晰，规则与游戏的关系是否合理。

在规则设计时，也要遵循相应的原则。规则设计需要具备简单性、一致性、易用性、平衡性。简单性是指规则本身简单，易于理解。简单的规则能够让玩家更容易掌握游戏，玩家的大脑更容易计算生成相应的策略。比如围棋游戏，落子规则简单，但是不同的组合产生的策略是繁多精彩的。一致性是指游戏的规则与现实世界保持一致，比如常识性规则、物理规则，大部分跳跃型游戏都需要遵循万有引力定律，会受到重力加速度的影响，让玩家觉得真实感很强。易用性是指规则在操作时是否繁琐，如果每个流程都让玩家控制，会导致游戏体验下降，尽量只将核心操作控制交予玩家。平衡性是指规则在游戏中发挥的作用是否平衡，如果有的规则较强则会导致频繁使用，有的规则较弱则会出现频率降低，这种现象无疑让游戏选择性降低。规则设计是游戏中各个元素联系的纽带，好的规则设计则让这些元素联系的更为巧妙，更能吸引玩家参与。比如成就能够强化玩家的本体意识，让玩家对游戏产生认同感。

2.5 关卡

关卡将游戏分解成彼此独立又相互联系的部分，让玩家可以自由把控游戏的节奏。同时，对于游戏设计师而言，也能合理制定开发计划，使得开发更有逻辑性。通常关卡会以场景为单位进行设计，比如马里奥系列的游戏，每个关卡都是一个场景。以场景为单位对关卡进行设计还需要考虑到一些常驻元素的设计，如全局菜单栏，关卡选择页等，因为这种常驻元素每个关卡都会存在或者与其发生联系，所以合理规划能够使其减少内存消耗，从而提高游戏性能。

当然，在设计关卡时也需要遵循一定的原则，比如需要有明确的导向，需要注意关卡的步调，展开内容需要循序渐进，任务难度也需要进行控制，合理运用引导手段，尽量满足玩家的期待等。关卡应当有具体的行为和目标，并且有着入口和出口。

3 美术做了什么

良好的美术设计对游戏本身起着正向作用，吸引玩家的眼球，提升游戏粘性。在美术设计时，需要注意突出主题、相互关联和明确作用。无论是道具和场景的设计，都应当对主题有烘托作用。每个游戏元素都需要彼此相互关联，不能有明显的风格割裂。在游戏中，每个元素的美术设计都要有明确的目的性，能够反映对其他元素的影响。

3.1 资源

巧妇难为无米之炊，游戏资源是十分重要的。资源分为图片、声音、视频，其实就是多媒体资源。相信大家在兴致勃勃想做游戏的时候，第一个想到的就是没有美术，看了很多程序员，他们都找一些别人提供的资源包，但是太局限了。如果你想做一个全新的游戏，资源是必不可少的。那么如何获取美术资源，其实所有的资源都可以通过下载或制作两种途径获得。

3.1.1 二维资源

首先就是自己制作，可以自己绘画，然后转拓为电子稿，比如《隐藏的家伙们》就是纯手绘的游戏。

那么有人会问了，我美术功底为0，怎么办呢。各大资源网站能够给你想要的答案，开个会员即可，拼拼凑凑一下，这样拼凑会导致游戏整体风格不一致，像卡通人物装了个写实的手，混搭风格，但也只能降低要求了。最好的就是找资源，自己再加工加工，此时需要一定的设计功底，怎么提升设计功底，与所有技术活一样，多看（提高审美）多练（提高技术）。

如果想获取合适的素材，可以反编译游戏拿到资源包。但这显然是下下策，最好是掌握一些ps相关技能，结合资源搜索，将资源改造成自己想要的。

静态资源

工具： PhotoShop（推荐）、Adobe Illustrator、Sketch

如UI、角色设定图、图标等，不会随着时间的变化而变化，通过PhotoShop、Adobe Illustrator、Sketch制作即可。

逐帧动画

工具： After Effects（推荐）、PhotoShop

我们都知道，通常游戏中的2D动画一般由精灵图组成，那么如何生成2D动画精灵图呢，可以通过PhotoShop、After Effects制作。

通常流程是在PhotoShop中绘制完，导入AfterEffect中，进行相关制作，然后导出序列图。此时还无法直接用于游戏，需要将这些图合并为一个精灵图，可以借助TexturePacker实现。

骨骼动画

工具： DragonBone（免费）、spine（付费-推荐）、After Effects（难度高）

大型的精灵图片段显然会导致游戏体积过大，那么龙骨动画就是目前比较火的选择，可以看到很多游戏都运用了龙骨动画，比如王者荣耀。

IK反向动力学：通常给角色绑骨需要用到反向动力学，因为如果一个个摆动实在是太耗费时间了，需要每个部件都key帧。

lottie动画

工具： After Effects

lottie动画通常用于一些复杂动画的直出，由设计师调好动画，程序只需要控制播放，无需关心实现逻辑。lottie动画通常由图片资源和json组成，通过使用特定的SDK包导入游戏中。

3.1.2 三维资源

如果说二维资源可以通过制作或者素材加改造的方式，那么三维资源制作耗时会比较长，最好是去模型网下合适的，适当修改。如果实在是罕见的模型，就需要自己找图纸去建模了。

工具：

建模阶段：maya 、3ds、blender（推荐）

雕刻阶段：ipad：nomad PC：zbrush

材质阶段：substance painter

程序化建模&特效：Houdini

制作模型步骤：

制作一个模型，通常需要建模、雕刻、赋予材质，根据需要进行绑骨制作动画。

首先建模需要三视图，可以在网上找，也可以自己根据照片绘制。

雕刻可以让模型具备更多细节，但模型面数越多，对性能越不友好，通常会制作高模，然后绘制相应的贴图，再转为低模。这就是为什么王者荣耀内部与展示界面不一样的原因。

如果是需要动画的模型，如人物角色，就需要制作动画，通常角色类型的动画需要绑定骨骼。绑定完成后，可以通过动作捕捉设备进行动作录制，也可以根据视频进行key帧。或者根据视频AI算法，提取视频中的动作。当然，也可以去相应的网站下载动作文件。动作捕捉和视频提取需要人工进行修正，这种动作会更加流畅真实。key帧需要功底深厚的动画师来制作，普通人可能做出来的是“学习三年动画”那种效果。

等所有模型都制作完毕后，可以导出模型（常见格式：obj、fbx、glb）到substance painter进行材质绘制。

批量生成：

如果想大批量生产模型，如地理环境或者nft模型，则需要用到程序化建模，批量生成等手段。

3.1.3 声音资源

音效能够让游戏的反馈更加强烈，比如常见的点击，如果只有动画，那么带来的反馈感会稍显不足。而合适的音效会带来不一样的感受，比如电话的按钮音，金属音。主界面中，要想突显出热闹的情况，合适的画面加上人声鼎沸的音效才能够让氛围更显突出。

3.2 场景

3.2.1 氛围营造

场景最重要的功能是营造氛围，增强玩家的游戏代入感。游戏场景会包含着一切游戏实体元素，比如建筑、工具、天空、环境等。场景的主要目的是控制玩家的体验，场景设计主要做的事情就是制造空间，当玩家认为场景设计的很不错而称赞时，实际上是场景创造了出色的体验。

3.2.2 光影作用

场景设计中，光影的作用也十分重要，凸显游戏的真实感离不开光影。光影能够将物体的质感表现出来，材质是粗糙还是光滑，颜色是鲜艳还是暗淡在光影的作用下一目了然。同时，光影还能够展现空间体积感和透视关系。

3.2.3 空间布局

因为是构造的虚拟空间，所以玩家的视角完全取决于摄像机的位置。因此，在游戏场景中，物体和摄像机的摆放也颇有考究，需要让玩家能够感知到空间之间相互的关系。有时候，物体的尺寸也需要进行调整，不能按照真实世界中物体的尺寸去放置，这样会让画面显得奇怪拥挤。继而需要将空间放大，将物体的尺寸也稍微放大，并将其位置进行分散。

3.3 角色&道具

游戏中的角色形象是玩家们视觉的聚焦点，游戏角色越丰富，游戏的可持续性就越强。好的游戏角色也能够成为一个IP，例如马里奥，需要结合策划的人物设定进行形象设计。

3.6 交互

交互设计对游戏的艺术体验和游戏性影响重大，游戏中的许多元素都是经过最大化的取舍后留下的。合理删除游戏中的看似必要的元素，能够让美术、场景的发挥空间更大，同时增强游戏的情感和代入感。

3.6.1 UI和界面设计

任何游戏都蕴含着需要向玩家传递的信息，而界面的重要目的就是用来传递信息，这是与玩家沟通的最好方式。不同信息的优先级也各不相同，并不是所有信息都同样重要。将信息按照重要程度进行分类，是设计UI与界面的依据。而界面上往往也存在许多信息通道，游戏设计者控制信息通道的位置，一般也较为灵活。通常情况下，信息通道会出现在界面的边界处，比如正上方、右下方、左下方等。一个完整的界面通常由主显示区、辅助显示区和信息控制面板组成。

3.6.2 动画与动效设计

空白点击反馈动画

空白点击反馈动画通常能够满足玩家对操作反馈的需求，优化体验。空白点击动画的设计应该是呈现辐射型，能够将点击的冲击扩散感反映出来。同时，动画还需要考虑到时长的约束，因为游戏内玩家的操作是很多的，反馈动画本身不具有功能性，无需占用大量的时间。动画应该能够凸显点击行为的迅速果断，因此后半动画应该是更快速的终止行为。

过场动画

过场动画能够承上启下，用动画的形式，将玩家拉入游戏场景。转场动画也是过场动画的一部分，通常是界面之间的切换，如果硬切会显得生硬不自然。而淡入淡出的方式，又少了设计的精细度。

动效设计

动效设计通常需要经过多个流程才能实现落地，首先需要结合需求本身进行思考，由于《弄影》是写实风格，模拟真实的操作，所以动效也尽量与现实的交互保持一致。当找好对应的参考依据后，指定相关设计思路，再用Adobe After Effects这类辅助工具进行设计预演，有了初步版本后，查看技术方案是否合适，先接入到程序中。之后不断的调试设计预演，迭代优化到最佳后，核验程序中的效果是否与设计一致，如果不一致，则需要在程序中调试效果，通常可以用程序暴露出的参数去调试动效。

3.6.3 镜头设计

在游戏中，玩家所见取决于摄像机，三维游戏更是如此，巧妙镜头的设计能够让视觉效果更加有趣。三维游戏中，涉及到很多相机动画，好的角度能帮助玩家快速沉浸入游戏，而不好的镜头摆放则会让玩家觉得“出戏”。镜头设计也可以加入夸张的效果，会有不一样的效果。比如加上一些相机滤镜，会让画面有不一样的惊喜。甚至还可以用相机堆叠模拟一些特殊效果，比如带上HUD显示器。

4 程序做了什么

4.1 引擎介绍

游戏引擎是指集成了一些内置组件和相关工具，能够更好的给游戏开发赋能的系统，轻松实现游戏跨平台发布的需求。通常游戏引擎一般包括了资源系统、事件系统、UI 系统、动画系统、声音系统、物理系统、粒子系统、地形系统、资源管理、图形渲染，设计者能够借助其更好更快的完成游戏开发，而不是从零开始。常见的游戏引擎工具有很多，比如Epic Games公司的虚幻引擎、MIT 许可的开源引擎Godot、以JavaScript开发语言的Cocos Creator、Unity Technologies公司的Unity。其实上述引擎都支持跨平台生成，可以生成对应平台的安装包，比如安卓、Ios、PC和Web平台。

但我们作为前端开发工程师，就想用javascript来写游戏，抛开游戏性能来说，可以做的就是轻量互动游戏，否则浏览器性能吃不消。习惯使用js、ts推荐使用cocos creator，功能丰富。追求性能的话，还是推荐使用unity开发，插件生态较为丰富，能快速实现很多效果。不过，做游戏不应拘泥于语言选择，而是看游戏是否能达到预期效果。

	优势	劣势
pixijs（2D）	拓展性高、更倾向于渲染能力的扩展	繁杂的功能对接麻烦，如spine/dragonbone/lottie
Evajs（2D）	拓展性高、更有利于互动游戏能力的扩展、无障碍化	功能相对不够完善，依赖社区维护
threejs（3D）	抽象出了3D渲染的细节，不用纯写webGL、支持交互、速度快、功能强、可拓展性高、涵盖范围窄，易学易玩	不是一个游戏引擎，也不是一个虚拟现实平台，需要二次封装，不适合多人协作
babylonjs（3D）	强大的编辑器、节点编辑器、跨平台原生应用部署，大型项目使用	学习成本较高，难以快速出活
cocos creator（2D&3D）游戏引擎	封装好、内置模块，开箱即用	可拓展性、灵活性不高

4.2 交互与系统控制

4.2.1 游戏输入与游戏事件

（1）游戏操作

游戏中的各项操作都会触发事件，如点击事件，长按事件，拖拽事件，通过这些事件去执行相应的操作，让游戏能够有条不紊的运行。添加事件一般有三种方法，分别是实现自定义类的事件接口、给对象挂载Event Trigger组件以及通过射线检测RayCastHitControl。这些方法从本质上来说，一个是通过事件触发，另一个是通过射线穿透触发。

（2）手势操作

如果是移动端游戏，通常会使用到双指缩放，双指旋转，多指触摸等手势操作，相关扩展包提供了多指操作的接口，提供了相应的手势数据，能够监听手势事件，控制可操作的手指数量。

4.2.2 游戏反馈

游戏中需要给物体增加反馈效果，高亮表示物体被选中，带有聚焦效果。而进度环则能够让玩家意识到流程目前的百分比。拖尾效果能让玩家了解刻刀走向，及时调整刻刀的转向。同样，相应的新手指引，能够让玩家更好的进行下一步操作，避免迷茫。

4.2.3 关卡控制

本项目由一个个关卡组成，每个关卡都包含了一个或多个场景。每个关卡中都内置关卡切换逻辑，但关卡切换逻辑与关卡本身的内容应该是分离的，因此应该用常驻对象去控制相关逻辑。通常用一个变量currentSceneIndex记录当前大关卡的索引号，在大关卡切换时，需要及时更新当前currentSceneIndex，而后其他依赖currentSceneIndex的数据将在Start周期函数内进行更新，比如关卡的标题文字、图片信息。而进入大关卡中的小关卡时，通常小关卡数目较多，控制其跳转，则需要进行遍历赋值，这样会更加高效。同时，需要一个变量currentUnlockSceneIndex记录当前解锁关卡，这样小关卡索引在currentUnlockSceneIndex之后的将无法跳转。每进入新的一关，都需要更新currentUnlockSceneIndex的值。

4.2.4 存档和读档

从游戏体验的角度来看，由于玩家退出游戏，重新进入游戏后如果需要重复进行先前的线性任务才能到上次未完成的任务，这样的游戏体验较为糟糕，因此存档和读档非常有必要。游戏中存在大量需要记录的数据，有的数据重启游戏后又会重置，有的数据则需要持久化存储。存档主要是记录这些需要持久化存储的数据的，持久化存储应用场景在本游戏中占比较大，比如记录玩家是否首次进入游戏，从而在后续进入游戏时，开场动画部分会显示跳过按钮；记录玩家解锁的关卡号，显示已解锁和未解锁关卡；PlayerPrefs进行持久化数据存储，将数据由JSON转化为字符串存储。通用，用户绘制的材质数据则通过转化为base64的格式后用PlayerPrefs.SetString来存储。

4.3 渲染

4.3.1 PBR

基于物理的渲染（Physically Based Rendering，PBR）是指使用基于物理原理和微平面理论建模的着色/光照模型，以及使用从现实中测量的表面参数来准确表示真实世界材质的渲染理念。

4.3.2 NPR

非真实感渲染(Non Photorealistic Rendering，NPR)是指利用计算机模拟各种视觉艺术的绘制风格，也用于发展新的绘制风格。比如模拟中国画、水彩、素描、油画、版画等艺术风格。NPR也可以把三维场景渲染出丰富的、特别的新视觉效果，使它具备创新的功能。

4.3.3 着色器与材质

着色器与材质的关系密不可分，着色器是一段运行在图形显卡上包含了指令操作的代码，着色器本身是无法直接赋予模型的，需要材质这个载体来关联着色器，将场景中的物体渲染为预期效果。一个着色器可以与多个材质关联在一起，但一个材质只能关联一个着色器。可以说材质相当于着色器的实例，通过不同的参数呈现不同的效果。并且当着色器改变时，所有与其关联的材质都会发生相应的变化。

标准着色器

游戏中，大部分物体使用标准着色器赋予的材质。通过Substance Painter导出符合规范的贴图，将相应的贴图放置对应的参数内即可。贴图需要六种贴图，即颜色贴图、金属贴图、粗糙度贴图、法线贴图、高度贴图以及环境光遮蔽贴图。颜色贴图决定了物体各个部位的颜色；金属贴图则是类似于蒙版作用，用于区分物体各个部位是金属还是绝缘体；粗糙度贴图则是与金属贴图配合使用，金属区域表面越粗糙，高光越暗，表面越光滑，高光越亮；法线贴图主要用于反映物体各个部位凹凸程度；高度贴图通常与法线贴图配合使用，用于反应物体表面凹凸程度的额外信息；环境光遮蔽贴图通常由高模烘焙得到，用来模拟物体之间产生的阴影，在没有光照的情况下反应体积。

模糊着色器

为实现在调出实体化UI界面后，画面背景部分变暗虚化，从而达到突出主体的效果。首先需要先抓取UI以外的画面，然后用模糊着色器对抓取画面进行处理。此实体化UI界面本质上还是属于UI，因此需要新建一台相机进行拍摄，将抓取的图片处理模糊。模糊的种类有许多，如径向模糊、动感模糊、光圈模糊等。高斯模糊比较常用，主要是对图片中的每个像素周边的四个元素进行采样，设定权重值与当前像素和周边像素的颜色进行Multiple操作，而后进行Add操纵。因为每个像素都会受到周围像素的影响，因此像素间色彩过渡更为平滑，从而实现模糊效果。

水墨着色器

在大话历史关卡采用了水墨渲染，将烘托出历史的氛围，朴实古典。水墨渲染作为非真实感渲染(Non-Photorealistic Rendering，NPR)的一种，与卡通渲染的步骤几乎一致。首先需要进行边缘检测即轮廓线渲染，而后是调节颜色即内部渲染。边缘检测通过法线和视线点成得到，该参数越趋于0则说明越接近边缘。将边缘区域设置为黑色，即可得到描边效果。此时描边较为生硬，需要加入噪声干扰，通过噪声采样随机生成的轮廓则会有笔触的效果。而内部渲染则需要通过基本的光照方程再映射渐变Ramp贴图采样制作，最终色值叠加笔触纹理噪声图，制作的成果还需要进行高斯模糊，让融合度更高。

4.4 摄像机与动画设置

4.4.1 摄像机

游戏中的画面，除了屏幕空间覆盖模式下的Canvas，其余都是由摄像机决定的。引擎自带的摄像机的功能不够丰富，Cinemachine扩展包能够让摄像机可以制作更多的效果。安装完Cinemachine包后，在场景中找到合适的角度，点击Cinemachine菜单栏，选择Create Virtual Camera，即可生成对应角度的摄像机。此操作也会在Camera上挂载CinemachineBrain组件，无论场景中有多少Virtual Camera都不会影响性能，因为这些Virtual Camera主要是将记录的数据传递给Camera进行渲染。

（1）相机轨道

在游戏中，有的过场动画部分摄像机需要按照既定曲线漫游。通过Cinemachine菜单栏的Create Dolly Track with Cart创建出DollyTrack和DollyCart，DollyTrack上挂载了CinemachineSmoothPath组件，DollyCart上挂载了Cinemachine Dolly Cart脚本。CinemachineSmoothPath中的WayPoints主要是控制轨道路径的，增加WayPoint进行位置调节，可以控制轨道的形状。而Cinemachine Dolly Cart脚本中的速度，则可以控制DollyCart的移动快慢。将Virtual Camera放到DollyCart层级下，作为子对象。摄像机就能够根据轨道进行运动了。

（2）镜头跟随

在很多关卡中都使用了镜头跟随，镜头跟随主要是相机随着主体的移动而移动。将需要跟随的物体拉入Follow，可以设置移动区域，即达到边界才会触发跟随。设置Follow的对象后，DollyCart将无法控制Virtual Camera按照既定轨道移动。而LookAt则是始终注视对象，无论相机移动到哪里，都会转向所注视的对象。设置LookAt的对象后，Virtual Camera将不受到旋转控制。合理的设置Follow和LookAt的对象，能够增强游戏的反馈。

（4）屏幕后处理

常用的后处理效果有辉光、景深、动态模糊、镜头黑边和色调映射。游戏的场景环境偏暗，需要通过局部打光来烘托场景氛围，而辉光效果能够使灯光更加柔和，亮部更亮，提升画面效果。景深则是能够很好的模拟出现实镜头的效果，营造出场景内部物件之间的远近虚实关系。动态模糊则是让相机的运动更加合理，符合相机真实移动效果。镜头黑边则是在画面四周虚化出黑边，色调映射选择Neutral模式，能够重新映射色调范围，对色调和饱和度的影响最小，这些都是提升游戏画质的手段。

4.4.2 动画

（1）动画状态机

本项目存在大量的动画，需要用到动画状态机来有条理的控制这些动画。在游戏引擎中中，用可视化流程系统来表示状态机，又叫Mecanim。状态机规定了对象在某个时段的某个条件下做对应的动作，这些动作实际上就是不同的动画片段。动画切换由过渡条件决定，通常是依靠设定parameter，这些parameter有四种类型，分别是布尔，整型，浮点型和触发器，当parameter达到某个条件则流向下一个状态。在两个动画切换时，可以设置过渡，让动画更加平滑。在Mecanim中设置的parameter由Animator中的Getter获取，由Setter修改。

（2）UI动画

游戏中有很多UI，这些UI的入场退场均设置了动画。如若没有动画，则画面显得较为呆板。由于UI比较多，如果通过代码控制，则比较低效，因此采用创建Animation的方式来制作动画。制作UI动画时，先用Adobe Effects进行模拟，直到效果合适后，进入引擎制作。通常，需要制作动画的对象都需要放置在一个公共父对象上，在父对象上创建Animation，而后点击帧记录进行动画制作。像UI动画，通常要创建三个Animation Clip，一个是入场动画，一个是持续动画，一个是出场动画。

（3）粒子动画

粒子动画主要控制发射、形状、生命周期与速度、颜色、大小等一系列参数的数值，来营造出如火花、水滴、气泡等生动效果。本项目中，主要使用粒子动画来实现空气中的灰尘效果，营造氛围感，以及切换模型时的迸溅动画。

（4）镜头动画与视差滚动

本项目中镜头动画主要通过两种方式生成，一种是切换Virtual Camera生成，在切换CinemachineBrain的Live Camera时，会自动平滑过渡。另一种则是记录相机移动的位置，key出关键帧，由关键帧创建出补间动画。

本项目的大话历史关卡，则是通过相机位移营造出视差滚动的效果，通过滑动起始点移动位置计算出距离，由距离的远近控制相机的移动速度。即滑动幅度越大，则相机位移速度越快，相机所拍摄的画面也呈现相应的速度。

4.5 特效与物理模拟

4.5.1 体积雾

光在均匀的空气中直线传播，当遇到浑浊的空气，光线中的一部分能量会照射在小颗粒上，进而一部分光散射入眼睛。这是看见的光产生体积效果。在玩家游玩单机游戏时，体积雾的作用是可以让游戏中的云雾呈现出更自然的效果而不再是贴图，使得光线质感和云雾质感都更真实。缺陷在于体积雾占用大量显卡内存，如果玩家显卡较差建议关闭。

4.5.2 绘画模拟

绘画模拟的原理实际上就是先给需要绘画的模型添加碰撞器，通过屏幕点击位置发射射线，当与模型碰撞后，返回当前碰撞处的贴图坐标，根据设定的笔刷大小去计算像素区域，然后根据设定的颜色覆盖其像素颜色。因此，贴图的更新和保存是关键，主要是通过Raycast碰撞MeshCollider，获取指定的textureCoord，然后将Material绘制在RenderTexture上，同时，模型的着色器需要有一个Texture参数，然后在绘制过程中，动态替换模型的纹理为绘制的纹理。由于绘制的纹理需要在其他关卡使用，因此需要做存档，即将texture数据用System.Convert.ToBase64String转为base64然后用PlayerPrefs.SetString转为字符串，然后PlayerPrefs.Save进行保存。在Awake周期函数中使用PlayerPrefs.GetString和System.Convert.FromBase64String将存储的数据读取解析。同时，画面中模拟了颜料渗透的效果，边缘逐渐模糊，能够体现出皮影的质感。

4.5.3 流体模拟

4.5.4 布料模拟

4.5 声音与音效处理

4.5.1 语音合成

游戏中通常会有人物对话与旁白，如果找不到配音演员，则可以用语音合成来生成相关声音。当下的语音合成技术已经十分成熟，可以通过科大讯飞提供的语音合成WebAPI即可进行相关语音的生成。进入科大讯飞开放平台，创建应用，设置应用平台为WebAPI，将应用信息填写完整，添加在线语音合成服务，然后将服务器的IP地址添加到白名单中，即可完成配置。新建Node项目，按照服务所需的格式填写完APPID和API_KEY，传入调用API所需要的信息，将控制语音内容和音色的参数暴露出来即可完成接口开发。创建好对话文本后，即可分别调用接口发送符合格式的请求，获取对应的Audio信息。由于在线生成的语音时间较长，游戏中直接发送请求响应较慢，因此可以做预加载处理。

4.5.2 音轨合并

由于语音不是在线发送请求而生成的，则可以用Adobe Effects对音频再进行处理，使之更贴合游戏需要。首先将语音合成的音频和背景音乐导入Adobe Effects中，将音频拖入轨道中，即可生成对应音轨。将背景音乐的音频电平进行关键帧记录，通过查看音波的高低来判断声音的大小，将音乐一开始的音频电平设置为无声，而后设置为比合成语音略低的声音，做淡入处理，结尾部分则相反，做淡出处理。由于是合成音，有的文字部分分段并不清晰，需要手动调整。将语音音频调整好后，设置渲染输出模块为MP3，即可生成带有背景音乐的mp3文件。

4.5.3 音效设置

游戏中的声音主要通过设置Audio Source来实现，通常摄像机对象上挂载Audio Listener组件，这是接收音频信息的组件。需要注意避免多个摄像机挂载Audio Listener，场景中保留一个即可。将音频拖到Audio Source中，根据需要选择是否在唤醒时播放。项目中，开场动画的音频则是唤醒时播放，通过主菜单界面的音乐按钮控制开启或关闭。部分动画中，添加了音乐播放事件，进行特定动画时会播放相应的音效，直接在动画中添加事件较为直观。并且在动画中可以直接控制具体某帧开始播放音效，使得声音更加精准。

4.6 性能优化

方向	措施	具体信息
加载方面	预加载	通过异步加载的方式，在前一个场景中预先加载下一个场景，这样对玩家来说是无感知的，而在后续切换场景时，能够做到场景秒切，从而避免让玩家等待，提高了玩家的游戏的体验
运用Spine	通过Spine导出的文件，将JSON格式转换为二进制格式导出，能够使文件的体积更小，在游戏中的加载速度也得到提升
烘培光照	游戏中存在大量的灯光，而这些灯光中大部分并不需要实时变化。实时光照在游戏中需要动态计算，非常消耗性能，因此可以将烘培光照代替实时光照，其本质是将场景中的实时光照效果转化为贴图赋予模型上，烘培完成后即可删除灯光组件，从而提升性能。
模型方面	高低模烘培	对于模型尽可能在保证效果的前提下减少顶点，对于一些细节的表现，则可以先重拓扑出低模，然后进行高低模烘培。
字体方面	剔除多余字	由于游戏中用到的字体种类较多，但涉及到的字数目并不多，而ttf格式的字体包体积较大。因此用字体提取工具，将需要的字保存下来，减少字体包的体积。本项目中使用了FontZip来减少字体包的体积，首先在游戏中进行走查，将全部文字提取出来，然后使用FontZip提取出需要保留的文字，输出为ttf格式即可。
图片方面	CDN	将游戏中并非游戏初始就加载的图片分离出来，比如流程图鉴中的图片，上传至内容交付网络（Content Delivery Network，CDN）。CDN能够在用户访问时，提高文件传输速度。
拼合图	减少细节
无损压缩	所有的图片均通过TinyPNG进行有损压缩进行压缩，减小文件体积，由于采用了减色算法，在数据量大大降低的情况下并不影响视觉。
脚本方面	规范化	将未规范书写的代码进行重构，使用异步操作代替同步操作。项目中尽可能多的复用代码，对代码进行抽象，提取出公共方法，将通用的组件制作为预制件，避免重复书写相同逻辑的代码。减少算法中的时间复杂度和空间复杂度，不要将涉及到大量计算的代码放入Update函数中。
动画方面	短时拉长	动画时长会影响性能，如果是时长较高逻辑简单的动画，可以先按时间比例制作成较短时长的动画，然后通过AnimationState的speed属性控制动画的播放速度将动画拉升至所需时长。
减少关键帧数	关键帧数量也会影响性能，需要减少冗余关键帧。