ActionScript
TypeScript
JavaScript

创建TS项目并详解目录结构

发布时间:2016-12-27

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


1、用LayaAirIDE创建项目

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

blob.png

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

blob.pngblob.png


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

blob.png

   

2、目录结构介绍

2.1 项目运行配置文件(.laya文件夹)

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

    .laya/launch.json 文件保存了项目调试的一些配置信息,分别是LayaAirIDE的调试配置和chrome浏览器调试配置。不要轻易去改动,改错后会影响项目的调试。

blob.png

blob.png

    上图的launch.json问题是开发者可能碰到的。如果碰到以上问题,需要检查configurations的URL路径是否存在问题。如果是“/”路径符需要改为“\\”。

blob.png

    .laya/tasks.json里保存了TS编译器相关的一些配置信息。

2.2 项目的输出目录(bin)

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

blob.png

    bin/index.html 是项目的入口文件,所有的LayaAir引擎类库或者是第三方类库的JS都需要在这里引入。(Tis,如果引用第三方类库,必须要在引用LayaAir引擎类库之前。)

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

    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)

blob.png

     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}