[ Starling ] オブジェクト – BlurFilter/ColorMatrixFilter –

前回は、FeathersのInpuTextクラスについてご紹介いたしました。
今回は、Starlingに戻り、DisplayObjectに適応することが出来るfilterをご紹介したいと思います。

filterとはどのようなものかイメージが沸かない方もいると思いますので、まずはこちらをご覧下さい。

ソースコードはこのようになっています。

	/** BlurFilter */
	//左上
	//光彩
	var myFilter01:BlurFilter = BlurFilter.createGlow( 0xFF00FF, 4, 8, 0.6 );
	img01.filter = myFilter01;

	//中上
	//ぼかし
	var myFilter02:BlurFilter = new BlurFilter( 0.5, 1, 0.5 );
	img02.filter = myFilter02;

	//右上
	//ドロップシャドウ
	var myFilter03:BlurFilter = BlurFilter.createDropShadow( 8, Math.PI / 2, 0x000000, 1, 1, 0.8 );
	img03.filter = myFilter03;

	/** ColorMatrixFilter */
	//最左
	//明度変更
	var filter01:ColorMatrixFilter = new ColorMatrixFilter();
	filter01.adjustBrightness( 0.5 );
	img04.filter = filter01;
		
	//左
	//コントラスト変更
	var filter02:ColorMatrixFilter = new ColorMatrixFilter();
	filter02.adjustContrast( -0.5 );
	img05.filter = filter02;
		
	//右
	//色相変更
	var filter03:ColorMatrixFilter = new ColorMatrixFilter();
	filter03.adjustHue( 0.5 );
	img06.filter = filter03;
		
	//最右
	//彩度変更
	var filter04:ColorMatrixFilter = new ColorMatrixFilter();
	filter04.adjustSaturation( 0.5 );
	img07.filter = filter04;

フィルターの適応はImageクラスがもっているfilterプロパティを使用します。

filterを適応するために使用しているクラスは BlurFilter と ColorMatrixFilter です。

BlurFilterクラスは「ぼかし」「ドロップシャドウ」「光彩」フィルタをかけることができ
ColorMatrixFilterクラスは「明度」「色相」「コントラスト」「彩度」を調整することが出来ます。

これらのクラスを同時に適応させることは出来ません。

それでは、各フィルターの使用方法についての説明に入ります。

■ColorMatrixFilterクラスが持っている関数

• adjustBrightness : 明度の変更
• adjustContrast : コントラストの変更
• adjustHue : 色相の変更
• adjustSaturation : 彩度の変更

各関数の引数は全て-1～1を指定します。
サンプルのswfでは下段の４つがColorMatrixFilterを使用しています。

■BlurFilterクラスが持っている関数

• createGlow : 光彩をつける
• createDropShadow : ドロップシャドウをつける

BlurFilterはColorMatrixFilterよりも引数が少々複雑です。

コンストラクタは、「x軸方向のぼかし」「y軸方向のぼかし」「(ほかしの)精度」
createGlow関数は、「色」「アルファ値」「ぼかし」「(ぼかしの)精度」
createDropShadow関数は、「影の長さ」「影をつける角度」「色」「アルファ値」「(ぼかしの)精度」

となります。

BlurFilterで指定する引数は全てデフォルトで設定される値をもっているので、全て省略することも可能です。

簡単なご紹介となりましたが、以上で本記事は終了となります。

最後まで御覧いただきありがとうございました。

＜ColorMatrixFilterを使用した簡単な点滅処理＞

点滅サンプルコード

import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.textures.Texture;
import starling.events.Event;

import starling.filters.BlurFilter;
import starling.filters.ColorMatrixFilter;

internal class StarlinTestMain extends Sprite
{
//各種ファイルの埋め込み
[Embed(source = “../res/img/title-logo.png”)]
private static const Logo:Class;

private var img:Image = null;
private var bool:Boolean = false;
private var count:uint = 0;
private var matrix:ColorMatrixFilter = null;

public function StarlinTestMain()
{
addEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
}

private function addStage(e:starling.events.Event):void
{
removeEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);

matrix = new ColorMatrixFilter();

img = new Image( Texture.fromBitmap( new Logo() ) );
img.x = stage.stageWidth * 0.5;
img.y = stage.stageHeight * 0.5;
img.pivotX = img.width * 0.5;
img.pivotY = img.height * 0.5;
addChild( img );
img.addEventListener( Event.ENTER_FRAME, blink );

}

private function blink():void {

count = bool ? count – 1 : count + 1;

if ( count >= 10 ) {

bool = true;
}
else if( count <= 0 ){ bool = false; } //filter設定をリセット matrix.reset(); //明るさ設定 matrix.adjustBrightness( count * 0.1 ); //フィルター適応 img.filter = matrix; } } [/as3] ＜次回の更新について＞ 次回から、ゲームエンジンであるCitrusEngineについてご紹介致します。

---

弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。

---