【必修课001-AVG】你喜欢在文字里恋爱/冒险嘛?
-
当你进入这门课程之前，希望你已经完成基础课了哦。
本堂课目标：制作AVG游戏（文字类恋爱/冒险游戏）
所需素材：点击下载场景+人物立绘
课前预习 精灵、对话框、按钮这几个组件~
注：预习课也要打卡的哦~
-
AVG游戏流程
在制作游戏之前，我们要先理清游戏的运行逻辑。
分析玩法：
AVG游戏是有着精美图片、丰富的配音为主打的电子交互小说。
具体交互方式是根据剧情发展，出现选项按钮。
其他动态是场景跳转、人物表情变化。
倒推逻辑
制作AVG需要：
1.完整的故事；
2.多种场景图和人物立绘；
3.对话框和按钮；
###4.配音的插入
5.动态
5.1根据对话跳转场景、切换人物立绘、出现按钮，
5.2点击按钮跳转场景、切换人物立绘、改变按钮文字。
-
制作
1 . 新建项目
1). 打开软件，登陆之后左上角新建项目。
2). 如果已经在某个项目内了，那左上角菜单栏找到新建项目
给项目取一个好听的名字
名字不能重复，这里用了avg，你们要想别的名字，不许抄袭哦~！
一般来讲，在手机上玩的游戏，窗口尺寸建议设置为1080×1920，若是在pc（电脑）上，则建议设置为1920×1080。
我们做的是手机竖屏，so......you know
确认之后，就来到主界面啦。点击蓝字可以了解详情。
简单的说，就是界面左边存放素材，界面右边设置大小或者功能等属性，界面中间是舞台，界面中间的下面制作事件，可以实现想要的交互效果。
2. 添加背景图
快进入主题，添加第一个对象——游戏背景图。
点击菜单栏上的精灵图按钮，或直接将精灵图标拖拽至舞台。
双击对象库中对应的精灵图标，进入图片编辑器。
由于我们插入的是一张静态的背景图，所以只需要双击下方第一个小精灵图标或点击打开文件即可打开本地文件，添加你想要的图片。
“有问题！
”
“为什么下方的第一个图下写着“0，那它会显示出来嘛?”放心，虽然它名字是0，但它其实代表着动画里的第1帧哦，唤境内所有的序号都是从0开始的，这是为了与底层编程语言保持一致。
小贴士：图片编辑器是可以编辑动画（动态图片）的，只要插入多张静态图片，再调整右上角的“播放速度”里的数字即可。（动画是由多张静态图片连续播放形成的）
选择好合适的背景图插入之后，点击“确定”回到舞台，完成背景的添加~
为了保证背景图的展示效果，可以拉动背景图的选中框，也就是周围的蓝色框调整大小。把背景图填满舞台区域，也就是白色框范围内。
在摆放其他游戏元素时也是一样的做法，要注意的是摆放在白色框以外的区域就会看不到哦~
这样，一张背景图就添加好了~
3. 添加人物立绘
用添加背景图的方法即可添加立绘。
游戏中登场的人物可能较多，可以通过右键选择重命名给人物立绘设置名字，点击确定回到舞台，完成立绘的插入！最后可以再调整一下立绘的尺寸。
AVG游戏里，通常有很多场景切换，为了便于区分，我们对场景进行重命名。选中场景，右键找到重命名，此处，将场景0改为“店门口”
小贴士：如果想让背景图和立绘的位置固定不动，可以在左边的项目库内，点击选中对应背景图和立绘的上锁图标，这样就能固定图片的位置了。
4. 添加对话
对话框是文字冒险类游戏里不可或缺的部分，用于承载剧情和人物对白。
找到对话框组件，插入方式与精灵图的操作一致：点击按钮或直接拖拽入舞台就可以了。
通过样式编辑调整对话框的样式，
注意：对话框是不能像立绘和背景图那样通过选中框调整大小的，一定要进入样式编辑内调整~
在左下方对象库的“可视对象”中，找到当前场景的对话框对象，并双击。
或点击对话框对象后，在界面最右边就会展开当前对话框对象的属性面板。在属性面板里找到“样式编辑”点击即可打开样式编辑界面。
打开样式编辑界面之后点击对话框的最外围，就会出现蓝色的选中框，直接拖动就能调整了。也可以在右边的属性里调整位置、宽度（w）长度（h）。
位置（x,y）：对话框是由头像（图）、对话文字、角色名、对话框背景（图）四个部分组成的。每个部分都能调整相对位置和长宽，
舞台上对话框显示的大小会根据这里的对话框背景图大小来决定。
如需更换头像，可点击头像部分，在右边属性栏中点击“选择贴图”更换。不想要头像时，点击隐藏头像即可~!
点击“角色名”的部分则可以修改显示的名称，在右边属性栏中直接编辑文字，还可以调整字体、字号及颜色。
小贴士：对话框样式数量=当前出场的人物数量，有几个人物就建几个样式（旁白也需要单独建一个样式）
如需调整文本框，则点击“文本内容”部分，在右边的属性栏中直接编辑，还可以修改字体，字号，颜色和对齐方式。
确定好对话框的样式后，需要给对话框命名，点击左上角的“默认样式”，右键选择重命名。**注意！！**样式名最好和角色名一致！
再次新建样式时，可以直接克隆前面已经建好样式提高效率。
对话框样式创建完毕后点击“确定”，回到舞台，就能看到对话框的变化了。
接下来要在对话框中输入文字。点击左上项目库，展开当前场景，在当前场景内找到对话框组件并点击。切记是当前场景内的对话框哟~之后会有别的场景，不要混淆！
引擎最右边属性面板里就会出现当前这个对话框的相关属性。点击选择对话编辑。
打开对话编辑界面
根据剧情，先调出第一个出场人物的对话框样式，点击“对话”按钮边上的任意地方，展开输入框。
在左边输入对话文本，这样，对话就生成了！
5. 添加声音
想要为对话添加声音？
那需要准备好音频文件哦，目前支持mp3和ogg格式，非这两个格式的音频文件在导入之前需要先转换一下。上传音频的方法是，点击此处的多媒体选项。
导入需要用到的音频文件。
在对应的对话上点击配音右边的文件夹图标为其添加声音。
点击“新建对话”，就能添加下一句对话。
按照剧情把对话填完，点击确认回到舞台画面。这样我们就完成了第一个场景啦！
现在我们点击预览按钮来验收一下我们的阶段性成果吧~预览按钮在主界面的右上方。
预览分“预览”和“单幕预览”两种方式
“预览”是从头开始预览，“单幕预览”是从当前场景开始预览。
目前我们只建了第一个场景，用哪种方式预览效果都是一样的~直接点击就可以了。
在制作过程中要多多预览，能直观地看到当前的运行效果，以便于及时发现错误并调整！6. 添加更多场景
AVG怎么能只有一个场景，依据之前的方法添加更多场景来丰富游戏吧。
首先新建下一个场景。
修改场景名称，重复该步骤创建多个场景。
在场景中加入对应的立绘与对话框，并添加对话，即重复上面的步骤。
一句句添加台词对白的方式很让人头疼，小天使为大家介绍批量导入台词对白的方法！
锵锵锵~当需输入的对话特别多的时候，可以使用对话编辑的自动导入功能。首先，点击“导出文件”。
得到一个cvs格式的表格。
我们在表格内把样式名和对话文本填好，样式名和文本是必填项，角色名可以根据需要填。
回到对话编辑界面，点击“导入文件”，直接导入我们填好的cvs表格文件，当前场景的所有对话就自动生成啦！
现在，大家知道为什么要求对话框样式名和角色名要一致了吧！
另外，偷偷讲一个大师秘诀：做游戏之前把剧本和流程准备好，并用excel写对话，更方便后续批量导入哦。
7.添加事件
搭建好所有需要的场景之后，就要开始最重要的部分啦——做交互。
在此之前大家最好先认识一下唤境的事件表区域，也就是位于舞台正下方的这个区域。
在唤境中，所有的动态效果都可以通过编写事件表来实现~
现在，回归到游戏上，思考一个问题：场景跳转需要达成什么样的前提条件。
比如想要的效果是：【当对话播放完毕后，跳转到下一个场景】。那么播放对话的“对话框”是对象，“对话播放完毕”就是“条件”，“跳转到下一个场景”就是要执行的“动作”。
条件中的“对话播放完毕”主体对象是对话框，所以我们需要选中对话框后进行后续的操作。
思路清晰之后我们来写“事件”。点击舞台上的对话框（或点击项目库中当前场景里的对话框组件）。
然后点击“+事件”，添加一条空“事件”。
事件编写分为两个部分，前面是“条件”，后面是“动作”。
此时右边会出现用于编写当前事件的面板。
我们在上方的“条件”中，找到“对话框结束时”这个条件，双击添加进当前编辑的事件。
下面为事件添加 “跳转到下一个场景”这个“动作”，因为这个动作针对的是整个场景，属于游戏整体系统的一部分，所以这个动作存放于“系统”中。点击“系统” 图标
，（也可以在对象库的抽象对象里选择“系统”）
右边会出现的系统相关的条件动作面板，要注意不同的对象的面板内容是不同的，一定要准确选中对象哦。
在系统的动作中找到“跳转场景”这个动作，双击。
选择需要要跳转到的场景，点击“确认”。
点击“完成编辑”关闭事件结束事件表编辑。
现在我们可以预览一下，确认一下运行效果。
8.添加更多事件
8.1 根据对话切换立绘
AVG中一个常见的效果是，让立绘表情在对应时机发生变化。
先来分析达成这个效果的对象所需要的条件和动作：【“当对话进行到某一句话时，立绘表情发生变化！】；【对话框】是对象，【对话进行到某一句话】是条件，【立绘表情发生变化】是动作。
通过拆解，我们总结得出：人物一开始是一般状态（平静状态），直到某句对话出现后，立绘表情发生变化（生气状态）。
点击舞台上的对话框（或是在项目库中展开当前场景选择目标对话框），在右侧面板点击“对话编辑”。
先给这句话做个记号，在标签框里根据喜好填写容易记住的标签内容，这里我们暂且填“女仆生气”。
点击确定，返回主界面。在添加事件之前我们先给立绘添加生气的表情。
双击舞台上的立绘，或者双击对象库中的立绘对象。
在立绘人物编辑界面选择新建动画并修改名字之后添加对应的图片。
接着点击舞台上的对话框（或是在项目库中展开当前场景选择目标对话框），再点击“+事件”，添加一条空事件。
在右边面板中，双击“到达标签时”这个条件。在弹出的框中填写我们之前设置的标签”女仆生气”（一定要加英文（半角）引号哦！）
点击确认。我们就成功添加了【当标签是”女仆生气”这句话出现时】的这个条件。
接下来添加【立绘表情变化】这个动作。
在右边面板中的“动作”部分找到“设置动画”，双击，在弹出的框中填写我们设置的动画名字“"田园装-生气"”
点击“完成编辑”完成这个事件的编写。
对话中更改立绘表情的方法就完成了！
8.2 设置对话选项
AVG中另一种常用的效果是设置对话选项。通常的用法有两种：一是点击某个选项跳转到不同的场景；二是选择不同的选项时，会有不同的数值变化。我们先教大家第一种做法的实现方式。
在菜单栏上点击“按钮组件”这个按钮，或直接拖入舞台。
一个按钮相当于一个选项，所以我们至少需要设置两个按钮。先来设置第一个按钮。
在对象库中找到刚新建的按钮对象，右键选择重命名。
之后双击即可进入按钮样式编辑界面，界面左侧显示每个按钮的四个状态，可以给不同状态设定不同的样式，增加按钮的表现力。
设置好按钮后，点击舞台上的按钮，在右边显示的按钮属性面板中可以设置按钮上的文本，文字大小、颜色，初始状态等等。如果没有看到属性面板，那么有可能是因为没有点击事件表区域的“完成编辑”退出事件表编辑模式导致的，这里要留意一下。
这时候第一个按钮就设置完成了，我们可以复制第一个按钮的样式，直接制作第二个按钮。
在左下方对象库里，在“剧情选项一”对象上右键，选择复制。复制后重命名为剧情选项二。
鼠标左键按住对象，拖放到舞台上。
用同样的方法设置好第二个按钮。
两个选项按钮都设置好之后我们来开始写事件：【当点击选项按钮时，跳转到对应场景】；【选项按钮】是对象，【点击选项按钮】是条件，【跳转到对应场景】是动作。
所以先选中作为对象的选项按钮。然后点击“+事件”，创建一条空的事件。在右边面板中找到，“被点击时”这个条件。
再点击“系统”图标
，切换到系统的条件动作面板。在动作中找到“跳转场景”，双击，再选择想跳转到的场景即可~
一个完整的、根据选项跳转指定场景的事件就写好了，可以预览一下看看效果！
同样的，重复一次上面的步骤，设置剧情选项二按钮的事件的条件和动作。
在按钮出现的时机方面，我们希望在奶茶场景中的对话结束后，才出现选项按钮并且隐藏对话框。所以首先我们需要把两个选项按钮的开始可见属性去掉，只有这样做之后按钮在场景开始时才默认不显示。
接着通过写事件，在对话框结束时（条件），显示剧情选项一和剧情选项二，并且隐藏对话框（动作）。
到这里，这个简单的AVG就全部完成啦！
写好作业，记得帖子下面打卡哦~！
-
打卡，作业做完哈哈哈哈哈
-
@喵哈菌 很棒棒哦！可以上传一下自己的作业演示视频哦
-
为什么我看不懂啊，是不是省了好多步骤，我才看到添加背景图这里qwq
-
@依建 嗯嗯？有哪里不清楚呢？
可以看下视频教程：https://www.evkworld.com/learn/139
，（也可以在对象库的抽象对象里选择“系统”）
，切换到系统的条件动作面板。
