本来没有计划学前端的，更没有计划学引擎。不过还真的想一出搞一出，觉得做后端没有界面无法展示自己想要的效果，就在今年过年的时候，努力突击了一把，H5,CSS,js，看了视频之后，才发现这几种语言只是前端的基础，一般实际应用都不基于原生js开发，当时一脸懵逼，学了这么久，尼玛，竟然不用直接上，还是有点不爽，本来打算直接上原生js，做做项目算是熟悉原生js,（这个之后会安排，因为之前一个劲看视频学语法，都没实操，可以安排安排）。然后又一次公司招来了一个H5工程师，好奇心之下，就去百度搜索了一下H5是做啥的，结果就把laya air引擎搜索出来了，从此再次踏上不归路。

之前还以为H5引擎只有laya，所以就可以看视频，先做个demo试试，看了差不多了，手贱，又搜索了一下，发现H5引擎这么多，还有一个叫“白鹭”的，看着感觉时间还有点久了，并且市场份额有点大，想想要不要去学这个，后来惊醒了一下，学这么多，那有那么多精力，反正都跟laya有缘了，就选择laya把，用laya来做第一个游戏，也希望laya引擎不要那么坑，做前端比较不在行，就是单纯的想玩玩。

一不小心说了这么多，主要说了一下跟laya认识的过程，不想看的，可以忽略。下面我们来正式进入主题：初识laya.

1.认识laya

每次写文章开头，都必须要吹水，这基本概念的东西我确实不太会说，就简单的描述描述。

laya是一个国内的开源引擎，好像说在3D小游戏上面性能比较好，不过我们初学，就做做2D，3D还是先放放，因为开源，所以我们都可以下载来使用，这里粘贴了laya的官网

界面比较简单，大家可以去看看，都有文档，API，视频等等，这些就不细说了。

1.1 安装步骤

laya安装链接

其实的免安装版的，下载下来就可以直接用了，ok，这里也不说了，比较懒，哈哈。

1.2 新建项目

laya比较好的地方，是在新建项目中有一个实例项目：

就按者这个创建，就会有一个弹箱子的小游戏，可以试着玩玩，感觉还行。

但是对我来说，我发现一个问题，就是创建好了这个实例项目之后，不知道从来开始看起，所以比较懵逼。一些js文件在里面调用，看着都懵逼了，不过你们会不会有这种感觉。

1.3 简介laya（重要）

1.3.1 语言

之前本来想直接就创建一个新项目了，不过想想还是再添加一节，来做做过渡。这一节简单描述一下开发需要的知识。laya支持3种语言，as,js,ts，官方推荐使用TS，TS是JS的超集，语法都支持JS，但是是一个强类型语言，JS是一个弱类型语言，当变量一多，就会懵逼，不过我这里使用是JS，毕竟自学了这么久的JS，不使用一些，都不会甘心。

1.3.2 场景

当你自己新创建一个laya项目的时候，肯定懵逼，尼玛，这连界面都没有，太坑了，有木有。（我在这里也纠结了大半天，尼玛怎么搞）。

后来才发现，有一个叫场景的东西，可以理解为画布，我们可以在场景里面放图片，画画，所以我们对着Scenes右击，选择新建，就有场景：

可以起名气，设置宽度和高度，这里的宽度和高度是参考的长度，这又是一坑，（手动捂脸）。

创建后，就会有一个黑色的背景，可以在各种组件，各种ui，往里放，然后按F8编译，

画重点，

编译出来在谷歌浏览器中的像素总是感觉那种不对，就是比较小，这是因为这个像素是由另一个界面控制的，为什么这么设计，对我这种初学者来说，我也不知道，反正就记住就行。

那这么设置呢？我们按下F9

出现了一个项目设置，好家伙，这里还有一个宽度和高度，这是我改过之后的了，你们可以根据自己的情况修改，就这点，也坑了我好久，不过我后面知道了之后，想起视频上是有说的，怪自己不认真，不过说实话，一直看视频确实让我想睡觉。

编译运行之后，再在谷歌浏览器看看效果，是不是舒服多了，界面变大了。

1.3.3 组件

laya是基于组件编程的，支持好多组件

这里就截两个图说明说说，确实比较多，左边的comp就是组件，组件就是在右边的basics中添加了一些功能，比较添加了图片等，所以如果可以我们先选用左边的comp。等做demo的时候，就明白，现在可以拖拖这些组件玩玩，

1.4 文档

laya的文档其实是比较丰富的，现在先有一个认识，到时候，真正做项目的时候，就有的用了。

laya api文档链接

左边有搜索框，我们比较常用的就是image，一搜索就能看到，然后点击就可以看到里面的方法和属性，都是比较方便的。现在不知道怎么用，没关系，下节就知道怎么用了。

laya引擎示例连接

也都比较详细，都可以在上面查查。

1.5 最后

最后说说我为什么要写laya文章，现在都养成了一种总结的习惯，每次学习，或者遇到一个新的知识，都喜欢记录下来，供以后翻阅，虽然以后看的概率不大，不过学习过程能看到一些输出，也是值得高兴的。我是初学laya，说的不准确的地方，可以联系我。