고급강의실
2016.01.18 22:58

PIXI Filter 총정리 (PIXI 2.2.9)

조회 수 18676 추천 수 3 댓글 4
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

 

PIXI Filter 총정리

(PIXI 2.2.9)

 

 

 목차

PIXI.RGBSplitFilter
PIXI.ColorStepFilter
PIXI.TwistFilter 
PIXI.SepiaFilter
PIXI.InvertFilter
PIXI.BlurFilter
PIXI.PixelateFilter
PIXI.ColorMatrixFilter
PIXI.DisplacementFilter
PIXI.CrossHatchFilter
PIXI.DotScreenFilter
PIXI.GrayFilter

 

 PIXI.RGBSplitFilter (색상 분리 필터) 

 
색상을 분리할 수 있는 필터로 예제에서는 타일맵에 적용되어있습니다. 타일에서 빨강, 녹색, 파랑 값을 따로 추출해내는 필터입니다. 공포 어드벤쳐 게임에서 환각 상태나 여러가지 상태를 표현할 때 이 필터를 적용하면 매우 유용할 것으로 보여집니다.
 
1.png

 

 
속성은 red, green, blue 가 있으며 각 속성은 2차원 벡터(x와 y 값을 가지는 객체를 뜻합니다)로 구성되어있습니다. 필터는 기본값이 지정되어있으므로 수정하지 않아도 상관 없으나 애니메이션 효과를 주려고 할 땐 적절히 수정해야 하는데 그때 아래와 같이 2차원 벡터 값에 접근할 수 있습니다.
 
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
 
색상 벡터에 기본적으로 적용되어있는 각 성분의 값은 아래와 같습니다.
 
red 는 원점(0, 0)으로부터 x:20, y:20 만큼,
green 은 원점으로부터 x:-20, y:20 만큼,
blue 는 원점으로부터 x:20, y:-20 만큼,
 
각 색상에 해당하는 벡터 값들은 셰이더와 연결되어있으므로 이 값들을 조작하면 셰이더를 조작하지 않아도 색상을 분리할 수 있게 되므로 결과적으로 위 스크린샷과 같은 화면을 띄우게 됩니다.
 
 

 PIXI.ColorStepFilter (색상 단계 조절) 

상 단계를 조절하여 이미지를 단순화시킬 수 있는 필터입니다.
 
2.png

 

 
색상 단계를 조절하여 이미지의 색상을 단순화시킬 수 있습니다. (포토샵의 Posterize 기능과 같습니다)
 
step 속성 하나를 가지고 있는데 이 값은 색상 단계 조절이기 떄문에 0 ~ 255 까지 조절 가능합니다.
 
255 은 원래 색상이며 0 은 0단계 검정색입니다. 
 
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 (나선형으로 이미지를 돌리는 효과) 

타일맵에 왜곡 효과를 적용하는 필터입니다.
 
3.png

 

 
원점으로부터의 거리(2차원 벡터의 길이)가 왜곡 효과가 적용될 원의 반지름(radius)보다 작으면 
 
해당 구간엔 왜곡 효과가 적용됩니다.
 
offset 은 좌표를 정밀하게 수정할 수 있는 오프셋 좌표로 스프라이트 객체에서 많이 볼 수 있었을 것입니다.
 
angle 은 왜곡 회전 각도인데 라디안 단위로 변환해줘야 합니다.
 
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 톤으로 변하게 됩니다.

 

4.png

 

  

이 필터에는 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 필터를 타일맵에 적용하면 아래와 같이 색상이 반전됩니다.

 

5.png

 

 

속성은 $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

 

속성은 프레그먼트 셰이더의 invert 값과 연결되어있습니다.
 
 

 PIXI.BlurFilter (블러 효과) 

PIXI.BlurFilter 필터를 타일맵에 적용하면 아래와 같이 타일맵이 전체적으로 흐려지게 됩니다.

 

6.png

 

  

속성은 $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 필터를 타일맵에 적용하면 아래와 같이 레트로 느낌으로 변합니다.

 

7.png

 

 

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

 
색상 벡터(4차원 벡터)에 단위 행렬을 곱하는 방식으로 기존 색상 벡터를 조절할 수 있는 필터로 단위 행렬을 변형하는 방식으로 모든 픽셀의 색상을 간단히 조절할 수 있습니다. 쉽게 말하면 이미지의 밝기나 채도 등을 조절할 수 있는 필터라고 할 수 있습니다. 각 행의 마지막 열은 알파값을 조절할 수 있는 값들이며 대각선 방향의 값은 채도에 해당합니다. 
 
8.png

 

아래 예제를 타일맵에 적용하면 화면이 전체적으로 어둡게 변하게 됩니다.
 
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

 

9.png

 

아래 예제를 타일맵에 적용하면 화면이 전체적으로 밝게 변합니다.

 

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

PIXI.DisplacementFilter 는 이미지의 크기와 방향을 조절할 수 있는 필터입니다. 필터라는 것은 색상을 처리하는 셰이더를 통해 이뤄지므로 정점 하나(픽셀)에 직접적으로 적용됩니다. 
 
▲ 벌벌 떨고 있는 닌자
 
이 필터는 초기화 인자로 텍스쳐를 지정해야 하는데 아래와 같이 사용할 수 있습니다. 사용할 수 있는 속성은 3가지가 있습니다. 텍스쳐의 크기나 각종 정보가 할당되어있는 속성은 map 입니다. 이동 방향을 나타내는 속성 값은 offset 이며 크기를 나타내는 속성값은 scale 입니다. offset 과 scale 은 2차원 벡터로 이루어져있기 때문에 각각 x 와 y 값을 갖습니다. 위 예제 동영상에서는 벌벌 떨고 있는 닌자로 간단하게 응용해봤습니다.
 
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 (그물망 효과)

 
PIXI.CrossHatchFilter 를 타일맵에 적용하면 아래와 같이 타일맵에 그물망 효과가 나타납니다. 그물망의 색상은 검정색이며 다른 색상으로 바꾸려면 셰이더 코드를 수정해야 합니다.
 
10.png

 

 
이 필터는 따로 셰이더와 연결되어있는 속성이 없습니다. 소스 코드 상에서는 blur 라는 속성이 있다고 나와있습니다. 하지만 실제 코드에는 전혀 영향을 주지 않는 버그 코드입니다. 따라서 최신 버전에서는 해당 코드가 아예 제거되어있는 상황입니다. 아래 예제는 타일맵에 그물망 효과를 적용할 수 있는 코드입니다.
 
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

 
PIXI.DotScreenFilter 는 아래 스크린샷과 같은 패턴으로 이미지를 묘화하는 필터입니다. 패턴은 수식에 의해 결정되는데 scale 과 angle 속성 값을 조절하여 여러가지 패턴을 만들 수 있습니다.
 
11.png

 

 
12.png

 



13.png

 

 
14.png

 

 
scale 과 angle 값을 적절히 조절하면 마치 흑백 만화 같은 느낌을 만들 수도 있습니다. 다소 색다른 느낌이긴 하지만 명암 부분을 보면 사실 굉장히 정교하므로 컴퓨터로 표현한 것 같은 느낌을 지울 수 없긴 합니다.
 
15.png

 

 
마찬가지로 타일맵에 적용할 수 있는 예제입니다. 다른 예제들과는 달리 padding 은 필터가 적용되는 영역(filterArea)을 수정하고자 할 때 사용할 수 있는 값입니다. 필터가 그려지는 영역(x, y, width, height)에 가산되거나 감산되면서 영역이 조정됩니다. 예제에서는 필터가 적용되어야 할 공간이 남는 문제가 있어 검정색 백버퍼가 출력되므로 padding 값을 조절하여 해당 영역을 수정해준 것입니다.
 
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

 
PIXI.GrayFilter 를 적용하면 이미지가 회색으로 바뀝니다. 
 
16.png

 

 
타일맵에 적용하는 코드는 아래와 같습니다. 세피아 필터와 동일하게 1 이면 회색으로 변환하고, 0 이면 원래 색상이 표시됩니다.
 
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/

 
?
  • ?
    HONG2NVang 2016.01.18 23:35
    오오...대박이네요. 추천합니다. 이런좋은것!
  • profile
    gcyong 2016.01.19 03:32
    간단하게 뷰포트를 변화시키는 모습이 인상적입니다.

    아주 좋은 게시글이네요.
  • profile
    러닝은빛 2016.01.19 11:54

    '필터를 플러그인으로 사용하기 좋게 만들어놓은 사람은 없을까?' 해서 구글링을 해봤는데 플러그인이 하나 나왔습니다. 필터를 생성하여 인스턴스 별로 접근할 수 있고 애니메이션 이징까지 지원하고 저장과 로드도 할 수 있게 해놨습니다. 사용법은 이 게시물을 참고하면 플러그인 커맨드 사용 시 어려움은 없을 것입니다.


    http://www.hbgames.org/forums/viewtopic.php?p=930983

  • ?
    HT9MAN 2016.01.27 15:09
    감사합니다.

  1. 게임제작강좌 A-Z 색인 (2016.1.24 ver)

    Date2016.01.12 Category초급강의실 By천무 Views7342 Votes1
    read more
  2. [동영상] 게임을만들자 (8편) - 맵에 포그, 광원적용 -

    Date2016.02.27 Category초급강의실 By천무 Views2266 Votes0
    Read More
  3. [동영상] 게임을만들자 (7편) - 열쇠로 여는 문 만들기 -

    Date2016.02.23 Category초급강의실 By천무 Views3140 Votes0
    Read More
  4. MV에서 이벤트로만 액션RPG를 만들기

    Date2016.02.19 Category초급강의실 By델군 Views3419 Votes0
    Read More
  5. [동영상] 게임을만들자 (6편) - 맵배치 초보강좌 -

    Date2016.02.17 Category초급강의실 By천무 Views2673 Votes0
    Read More
  6. [MV플러그인] Armor Scaling 강의

    Date2016.02.13 Category고급강의실 By백난화백 Views3598 Votes2
    Read More
  7. [MV플러그인] Action Sequence 강의

    Date2016.02.12 Category고급강의실 By백난화백 Views5641 Votes1
    Read More
  8. [동영상] 게임을만들자 (5편) - 퀘스트 만들기 -

    Date2016.02.11 Category초급강의실 By천무 Views3832 Votes1
    Read More
  9. [동영상] 게임을만들자 (4편) - 마을과 상점을 만들자-

    Date2016.02.10 Category초급강의실 By천무 Views1748 Votes0
    Read More
  10. [동영상] 게임을만들자 (3편) - 필드에 보이는 몹 만들기-

    Date2016.02.10 Category초급강의실 By천무 Views1957 Votes1
    Read More
  11. [동영상] 스크립트 나도좀 잘해보자 -1-

    Date2016.02.04 Category고급강의실 By천무 Views1712 Votes1
    Read More
  12. (ACE 기준)초보분들에게 유용한 10가지-1-

    Date2016.02.02 Category초급강의실 ByRPG란무엇인가? Views2687 Votes0
    Read More
  13. 게임의 퀼리티를 높이자! 2편-진행불가

    Date2016.01.25 Category초급강의실 Byifeve Views13235 Votes0
    Read More
  14. [동영상] RPG Maker MV 튜토리얼 강좌 22화 랜덤 확률 변수

    Date2016.01.22 Category초급강의실 By작긔 Views2875 Votes2
    Read More
  15. [동영상] RPG Maker MV 튜토리얼 강좌 21화 변수

    Date2016.01.19 Category초급강의실 By작긔 Views7241 Votes2
    Read More
  16. PIXI Filter 총정리 (PIXI 2.2.9)

    Date2016.01.18 Category고급강의실 By러닝은빛 Views18676 Votes3
    Read More
  17. 게임의 퀼리티를 높이자! 1편-표지판

    Date2016.01.18 Category초급강의실 Byifeve Views4925 Votes0
    Read More
  18. [동영상] 게임을만들자 (2편) - 캐릭터 연기 시키자-

    Date2016.01.14 Category초급강의실 By천무 Views5256 Votes0
    Read More
  19. [동영상] RPG Maker MV 튜토리얼 강좌 20화 애니메이션 (특수효과)

    Date2016.01.13 Category초급강의실 By작긔 Views1693 Votes1
    Read More
  20. [동영상] RPG Maker MV 튜토리얼 강좌 19화 전투시스템

    Date2016.01.12 Category초급강의실 By작긔 Views2625 Votes1
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 Next
/ 10






[개인정보취급방침] | [이용약관] | [제휴문의] | [후원창구] | [인디사이드연혁]

Copyright © 1999 - 2016 INdiSide.com/(주)씨엘쓰리디 All Rights Reserved.
인디사이드 운영자 : 천무(이지선) | kernys(김원배) | 사신지(김병국)