Filter effect
(필터 효과)

LayaAir engine provides 3 effects: color filter, light (or shadow) filter and blur filter. The color filter supports Canvas and WebGL mode, light filter and blur filter support only WebGL mode because of the large consumption of performance.

(LayaAir 엔진은 컬러 필터, 조명 (또는 그림자) 필터 및 흐림 필터의 세 가지 효과를 제공합니다. 컬러 필터는 Canvas 및 WebGL 모드를 지원하고 광 필터 및 흐림 필터는 WebGL 모드 만 지원하므로 성능이 많이 소모됩니다.)

1. Set the color filter
(1. 컬러 필터 설정)

1.1 Introducing Color Filter API
(1.1 컬러 필터 API 소개)

The color filter class ColorFilter is located in laya.filters package, change the color channel by specifying the matrix (arranged in 4 x 5 matrix).
(ColorFilter 색상 필터 클래스는 laya.filters 패키지에 있으며 행렬을 지정하여 색상 채널을 변경합니다 (4 x 5 행렬로 정렬).)

Click laya.filters.ColorFilter to view the API instructions.
(API 지침을 보려면 laya.filters.ColorFilter를 클릭하십시오.)

1.2 Set color filter
(1.2 컬러 필터 설정)

If you want to set a color filter for a bitmap, you need to set a color matrix first, and then use a ColorFilter method to create a color filter, as shown in the following code:
(비트 맵에 색상 필터를 설정하려면 먼저 색상 표를 설정 한 다음 ColorFilter 방법을 사용하여 색상 표를 만들어야합니다.)

//색상 매트릭스, 빨간색
var colorMatrix = 
  [
  1, 0, 0, 0, 0, //R
  0, 0, 0, 0, 0, //G
  0, 0, 0, 0, 0, //B
  0, 0, 0, 1, 0, //A
];

//색상 필터 만들기
var redFilter = new Laya.ColorFilter(colorMatrix)

Finally,through the Sprite’s filters property, the color filter effect is superimposed on the bitmap. Then, we create a Main.js entry class and set it as the default application (recommended by FlashBuilder). Write the code as follows:
(마지막으로 Sprite의 filters 속성을 통해 색상 필터 효과가 비트 맵에 겹쳐집니다. 그런 다음 Main.js 항목 클래스를 만들어 기본 응용 프로그램으로 설정합니다 (FlashBuilder에서 권장). 다음과 같이 코드를 작성하십시오.)

//초기화 단계
Laya.init(1334, 750,Laya.WebGL);
//무대 배경색 설정
Laya.stage.bgColor = "#ffffff";
//원본 비트 맵
createImg(100,50);
//적색 필터
creteRedFilter();
//그레이 필터
createGrayFilter();

/**비트 맵 만들기**/
function createImg(w,h){
    var Img = new Laya.Sprite(); 

    //무대에 추가
    Laya.stage.addChild(Img);   

    //디스플레이 이미지로드
    Img.loadImage("res/img/monkey1.png",w,h);  

    return Img;
}
/**빨간색 필터 비트 맵 만들기**/
function creteRedFilter(){
    //색상 필터 매트릭스, 빨간색
    var colorMatrix = 
        [
            1, 0, 0, 0, 0, //R
            0, 0, 0, 0, 0, //G
            0, 0, 0, 0, 0, //B
            0, 0, 0, 1, 0, //A
        ];

    //붉은 색 필터 만들기
    var redFilter = new Laya.ColorFilter(colorMatrix);

    //좌표 280, 50에서 비트 맵 만들기
    var img = createImg(280,50); 
    //빨간색 필터 효과 추가
    img.filters = [redFilter];
}
/**회색 필터 비트 맵 만들기**/
function createGrayFilter(){
    //색상 필터 매트릭스, 회색
    var colorMatrix = 
        [
            0.3086, 0.6094, 0.0820, 0, 0,  //R
            0.3086, 0.6094, 0.0820, 0, 0, //G
            0.3086, 0.6094, 0.0820, 0, 0,  //B
            0, 0, 0, 1, 0, //A
        ];
    //회색 필터 만들기
    var GrayFilter = new Laya.ColorFilter(colorMatrix);

    //좌표 460, 50에 비트 맵 만들기
    var img = createImg(460,50);     
    //회색 색상 필터 효과 추가
    img.filters = [GrayFilter];
}

In the above code, we created a original raw bitmap, with red filter effect bitmap and gray filter effect bitmap. Operation results shown in Figure 1:
(위의 코드에서 빨간색 필터 효과 비트 맵 및 회색 필터 효과 비트 맵을 사용하여 원본 원시 비트 맵을 만들었습니다. 그림 1에 표시된 작업 결과 :)

 
(Picture 1)

2. set the light and shadow filter
(2. 빛과 그림자 필터를 설정하십시오.)

2.1 Introduction to the light filter API
(2.1 광원 필터 API 소개)

The light filter class for GlowFilter is located in the laya.filters package, and the shading angle can also be adjusting as a shadow filter. The parameters are shown in Figure 2. Note: This filter only works in WebGL mode.
(GlowFilter의 light 필터 클래스는 laya.filters 패키지에 있으며 쉐이딩 각도는 섀도우 필터로 조정할 수도 있습니다. 매개 변수는 그림 2에 나와 있습니다. 참고 :이 필터는 WebGL 모드에서만 작동합니다.)

 
(Picture 2)

Click on laya.filters. GlowFilter to see the API instructions.
(laya.filters를 클릭하십시오. API 지침을 보려면 GlowFilter를 참조하십시오.)

2.2 Set up filter and shadow filter
(2.2 필터 및 섀도우 필터 설정)

The light and shadow filter settings is simple, and we directly look through the code to see the example results,
(라이트 및 섀도우 필터 설정은 간단하며 코드를 통해 예제 결과를 직접 볼 수 있습니다.)

first create a Main.js entry class and set it as the default application. Write the code as follows:
(먼저 Main.js 항목 클래스를 만들어 기본 응용 프로그램으로 설정하십시오. 다음과 같이 코드를 작성하십시오.)

//초기화 단계
Laya.init(1334,750,Laya.WebGL);
//무대 배경색 설정
Laya.stage.bgColor = "#ffffff";
//원본 비트 맵
createImg(100,50);
//빛나는 필터
createGlowFilter();
//그림자 필터
createShadeFilter();

/**비트 맵 만들기**/
function createImg(w,h){
    var Img = new Laya.Sprite();
    //무대에 추가
    Laya.stage.addChild(Img);
    //좌표를 100, 50으로하여 디스플레이 이미지로드
    Img.loadImage("res/img/monkey1.png",w,h);
    return Img;
}
/**광선 필터 비트 맵 만들기**/
function createGlowFilter(){
    //광선 필터 비트 맵 만들기
    var glowFilter = new Laya.GlowFilter("#ff0000",15,0,0);
    //좌표 280, 50에서 비트 맵 만들기
    var img = createImg(280,50);
    //광선 필터 추가
    img.filters = [glowFilter];
}
/**섀도우 필터 비트 맵 만들기**/
function createShadeFilter(){
    //섀도우 필터 만들기
    var glowFilter = new Laya.GlowFilter("#000000",8,8,8);
    //좌표 460, 50에 비트 맵 만들기
    var img = createImg(460,50);
    //그림자 필터 추가
    img.filters = [glowFilter];
}

In the code above, we created a new bitmap, apply light filter effect and a shadow filter effect on it. The running effect is shown in figure 3:
(위의 코드에서 우리는 새 비트 맵을 작성하고 라이트 필터 효과와 섀도우 필터 효과를 적용했습니다. 실행 효과는 그림 3에 나와 있습니다.)

 
(Picture 3)

3、Set blur filter
(3, 흐림 필터 설정)

3.1 Fuzzy filter API introducing
(3.1 퍼지 필터 API 도입)

The BlurFilter class located in the laya.filters package. It is possible to adjust the intensity parameter. The parameter instructions are shown in figure 4. Note: this filter only supports WebGL mode.
(laya.filters 패키지에있는 BlurFilter 클래스입니다. 강도 매개 변수를 조정할 수 있습니다. 파라미터 설명은 그림 4에 나와 있습니다. 참고 :이 필터는 WebGL 모드 만 지원합니다.)

 
(Picture 4)

Click on laya.filters. BlurFilter to view the API instructions.
(laya.filters를 클릭하십시오. BlurFilter를 사용하여 API 지침을 봅니다.)

3.2 Set the blur filter
(3.2 흐림 필터 설정)

Blur filter settings are relatively simple. Create a filter instance, and then set the fuzzy strength attribute. Superimposed on the bitmap, and see the sample effect directly through the code.
(흐림 필터 설정은 비교적 간단합니다. 필터 인스턴스를 만든 다음 퍼지 강도 특성을 설정합니다. 비트 맵에 겹쳐서 코드를 통해 샘플 효과를 직접 볼 수 있습니다.)

First create a Main.js entry class and set it as the default application (recommended with FlashBuilder). Write the code as follows:
(먼저 Main.js 항목 클래스를 만들어 기본 응용 프로그램으로 설정합니다 (FlashBuilder에서 권장). 다음과 같이 코드를 작성하십시오.)

//초기화 단계
Laya.init(1334,750,Laya.WebGL);
//무대 배경색 설정
Laya.stage.bgColor = "#ffffff";
//원본 비트 맵
createImg(100,50);
//퍼지 필터
createBlurFilter();


/**비트 맵 만들기**/
function createImg(w,h){
    var Img = new Laya.Sprite();
    //무대에 추가
    Laya.stage.addChild(Img);
    //좌표를 100, 50으로하여 디스플레이 이미지로드
    Img.loadImage("res/img/monkey1.png",w,h);
    return Img;
}
/**붙여 넣기 필터 필터 비트 맵 만들기**/
function createBlurFilter(){
    //흐림 필터 인스턴스 만들기
    var blurFilter = new Laya.BlurFilter();
    //흐림 강도 설정
    blurFilter.strength = 5;
    //좌표 280, 50에서 비트 맵 만들기
    var img = createImg(280,50);
    //필터 효과 추가
    img.filters = [blurFilter];
}

In the code above, we created an raw original bitmap with blur filter effect bitmap. The running effect is shown in figure 5:
(위의 코드에서 우리는 블러 필터 효과 비트 맵을 가진 원래의 원래 비트 맵을 만들었습니다. 실행 효과는 그림 5에 나와 있습니다.)

 
(Picture 5)