【JSX】べた塗りレイヤーを作成、カラーを変更・取得してみた

 今回は調整レイヤーの一つである『べた塗りレイヤー』をJSXで色々したいと思います。
 試してみたのはこんなところです。

  1. べた塗りレイヤーを作成する
  2. べた塗りレイヤーのカラーを変更する
  3. べた塗りレイヤーのカラーを取得する

前回記事にした境界線の線幅とカラーを設定、取得する方法よりかは比較的簡単にできました。

ではまずはべた塗りレイヤーを作成をやっていこうと思います。

べた塗りレイヤーを作成する

コード

function createSolidColor(r,g,b){
	var ref1 = new ActionReference();
	ref1.putClass( stringIDToTypeID( "contentLayer" ) );

	var desc1 = new ActionDescriptor();
	desc1.putReference( charIDToTypeID( "null" ), ref1 );

	var desc4 = new ActionDescriptor();
	desc4.putDouble( charIDToTypeID( "Rd  " ), r ); // R
	desc4.putDouble( charIDToTypeID( "Grn " ), g ); // G
	desc4.putDouble( charIDToTypeID( "Bl  " ), b ); // B

	var desc3 = new ActionDescriptor();
	desc3.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc4 );

	var desc2 = new ActionDescriptor();
	desc2.putObject( charIDToTypeID( "Type" ), stringIDToTypeID( "solidColorLayer" ), desc3 );
	desc1.putObject( charIDToTypeID( "Usng" ), stringIDToTypeID( "contentLayer" ), desc2 );
	executeAction( charIDToTypeID( "Mk  " ), desc1, DialogModes.NO );
}

createSolidColor(100,0,0);

簡単なコードの説明

 このコードを実行すると、引数で指定した色のべた塗りレイヤーが作成されます。
 基本的にはScriptingListenerを使って取得したコードを見やすいように整理したものです。

	var ref1 = new ActionReference();
	ref1.putClass( stringIDToTypeID( "contentLayer" ) );

	var desc1 = new ActionDescriptor();
	desc1.putReference( charIDToTypeID( "null" ), ref1 );

 ここは調整レイヤーを作りますよー、みたいなことをやってます。

	var desc4 = new ActionDescriptor();
	desc4.putDouble( charIDToTypeID( "Rd  " ), r ); // R
	desc4.putDouble( charIDToTypeID( "Grn " ), g ); // G
	desc4.putDouble( charIDToTypeID( "Bl  " ), b ); // B

 使うカラーを指定している部分です。
 RBGそれぞれを引数で指定できるようにしました。

	var desc3 = new ActionDescriptor();
	desc3.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc4 );

	var desc2 = new ActionDescriptor();
	desc2.putObject( charIDToTypeID( "Type" ), stringIDToTypeID( "solidColorLayer" ), desc3 );
	desc1.putObject( charIDToTypeID( "Usng" ), stringIDToTypeID( "contentLayer" ), desc2 );
	executeAction( charIDToTypeID( "Mk  " ), desc1, DialogModes.NO );

 実際に指定のカラーで調整レイヤーのべた塗りレイヤーを作成している部分です。
 カラーはこれ、レイヤーのタイプはこれ、ハイ作ります!みたいな感じなことしてるんだと思います。

createSolidColor(100,0,0);

 ここが実際に関数を実行している部分です。
 赤っぽいべた塗りレイヤーが作成されますね。

コードの整理の仕方は、またそのうちに記事にしたいね

そうね。多分コードを整理するだけで、かなり内容が見やすくなるからね

 では次に、すでに作成したべた塗りレイヤーのカラーを変更する、をやってみようと思います。

べた塗りレイヤーのカラーを変更する

コード

function setSolidColor(r, g, b){
	// べた塗りレイヤーかどうかをチェック
	if( activeDocument.activeLayer.kind != LayerKind.SOLIDFILL ){
		$.writeln("べた塗りレイヤーではありません");
		return;
	}

	var ref = new ActionReference();
	ref.putEnumerated( stringIDToTypeID( "contentLayer" ), charIDToTypeID( "Ordn" ), charIDToTypeID( "Trgt" ) );
	var desc1 = new ActionDescriptor();
	desc1.putReference( charIDToTypeID( "null" ), ref );

	var desc3 = new ActionDescriptor();
	desc3.putDouble( charIDToTypeID( "Rd  " ), r ); // R
	desc3.putDouble( charIDToTypeID( "Grn " ), g ); // G
	desc3.putDouble( charIDToTypeID( "Bl  " ), b ); // B

	var desc2 = new ActionDescriptor();
	desc2.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc3 );
	desc1.putObject( charIDToTypeID( "T   " ), stringIDToTypeID( "solidColorLayer" ), desc2 );
	executeAction( charIDToTypeID( "setd" ), desc1, DialogModes.NO );
}

setSolidColor(10, 10, 10);

簡単なコードの説明

	// べた塗りレイヤーかどうかをチェック
	if( activeDocument.activeLayer.kind != LayerKind.SOLIDFILL ){
		$.writeln("べた塗りレイヤーではありません");
		return;
	}

 まずはこの部分で、べた塗りレイヤーかどうかのチェックをしています。
 これで間違ってべた塗りレイヤー以外で実行してしまっても大丈夫。

	var ref = new ActionReference();
	ref.putEnumerated( stringIDToTypeID( "contentLayer" ), charIDToTypeID( "Ordn" ), charIDToTypeID( "Trgt" ) );
	var desc1 = new ActionDescriptor();

 ここはざっくり言えば、アクティブレイヤーを指しています。
 なのでこの関数はアクティブレイヤーに対して実行されます。

	var desc3 = new ActionDescriptor();
	desc3.putDouble( charIDToTypeID( "Rd  " ), r ); // R
	desc3.putDouble( charIDToTypeID( "Grn " ), g ); // G
	desc3.putDouble( charIDToTypeID( "Bl  " ), b ); // B

 べた塗りレイヤーの作成の時同様、これが実際に使われる色を設定している部分です。
 引数で渡せるようにしました。

	var desc2 = new ActionDescriptor();
	desc2.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc3 );
	desc1.putObject( charIDToTypeID( "T   " ), stringIDToTypeID( "solidColorLayer" ), desc2 );
	executeAction( charIDToTypeID( "setd" ), desc1, DialogModes.NO );

 アクティブレイヤーに先ほど指定した色を実際に設定している部分です。
 作成の時はcharIDToTypeID( “Mk ” )だったものがcharIDToTypeID( “setd” )になっていたりと、なんとなく何をやってるのか察せるかもですが、細かい話は別の機会に。

っていうか、自分だって完璧には理解してないんじゃん!

う、うん。だからそのうちわかる範囲で、イメージを伝えていこうかなと思ってるよ

 がんばります・・・。
 では最後に、べた塗りレイヤーのカラーを取得してみようと思います。

べた塗りレイヤーのカラーを取得する

コード

function getSolidColor(){
	// べた塗りレイヤーかどうかをチェック
	if( activeDocument.activeLayer.kind != LayerKind.SOLIDFILL ){
		$.writeln("べた塗りレイヤーではありません");
		return;
	}

	// 選択中のレイヤーの情報を取得する準備
	var ref = new ActionReference();
    ref.putEnumerated( charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );
    var desc = executeActionGet(ref)

	// 調整レイヤーを取得
	var adjustment = desc.getList(stringIDToTypeID('adjustment')).getObjectValue(0);

	// カラーを取得
    var objColor = adjustment.getObjectValue(stringIDToTypeID('color'));

	var result = {};    // 結果用 
    result.red = objColor.getDouble(charIDToTypeID('Rd  '));	// Rを取得
    result.green = objColor.getDouble(charIDToTypeID('Grn '));	// Gを取得
    result.blue = objColor.getDouble(charIDToTypeID('Bl  '))	// Bを取得
	
	return result;
}

result = getSolidColor();
if( result != undefined ){ 
    $.writeln (result.red); 
    $.writeln (result.green); 
    $.writeln (result.blue); 
}

簡単なコードの説明

 このコードは実行すると、選択中のべた塗りレイヤーのカラーが値で返ってきます。

	// べた塗りレイヤーかどうかをチェック
	if( activeDocument.activeLayer.kind != LayerKind.SOLIDFILL ){
		$.writeln("べた塗りレイヤーではありません");
		return;
	}

 べた塗りレイヤーかどうかをチェックしています。
 べた塗りレイヤーじゃない場合は、関数を抜けます。

	// 選択中のレイヤーの情報を取得する準備
	var ref = new ActionReference();
    ref.putEnumerated( charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );
    var desc = executeActionGet(ref)

 カラーの設定の時同様、ここではアクティブレイヤーを指しています。
 アクティブレイヤーの情報を取得するという意味になります。

	// 調整レイヤーを取得
	var adjustment = desc.getList(stringIDToTypeID('adjustment')).getObjectValue(0);

	// カラーを取得
    var objColor = adjustment.getObjectValue(stringIDToTypeID('color'));

 レイヤーの情報をたどって、カラーにたどり着きます。
 これでobjColorを調べれば、カラーを取得できるようになりました。

	var result = {};    // 結果用 
    result.red = objColor.getDouble(charIDToTypeID('Rd  '));	// Rを取得
    result.green = objColor.getDouble(charIDToTypeID('Grn '));	// Gを取得
    result.blue = objColor.getDouble(charIDToTypeID('Bl  '))	// Bを取得
	
	return result;

 カラーを取得できました!
 あとは値を返してやるだけです

result = getSolidColor();
if( result != undefined ){ 
    $.writeln (result.red); 
    $.writeln (result.green); 
    $.writeln (result.blue); 
}

 関数を実行。デバッグウィンドウにRGBの値が表示されます。

説明が漠然だね・・・

うん・・・でも、やってることのニュアンスは伝わるんじゃないかな?

 要望がございましたらわかる範囲でもう少し詳しく書くかもしれません。

おしまい

 私はゲーム開発をしているとき、UIを主にPhotoshopで制作しています。
 デザインだけではなく、座標の出力やその他もろもろも設定をPhotoshopだけでできるようにしているので、レイヤー情報の取得関連が特に必要になってきます・・・が!情報がない・・・。
 同じ使い方をする人がそれほど多いとは思えませんが、少しでも数少ない人たちのお役に立てれば幸いです。


私(S.Fuka)が企画、シナリオ、グラフィックを担当させていただきました、にゃっほい屋のゲームがSteamにて配信中です。
もし興味がありましたらSteamページだけでもご覧になっていただければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です