IDE

千万不要在src/ui下写任何js类, 它会莫名其妙的消失

src/ui目录是界面编辑器动态生成所需要的目录, 自己写的什么都不能放进去

打包时错误

Snip20180116_22.png

把错误文本复制出来查看问题
在这里我的js删除了, 但是bin下的index.html并没有删除对应js导致的, 删了即可

打包文件大小

虽然整个打包目录很大, 但是真正需要的文件并不多

2d部分

屏幕尺寸

设备像素分辨率:Laya.Browser.clientWidth，Laya.Browser.clientHeight;
　　设备物理分辨率：Laya.Browser.width，Laya.Browser.height;
　　像素比：Laya.Browser.pixelRatio;

自适应屏幕并不好用

还要自己去对应window.outterWidth/Height去算, 然后缩放scaleX/Y和移动位置来调整

创建ui搭建

• 背景参考图虽然可选(不发布), 但是搭建快速尽量勾选
• 宽高一定要设置为参考值, 否则无法自适应屏幕
• 搭建好一定要发布

加载ui布局

• 发布的布局根据是否打包资源分别在不同的部分

  • 不打包的文件会从 laya/assets/ 拷贝到 bin/ 目录
  • 打包的文件从 laya/assets/

• 发布的场景变成js代码在 layaUI.max.all.js 中

  • 所有场景名都在这一个文件内

• 在主代码下输入

Laya.stage.addChild(new MenuUI());

你会发现, 未压缩的背景会加载, 但是打包的图集中的元素和按钮没有加载成功, 这是因为atlas加载不是自动的, 需要这样写

Laya.loader.create("res/atlas/simbols.atlas",Laya.Handler.create(this,function(){
     Laya.stage.addChild(new MenuUI());
}));

让场景永远悬浮logo

//创建二级容器
var SceneMajor = Laya.stage.addChild(new Laya.View());
//再加载logo
Laya.stage.addChild(new LogoUI());
//这样更改SceneMajor容器即可

按钮交互

• 设计器里面输入按钮变量名称 (var 设置为 btSth)
• 获取当前创建的UI对象

var logo = Laya.stage.addChild(new LogoUI());

• 获取按钮的变量

var btSth = logo.btSth;

• 给按钮增加点击事件

btSth.on('click', this, function(){
     window.location.reload();
});

ui编辑器不支持texture透明

本来想设置个半透明背景

• 放上rect 设置大小后发现没有透明度选项
• 放上texture将100x100大小的图片放上去拉满全屏, 设置透明度, ui表现不错, 运行时不支持
• 只能做个png半透明背景, 然后直接放上去, 局限性很大, 但是还算管用

官方说套个容器设置容器透明度可以解决

3d部分

设置位置

box.transform.position = new Laya.Vector3(0,1,1);

正交相机

正确的写法

camera.orthographic = true;
camera.orthographicVerticalSize = 7;

错误的官方教程 (官方回复留言很理直气壮的贴了错误的代码)

camera.orthographicProjection = true;

创建简单建模注意

第二位居然是z.....但是后面移动的时候, 第二位参数居然是控制纵向的

new Laya.BoxMesh(1, 1, 1);
box.transform.position = new Laya.Vector3(0,1,0);

官方并不推荐用tween来修改位置点

但是依旧可以实现, 因为position在transform中是个数值变量, 它如果被临时赋给其他变量, 指向的只是这个position值, 而不是transform的变化量, 也就导致了无法直接对3d物体这样处理. 不过无妨, 只要知道原理就很简单实现效果

box.potOld = box.transform.position;
Laya.Tween.to(box.potOld,{
    x:1
    ,y:2
    ,update:new Laya.Handler(box,function(){
        this.transform.position = this.potOld;
    })
}, ConstValue.animationTime,Laya.Ease.elasticOut,Laya.Handler.create(this, function(){
    console.log("complete");
}),ConstValue.animationDelay);

设置个临变量, 整个过程tween只负责更改这个变量值, 而同步更新放在update中即可

阴影投影bug

当你选择好Laya并开始开发时候发现头痛的事情出现了, 阴影诡异的有时候有有时候没有, 这样导致的问题还挺大的, 怎么解决呢?
阴影和资源尺寸, 资源格式没太大关系, 和光源配置, 镜头也关系不大, 毕竟这些该处理的都处理了
结果发现阴影的投递跟创建物有关, 如果A想投到B上, A必须在B之后创建, 全部统一初始化创建避免了这个问题, 然而发现如果有多个B, 并动态删除, 那么动态阴影还是会有问题.......

也就是说, 如果你想整个过程顺利执行投影, 那么你对这群AB模块一个都不要动,创建完毕后就好好的摆他们的位置, 贴图, 不要做创建和删除的事情

代码

CylinderMesh如果创建奇数面圆面和柱面接合会对不上，发现是顶部圆面以外，其他位置都加了PI旋转了180，这样非对称的奇数面时会出现建模奇怪的问题