読み込んだテキストを使い、PhotoShopのスクリプトでボタン作成

スクリプトの導入や基本はよそ様まかせ

PhotoShopスクリプトの導入方法などについては
helpx.adobe.com
www.ochiaimitsuo.com

PhotoShopスクリプトの基本については
Adobe Photoshop CS6使い方辞典

といったサイトが詳しく掲載してくださっているので割愛する。
まあ基本的に、

• PhotoShopがインストールされたフォルダの「Presets¥Scripts」にjsという拡張子でテキストを保存すればよい。
• PhotoShopが起動中なら再起動を忘れずに。
• PhotoShopメニューの「ファイル」→「スクリプト」に保存した名前のスクリプトができているはずである。

実際に書いてやってみる

こんな感じのPhotoShopデータを使う。

ファイア	3	炎を放つ	3
アイス	4	氷で攻撃する	2
ヒール	2	HPを30前後回復する	4
マグマ	18	溶岩で攻撃する上級魔法	0
シールド	5	防御力を50%あげる	1

で、上記のようなことが書かれたテキストを読み込み、スクリプトでボタンを作成する。
（テキストファイルの名前は、psdファイルと同じにする）

最終結果はこんな感じになる。
　
　
では以下のスクリプトをコピペして、js形式で保存しよう。ちょっと長いのはご勘弁。

//とりあえずpsd形式で保存されているファイル→PNGで出力のみ対応
var headTxt = app.activeDocument.name.replace('.psd', ''); 

//テキストデータ置き場を変えたいときはここをいじる
//フルパス決め打ちで "C:\\gamedata\\txt\\"とかでもいい
var sourceTextPath = app.activeDocument.fullName.parent.fsName+"\\"; 
//出力先も同様
var targetPath = app.activeDocument.fullName.parent.fsName+"\\"; 

var loadedArray = [];
var lineArray; //一時格納用

var textLayer;
var stextLayer;
var itextLayer;
var fillLayer;

var colors = []; //色データ

//PNGでセーブする用のデータ
var pngSaveOpt = new PNGSaveOptions();
pngSaveOpt.interlaced = false;


function MainProc() {
	if(LoadText(sourceTextPath + headTxt + ".txt") == false)
		return;
	FindLayers();
	MakeColorList();
	ExportAllProc();
}

function FindLayers() {

	textLayer = activeDocument.layerSets["group"].artLayers["text"];
	stextLayer = activeDocument.layerSets["group"].artLayers["subtext"];
	itextLayer = activeDocument.layerSets["group"].artLayers["infotext"];
	fillLayer = activeDocument.artLayers["fill"];
}


function MakeColorList() {
	colors.push(MakeColor(0,0,0)); //灰色0
	colors.push(MakeColor(235,97,0)); //オレンジ系1
	colors.push(MakeColor(0,100,238)); //青色2
	colors.push(MakeColor(255,10,2)); //赤色3
	colors.push(MakeColor(18,232,32)); //緑色4
}
function MakeColor(r, g, b) {
	var rgbColor = new RGBColor();

	rgbColor.model = ColorModel.RGB; 
	rgbColor.red = r;
	rgbColor.green = g;
	rgbColor.blue = b;

	return rgbColor;
}

function ExportAllProc() {
	var chosenColor;

	for (i = 0; i < loadedArray.length; i++) {
		textLayer.textItem.contents = loadedArray[i][0];
		stextLayer.textItem.contents = loadedArray[i][1];
		itextLayer.textItem.contents = loadedArray[i][2];

		chosenColor = loadedArray[i][3];
		if(chosenColor < 0) {
			chosenColor = 0;
		} else if(chosenColor >= colors.length) {
			chosenColor = colors.length-1;
		}
		activeDocument.activeLayer = fillLayer;
		activeDocument.selection.selectAll();
		activeDocument.selection.clear();
		activeDocument.selection.fill(colors[chosenColor], ColorBlendMode.NORMAL, 100, false);

		DoExportPNG(targetPath + headTxt + "_"+('0000' + i).slice(-4) + ".png"); //連番PNGで保存
	}
}

function LoadText(filename) {
	var loadedText;
	var splittedArray;

	fileObj = new File(filename);
	flag = fileObj.open("r");
	if (flag == true) {
		while (!fileObj.eof) {
			loadedText = fileObj.readln();
			splittedArray = loadedText.split("\t");

			 //空行は無視
			if (splittedArray.length == 0) {
				continue;
			}
			
			lineArray = ["","","",0]; //初期値を入れる

			//１～３列目は文字列 ４列目数字というパターン
			//自分で使うならこれくらい決め打ちのコードでもいい
			if (splittedArray.length >= 1) {
				lineArray[0] = splittedArray[0];
			}
			if (splittedArray.length >= 2) {
				lineArray[1] = splittedArray[1];
			}
			if (splittedArray.length >= 3) {
				lineArray[2] = splittedArray[2];
			}
			if (splittedArray.length >= 4) {
				lineArray[3] = parseInt(splittedArray[3]);
			}
			loadedArray.push(lineArray);
		}
		fileObj.close();
	} else {
		alert("ファイルが開けませんでした");
		return false;
	}

	return true;
}

function DoExportPNG(saveFileName) {
	saveFileObj = new File(saveFileName);

	//保存する
	try {
		activeDocument.saveAs(
			saveFileObj,
			pngSaveOpt,
			true,
			Extension.LOWERCASE);
	} catch (msg) {
		alert(msg + " 保存できませんでした");
	}


}

MainProc();
alert("終了");

psdファイルを開いた状態でスクリプトを実行した結果を再掲。
psdと同じフォルダに、連番で５つのPNGファイルができている。
実際は出力先を違うフォルダにしたほうが扱いやすいだろう
（例えばUnityのアセットフォルダの中に出力先を作り、そのフォルダからアトラスが作られるようにUnityで設定する）。

慣れてきたら

慣れてきたらスクリプトとpsdの構造を見比べてみよう。

• 「group」の中に「text」「subtext」「infotext」、それから別に「fill」というレイヤーが必要な構造である。
• それより下のほうのレイヤーはどんな名前でもいい。
• スクリプトと見比べながら、自分の作りたいように改造してみると良い
• （スクリプトが良く分からなくても、最悪使わないとこは文字を入れなければいい）
• データについてはExcelで作り、テキストファイルにコピペするのが手軽だ。

一応データもこちらからダウンロード可能

http://cbaku.com/hatena/sample000/ui_magic.zip
いちおう参考までにデータも（スクリプトは入っていない）

• 源真ゴシックPのHeavyが入っていないとフォントが変わってしまう。
• 古いPhotoShopでは開かないかもしれない。