LayaAir引擎学习日志5----LayaAir IDE创建TS项目并详解目录结构

来源：互联网发布：组装机知乎编辑：程序博客网时间：2024/05/21 00:47

首次打开LayaAir IDE，或者在IDE的“文件”菜单里使用“新建项目”功能。可以创建一个空项目，IDE在创建时会自动生成结构清晰的目录结构，我们将在这介绍 LayaAir IDE 生成的目录结构。

1、用LayaAirIDE创建项目

步骤一：打开LayaAirIDE，如果是首次打开，直接点击“新建项目”开始创建新项目。

步骤二：在“新建项目”的窗口里，选择建立LayaAir空项目，第一行填写项目名称,第二行填写项目存储的路径，第三行是项目类型，分别为ActionScript、JavaScript、TypeScript项目，这里我们需要选择 “TypeScript项目”。第四行是引擎版本。可以选择稳定版本或是最新的beta版。版本的区别可以在官网的引擎版本下载日志里查看。

点击“创建”后，IDE生成项目文件夹结构如下：

2、目录结构介绍

2.1 项目运行配置文件（.laya文件夹）

.laya 文件夹下存放的是项目在开发运行中的一些配置信息。

其中的 launch.json 文件保存了项目调试的一些配置信息。
Launch.json 文件:

{
 
 "version": "0.2.0",
 
 "configurations": [ 
 
  {
 
   "name": "layaAir",
 
   "type": "chrome",
 
   "request": "launch",
 
   "url": "${workspaceRoot}/bin/index.html",
 
   "runtimeExecutable": "${execPath}",
 
   "useBuildInServer": true,
 
   "sourceMaps": true,
 
   "webRoot": "${workspaceRoot}",
 
   "port": 8080
 
  },
 
  {
 
   "name": "chrome调试",
 
   "type": "chrome",
 
   "request": "launch",
 
   "url": "${workspaceRoot}/bin/index.html",
 
   // "换成自己的谷歌安装路径，": 0,
 
   "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
 
   "runtimeArgs": [
 
    "--allow-file-access-from-files",
 
    "--allow-file-access-frome-files",
 
    " --disable-web-security"
 
   ],
 
   "sourceMaps": true,
 
   "webRoot": "${workspaceRoot}"
 
  },
 
  {
 
   "name": "Attach with sourcemaps",
 
   "type": "chrome",
 
   "request": "attach",
 
   "port": 9222,
 
   "sourceMaps": true,
 
   "webRoot": "${workspaceRoot}"
 
  }
 
 ]
 
}

Launch.json文件里的 url 定义了项目调试运行时主页面（index.html）的位置信息。chrome调试配置中的runtimeExecutable 保存了chrome 浏览器（chrome.exe）在你电脑中的目录地址。

2.2 项目的输出目录（bin）

    bin目录下存放的就是当前项目的输出文件。
    bin/js 文件夹下存放的是项目中的typeScript 文件编译成的js 文件。
    bin/libs 文件夹存放的是 LayaAir 引擎各模块的JS 文件，在项目中需要使用哪个模块就需要在 index.html 引入对应的模块包JS文件。

这里我们顺便介绍一下引擎模块主要的几个部分：

laya.core.js 是核心包，封装了显示对象渲染，事件，时间管理，时间轴动画，缓动，消息交互，socket，本地存储，鼠标触摸，声音，加载，颜色滤镜，位图字体等。

laya.webgl.js 封装了webgl渲染管线，如果使用webgl渲染，可以在初始化时调用Laya.init(1000,800,laya.webgl.WebGL);

laya.ani.js 是动画模块，包含了swf动画，骨骼动画等。

laya.filter.js 包含更多webgl滤镜，比如外发光，阴影，模糊以及更多。

laya.html.js 封装了html动态排版功能。

laya.ui.js 提供了制作UI的各种组件实现。

laya.tilemap.js 提供tileMap解析支持。

2.3 UI项目目录（laya）

    laya 目录是当前项目的UI 项目目录。
laya/assets 目录用来存放编辑UI页面、粒子等组件所需的图片资源。
    laya/pages 目录用来存放编辑器生成的页面配置文件。
    laya/.laya 文件是UI项目配置文件。

2.4 项目代码目录（src）

项目代码文件默认将存放在 src 目录。

2.5 项目配置文件（项目名.laya）

项目名.laya 是项目配置文件，文件内记录了当前项目的项目名称、使用的类库版本号和项目类型。

{"proName":"studyTS","version":"1.5.4","proType":1}

不懂的可以加我的QQ群： 172719352（LayaAir引擎交流群 ）欢迎你的到来哦，看了博文给点脚印呗，谢谢啦~~

0 0