[TOC] * * * * * ## 图像编辑器(Image Editor) ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-29-46.png)图像编辑器可以用来自己绘制创建或修改你导入的精灵图片。如果你以前使用过任何一种图像软件,那这个编辑器对你而言应该很容易上手,不过这里还有几条在刚开始使用GameMaker Studio 2的图像编辑器时很难发现的小技巧: * 当你绘制多帧画面时,你可以直接以动画的形式去进行绘制!只要先点击“帧控制”工具栏上的播放按钮,然后选择一个笔刷在编辑器窗口开始绘图,你会发现编辑器中的画面在不停变化,而你绘制的内容会分配到不同的帧上然后串联起来。你可以尝试调整帧速率直到你满意为止,一旦你熟悉了这套工作机制你就可以随时创建各种动态精灵和的动画效果了。 * 你可以把图像编辑器的标签页从主工作区拉出来形成要给独立的窗口,如果你有多个显示器时这会很方便。 * 当你使用复制功能时,比如说你选中并复制了一张图片,这张图片会变成一个笔刷被添加到你的笔刷列表里,这意味着你可以选择图像中的任意部分然后在接下来的时间里随时取用和绘制这个图像,无论是画线还是多边形,或者随手涂鸦。笔刷同样可以缩放并着色。要注意,在这里你不能直接使用粘贴功能,因为所有复制的内容都会被添加到画笔列表,所以你“粘贴”的内容也会被添加进画笔列表。因此粘贴通常用于从其他程序中获取图片然后贴进编辑器里来。 * 这儿还有一套便利的图层编辑器,你可以给每个精灵创建很多不同图层,然后可以根据自己的需求来进行排序或分组到不同的文件夹中,这样可以很方便的创建更多复杂的图像 。 以上几条只是图像编辑器中的部分进阶功能。想了解完整的编辑功能,请阅读以下内容,将会详细说明编辑器中各部分的功能: ### 帧视图(Frame View) 这部分会按照动画顺序排列显示各帧画面,你可以点击左侧的“+”号按钮添加新的帧——或者也可以通过图像菜单添加——你也可以拖动任意帧来重新排列顺序。在左上角点击按钮![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-30-05.png)可以切换**洋葱皮肤**模式,在此模式下你可以可以透过当前编辑的帧以半透明的形式查看前一帧或后一帧的画面内容,便于在绘制动画时对细节进行调整,同时在该模式下两侧会出现范围框,你可以拖动两侧的端点来控制要显示的前后帧数量。![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-30-23.png)在**洋葱皮肤**的开关下方有一个用于设置动画循环模式的按钮,可以切换“循环播放”(到最后一帧后从第一帧开始重新播放)和“乒乓播放”(到最后一帧后反向朝第一帧方向播放)两种模式。底部还有一个播放按钮用来控制动画的开始和暂停。你可以点击任何一帧来编辑其中的画面内容,被选中的帧顶部有一个删除图标,单击即可删除该帧。你也可以按住Ctrl键然后用鼠标左键一次选择多帧画面,此时点击删除会把选中的帧全部删除。 ### 帧信息(Frame Information) 这条工具栏包含了帧控制功能,你可以在这里设置动画播放的速度,帧动画的速度可以基于”每秒播放的帧数“或”每一帧游戏播放的动画帧数“两种单位进行设置,右侧会显示帧的总数量以及当前帧的序号,你还可以点击左侧的图标![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-30-41.png)来隐藏这一栏 ### 画布控制(Canvas Control) 本区域主要处理主画布以及其中内容的显示方式,主要有以下选项: * **网格画布**![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-33-27.png) 这个选项会开启/关闭画布上的网格。GameMaker Studio 2中可以将画布划分为多个网格,网格的默认尺寸是1像素,但是你也可以点击网格菜单按钮弹出下列选项来进行修改:![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-47-00.png)这些选项允许你设置网格的颜色和透明度,以及网格的尺寸(可以设置X、Y值),你还可以开启或关闭网格吸附功能(默认是关闭的)。 * **画布缩放**![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-33-15.png) 这些按钮可以控制当前画布的缩放级别,你可以放大或缩小画布,点击![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-33-23.png)按钮可以将正在编辑的图像画布缩放至1:1实际大小。你也可以按住“Ctrl”键然后滚动鼠标滚路来缩放图像,同时按下“Ctrl”键和“回车键”则可以将图像缩放至1:1实际大小。点击![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-43-53.png)按钮则可以直接将图像缩放至符合当前编辑窗口的尺寸() * **二分画布**![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-33-01.png) 单击该图标可以在**单画布**、**水平分割**以及**垂直分割**三种形态之间循环切换。在分割画布状态下,每个画布都会有独立的一个画布控件,你可以放大其中一个画布并缩小另一个,并且你对其中任意一个画布所做的操作都会实时反映到另一个画布上。想要修改画布的视图状态你可以点击下拉选项直接选中你想要的视图状态或持续单击该按钮直至切换到你想要的视图。 ### 绘制画布(Draw Canvas) 这是图像编辑的主要窗口,你可以使用右侧工具栏中的各种工具来在选定的图层上进行绘制操作。你可以从编辑器右上角选择或自定义画笔,然后使用鼠标左键或右键进行绘制(可以通过取色器给左右键分别着色)。你也可以按住“Ctrl”键然后滚动鼠标滚路来缩放图像,同时按下“Ctrl”键和“回车键”则可以将画布缩放至1:1实际大小(你也可以用上面介绍的画布控件)。另外你还可以按下鼠标中键或同时按住“空格键”和鼠标左键进行拖拽操作来移动画布。 ### 画布值(Canvas Values) 地步的这个小条中显示了编辑器中鼠标的位置以及选择工具的高宽值等信息。 ### 画笔(Brushes) 你可以在这里选择不同的画笔用于绘画。默认的画笔是不同尺寸的方形和圆形笔刷,但你也可以在图像层自己创建自定义画笔,只需要在图像上选取你需要作为画笔的部分然后使用“Ctrl”和“C”键来复制该部分图像。这个被复制的图像会自动加入到笔刷列表中,你可以像使用其它笔刷一样来使用这个画笔,比如直接绘制线条。要注意的是默认的笔刷颜色是白色的,但如果你使用取色器修改画笔颜色,该画笔会被着色为新的颜色。如果要从列表中删除一个画笔,只需要单击这个画笔,然后按删除键![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-20-25.png)即可删除。 ### 取色器(Colour Picker) ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-17-32-13.png)在这个窗口你可以用使用各种滑块工具来进行颜色自定义操作,也可以直接输入RGBA值或HVS值来自定义颜色。此外在取色器中还有一个选项菜单,可以用来跨精灵管理自定义调色板。![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-17-32-20.png)因此你可以在创建精灵时自定义调色板,然后把资源树中其它任何精灵设置为该颜色,或者也可以打开任意一个精灵图像,然后从资源树里选其它某个精灵导入对应的调色板。 ### 工具栏(Tools) 下面我们介绍GameMaker Studio 2自带的各类绘图工具——请注意所有的工具都可以使用鼠标左键或右键进行选取,并且大部分工具都有自己的键盘快捷键(一些重要的会在工具介绍过程中直接列出,完整列表请参阅快捷键页面)。大部分工具还有一些额外选项会显示在图像编辑器的顶部,如下所示:![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-52-36.jpg) | 图标 | 功能介绍 | | --- | --- | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-52-56.png) | 这是铅笔工具,它可以用你所选择的画笔及颜色进行绘制操作,你还可以在顶栏中设置大小或是否开启平滑功能(插值)。请注意你也可以按住“Shift”键和“Z”键然后按住鼠标左键拖放来设置画笔尺寸,或者直接从右上角的预设画笔中选取。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-01.png) | 这是橡皮擦工具,它会使用你所选取的画笔形状来擦出你鼠标点击的区域。选择此项时同样可以使用顶部的额外工具栏来缩放画笔或开启/关闭平滑过渡效果(插值) | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-05.png) | 这是油漆桶工具,使用这个会用当前颜色填满图像中近似色且相连的一整块区域,你可以用顶部的滑块来调整近似色的容差值 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-09.png) | 这是颜色置换工具,当你选择该项时,你可以用鼠标左键或右键点击图像中的任意像素,图中所有相同颜色的像素都会被点击鼠标设置的颜色所替换。顶部栏有一个调节容差的滑块,你可以设置像素颜色容差值——越低则取色越精确,调高则会包含更多类似所选颜色的像素点。如果之前你使用过选择工具,则只有被选中区域内的像素会被修改。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-14.png) | 这个工具可以用来绘制一条连接两点的直线。首次点击会创建出一个起始点,然后在其他任意地方再次点击鼠标左键会新建一个点然后自动绘制一条直线连接两个点。这条线会用当前选择的画笔绘制,并且可以在编辑器中修改画笔属性(尺寸、平滑度等) | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-19.png) | 这个工具将绘制一个矩形的线框或区域,点击左上角则绘制外框,点击右下角则是绘制填满的整块区域,在顶部的工具栏中可以选择二者兼有模式(或者按住“Shift”键然后分别点选图标的左上及右下部分),工具栏中同时可以设置画笔的尺寸以及平滑度(插值)。请注意你可以按住“Alt”键然后拖拽鼠标会以起始点为中心绘制矩形,按住“Shift”键拖拽可以绘制正方形。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-22.png) | 这个工具将绘制一个圆形的线框或区域,点击左上角则绘制外框,点击右下角则是绘制填满的整块区域,在顶部的工具栏中可以选择二者兼有模式(或者按住“Shift”键然后分别点选图标的左上及右下部分),工具栏中同时可以设置画笔的尺寸以及平滑度(插值)。请注意你可以按住“Alt”键然后拖拽鼠标会以起始点为圆心绘制圆形,按住“Shift”键拖拽可以绘制正圆形。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-28.png) | 这个工具将绘制一个多边形的线框或区域,点击左上角则绘制外框,点击右下角则是绘制填满的整块区域,在顶部的工具栏中可以选择二者兼有模式(或者按住“Shift”键然后分别点选图标的左上及右下部分),工具栏中同时可以设置画笔的尺寸以及平滑度(插值)。单击鼠标左键会添加新的点并自动闭合为新的多边形,当绘制出你所需要的多边形后你可以选取其它工具会提示你保存刚才绘制的图像。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-32.png) | 曲线工具,它可以用你所选择的画笔创建曲线,你单击鼠标会设置一个点,按住拖动鼠标会形成曲线,松开鼠标然后重复添加其它的点和曲线以完成绘制操作。绘制路径的画笔同样可以使用顶部的工具栏修改尺寸或开/关平滑过渡效果(插值)。顶部栏中还有一个“Iterations”设置项可以定义路径的平滑度(数值越低越粗糙越高越平滑,默认为10) | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-36.png) | 文本工具,它会创建一个文本图层,你可以输入任何文字内容。你可以从图像编辑器顶部的工具栏中选择你所需要的字体。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-41.png) | 滴管工具,使用该工具可以从你正在编辑的图像中采集你需要的颜色 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-45.png) | 使用这个工具可以选取一块矩形区域。你可以用ESC键或从图像菜单中的“取消选择”功能来取消当前的选区 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-49.png) | 画笔选取,使用这个工具可以用任何画笔(包括自定义画笔)来绘制选区,该工具的所有快捷键与铅笔工具相同。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-54.png) | 魔棒工具,使用这项将会根据容差值来选择相同/似颜色的区域。如果勾选了“仅颜色”选项,则不会考虑透明度因素,你可以用ESC键或从图像菜单中的“取消选择”功能来取消当前的选区 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-53-58.png) | 旋转工具,如果你用选择工具在图像中选取了一个区域,单击本选项可以将所选区域进行从 0°到360°任意角度的旋转操作。如果你没有选取任何区域则可旋转你当前的画笔。只需按住鼠标左键然后向左或向右拖动鼠标即可,活在顶栏中输入旋转角度。你可以按下ESC键或回车键或直接选取其它工具来确认旋转角度。要注意这个旋转操作不会修改你的原始画笔或选区图像,而是以旋转后的画笔或图像为素材创建一个新的画笔。另外还要注意你可以使用快捷键“Z”来旋转任意选区或画笔,并且这个快捷操作不会创建一个新的画笔,而是只对当前画面或画笔生效。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-54-02.png) | 这是镜像工具,选择这项会将当前画笔沿垂直方向进行水平翻转(即左右颠倒),这个选项不会创建新的画笔,只是临时修改当前画笔的绘制方式。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-54-06.png) | 这是翻转工具,选择这项会将当前画笔沿水平方向进行垂直翻转(即上下颠倒),这个选项不会创建新的画笔,只是临时修改当前画笔的绘制方式。 | | ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-21-54-09.png) | 这是移动工具。当你选择该项时,可以按住鼠标左键并拖拽来移动图层中的内容。要注意所有超出画布以外的像素都会不可见,另外当你切换工具时图像会以当前画布的尺寸进行裁剪。另外如果你在图像中进行了选取操作,移动的将是选取的像素内容而非整个图层。 | ### 图层编辑器(Layer Editor) 你可以为图像的不同部位创建各自分离的图层,并且可以利用画笔和各类工具对这些图层进行绘制。点击![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-58-53.png)图标就能创建一个新的图层,点击![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-59-10.png)图标删除图层。在图层上按住鼠标左键向上或向下拖拽可以给图层重新排序以符合你的需求,你还可以使用![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-17-01-26.png)来创建文件夹,然后用鼠标把图层拖拽放进文件夹来重新组织管理这些图层。如果你双击某个图层(或鼠标右键选择“编辑图层属性(Edit Layer Properties)”)你可以进入“图层属性(Layer Properties)”窗口:![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-17-03-09.png)在这个窗口中你可以给图层重新命名或设置叠加模式(即该图层与下面的图层的混合叠加方式),目前有**“普通模式”、“减弱叠加”、“多重混合”**三种不同模式。下面还有个透明度的滑块,但有一点需要注意,这个透明度会与像素本身alpha值相叠加显示——比如说,你的像素是50%透明度,你又将图层设置为50%,那最后呈现出来的像素是25%透明度的。 ## 菜单栏(Context Menu) 除了图像编辑器中的这些工具外,在编译器(IDE)顶部的菜单栏中还有一些额外的菜单可用:![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-25-47.png)菜单展开后有以下几项 ### 图像菜单(Image) ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-28-02.png)图像菜单中有以下选项: * 剪切选中帧 * 复制选中帧 * 粘贴 * 全选——选择所有图片 * 取消选择——取消所有选中的图片 * 反选——反选当前选中的图片 * 添加帧——在精灵中增加一个空白的新帧 * 插入帧——在当前选中的帧后插入一个新的空白帧 * 删除选中帧——从精灵中删除所有选中的帧(你可以使用Shift或Ctrl键配合鼠标左键选择多个帧) * 导入图片——从硬盘中载入一张图片来生成新的一帧。你可以一次选择多张图片来生成多帧画面,当你选择导入图片后会显示以下窗口 ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-28-14.png)在这里你可以对即将导入的图片进行调整来适配当前精灵,你可以修改图片尺寸、画布尺寸,也可以对图片进行裁剪,甚至可以设置放置的锚点。 * 转换成帧——这个选项可以把一张图片分离成多帧画面。首先你需要创建一个包含所有动画内容的单帧画面(或导入一个条形图),如下图所示: ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-28-28.png)当我们想要转换这样一张图片时,你可以在下面这个窗口中进行设置:![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-28-36.png)在这里你可以设置如何分割一张图片,包括帧数量、单帧图片的高宽等等。 * 导入条状图——这个选项会打开一个资源管理器让你寻找并导入一张条状图用来创建序列帧。当你选中并导入图片后,会自动打开上一条中的**转换帧**的窗口。 * 重设所有帧——选中这个选项会打开下面的窗口,你可以一次设置所有的帧的尺寸: ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-28-45.png)你还可以选择不同的箭头来设置锚点,按像素或比例进行尺寸调整,还有一个等比例缩放的选项。在右侧还有一个小的预览窗口。 * 缩放所有帧——这个选项允许你对所有的帧进行缩放操作,一旦选择会显示以下窗口 ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-28-54.png)在这里你可以按像素或百分缩放图像,也可以选择是否等比例缩放,还可以根据需求选择开启像素平滑过度。 * 裁剪所有选中帧——这个选项只有当你在图像编辑窗口中选择了一块区域时才能使用,一旦选择会把图像按照选中的区域的包裹体进行裁剪(所有的帧都按照该区域裁剪)。 * 镜像——这个选项会把选中帧左右颠倒翻转显示。 * 翻转——这个选项会把选中帧上下颠倒翻转显示 * 顺时针旋转90度——这个选项会把所有选中帧顺时针旋转90度 * 逆时针旋转90度——这个选项会把所有选中帧逆时针旋转90度 ### 视图菜单(View) ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-29-06.png)视图菜单主要有以下几个选项: * **1:1**——把图片缩放到实际尺寸并居中放置到编辑窗口中。 * 适应屏幕——把图片缩放到恰好填满编辑窗口的尺寸。 * 网格切换——切换像素网格,这功能与画布控制(Canvas Control)里的网格按钮功能相同。 * **洋葱皮肤设置**——修改洋葱皮肤的设置,点击该选项会打开一个类似下方图示的窗口,在这里可以设置显示的前后帧数量以及显示的透明度和颜色。 ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-29-14.png) ### 效果菜单(Effects) ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-29-25.png)效果菜单可以添加你自定义的效果插件,默认只有以下一个效果: * **灰度**——根据你的选择去掉一部分图像饱和度,你可以选择把这个效果作用于当前图层、可见图层或所有图层。 ![](http://7xqa61.com1.z0.glb.clouddn.com/Wechat/GMS文档翻译草稿/编辑器窗口/_image/2017-05-07-16-29-33.png)