layaAir构建H5游戏详解

刚刚打开官网的时候发现最新版本已经是1.7.15了，更新还是比较频繁的，第一次使用的时候还是1.7.9版本，从官网copy了份介绍:

​ LayaAir是Layabox旗下的第二代HTML5开源引擎。是全球唯一支持ActionScript3、JavaScript、TypeScript三种开发语言，并且一次开发同时发布Native APP与HTML5的游戏引擎，也是全球首款基于HTML5协议的全能型开源引擎。除支持2D\3D\VR\AR的游戏开发外，引擎还可以用于应用软件、广告、营销、教育等众多领域。
​ LayaAir引擎是一套全新设计的精简API的游戏引擎，具有极致的性能、轻量易用、支持多语言开发、API功能齐全、工具链完善高效、开源免费、支持多版本发布等特点。

从我的使用来看，它的优点：

• 社区活跃。基本上提出的问题都能得到比较不错的解答，只要提问足够明确。
• 官方资料齐全。有文档、API文档、官方实例、还有腾讯课程的视频教程。
• 支持3D。这个主要是和phaser的对比，当然支持3D的游戏引擎很多。
• 自带IDE。可以直接在IDE中进行2D布局，甚至可以进行动画的制作。
• 自带sprite合并。可以直接通过自带的IDE进行雪碧图的合并，以及导出映射的json文件。
• 自带调试工具。这个在后期优化性能方面派上了大用处。
• 对一些常见的组件提供比较好的解决方案指导。

本来想说缺点，但是想了想其实也不能说是缺点，都不算硬伤，只能说是坑吧，有解决的方法，就看自己能不能解决了。

项目目录结构

按照以上步骤构建一个游戏后，会生成这样一个目录

• launch.json是使用IDE调试的一些配置项

• bin目录下分libs和index.html libs下是laya的一些依赖库，index.html是启动文件，运行整个项目在浏览器中访问该页面即可，具体各个类库的作用在这个文件里也有注释。

  <!--以下引用了常用类库，如果不使用，可以删除-->
  	
  <!--核心包，封装了显示对象渲染，事件，时间管理，时间轴动画，缓动，消息交互,socket，本地存储，鼠标触摸，声音，加载，颜色滤镜，位图字体等-->
  <script type="text/javascript" src="libs/laya.core.js"></script>
  <!--提供了微信小游戏的适配-->
  <script type="text/javascript" src="libs/laya.wxmini.js"></script>
  <!--封装了webgl渲染管线，如果使用webgl渲染，可以在初始化时调用Laya.init(1000,800,laya.webgl.WebGL);-->
  <script type="text/javascript" src="libs/laya.webgl.js"></script>
  <!--是动画模块，包含了swf动画，骨骼动画等-->
  <script type="text/javascript" src="libs/laya.ani.js"></script>
  <!--包含更多webgl滤镜，比如外发光，阴影，模糊以及更多-->
  <script type="text/javascript" src="libs/laya.filter.js"></script>
  <!--封装了html动态排版功能-->
  <script type="text/javascript" src="libs/laya.html.js"></script>
  <!--粒子类库-->
  <script type="text/javascript" src="libs/laya.particle.js"></script>
  <!--提供tileMap解析支持-->
  <script type="text/javascript" src="libs/laya.tiledmap.js"></script>
  <!--提供了制作UI的各种组件实现-->
  <script type="text/javascript" src="libs/laya.ui.js"></script>
  <!--自定义的js(src文件夹下)文件自动添加到下面jsfile模块标签里面里，js的顺序可以手动修改，修改后保留修改的顺序，新增加的js会默认依次追加到标签里-->
  <!--删除标签，ide不会自动添加js文件，请谨慎操作-->
  <!--jsfile--startTag-->
  <script src="../src/LayaSample.js"></script>
  <!--jsfile--endTag-->

• laya目录里的assets目录主要存放原始的静态图片等资源，这个目录下的资源一般不会直接被项目所应用，在IDE内打包后会在bin目录下生成一个res目录，项目使用的是res目录中经过打包压缩合并的资源。当然也可以直接把资源放入res目录中。laya提供了对sprite的合并以及映射JSON文件的生成，同时可以配置打包图片的大小，未经打包的图片（超过打包限制）会直接复制到res目录下。但是这里“未打包图片”有个坑，关于线上路径的配置，之后说。

• src目录下是项目开发文件，最简单的项目只用一个入口文件，可以将所有的代码都也在这个文件里，当然，随着项目复杂度的增加，这个目录的结构也更加复杂。打开LayaSample.js，里面只有一行代码： Laya.init(600, 400); 这句是为了初始化场景，当然关于laya的教程官方文档已经讲得很清楚了，本文也不多加赘述。
• jsconfig.json 是对JavaScript语言的配置，主要用于
  • 排除一些不想包含在项目中的文件。
  • 工作空间包含多个项目上下文。在这种情况下，每个项目的根目录包含一个jsconfig.json。
  • 使用TypeScript编译器来降级编译JavaScript源代码。
    比如这里

    {
    	"compilerOptions": {
    		"target": "es5"
    	},
    	"exclude": [
    		"node_modules",
    		"bower_components",
    		"jspm_packages",
    		"tmp",
    		"temp",
    		"bin"
    	]
    }

的意思是，项目使用es5语法，”node_modules”,”bower_components”,”jspm_packages”,”tmp”,”temp”,”bin”目录不是源代码的一部分。（参考）

• myLaya.laya 这是项目的一些信息，可通过这个文件把项目导入laya提供的IDE中

当然，以上都是最基础的项目结构，具体开始一个游戏项目，我们还需要添加很多额外的目录，这个接下来会提到。