Create JS project with LayaAirIDE and directory structure explained
(LayaAirIDE 및 디렉토리 구조가 설명 된 JS 프로젝트 생성)

​ ​ Open LayaAir IDE for the first time, or use the New Project feature in the IDE’s File menu. Building a project through LayaAirIDE will create a clear directory structure by default. Now let’s start with the LayaAirIDE tool to create the JS empty project, leading you to introduce the structure of the project.
(LayaAir IDE를 처음으로 열거 나 IDE의 파일 메뉴에서 새 프로젝트 기능을 사용하십시오. LayaAirIDE를 통해 프로젝트를 빌드하면 기본적으로 명확한 디렉토리 구조가 생성됩니다. 이제 LayaAirIDE 도구로 시작하여 JS 빈 프로젝트를 만들어 프로젝트 구조를 소개하도록하겠습니다.)

A. create a JS project with LayaAirIDE
(A. LayaAirIDE를 사용하여 JS 프로젝트 만들기)

​ Step 1: open the LayaAirIDE, and if it is first opened, click “new project” to start a new project. As shown in Figure 1
(1 단계 : LayaAirIDE를 열고 처음 열면 "새 프로젝트"를 클릭하여 새 프로젝트를 시작합니다. 그림 1과 같이)

 
（Picture 1）

​ Step 2: Select “LayaAir empty project”. After setting the project name, path, type, and select the engine version, click create to generate a new empty project. As shown in figure 2.
(2 단계 : "LayaAir 빈 프로젝트"를 선택하십시오. 프로젝트 이름, 경로, 유형을 설정하고 엔진 버전을 선택한 후 만들기를 클릭하여 새 빈 프로젝트를 생성합니다. 그림 2와 같이)

 

After clicking “create”, IDE generates the structure of the project folder as follows:
("만들기"를 클릭하면 IDE는 다음과 같이 프로젝트 폴더의 구조를 생성합니다.)

（Picture 3）

2. Introduction of directory structure
(2. 디렉토리 구조 소개)

2.1 Project configuration file (.Laya folder)
(2.1 프로젝트 구성 파일 (.Laya 폴더))

​ .laya The folder under the folder is some configuration information for the project in the development run.
(.laya 폴더 아래의 폴더는 개발 실행중인 프로젝트의 구성 정보입니다.)

2.1.1.laya/launch.json Document file description
(2.1.1.laya / launch.json 문서 파일 설명)

　　 launch.json file saves the configuration information necessary about project debugging. Respectively, the debug is handle with LayaAirIDE and configuration with Chrome. After settings is done, Manually change may not easy since the project will affect the debugging error.
(launch.json 파일은 프로젝트 디버깅에 필요한 구성 정보를 저장합니다. 각각의 디버그는 LayaAirIDE를 사용하여 처리하고 Chrome을 사용하여 구성합니다. 설정이 완료되면 프로젝트가 디버깅 오류에 영향을 미치기 때문에 수동으로 변경하기가 쉽지 않을 수 있습니다.)

　　launch.jsonimportant attributes are as follows：
        (launch.jsonimportant 속성은 다음과 같습니다.)

　　"name": "layaAir"Indicates the built-in debugging mode with LayaAirIDE.
        ("name": "layaAir"LayaAirIDE가 내장 된 디버깅 모드를 나타냅니다.)

　　"name": "chrome Browser" Indicates debugging with local Chrome browser.
        ("name": "chrome Browser"로컬 Chrome 브라우저에서의 디버깅을 나타냅니다.)

　　"file": "${workspaceRoot}/bin/index.html" Define the path directory where project’s run start
        ("file": "$ {workspaceRoot} /bin/index.html"프로젝트가 실행되는 경로 디렉토리 정의)

　　"runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe", The path directory of Chrome browser, developers set this path according to their own needs.
        ("runtimeExecutable": Chrome 브라우저의 경로 디렉토리 인 "C : / Program Files (x86) /Google/Chrome/Application/chrome.exe"는 개발자가 필요에 따라 이 경로를 설정합니다.) 

　　"userDataDir": "${tmpdir}" represent the temporary directory the chrome debug cache, default is the user’s temporary directory, developers can change settings. For example, cache settings directory under the current project root path: “userDataDir”: "userDataDir": "${workspaceRoot}/cache"。
        ("userDataDir": "$ {tmpdir}"은 임시 디렉토리를 나타내며 크롬 디버그 캐시, 기본값은 사용자의 임시 디렉토리이며 개발자는 설정을 변경할 수 있습니다. 예를 들어, 현재 프로젝트 루트 경로 아래의 캐시 설정 디렉토리 : "userDataDir": "userDataDir": "$ {workspaceRoot} / cache".)

2.1.2 .laya/tasks.json file introduction
(2.1.2 .laya / tasks.json 파일 소개)

　　tasks.json some of the configuration information related to the TS compiler is saved, and the meaning of the parameters can be queried by the TypeScript official network.
(tasks.json은 TS 컴파일러와 관련된 구성 정보 중 일부를 저장하며 매개 변수의 의미는 TypeScript 공식 네트워크에서 쿼리 할 수 있습니다.)

​ The launch.json problem above is something developers might encounter. If you encounter the above problems, you need to check the configuration URL path there is a problem. If the “/“ character path needs to be changed into “\ \”.
(위의 launch.json 문제는 개발자가 발생할 수있는 문제입니다. 위의 문제가 발생하면 구성 URL 경로에 문제가 있는지 확인해야합니다. "/"문자 경로를 "\ \"로 변경해야하는 경우.)

2.2 output directory of the project（bin）
(2.2 프로젝트의 출력 디렉토리 (bin))

​ bindirectory is stored under the current project output file : Picture 4
   (bin 디렉토리는 현재 프로젝트 출력 파일 아래에 저장됩니다. 그림 4)

​ bin/index.htmls the project’s entry file, all of the LayaAir engine library or a third-party class library JS need to be stored here.
(bin / index.htmls 프로젝트 항목 파일, 모든 LayaAir 엔진 라이브러리 또는 타사 클래스 라이브러리 JS를 여기에 저장해야합니다.)

​ Tips: The script comments in index.html indicate the relevant functions of each class library, developers can delete the reference of the class library according to the project needs, click on the project release button will js file in index.html Compression, to reduce network transmission. If you reference a third-party library, you must reference the LayaAir engine library before.
(도움말 : index.html의 스크립트 주석은 각 클래스 라이브러리의 관련 기능을 나타내며, 개발자는 프로젝트 요구 사항에 따라 클래스 라이브러리의 참조를 삭제할 수 있습니다. 프로젝트 릴리즈 버튼을 클릭하면 js 파일이 index.html 압축으로 축소됩니다. 네트워크 전송. 타사 라이브러리를 참조하는 경우 이전에 LayaAir 엔진 라이브러리를 참조해야합니다.)

​ bin/libs The folder stores the JS files of each module of the LayaAir engine. As shown in Figure 4, which module is needed to use in the project, it is necessary to introduce the corresponding module package JS file in index.html.
(bin / libs 폴더는 LayaAir 엔진의 각 모듈의 JS 파일을 저장합니다. 그림 4에서 볼 수 있듯이 프로젝트에서 사용해야하는 모듈은 index.html에 해당 모듈 패키지 JS 파일을 도입해야합니다.)

 
（Picture 4）

Here we give a brief introduction to the main parts of the LayaAir engine module:
(여기에서는 LayaAir 엔진 모듈의 주요 부분에 대해 간략하게 소개합니다.)

　　laya.core.js It is the core package, which includes display object rendering, event, time management, timeline animation, slow motion, message interaction, socket, local storage, mouse touch, voice, loading, color filter, bitmap font, etc.
(laya.core.js 표시 객체 렌더링, 이벤트, 시간 관리, 타임 라인 애니메이션, 슬로우 모션, 메시지 상호 작용, 소켓, 로컬 저장, 마우스 터치, 음성,로드, 색상 필터, 비트 맵 글꼴 등을 포함하는 핵심 패키지입니다. .)

　　 laya.webgl.js The webgl rendering pipeline is encapsulated, and if webgl rendering is used, it can be invoked at initialization Laya.init(1136,640,laya.webgl.WebGL);
(laya.webgl.js webgl 렌더링 파이프 라인은 캡슐화되어 있으며, webgl 렌더링이 사용되면 초기화 Laya.init (1136,640, laya.webgl.WebGL)에서 호출 할 수 있습니다.)

　　laya.ani.js Animation module, including SWF animation, bone animation, and so on.
(laya.ani.js SWF 애니메이션, 본 애니메이션 등을 포함하는 애니메이션 모듈입니다.)

　　laya.filter.js It contains more webgl filters, such as external luminescence, shadow, blur, and more.
(laya.filter.js 여기에는 외부 루미넌스, 그림자, 블러 등과 같은 더 많은 Webgl 필터가 포함되어 있습니다.)

　　 laya.html.jsThe HTML dynamic typesetting function is encapsulated.
         (laya.html.js HTML 동적 조판 기능이 캡슐화되었습니다.)

　　 laya.ui.js The various component implementations of the UI are provided.
          (laya.ui.js UI의 다양한 구성 요소 구현이 제공됩니다.)

　　laya.tilemap.js Provide tileMap parsing support.
         (laya.tilemap.js tileMap 구문 분석 지원을 제공합니다.)

2.3 UI项目目录（laya）
(2.3 UI 프로젝트 디렉토리 (laya))

​ “laya” directory is used to store the current UI project for LayaAirIDE.
   ("laya"디렉토리는 LayaAirIDE에 대한 현재 UI 프로젝트를 저장하는 데 사용됩니다.)

​ “laya/assets” directory is used to store the image assets resources required for components suomponents, particles, and so on.
   ("laya / assets"디렉토리는 구성 요소 suponponents, particle 등에 필요한 이미지 자산 자원을 저장하는 데 사용됩니다.)

​ “laya/pages” directory is used to store files generated by LayaAirIDE to create page layouts.
   ("laya / pages"디렉토리는 페이지 레이아웃을 만들기 위해 LayaAirIDE가 생성 한 파일을 저장하는 데 사용됩니다.)

​ “laya/.laya” file is the LayaAirIDE UI project configuration file.
   ("laya / .laya"파일은 LayaAirIDE UI 프로젝트 구성 파일입니다.)

2.4 .d.ts Code provides a file directory（libs）
(2.4 .d.ts 코드는 파일 디렉토리 (libs))

libsdirectory is the layaAir engine LayaAir.d.ts file. For code hints, if the developer has three party libraries, the related.D.ts files are put in this directory.
(libs 디렉토리는 layaAir 엔진 LayaAir.d.ts 파일입니다. 코드 힌트의 경우 개발자에게 3 개의 파티 라이브러리가 있으면 관련 .ts 파일이이 디렉토리에 저장됩니다.)

2.5 Project code directory（src）
(2.5 프로젝트 코드 디렉토리 (src))

​ The project code file will be stored in the src directory by default
 (프로젝트 코드 파일은 기본적으로 src 디렉토리에 저장됩니다.)

2.6 Project configuration file
(2.6 프로젝트 구성 파일)

​ Project name .laya Is the project configuration file that records the project name of the current project, the version number of the library, and the type of the project.

{"proName":"studyLayaAirJS","version":"1.5.5","proType":2}

​ tsconfig.json The file is a configuration file for the TS project. Do not delete it.