Display and toggle pictures
(디스플레이 및 토글 사진)

Picture are the elementrary display for game development, this article will introduce Sprite.loadImage and Graphics.drawTexture class, two ways to display pictures.

(그림은 게임 개발을위한 기본 디스플레이이며,이 기사에서는 그림을 표시하는 두 가지 방법 인 Sprite.loadImage 및 Graphics.drawTexture 클래스를 소개합니다.)

1 . Display and switch pictures with loadImage method
(1 . loadImage 메소드를 사용하여 그림 표시 및 전환)

1.1 loadImage API overview
(1.1 loadImage API 개요)

In API documentation can find laya.display.Sprite, you can find loadImage() method, as shown in Figure 1. Let’s familiarize with the parameters.
(API 문서에서 laya.display.Sprite를 찾을 수 있습니다. 그림 1에서와 같이 loadImage () 메서드를 찾을 수 있습니다. 매개 변수에 익숙해 지도록합시다.)

(Picture 1)

1.2 LoadImage to load an example of displaying a picture
(1.2 그림 표시 예제를로드하는 LoadImage)

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.stage.bgColor = "#ffffff";
var img = new Laya.Sprite();
//좌표를 100, 50으로하여 디스플레이 이미지로드
img.loadImage("res/img/monkey1.png",100,50);
//무대에 추가
Laya.stage.addChild(img);

In the sample code, “100,50” is the display coordinate information of the picture. The example code runs as shown in figure 2-1:
(샘플 코드에서 "100,50"은 그림의 표시 좌표 정보입니다. 예제 코드는 그림 2-1과 같이 실행됩니다.)

(picture2-1)

1.3 Example of switching pictures with loadImage
(1.3 loadImage로 그림을 전환하는 예제)

Switching pictures is based on displaying pictures, adding empty drawing, and then drawing new picture resources through code logic. Specific code can refer to the code notes and API for further more description. here is an implementation example :
(그림 전환은 그림 표시, 빈 그림 추가 및 코드 논리를 통한 새로운 그림 자원 그리기를 기반으로합니다. 특정 코드는 더 자세한 설명을 위해 코드 노트 및 API를 참조 할 수 있습니다. 다음은 구현 예입니다.)

//초기화 단계
Laya.init(1334, 750);

//이미지 리소스 경로를 전환해야합니다.
this.monkey1 = "res/img/monkey1.png";
this.monkey2 = "res/img/monkey2.png";
//전환 상태
this.flag = false;

//무대 배경색 설정
Laya.stage.bgColor = "#ffffff";
this.img = new Laya.Sprite();
//그려진 그림보기
switchImg();
//switchImg에서 그림 영역의 click 이벤트를 듣고 switchImg를 실행하여 트리거 한 후 그림을 전환하십시오.
this.img.on(Laya.Event.CLICK,this,switchImg);
//무대에 추가
Laya.stage.addChild(img);

function switchImg(){
    //빈 사진
    this.img.graphics.clear();
    //전환 할 이미지 리소스 경로 가져 오기
    var imgUrl = (this.flag = !this.flag)? this.monkey1:this.monkey2;
    //좌표를 100, 50으로하여 디스플레이 이미지로드
    this.img.loadImage(imgUrl, 100, 50);
}

Run the code as shown in Figure 2-2:
(그림 2-2와 같이 코드를 실행합니다.)

(picture 2-2)

2. Use drawTexture method to display and switch pictures
(2. drawTexture 메서드를 사용하여 그림을 표시하고 전환합니다.)

2.1 drawTexture API overview
(2.1 drawTexture API 개요)

In the API documentation about laya.display.Graphics, you can find the drawTexture () method, in addition, also need to understand the load (laya.net.LoaderManager) method, getRes (create) method, and laya.utils.Handler () method, the parameters of the method Figure 3, Figure 4, Figure 5, Figure 6 shows:
(laya.display.Graphics에 대한 API 설명서에서 drawTexture () 메서드를 비롯하여 load (laya.net.LoaderManager) 메서드, getRes (create) 메서드 및 laya.utils.Handler 메서드를 이해해야합니다. () 메소드, 메소드의 매개 변수 인 그림 3, 그림 4, 그림 5, 그림 6이 표시됩니다.)

(picture 3)

(picture 4)

(picture 5)

(picture 6)

2.2 use drawTexture to load an example of a display picture
(2.2 drawTexture를 사용하여 표시 그림의 예제를로드합니다.)

​ LoadImage () method can instantly load external image resources, you can also read picture resources from the buffer (drawTexture) method, you must first load the data, and then add to the stage to draw. In the example code to load（Laya.loader.load()）and callback (Handler.create()) method. Please see the code in the comments section and related API instructions.
(LoadImage () 메서드는 즉시 외부 이미지 리소스를로드 할 수 있습니다. 또한 버퍼 (drawTexture) 메서드에서 그림 리소스를 읽을 수 있습니다. 먼저 데이터를로드 한 다음 그리려면 스테이지에 추가해야합니다. 로드 (Laya.loader.load ()) 및 콜백 (Handler.create ()) 메소드를로드하는 예제 코드. 댓글 섹션의 코드와 관련 API 지침을 참조하십시오.)

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

//초기화 단계
Laya.init(1334, 750);

//이미지 리소스 경로를 전환해야합니다.
this.monkey2 = "res/img/monkey2.png";

//무대 배경색 설정
Laya.stage.bgColor = "#ffffff";
//먼저 이미지 리소스를로드 한 후 이미지 리소스가 성공적으로로드 된 후 콜백 메서드를 통해 이미지를 그려서 스테이지에 추가합니다.
Laya.loader.load(this.monkey2,Laya.Handler.create(this,graphicsImg));
function graphicsImg(){
    var img = new Laya.Sprite();
    //이미지 리소스를 가져 와서 캔버스에 그립니다.
    img.graphics.drawTexture(Laya.loader.getRes(this.monkey2),100,50);
    //무대에 추가
    Laya.stage.addChild(img);
}

The code runs as shown in Figure 7-1

(picture 7-1)

2.3 Example of switching a picture with a drawTexture
(2.3 drawTexture로 그림을 전환하는 예제)

Switching pictures is based on displaying pictures, adding empty drawing, and then drawing new picture resources through code logic. Specific code description, you can refer to the code notes and API, combined with examples of running experience.
(그림 전환은 그림 표시, 빈 그림 추가 및 코드 논리를 통한 새로운 그림 자원 그리기를 기반으로합니다. 특정 코드 설명, 코드 노트 및 API, 실행 경험의 예와 함께 참조 할 수 있습니다.)

Here we modify the code in the Main.js entry class as follows:
(다음과 같이 Main.js 항목 클래스의 코드를 수정합니다.)

//초기화 단계
Laya.init(1334, 750);

//이미지 리소스 경로를 전환해야합니다.
this.monkey1 = "res/img/monkey1.png";
this.monkey2 = "res/img/monkey2.png";
//스위칭 상태
this.flag = false;
//무대 배경색 설정
Laya.stage.bgColor = "#ffffff";
//이미지 리소스가 성공적으로로드 된 후 여러 이미지를로드하고 콜백 메서드를 통해 이미지를 그려 스테이지에 추가합니다.
Laya.loader.load([this.monkey1,this.monkey2],Laya.Handler.create(this,graphicsImg));
function graphicsImg(){
    //인스턴스 만들기
    this.img = new Laya.Sprite();
    //무대에 추가
    Laya.stage.addChild(this.img);
    //처음 그려진 그림을 표시하십시오.
    switchImg();
    //switchImg에서 그림 영역의 click 이벤트를 수신 한 다음 switchImg를 실행하여 트리거 한 후 텍스처 그리기를 전환합니다.
    this.img.on(Laya.Event.CLICK,this,switchImg);            

    //이미지 좌표를 설정합니다.
    this.img.pos(100,50);
}
function switchImg(){
    //지우기 그리기
    this.img.graphics.clear();
    //전환 할 이미지 리소스 경로 가져 오기
    var imgUrl = (this.flag = !this.flag)? this.monkey2:this.monkey1;
    //이미지 리소스 가져 오기
    var texture = Laya.loader.getRes(imgUrl);
    //텍스처 그리기
    this.img.graphics.drawTexture(texture);                        
    //텍스처 너비와 높이 설정
    this.img.size(texture.width, texture.height);   
}

The code runs as shown in Figure 7-2.
(코드는 그림 7-2와 같이 실행됩니다.)

(picture 7-2)