制作精灵图 glue 的安装使用（安装过程存在的问题）

缺乏、安全感 2022-02-01 00:51 206阅读 0赞

帧动画是很多张图片的切换，依赖人眼的视觉残留效应实现动画的效果；

一般情况下设计会给到很多的图片，这个时候，作为前端需要把这些图片合成一张图片，

然后改变图片的位置，显示相应的图片区域即可；

———————————————————————————————————————————————————

合成图片的工具：glue

GitHub地址：

[https://github.com/jorgebastida/glue][https_github.com_jorgebastida_glue]

Windows下的安装使用：

[https://glue.readthedocs.io/en/latest/installation.html][https_glue.readthedocs.io_en_latest_installation.html]

依照上面 Windows下的安装步骤安装即可，当然非Windows, 那么参考对应的说明安装；

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

当然了，你可能一步到位，顺顺利利，但是我就没这么好运了

（本人反反复复安装了很多次，不断尝试，最后还是成功了，所以千万别放弃啊）

上面的安装步骤大概就是：

安装python ，注意添加环境变量；

安装PIL , 这个是python 的图形库；

安装 easy\_install 这个工具；

利用easy\_install 安装 glue;

问题：

1. python安装 2.7.15 版本的可行（2.7.2 的似乎有问题啊）；

2. 按照官网的指示点开链接安装 PIL 居然找不到，好吧，给出直达车：[http://www.pythonware.com/products/pil/\#pil117][http_www.pythonware.com_products_pil_pil117]，

安装适合python2.7.x 的PIL 即可，

2. 使用 easy\_install 安装glue 居然失败了：如下图，如果你也遇到，那么记得更新python 版本；

如果还是不行，那么使用 easy\_install 安装一下 pip , 然后使用 pip 安装 glue；

如果你不知道easy\_install 和 pip 是什么，可以类比 npm ；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70][]

3. 经过上面的步骤应该就可以了，如果还是不行，不要着急，记得排查一下安装的软件的类型，统一使用win32的；

4. 需要注意的是：图片的文件名最好不要有特殊字符，不然也会导致错误，常规命名即可；

经过上面的一番折磨，终于安装好了，下面试试把图片合成一下的测试：

新建两个文件夹，abc 文件夹和 def 文件夹；

然后在把所有的图片放到abc文件夹中，然后使用命令： glue abc def 即可；

会生成相应的精灵图和css 文件；

本人没有接触过 python，但是安装 glue 的过程中 , 了解了PIL/Pillow 相关知识，才发现 python也是很强大的，

也许，是时候学习一下了；

[https_github.com_jorgebastida_glue]: https://github.com/jorgebastida/glue
[https_glue.readthedocs.io_en_latest_installation.html]: https://glue.readthedocs.io/en/latest/installation.html
[http_www.pythonware.com_products_pil_pil117]: http://www.pythonware.com/products/pil/#pil117
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70]: /images/20220201/4dd2b41c45fe4427a0b86aa4b7f88d37.png