用Photoshop自动创建CocosStudio .csd文件

俗语有云：“工欲善其事，必先利其器”，一款合适的工具能让工作事半功倍。尽管Cocos2d - x功能强大，还配备了Cocos Studio 2编辑器，但在美术设计完成后，将其在Cocos Studio 2编辑器中呈现出来，仍是一项工作量较大的任务。具体而言，美术人员需先把美术元素切成小图，然后编辑器使用人员再依据效果图，在编辑器中拼接这些小图。这些操作不仅缺乏技术含量，还极为耗时费力。于是，“PhotoshopLayerToCocosStudioCSD”工具应运而生，它能让美术人员和编辑器使用人员节省大量时间。

工具介绍

LayersToCSD.jsx是一款用于在Photoshop中自动创建CocosStudio场景（Scene/Layer/Node）的工具。它是一个Photoshop脚本文件，安装和使用都十分便捷。该脚本改编自Spine的LayersToPNG.jsx脚本，仅对文件输出部分进行了修改，并增加了一个.csb类型选择，因此操作界面与原脚本基本相同。

此工具在Adobe Photoshop CS6上进行了调试，其他版本未作测试。输出的csd文件格式为Cocos Studio 2的v2.1.5版本，其他版本同样未作测试。

安装

安装过程非常简单，只需下载LayersToCSD.jsx文件，然后将其放置到Photoshop的“Scripts”目录即可。Photoshop的“Scripts”目录详细路径为：Photoshop安装盘\Photoshop文件夹\Presets\Scripts\。

使用

使用该工具只需两步：

1. 在Photoshop中执行脚本：打开要输出的文件，选择Photoshop的“文件”菜单，接着选择“脚本”子菜单，即可看到“LayersToCSD”子菜单。点击该子菜单，会弹出操作窗口。若无需修改，直接点击“OK”按钮。
2. 导入到Cocos Studio 2：将上一步生成的.csd文件和images文件夹拖拽到Cocos Studio 2编辑器已打开的工程中。

完成以上两步操作后，就可以继续进行其他事务了。

附加信息

输出类型选择

默认输出的.csb类型为Scene，在弹出窗口的Type下拉框中，可以选择Scene/Layer/Node，分别对应.csb的Scene/Layer/Node类型。

画布大小问题

Photoshop画布大小最好与Cocos Studio 2场景编辑器中的画布大小相同，否则可能会出现拉伸变形的情况，但这一点尚未进行实际测试。

转换过程

由于需要在Photoshop中将每个图层转换为图片并存储到磁盘，此操作速度会稍慢。开始执行后，需稍作等待，Photoshop中会出现一些额外的操作窗口。待这些窗口自动执行完所有操作并自动关闭后，转换即全部完成。若按默认操作执行，可在.psd文件存放目录中看到新增加的一个.csd文件和一个images文件夹，这些操作均为自动完成，无需人工干预。

对象类型问题

使用该工具生成的.csd文件中，“NodeObjectData”均为“SpriteObjectData”。若能在Cocos Studio 2中可视化修改对象类型，将更为方便。

工具完善方向

该工具存在较多可完善之处，例如：

• 美术人员在Photoshop设计好后，执行脚本可直接打开Cocos Studio 2查看编辑器效果，但这需要美术人员额外安装较难使用的Cocos Studio 2，实用性不高，故可放弃该方向。
• 在Photoshop的Layer中增加关键字，直接用工具生成Cocos Studio 2编辑器用到的“按钮”“复选框”“输入框”等控件，但这会让美术人员承担额外工作，因此也不太可取。

中文支持问题

该工具不支持中文，原因是其改编的Spine的LayersToPNG.jsx脚本本身就不支持中文。

文件名生成规则

若未在弹出窗口设置.csb文件名，工具将根据.psd的文件名生成.csd文件名。工具依据Photoshop中Layer的名字来生成图片的名字，因此策划需先与美术人员沟通好游戏用图的命名规则，也就是Photoshop中Layer的命名规则。若Layer名为中文，最终输出的图片名可能会显示为乱码。

工具展望

该工具可能不会有后续完善，希望Cocos Studio 2编辑器开发方能推出一个完善的Photoshop插件。

推荐工具

为美术人员推荐一款方便在真机上查看设计效果的工具：ps play。这是由其他开发者开发的工具，如有问题可向相关人员咨询。