Starlingの Image.color で色変え

テクスチャ画像の色変え

StarlingでImageの色かえをするには以下の2つの方法があります。

• ColorMatrixFilter
• Image.color

ColorMatrixFilterは、色相・彩度などを変更でき柔軟性が高く自由に色変えを行うことができます。ほぼ従来のflash.filters.ColorMatrixFilterと同じです。ただし動作は重たくモバイルでは使いづらいのが難点です。

Image.colorプロパティは非常に高速に動作しますが、指定色を乗算をするだけなので色変えといっても表現の幅は限られています。とはいえモバイルでもパフォーマンスを気にせずに使えるのは大きな魅力です。

Image オブジェクトでは、カラー値が指定できるcolor プロパティが公開されています。各ピクセルに関し、最終的なカラーは、テクスチャのカラーと指定したカラーとの乗算の結果になります。これによりイメージの色合いを簡単に変えることができ、別のテクスチャを使用しなくてもイメージのさまざまなバリエーションが作成できます。
Introducing Starling 日本語訳 57ページより

　

どのような画像が色変えに向いているか？

無彩色の画像や、同系統の色でまとまっているような画像だと、違和感なく色変えしやすい印象。

　

Flash CS6でシミュレートする

カラー効果の詳細スタイルで、赤・青・緑のパーセンテージをいじることによって、Image.colorプロパティを変更した時と同様の効果をシミュレートできる。
なお、RGBの各値は以下の計算式で算出できる。

[RGB各値] = 255 * [パーセンテージ] / 100

　

RGB値を算出するJSFL

以下のJSFLは、選択中のインスタンスのカラー効果をImage.color用のRGBに変換しクリップボードにコピーします。

convert_starling_image_color.jsfl

var doc = fl.getDocumentDOM();
var selection = doc.selection[0];
if(selection == undefined) alert('オブジェクトが選択されてないふにゃ');
else {
	var r = 255 * selection.colorRedPercent / 100;
	var g = 255 * selection.colorGreenPercent / 100;
	var b = 255 * selection.colorBluePercent / 100;
	
	var rgb = r << 16 | g << 8 | b;
	var rgb_hex = '0x' + ('000000'+rgb.toString(16)).slice(-6);
	
	fl.clipCopyString(rgb_hex);
	alert('copy to clipboard: ' + rgb_hex);
}