ActionScript
TypeScript
JavaScript

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

发布时间:2016-12-27

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


1、用LayaAirIDE创建项目

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

blob.png

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

blob.png

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

blob.png


2、目录结构介绍

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

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

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

blob.png

blob.png

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

blob.png

2.2 项目的输出目录(bin)

        bin目录下存放的就是当前项目的输出文件。
        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 项目目录。
        其中的 assets 目录用来存放编辑UI页面、粒子等组件所需的资源文件。
        其中的 pages 目录用来存放编辑器生成的页面配置文件。
        其中的 .laya 文件是UI项目配置文件。

 

2.4 项目脚本代码目录(src)

        项目中的脚本代码文件默认将存放在 src 目录。

 

2.5 项目配置文件(项目名.laya)

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

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