Laya开发小游戏的注意点

1：利用编辑模式来设计UI的步骤

1.1：通过编辑模式设计好UI后，然后通过‘导出’->‘清理并导出’来将UI导出；

1.2：切换到代码模式，导出的UI的代码就在layaUI.max.all.js文件中生成了，如下图：

如果UI中用到了图片的话，记得导入图片，图片在bin->res->atlas下，找到对应的与编辑模式下图片所在文件夹的名字一样的.atlas文件。

代码模式下图片所对应的.atlas文件
编辑模式下图片所在的文件夹

1.3：编写代码如下：

var Loader = Laya.Loader;
var Handler = Laya.Handler;
Laya.init(600, 400)
var a = new Laya.Sprite()
Laya.loader.load("res/atlas/wode.atlas", Handler.create(this, onLoaded));//加载UI中图片所对应的.atlas文件
function onLoaded() {
    var cMask = new disanUI();//加载UI所对应的代码
    Laya.stage.addChild(cMask);
}
Laya.stage.addChild(a)

1.4：然后运行，会出现如下异常：

只需要将第6行代码删掉就行了，然后运行，截图如下：

2：多个图片不在同一个文件夹的话，可以通过数组的方式导入多个atlas文件

3：制作动画时，如果通过代码来导入动画的话，只有在右下角的动画才能显示出来，其他位置是显示不出来的。

4：创建动效模板(EffectAnimation)：动效模板是基于时间轴的动画效果，通过预设动画效果，然后把效果附加给某个组件。使得组件无需编码却能轻松实现与编码相同的动画效果。动效模板不能独立显示，仅可作为动效模板让UI页面中的组件获得动画效果。

第一步：创建动态效果模板；

第二步：创建UI，然后将动态效果模板拖到对应的view上，然后分别设置view的anchorX和anchorY为0.5，这样动态效果就是从view的中间开始的动画（那时候我给button的skin设置的是颜色值，但是运行后出现了lose skin的错误，如果设置成图片就没有那个错误了），设置动态效果的playEvent为mousedown即鼠标按下时触发动画；

第三步：记得F9设置项目中导入动态效果用到的EffectAnimation，不导入会报异常的，如下图：

第四步：发布UI，在逻辑层调用UI类即可。

5：屏幕的适配，通过stage的scaleMode属性来设置适配

代码如下：

//初始化引擎
Laya.init(1600, 1400);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//加载图集成功后，执行onLoaded回调方法
Laya.loader.load(["res/atlas/wode.atlas","res/atlas/comp.atlas"], Laya.Handler.create(this, onLoaded));
function onLoaded() {
    var kaishi=new kaishiUI();
    //添加到舞台
    //Laya.stage.scaleMode="full";
    Laya.stage.addChild(kaishi);
}

看以看到舞台的上下左右都有滚动条

将Laya.stage.scaleMode="full";这句代码取消注释，效果如下：

可以看到上下左右的滚动条消失了

6：在编辑模式下创建的粒子特效，你直接清理并导出，然后回代码模式里面是找不到的，你可以通过将粒子特效附着在UI中，然后导出，这时在代码中使用UI，就可以看到粒子特效了。如下图所示：