特别注意
需要使用英文输入法,中文输入法快捷键都无法使用。
上面的话看起来是废话,但我就真的没有注意到,还以为是自己编译软件出问题了。
开始绘画
注意左下角,有一个 Foreground Color 这个是用鼠标左键绘画的。
然后有个 Background Color 这个是鼠标右键绘画的。

一个在上一个在下。

通过在色彩板上用右键或者左键点击就可以改变颜色。
右下角有个标记的是 Background Color,而左上角有个标记的是 Foreground Color。
快捷键
B 是用来绘画的,M 是用来框选的,E 是用来擦除的。
Alt + 左键 可以取到背景颜色。
G 键就是倒油漆能够一下子涂完整个区域,要切换成画笔需要再次点击 B。
鼠标滚轮 能够控制画面大小,数字 1-6 也可以控制画面的大小,不过数字键是到预定的大小。
鼠标中键 可以移动画面。
按住 Ctrl + 鼠标滚轮 可以控制绘画的范围。
Tab 显示或者隐藏,层/帧。非常常用。
快速调整颜色
[ 这个选择上一个前景色,] 选择下一个前景色,可以快速调整颜色。
复制已经画过的
使用 M 去框选,然后点击 Ctrl 键。

在框里面点击 Ctrl,然后拖动就可以。
框选工具很重要
当创建新图层或者是新的 frame 的时候,框选是不会消失的,所以可以快速更改位置。

框选过后,选中,可以进行旋转。
ctrl 的作用
按下 ctrl 键,可以查看主要像素距离边框的距离。
同时可以按下 ctrl 然后鼠标左键移动像素主体,无需框选移动。
结构
图层
图层在下面的先渲染,上面的后渲染,也就是说上面的会遮盖住下面的。
Shift + P 可以给图层命名。

Shift + N 创建新的图层。

可以看到新建的图层都是空的。
对于每一个每一个 cell,也就是图上的一个个原点,有三种颜色。
- 黑色:表示已经画东西了
- 无色:表示还没有画任何东西
- 白色:表示当前的画面就是这个 cell 的所在行与列,当然前提得是有画面的。

移动图层
点击图层的名字,会出现个黄框给其框选住,按住左键可以一次选中多个图层。


这时候再按住右键,会出现小三角,然后可以随意拖动,来进行移动图层。

复制图层
与上面的第一步一样,只是这时候不再按下右键了,而是按 Ctrl 然后左键拖到合适的地方。

这里就有东西了,因为是复制的。
帧
按下 Alt + N 创建新的一帧。
这时候即便选中多个帧,也是按照最后一帧来进行复制的。
Enter 可以预览动画。
Alt + B 创建一个空帧,这里创建的帧是没有内容的。
Alt + D 相比起 Alt + N 可以一次性复制多个帧。选中几个就复制几个帧。
帧时间
也就是每帧的占用的时间。

双击一列可以改变这一帧的持续时间。
我看别人推荐说是 200 ms 为好。

想要一次更改多个,就可以一次选中多个帧,然后右键,选择这个帧属性,就可以一次更改多个帧的时间。

如上图所示,一次性改了 8 帧图片。
标签

选中一些帧,然后右键可以添加标签。
每个标签就相当于 unity 中的一幅动画。建立一个新标签之后,点击动画的播放,也就是按下 Enter 键,就只能播放该标签内部的东西了。
对画布的更改

主要就是在工具下的Sprite子菜单中。
画布大小

点击 Canvas Size 可以进行更改。

左侧红框是画布的大小,右侧红框是当前画布在新画布中的位置。

可以更改 Borders,扩大范围。

旋转图片
点击 Rotate Canvas,就可以进行旋转。

只能旋转 180 度,90 度,以及水平对称与垂直对称。
TileMap
Asepite - 文档 - Tilemap --- Aseprite - Docs - Tilemap
其他工具
预览窗口
F7 可以打开或者关闭预览窗口。
此时 Shift + Enter 可以播放动画,也就是连续播放帧。
洋葱皮
这个是 aseprite 的特色功能。能够查看前一帧与后一帧。

点击设置。

这里 position 是显示这个结构出现的位置,现在是在底部,可以调到左侧或者是右侧。
然后是 Onion skin,我这里选择了 Red/Blue Tint,这个的意思就是前边的帧是红色的,后边的帧是蓝色的。

这里也可以拖动这两处位置,能够展示更多的帧,而不单单只是默认的一帧大小。
对称绘画

在 view 里面勾选上 symmetry options。

会多出来点选项,在菜单栏上。

现在就可以只画一半了。
导出为精灵图
我们自己做 unity 游戏,一般导入素材导入的就是精灵图,因为比较直观,好用。

在 file 中选择 export,然后点击 export sprite sheet。

需要先把这个 Open Spirte Sheet 给勾选上,这样可以创建一个新的 aseprite 文件,这时候 export 按钮才会亮。

我们也可以点击一下 layout,可以设置导出的图片格式。默认是 By Rows,提示上面说创建行,根据 layer 或者是 tag。
但仅靠默认其实是不生效的。

还需要点击 sprite 右侧的 split tags 或者 split layers,按照层或者标签进行划分。
这里就根据标签划分了两行。(记住每个标签都相当于 unity 中独立的一个动画)
这里可以直接将原来的 aseprite 图片导入到 unity 中,然后在动画页面,可以直接拖拽,就能够直接生成动画,在 aseprite 中修改,unity 中也会进行修改,但是是有些问题的。

点击 export,就又创建了一个新的 aseprite 图片。


在这里再次导出为 png 格式的图片,就是我们 unity 要用到的精灵图了。
导出为 GIF

我导出 gif 主要是给别人看的,默认的 size 大小 100%其实就太小了,因为毕竟像素很小,所以最好调大点,我这里用的就是 8 倍的大小。

可以选择是否循环。
至于前一个选项interlaced是隔行扫描的意思,开了跟没开好像没什么用。

效果就如上图所示。

这个是没有勾选 Loop 的。
如果涉及到多个 layer 会出现个弹窗,说不支持,不用管,继续就可以,默认是全部 visible 的 layer。
当然也可以在导出的第一步选择显示的 layer。
练习

可以将图片放入 Unity 中进行剪切,然后有更加高清的图片,仿照。
资源获取可以在 itch.io 中找到。