PIXI Filter 총정리
(PIXI 2.2.9)
목차 |
1
2
3
4
5
6
7
8
9
10
11
12
|
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.RGBSplitFilter();
$tilefilter.padding = Graphics.boxHeight;
$tilefilter.red.x = -20;
$tilefilter.red.y = -20;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.ColorStepFilter (색상 단계 조절) |
1
2
3
4
5
6
7
8
9
10
11
|
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.ColorStepFilter();
$tilefilter.padding = Graphics.boxHeight;
$tilefilter.step = 8;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.TwistFilter (나선형으로 이미지를 돌리는 효과) |
1
2
3
4
5
6
7
8
9
10
11
12
13
|
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.TwistFilter();
$tilefilter.padding = Graphics.boxHeight;
$tilefilter.offset.x = 0.5;
$tilefilter.offset.y = 0.3;
$tilefilter.radius = 1.5;
$tilefilter.angle = (Math.PI / 180) * 60;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.SepiaFilter (세피아 효과) |
PIXI.SepiaFilter 필터를 타일맵에 적용하면 아래와 같이 타일맵의 톤이 Sepia 톤으로 변하게 됩니다.
이 필터에는 sepia 라는 속성이 있는데 이 값이 1이면 효과가 적용되고 0 이면 원래 색상이 표시됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
|
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.SepiaFilter();
$tilefilter.padding = Graphics.boxHeight;
$tilefilter.sepia = 1;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.InvertFilter (색상 반전 효과) |
PIXI.InvertFilter 필터를 타일맵에 적용하면 아래와 같이 색상이 반전됩니다.
속성은 $tilefilter.invert 가 있는데 이 값이 1이면 색상이 반전되고 0 이면 정상적으로 표시하게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.InvertFilter();
$tilefilter.padding = Graphics.boxHeight;
$tilefilter.invert = 1;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.BlurFilter (블러 효과) |
PIXI.BlurFilter 필터를 타일맵에 적용하면 아래와 같이 타일맵이 전체적으로 흐려지게 됩니다.
속성은 $tilefilter.blurX 와 $tilefilter.blurY 가 있는데 이 속성값으로 흐림의 정도를 결정할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.BlurFilter();
$tilefilter.padding = Graphics.boxHeight;
$tilefilter.blurX = 5;
$tilefilter.blurY = 5;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.PixelateFilter (레트로 느낌) |
PIXI.PixelateFilter 필터를 타일맵에 적용하면 아래와 같이 레트로 느낌으로 변합니다.
1
2
3
4
5
6
7
8
9
10
11
12
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.PixelateFilter();
$tilefilter.padding = Graphics.boxHeight;
this.filters = [$tilefilter];
}
})();
|
cs |
아래와 같이 사이즈 지정이 가능합니다.
1
2
|
$tilefilter.size.x = 2;
$tilefilter.size.y = 2;
|
cs |
PIXI.ColorMatrixFilter |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.ColorMatrixFilter();
$tilefilter.padding = Graphics.boxHeight;
// 어둡게
var colorElement = [
1,0,0,-0.5,
0,1,0,-0.5,
0,0,1,-0.5,
0,0,0,1];
$tilefilter.matrix = colorElement;
this.filters = [$tilefilter];
}
})();
|
cs |
아래 예제를 타일맵에 적용하면 화면이 전체적으로 밝게 변합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.ColorMatrixFilter();
$tilefilter.padding = Graphics.boxHeight;
// 밝게
var colorElement = [
1,0,0,0.3,
0,1,0,0.3,
0,0,1,0.3,
0,0,0,1];
$tilefilter.matrix = colorElement;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.DisplacementFilter |
1
2
3
4
5
6
7
8
9
|
var img = ImageManager.loadSvEnemy('Assassin');
var sprite = new Sprite(img);
SceneManager._scene.addChild(sprite);
var dmf = new PIXI.DisplacementFilter(sprite.texture);
sprite.filters = [dmf];
setInterval(function() {
dmf.offset.x = Math.randomInt(10);
dmf.offset.y = Math.randomInt(10);
}.bind(this), 10);
|
cs |
PIXI.CrossHatchFilter (그물망 효과) |
1
2
3
4
5
6
7
8
9
10
11
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.CrossHatchFilter();
$tilefilter.padding = Graphics.boxHeight;
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.DotScreenFilter |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.DotScreenFilter();
$tilefilter.padding = Graphics.boxHeight;
//set Scale
$tilefilter.scale = 1;
//set Angle
$tilefilter.angle = 5;
//set Filters
this.filters = [$tilefilter];
}
})();
|
cs |
PIXI.GrayFilter |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var $tilefilter = null;
(function() {
var alias_Tilemap_initialize = Tilemap.prototype.initialize;
Tilemap.prototype.initialize = function() {
alias_Tilemap_initialize.call(this);
$tilefilter = new PIXI.GrayFilter();
$tilefilter.padding = Graphics.boxHeight;
// 1 이면 회색으로, 0 이면 원래 색상으로
$tilefilter.gray = 1;
//set Filters
this.filters = [$tilefilter];
}
})();
|
cs |
필터 미리 보기 |
유용한 플러그인 |
아래는 기본 필터를 맵이나 이벤트에 적용할 수 있게 해주는 플러그인들입니다.
Filters - GLSL Shaders By Xilef - http://www.hbgames.org/forums/viewtopic.php?p=930983
Pixi Filters By Moghunter - https://atelierrgss.wordpress.com/rmv-pixi-filters/