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

 首次打开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 文件: 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

{    "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 是项目配置文件，文件内记录了当前项目的项目名称、使用的类库版本号和项目类型。

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

 

不懂的可以关注我的公众号，里面有你想要的（有问题公众号留言必回答）https://mp.weixin.qq.com/s?__biz=MzIyOTM4MDMxNw==&mid=2247483836&idx=1&sn=4bac1428b9d9470000ca159aba4038d8&chksm=e842d80edf355118659c51356e5a92ff5c995729b7f361a1d0207060721852d2b8d7ec4bad03&token=1082408202&lang=zh_CN#rd