Set Mask Properties
(마스크 속성 설정)

Can set an object ( bitmap and vector diagram), and then apply the mask according to the object shape.

(오브젝트 (비트 맵 및 벡터 다이어그램)를 설정 한 다음 오브젝트 모양에 따라 마스크를 적용 할 수 있습니다.)

A. Introduction to mask API
(A. 마스크 API 소개)

　　The mask attribute is located in the laya.display.Sprite API, and the description of the property is shown in Figure 1:
       (mask 속성은 laya.display.Sprite API에 있으며 속성 설명은 그림 1에 나와 있습니다.)

(Picture 1)

B. simple example of the mask

1. We first use LayaAir engine to display a bitmap
(1. 먼저 LayaAir 엔진을 사용하여 비트 맵을 표시합니다.)

Create a MaskDemo.js entry class and set it as the default application, write the code as follows:
(MaskDemo.js 항목 클래스를 만들고 기본 응용 프로그램으로 설정하려면 다음과 같이 코드를 작성합니다.)

(function()
{
    var Sprite = Laya.Sprite;
    var Texture = Laya.Texture;
    var Handler = Laya.Handler;

    var Res;
    var img;
    (function()
    {
            Laya.init(1136,640);
            //무대 배경색 설정
            Laya.stage.bgColor = "#ffffff"      
            //리소스 경로
            Res = "res/img/monkey1.png";        
            //먼저 이미지 리소스를로드 한 후 이미지 리소스가 성공적으로로드 된 후 콜백 메서드를 통해 이미지를 그려서 스테이지에 추가합니다.
            Laya.loader.load(Res,Handler.create(this,graphicsImg));   
        })();

        function graphicsImg()
        {
            img = new Sprite();
            //이미지 리소스를 가져 와서 캔버스에 그립니다.
            img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);
            //무대에 추가
            Laya.stage.addChild(img);
        }
})();

그림 2와 같은 연산 결과를 컴파일합니다.

(Picture 2)

2.2 Create a circular mask area
(2.2 원형 마스크 영역 만들기)

Creates a circular mask area through code. With the mask property, you can achieve display effects. Keep looking at the code and annotations, we will modify the 2.1 sample code to the following one :
(코드를 통해 원형 마스크 영역을 만듭니다. mask 속성을 사용하면 표시 효과를 얻을 수 있습니다. 코드와 주석을 계속 살펴보고 2.1 샘플 코드를 다음과 같이 수정합니다.)

(function()
{
    var Sprite = Laya.Sprite;
    var Texture = Laya.Texture;
    var Handler = Laya.Handler;

    var Res;
    var img;
    (function()
    {
            Laya.init(1136,640);
            //무대 배경색 설정
            Laya.stage.bgColor = "#ffffff"      
            //리소스 경로
            Res = "res/img/monkey1.png";        
            //먼저 이미지 리소스를로드 한 후 이미지 리소스가 성공적으로로드 된 후 콜백 메서드를 통해 이미지를 그려서 스테이지에 추가합니다.
            Laya.loader.load(Res,Handler.create(this,graphicsImg));   
        })();

        function graphicsImg()
        {
            img = new Sprite();
            //이미지 리소스를 가져 와서 캔버스에 그립니다.
            img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);
            //무대에 추가
            Laya.stage.addChild(img);

            //마스크 객체 만들기
            var cMask = new Sprite();
            //원형 마스크 영역 그리기
            cMask.graphics.drawCircle(80,80,50,"#ff0000");
              //원의 위치 좌표
            cMask.pos(120,50);

             //img 표시 객체의 마스킹 효과 구현
            img.mask = cMask;

        }
})();

Operational results shown in Figure 3:
(그림 3에 표시된 운영 결과 :)

 
(Picture 3)

By comparing the code, we found that the implementation mask is simple. Now we will assign the created display object cMask to mask object property of the img object.
(코드를 비교함으로써 구현 마스크가 간단하다는 것을 알 수있었습니다. 이제 생성 된 표시 객체 인 cMask를 img 객체의 mask 객체 속성에 할당합니다.)

C. set the mask in LayaAirIDE

In addition to setting the mask directly in the code, you can also easily set the mask for the object through LayaAirIDE. Here we follow the steps instructions.

(코드에 직접 마스크를 설정하는 것 외에도 LayaAirIDE를 통해 객체에 대한 마스크를 쉽게 설정할 수 있습니다. 여기에 단계별 지침을 따르겠습니다.)

1. Create a UI page maskDemo.ui, import the resource. (for further details implementation, please refers to the IDE section in UI creation and resource import related documents)
   (UI 페이지 인 maskDemo.ui를 만들고 리소스를 가져옵니다. (자세한 내용은 UI 작성 및 리소스 가져 오기 관련 문서의 IDE 섹션을 참조하십시오.))
   

1. Drag a Image component into the scene editing area in the resource panel, as shown in Figure 4
   (그림 4와 같이 자원 구성 요소의 이미지 편집 영역으로 이미지 구성 요소를 드래그하십시오.)

 
(Picture 4)

1. double click into the Image component and then drag component panel into the Sprite component, as shown in figure 5.
   (이미지 구성 요소를 두 번 클릭 한 다음 구성 요소 패널을 Sprite 구성 요소로 드래그합니다 (그림 5 참조).)

 
(Picture 5)

1. Select the Spritecomponent, in the right properties panel,set the common attribute renderType to mask, as shown in Figure 6.
   (오른쪽 속성 패널에서 Spritecomponent를 선택하고 그림 6에서와 같이 공통 속성 renderType을 마스크로 설정합니다.)

 
(Picture 6)

1. double-click into the Sprite component, and then drag the component panel into a Graphics circular to adjust the location and size. The hierarchy is shown in figure 7.
   (Sprite 구성 요소를 두 번 클릭 한 다음 구성 요소 패널을 Graphics 원형으로 드래그하여 위치와 크기를 조정합니다. 계층 구조는 그림 7과 같습니다.)

 
(Picture 7)

1. Double-click in any blank area of the editing to exit the Image component, you can see the effect of the mask, as shown in Figure 8.

 
(Picture 8)

D. Apply the mask of the LayaAirIDE settings in the project
(프로젝트에서 LayaAirIDE 설정 마스크 적용)

1. release UI

　　In the IDE interface, press F12 to publish the mask effect of the UI page, will be generated in the src/uidirectory UI class, and bin/h5/res/atlas directory under the Atlas file, as shown in Figure 9.
(IDE 인터페이스에서 F12 키를 눌러 UI 페이지의 마스크 효과를 게시하고 그림 9와 같이 src / uidirectory UI 클래스에 생성하고 Atlas 파일 아래의 bin / h5 / res / atlas 디렉토리에 생성합니다.)

 
(Picture 9)

4.2 use the IDE to generate the class and Atlas, to achieve mask effect
(4.2 마스크 효과를 달성하기 위해 클래스와 아틀라스를 생성하는 IDE를 사용)

　　Create an entry class Main.js, encoded as follows:
(다음과 같이 인코딩 된 엔트리 클래스 Main.js를 만듭니다.)

(function()
{
      var Loader = Laya.Loader;
      var Handler = Laya.Handler;

(function()
    {
            //初始化舞台
            Laya.init(1136,640);
            //设置舞台背景色
            Laya.stage.bgColor = "#ffffff"    

            //加载图集资源，加载成功后添加到舞台
            Laya.loader.load("res/atlas/ui.atlas",Handler.create(this,onLoaded));

        }})();

        function onLoaded()
        {
            var cMask = new maskDemoUI();
            Laya.stage.addChild(cMask);
        }
}})();

Operational results shown in Figure 10, we quickly achieve the effect of the mask.
(결과는 그림 10에 나와 있으며, 우리는 신속하게 마스크의 효과를 얻을 수 있습니다.)

 
(Picture 10)