关于精灵图的制作并获取json(精灵表)

550 阅读1分钟
前言

本文章着重于介绍一款做精灵图的软件,由于项目任务开发createJS动画需要,需要去制作精灵图并获取精灵表用于后续的开发,在此简单说明下,给其他刚入新伙伴们提提速。

软件介绍

废话不多说,直接上软件:TexturePackerGUI

下载地址:www.codeandweb.com/texturepack…

按照提示流程下一步直接安装即可!1658125574766.jpg

软件使用

打开应用界面如下:

image.png (注意!!右下角,刚安装成功打开后,还需要免费激活下试用版,只有7天,挺坑的,项目应急倒是没关系。)

直接将图拖到右侧

image.png 点击右下角的高级设置,我们可以设置它的一些布局属性

Q:那么我们要获取精灵表还需要做什么设置?

A:注意右上角,点击数据格式,选择EaselJS/CreateJS

image.png

完成设置后,点击发布精灵图,即可获得精灵图及其精灵表

image.png

image.png

我们来看看json

image.png

简单应用

如果你也需要用到精灵表 (这个小图命名不是随意命名,a字母开头,第二个数字代表编号1的小车,第三个数字代表它的状态时1,毕竟几号小车且是什么状态我们得根据后端返回,后端返回后我们就可以动态设置
this.Container = new createjs.Sprite(carSprite, a11)这句代码里的a11即可,免得返工再做图)

image.png

刚涉及这方面的项目,其他软件没有更多去了解,如果你有更好的软件(最好是可以一直白嫖的),欢迎大佬们留言啊!

微信图片_20220718145918.jpg