Laya

2019-08-09 17:53:02

官网：http://ldc.layabox.com/ 官方视频教程：http://layabox.ke.qq.com/ 文档：https://ldc2.layabox.com/doc/?nav=zh-ts-1-0-2 LayaAir功能介绍 LayaAir引擎主要包括引擎库与LayaAir IDE两大核心部分 ...

官网： http://ldc.layabox.com/

官方视频教程： http://layabox.ke.qq.com/

文档： https://ldc2.layabox.com/doc/?nav=zh-ts-1-0-2

LayaAir功能介绍

LayaAir引擎主要包括引擎库与LayaAir IDE两大核心部分

LayaCloud与LayaNative是引擎的生态组合部分

LayaAir2.0引擎库功能

LayaAir2.0引擎不仅保持了1.0的原有功能，比如：

精灵、矢量图、文本、富文本、位图字体、动画、骨骼、音频与视频、滤镜、事件、加载、缓动、时间、网络、UI系统、物理系统、TiledMap、prtocol等API；

还新增内置了box2d物理引擎、组件化支持，以及150多款3D功能，比如：

新增的主要官方材质包括PBRStandardMaterial、PBRSpecularMaterial以及UnlitMaterial材质等。

纹理方面，增加多种纹理参数配置(mipmap、format、wrapModeU、wrapModeV、filterMode、anisoLevel)，增加纹理上传像素接口， GPU纹理压缩。

动画方面，新增Animator动画融合功能crossFade，新增动画多层混合播放，动画更新机制调整为实时插值，大幅减少内存和动画流畅度表现，新增多种材质属性动画

支持开发2D、3D、VR的产品研发，支持Canvas与WebGL模式，支持同时发布为HTML5、Flash、APP（IOS、安卓）微信小游戏，QQ玩一玩多种版本。

2. 基础篇

2.1 我得第一个程序：

<1. 运行后黑屏，修改.laya目录下的compile.js 文件，修改启动类为HelloLayabox.ts

<2. 找不到库时，先看看有没有错误，再重新打开写。

2.2 显示列表

显示对象在舞台上显示之前，还需要有一个过程，那就是先添加到显示列表中。显示列表的作用就是将显示对象进行数据索引，用于层级的显示顺序（后添加的在最上层显示），然后在舞台上显示。

2.3 文本

通过laya.display.Text类添加文本，给文本设置字体样式、颜色、大小等。

视频：熟悉IDE的通用导航与菜单功能：

UI组件可视化编辑：

Text，界面输入后要使用回车键。

界面主要有三块：

<1. 工程面板

---自带的东西默认是隐藏的

---可以给资源(eg:图片)可以设置默认全局属性）是一种设置预设的方式。

<1. 层级面板

场景中物体的层级顺序等

可以锁定

<2. 预览面板

<3. 组件面板

F9: 打开项目设置

创建容器：把多个物件锁在一起。

滤镜效果虽好，但是尽可能地不要用，滤镜不继承组件，滤镜不是组件

动态文本/静态文本动态时候使用FillText，而Text是每次都是提交这么，不断创建大量的图集去提交

动态重复字文字共享，静态则超过阈值就创建的. 一个是一个字一个字的提交，一个是整个文本的提交。

UI组件库：

1. 基础组件：

2. 容器组件：多张图组合

Dialog ：弹窗

View :需要相对布局时，必须是UI组件，否则可以转换成UI组件，image

sence:不需要相对布局时

节点与非节点继承与非继承

穿透：https://ke.qq.com/course/391284?taid=3649876093433972

button：默认是接收鼠标点击事件的，但是Image默认是不用点击事件的。

Image需要时需要改为true，如下图：即遮挡住了

而，下图设置成false，则时是按照宽高来遮挡的，不是按照显示图形形状来的。负责区域修正，不是负责穿透

下图为true，则优先检测父对象。

注意：下图两个矢量图，则在两个图形中间也会视为整体

学习TS语言的网址： www.tslang.cn 翻译的类的官网

收起

展开全文

laya3d
2021-01-08 21:10:07
<div><p>你好，怎么在laya3d中使用connon创建一个body或者floor并且显示出来呢？</p><p>该提问来源于开源项目：schteppe/cannon.js</p></div>
收起

Laya Mouse

2019-10-24 14:15:13

鼠标事件事件描述 Laya.Event.MOUSE_DOWN 鼠标按下时触发 Laya.Event.MOUSE_MOVE 鼠标移动时触发 Laya.Event.MOUSE_OUT 鼠标离开对象范围时触发 ...Laya.Event.MOUSE_OVER ...Laya.Event.MOUSE_UP ...Laya...

    鼠标事件
事件
描述
Laya.Event.MOUSE_DOWN
鼠标按下时触发
Laya.Event.MOUSE_MOVE
鼠标移动时触发
Laya.Event.MOUSE_OUT
鼠标离开对象范围时触发
Laya.Event.MOUSE_OVER
鼠标移动到对象范围上方时触发
Laya.Event.MOUSE_UP
鼠标按下松开时触发
Laya.Event.MOUSE_WHEEL
鼠标滚轮事件
鼠标按住
例如：点击按住精灵维持一秒钟松开鼠标后精灵放大一倍





Hold 按住

class Test {
    constructor() {
        //初始化引擎
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        //初始化舞台
        this.initStage();
        //运行
        this.run();
    }
    /**初始化舞台*/
    initStage(){
        //设置舞台对齐方式
        this.setStageAlign("center", "middle");
        //设置舞台屏幕模式
        this.setStageScreen("horizontal");
        //设置舞台缩放模式
        this.setStageScale("showall");
        //设置舞台背景
        Laya.stage.bgColor = "#000000";
    }
    /**设置舞台缩放模式 */
    setStageScale(mode){
        mode = mode.toLowerCase();
        if(mode == "noscale"){
            //不缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_NOSCALE;
        }else if(mode == "showall"){
            //显示所有 最小比例缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        }else if(mode == "exactfit"){
            //全屏不等比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
        }else if(mode == "noborder"){
            //无框缩放 最大比例缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
        }else if(mode == "full"){
            //全屏缩放 舞台宽高等于屏幕宽高
            Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
        }else if(mode == "fixedwidth"){
            //宽度固定 宽度不变 高度根据屏幕比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;
        }else if(mode == "fixedheight"){
            //高度固定 高度不变 宽度根据屏幕比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_HEIGHT;
        }else if(mode == "fixedauto"){
            //自动选择 根据宽高比自动选择使用fixedwidth或fixedheight
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;
        }
    }
    /**设置舞台屏幕模式 */
    setStageScreen(mode = "horizontal"){
        mode = mode.toLowerCase();
        if(mode == "horizontal"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
        }else if(mode == "vertical"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
        }
    }
    /**设置舞台对齐方式 */
    setStageAlign(h, v){
        h = h.toLowerCase();
        if(h == "left"){
            Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;
        }else if(h == "center"){
            Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        }else if(h == "right"){
            Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;
        }
        v = v.toLowerCase();
        if(v == "top"){
            Laya.stage.alignV = Laya.Stage.ALIGN_TOP;
        }else if(v == "middle"){
            Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        }else if(v == "bottom"){
            Laya.stage.alignV = Laya.Stage.ALIGN_BOTTOM;
        }
    }
    run(){
        let url = "res/image/npc.png";
        Laya.loader.load(url, Laya.Handler.create(this, function(url){
            //创建精灵
            let sprite = new Laya.Sprite();
            //使用精灵加载图片
            sprite.loadImage(url);
            //获取纹理尺寸
            let texture = Laya.loader.getRes(url);
            //设置精灵的轴心点
            sprite.pivot(texture.width>>1, texture.height>>1);
            //设置精灵的坐标位置
            sprite.pos(Laya.stage.width>>1, Laya.stage.height>>1);
            //设置精灵的缩放比例
            sprite.scale(0.5, 0.5);
            //添加到舞台
            Laya.stage.addChild(sprite);
            //添加事件
            sprite.on(Laya.Event.MOUSE_DOWN, this, this.onSpritePress);
            sprite.on(Laya.Event.MOUSE_UP, this, this.onSpriteRelease);
        }, [url]));
    }
    onSpriteRelease(evt){
        Laya.Tween.to(evt.target, {"scaleX":0.5, "scaleY":0.5}, 300, Laya.Ease.bounceOut);
        Laya.stage.off(Laya.Event.MOUSE_UP, this, this.onSpriteRelease);
    }
    onSpritePress(evt){
        //延迟1秒后执行缓动
        Laya.timer.once(1000, this, function(){
            Laya.Tween.to(evt.target, {"scaleX":1, "scaleY":1}, 500, Laya.Ease.bounceOut);
        });
    }
}
//启动
new Test();

鼠标拖动
例如：拖动显示对象再超出边界后可以看到回弹效果





鼠标拖动

class Test {
    constructor() {
        //初始化引擎
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        //初始化舞台
        this.initStage();
        //运行
        this.run();
    }
    /**初始化舞台*/
    initStage(){
        //设置舞台对齐方式
        this.setStageAlign("center", "middle");
        //设置舞台屏幕模式
        this.setStageScreen("horizontal");
        //设置舞台缩放模式
        this.setStageScale("showall");
        //设置舞台背景
        Laya.stage.bgColor = "#000000";
    }
    /**设置舞台缩放模式 */
    setStageScale(mode){
        mode = mode.toLowerCase();
        if(mode == "noscale"){
            //不缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_NOSCALE;
        }else if(mode == "showall"){
            //显示所有 最小比例缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        }else if(mode == "exactfit"){
            //全屏不等比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
        }else if(mode == "noborder"){
            //无框缩放 最大比例缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
        }else if(mode == "full"){
            //全屏缩放 舞台宽高等于屏幕宽高
            Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
        }else if(mode == "fixedwidth"){
            //宽度固定 宽度不变 高度根据屏幕比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;
        }else if(mode == "fixedheight"){
            //高度固定 高度不变 宽度根据屏幕比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_HEIGHT;
        }else if(mode == "fixedauto"){
            //自动选择 根据宽高比自动选择使用fixedwidth或fixedheight
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;
        }
    }
    /**设置舞台屏幕模式 */
    setStageScreen(mode = "horizontal"){
        mode = mode.toLowerCase();
        if(mode == "horizontal"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
        }else if(mode == "vertical"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
        }
    }
    /**设置舞台对齐方式 */
    setStageAlign(h, v){
        h = h.toLowerCase();
        if(h == "left"){
            Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;
        }else if(h == "center"){
            Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        }else if(h == "right"){
            Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;
        }
        v = v.toLowerCase();
        if(v == "top"){
            Laya.stage.alignV = Laya.Stage.ALIGN_TOP;
        }else if(v == "middle"){
            Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        }else if(v == "bottom"){
            Laya.stage.alignV = Laya.Stage.ALIGN_BOTTOM;
        }
    }
    run(){
        //绘制矩形
        this.drawRect(400, 300);
        //载入图片
        this.loadImage("res/image/npc.png");
    }
    //加载图片
    loadImage(url){
        Laya.loader.load(url, Laya.Handler.create(this, function(url){
            //创建精灵
            let sprite = new Laya.Sprite();
            //使用精灵加载图片
            sprite.loadImage(url);
            //获取纹理尺寸
            let texture = Laya.loader.getRes(url);
            //设置精灵的轴心点
            sprite.pivot(texture.width>>1, texture.height>>1);
            //设置精灵的坐标位置
            sprite.pos(Laya.stage.width>>1, Laya.stage.height>>1);
            //设置精灵的缩放比例
            sprite.scale(0.5, 0.5);
            //添加到舞台
            Laya.stage.addChild(sprite);
            //添加事件
            sprite.on(Laya.Event.MOUSE_DOWN, this, this.onDrag);
        }, [url]));
    }
    //绘制矩形
    drawRect(width = 400, height = 300){
        this.rectangle = new Laya.Rectangle(
            Laya.stage.width-width>>1, 
            Laya.stage.height-height>>1, 
            width, height
        );
        Laya.stage.graphics.drawRect(
            this.rectangle.x, 
            this.rectangle.y, 
            this.rectangle.width, 
            this.rectangle.height, 
            null, "#FFFFFF", 2
        );
        return this.rectangle;
    }
    //鼠标按下开始拖拽
    onDrag(evt){
        //设置了拖动区域和超界弹回的滑动效果
        evt.target.startDrag(this.rectangle, true, 100);
    }
}
//启动
new Test();

Sprite精灵的startDrag方法用于开始拖动当前对象
public function startDrag(
  area:Rectangle = null, 
  hasInertia:Boolean = false, 
  elasticDistance:Number = 0, 
  elasticBackTime:int = 300, 
  data:* = null, 
  disableMouseEvent:Boolean = false, 
  ratio:Number = 0.92
):void

参数
默认值
可选
描述
area:Rectangle
null
可选
拖动区域，为当前对象注册点活动区域
hasIneritia:Boolean
false
可选
鼠标松开后是否惯性滑动
elasticDistance:Number
0
可选
橡皮筋效果的距离值，0为无橡皮筋效果。
elasticBackTime:int
300
可选
橡皮筋回弹毫秒时间，默认为300毫秒。
data:*
null
可选
拖动事件携带的数据
disableMouseEvent:Boolean
false
可选
禁用其他对象的鼠标检测，启动可提高性能。
ratio:Number
0.92
可选
惯性阻尼系数，影响惯性力度和时长。

事件	描述
Laya.Event.MOUSE_DOWN	鼠标按下时触发
Laya.Event.MOUSE_MOVE	鼠标移动时触发
Laya.Event.MOUSE_OUT	鼠标离开对象范围时触发
Laya.Event.MOUSE_OVER	鼠标移动到对象范围上方时触发
Laya.Event.MOUSE_UP	鼠标按下松开时触发
Laya.Event.MOUSE_WHEEL	鼠标滚轮事件

参数	默认值	可选	描述
area:Rectangle	null	可选	拖动区域，为当前对象注册点活动区域
hasIneritia:Boolean	false	可选	鼠标松开后是否惯性滑动
elasticDistance:Number	0	可选	橡皮筋效果的距离值，0为无橡皮筋效果。
elasticBackTime:int	300	可选	橡皮筋回弹毫秒时间，默认为300毫秒。
data:*	null	可选	拖动事件携带的数据
disableMouseEvent:Boolean	false	可选	禁用其他对象的鼠标检测，启动可提高性能。
ratio:Number	0.92	可选	惯性阻尼系数，影响惯性力度和时长。

收起

展开全文

Laya Timer

2019-10-09 18:35:33

Timer 是时钟管理类，是一个单例，无需手动实例化，直接使用 Laya.Time 访问。构造函数 new Laya.Timer(autoActive?:boolean):Timer 结构值 Package laya.utils Class Laya.Timer Inheritance Timer /...

    Timer 是时钟管理类，是一个单例，无需手动实例化，直接使用 Laya.Time 访问。
构造函数
new Laya.Timer(autoActive?:boolean):Timer

结构
值
Package
laya.utils
Class
Laya.Timer
Inheritance
Timer / Object
属性
类型
默认值
描述
currFrame
int
0
当前帧数
currTime
Number
Date.now()
当前帧开始的时间
scale
Number
1
时针缩放
存取器
类型
描述
delta
number
[read-only] 两帧之间的时间毫秒间隔
方法
参数
返回值
描述
callLater()
caller: any, method: Function, args?: any[]
void
延迟执行
once()
delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean
void
定时器基于毫秒执行一次
frameOnce()
delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean
void
定时器基于帧率执行一次
loop()
delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean, jumpFrame?: boolean
void
定时器基于毫秒重复执行
frameLoop()
delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean
void
定时器基于帧率重复执行
pause()

void
暂停时钟
resume()

void
恢复时钟
clear()
caller: any, method: Function
void
清理定时器
clearAll()
caller: any
void
清理对象身上的所有定时器
runCallLater()
caller: any, method: Function
void
立即执行callLater
runTimer()
caller: any, method: Function
void
立即提前执行定时器，执行之后从队列中删除。
Timer表示游戏主时针，同时也是管理场景、动画、缓动等效果时钟，通过控制本时钟缩放可以达到快进慢播的效果。
延迟调用callLater

/***
 * 延迟执行一次
 * @param caller 执行域this
 * @param method 定时器回调函数，只会执行一次。
 * @param args 回调参数
*/
callLater(
  caller:any, 
  method:Function, 
  args?:Array<any>
):void

多次调用callLater 函数，只会执行一次自己的回调函数。
class Test {
    constructor() {
        Laya.init(Laya.stage.designWidth, Laya.stage.designHeight, Laya.WebGL);
        this.initStage();
        Laya.Stat.show();
        this.run();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    run(){
        for(let i=0; i<10; i++){
            //定时器回调函数只会执行一次
            Laya.timer.callLater(this, this.onCallLater);
        }
    }
    onCallLater(){
        console.log("onCallLater triggered");
        let text = new Laya.Text();
        text.font = "SimHei";
        text.fontSize = 30;
        text.color = "#FFFFFF";
        text.text = "test";
        text.size(Laya.stage.width, Laya.stage.height);
        text.align = "center";
        text.valign = "middle";
        Laya.stage.addChild(text);
    }
}
//启动
new Test();

例如：每次点击文字标签，文件内容变化并渐隐。
class Test {
    constructor() {
        this.alpha = 1;

        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.initLabel("alpha=1");
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    initLabel(text){
        this.label = new Laya.Label(text);
        this.label.fontSize = 40;
        this.label.color = "#FFF";
        this.label.pos((Laya.stage.width-this.label.width)/2, (Laya.stage.height-this.label.height)/2);
        Laya.stage.addChild(this.label);

        this.label.on(Laya.Event.CLICK, this, function(){
            Laya.timer.callLater(this, this.onCallLater);
        });
    }
    onCallLater(obj){
        console.log(this.label);
        this.alpha = this.alpha <= 0 ? 1 : this.alpha - 0.1;
        this.label.alpha = this.alpha;
        this.label.text = `alpha=${this.alpha}`;
        this.label.pos((Laya.stage.width-this.label.width)/2, (Laya.stage.height-this.label.height)/2);
    }
}
//启动
new Test();

延迟执行 once
基于毫秒定时执行一次
/**
 * 定时执行一次
 * @param delay:number 延迟毫秒
 * @param caller:any 执行域this
 * @param method:Function 定时回调函数
 * @param args:any[] = null 回调参数
 * @ coverBefore:boolean = true 是否覆盖之前的延迟执行
*/
once(
  delay:number, 
  caller:any, 
  method:Function, 
  args?:any[], 
  coverBefore?:boolean
):void

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.initLabel("点我0.5秒后执行");
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    initLabel(text){
        this.label = new Laya.Label(text);
        this.label.fontSize = 40;
        this.label.color = "#FFF";
        this.label.pos((Laya.stage.width-this.label.width)/2, (Laya.stage.height-this.label.height)/2);
        Laya.stage.addChild(this.label);
        //为label绑定单击事件
        this.label.on(Laya.Event.CLICK, this, this.onLabelClick);
    }
    onLabelClick(){
        //移除鼠标单击事件
        this.label.off(Laya.Event.CLICK, this, this.onLabelClick)
        //once在延迟指定时间后执行一次，单位为毫秒；如果多次调用
        Laya.timer.once(500, this, function(){
            this.label.color = "#FF0000";
        });
    }
}
//启动
new Test();

基于帧率定时执行一次
/**
 * 基于帧率定时执行一次
 * @param delay:number 延迟帧数
 * @param caller:any 执行域 this
 * @param method:Function 定时回调函数
 * @param args:any[] = null 回调参数
 * @param coverBefore:boolean = true 是否覆盖之前的延迟执行
*/
frameOnce(
  delay:number,
  caller:any,
  method:Function,
  args?:any[],
  coverBefore?:boolean
):void

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.initButton("点我60帧后执行");
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    initButton(text, width = 300, height = 60){
        this.button = new Laya.Sprite();
        Laya.stage.addChild(this.button); 
        
        this.button.size(width, height);
        this.button.graphics.drawRect(0, 0, width, height, "#FF0000");
        this.button.graphics.fillText(text, width/2, 17, "20px simHei", "#FFFFFF", "center");
        this.button.pos((Laya.stage.width - this.button.width)/2, (Laya.stage.height - this.button.height)/2);

        this.button.on(Laya.Event.CLICK, this, this.onClick);

    }
    onClick(){
        //移除鼠标单击事件
        this.button.off(Laya.Event.CLICK, this, this.onClick)
        //frameOnce在延迟指定帧数后执行一次，单位为毫秒；如果多次调用
        Laya.timer.frameOnce(60, this, function(){
            this.button.alpha -= 0.5;
        });
    }
}
//启动
new Test();

间隔循环 loop
laya.utils.Timer中关于间隔循环执行的方式有两种，分别是以时间循环执行loop()和按帧率循环执行的frameLoop()。
/**
 * 按指定毫秒定时重复执行
 * @param delay:int 间隔毫秒时间
 * @param caller:* 执行域`this`
 * @param method:Function 定时器回调函数
 * @param args:Array(default=null) 回调参数
 * @param coverBefore:Boolean(default=true) 是否覆盖之前的延迟执行
*/
loop(
  delay:int, 
  caller:*, 
  method:Function, 
  args:Array=null, 
  coverBefore:Boolean=true
):void

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.initText("基于时间旋转");
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    initText(text){
        this.text = new Laya.Text();

        this.text.fontSize = 30;
        this.text.color = "white";
        this.text.bold = true;
        this.text.text = text;
        this.text.pos((Laya.stage.width - this.text.width)/2, (Laya.stage.height-this.text.height)/2);
        this.text.pivot(this.text.width/2, this.text.height/2);

        Laya.stage.addChild(this.text);
        //loop：定时重复执行(基于时间，单位为毫秒)
        Laya.timer.loop(200, this, this.onLoop);
    }
    onLoop(){
        //旋转
        this.text.rotation += 10;
    }
}
//启动
new Test();

/**
 * 文本数字增减渐变效果
 * @param begin {number} 开始的数值
 * @param end {number} 渐变到的数值
 * @param callback {Function} 淡出完成回调函数
 * @param thisObj {any} 回调函数的this对象
 */
flownum(begin, end, callback, thisObj=null){
    let diff = Math.abs(end - begin);
    if(diff <= 0){
        return;
    }

    let cur = begin;
    let per = diff / (end - begin);
    
    let delay = 30;
    let timer = new Laya.Timer();
    timer.loop(delay, this, onLoop);
    function onLoop(){
        cur += per;
        --diff;
        if(diff < 0){
            timer.clearAll(this);
            timer = null;
        }else{
            callback && callback.apply(thisObj, [cur]);
        }
    }
}

结构	值
Package	laya.utils
Class	Laya.Timer
Inheritance	Timer / Object

属性	类型	默认值	描述
currFrame	int	0	当前帧数
currTime	Number	Date.now()	当前帧开始的时间
scale	Number	1	时针缩放

存取器	类型	描述
delta	number	[read-only] 两帧之间的时间毫秒间隔

方法	参数	返回值	描述
callLater()	caller: any, method: Function, args?: any[]	void	延迟执行
once()	delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean	void	定时器基于毫秒执行一次
frameOnce()	delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean	void	定时器基于帧率执行一次
loop()	delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean, jumpFrame?: boolean	void	定时器基于毫秒重复执行
frameLoop()	delay: number, caller: any, method: Function, args?: any[], coverBefore?: boolean	void	定时器基于帧率重复执行
pause()		void	暂停时钟
resume()		void	恢复时钟
clear()	caller: any, method: Function	void	清理定时器
clearAll()	caller: any	void	清理对象身上的所有定时器
runCallLater()	caller: any, method: Function	void	立即执行callLater
runTimer()	caller: any, method: Function	void	立即提前执行定时器，执行之后从队列中删除。

收起

展开全文

Laya Note

2019-09-19 18:12:50

搭建Http服务器 ... TypeError: Laya.Templet is not a constructor laya.core.js:17243 TypeError: Laya.Templet is not a constructor 错误原因：项目少了一个laya.ani.js类库导致，进入编辑...

    搭建Http服务器
$ npm i -g http-server
$ http-server ./

TypeError: Laya.Templet is not a constructor
laya.core.js:17243 TypeError: Laya.Templet is not a constructor

错误原因：项目少了一个laya.ani.js类库导致，进入编辑模式，按快捷键F9进入项目设置，选择类库设置，将laya.ani.js勾选即可。





解决方案

Uncaught getUint16 error - Out of bounds
laya.core.js:18126 Uncaught getUint16 error - Out of bounds

错误原因：龙骨动画太长还是无用数据太多
Laya.loader.getRes() undefined
错误原因：Laya.loader.getRes() 获取的资源必须先预加载
//资源预加载
const res = [
    {url : "image/start/bg-loading.jpg", type : Laya.Loader.IMAGE},
    {url : "image/start/beat.png", type : Laya.Loader.IMAGE},    
    {url : "image/start/progress_preload.png", type : Laya.Loader.IMAGE},        
    {url : "image/start/progress_preload$bar.png", type : Laya.Loader.IMAGE},
    {url : "skeleton/loadsk.png", type : Laya.Loader.IMAGE},
    {url : "skeleton/loadsk.sk", type : Laya.Loader.BUFFER},    
    {url : "image/start/txt-notice.png", type : Laya.Loader.IMAGE},
    {url : "sound/bgm.mp3", type : Laya.Loader.SOUND}  
];
Laya.loader.load(res, Laya.Handler.create(this, this.init));

laya.debugtool.js
var Browser=laya.utils.Browser;//
laya.debugtool.js:5 Uncaught ReferenceError: laya is not defined

Uncaught Can not find class laya.html.dom.HTMLDivElement
laya.core.js:20878 Uncaught Can not find class laya.html.dom.HTMLDivElement






image.png

编辑模式下使用【F9】项目设置中类库设置，选中laya.html.js后确认引入类库。接着使用【F8】编译项目，编译成功后查看/bin/index.js文件中是否已经添加了laya.html.js。
经过上述操作后，laya.html.dom.HTMLDivElement错误仍然存在。
TypeScript 实现日志
export default class Log{
    constructor(){}
    public static trace(...args:any[]){
        console.log.apply(console, args);
    }
}

收起

展开全文

Laya暂停
2020-03-27 14:27:27
网上的Laya.timer.pause没有用直接Laya.timer.scale=0就行了本想游戏结束暂停场景，打开结算面板但是设置之后UI界面打不开了，原因是因为打开UI界面时有一个默认的动画，会受到Laya.timer.scale影响，设置为...
收起
Laya Browser
2019-10-30 16:17:49
Browser 是浏览器代理类，封装了浏览器...laya.utils Class Laya.Browser Hierarchy Browser 属性类型描述 Laya.Browser.canvas HTMLCanvas 全局离线画布非主画布，用于测量字体，获取图片数据。 ...
收起
Laya Stat
2019-11-01 17:54:09
Laya的Stat类是一个性能统计面板，用于查看实时更新的性能参数。 Laya开启性能统计面板，参与统计的性能参数大约1秒更新一次。 Laya.Stag.show(); 统计指标统计性能参数 FPS FPS表示每秒传输帧数（Frames ...
收起
Laya Label
2019-10-30 18:14:27
laya.ui Class Laya.Label Hierarchy Label / UIComponent Label 类用于创建显示对象并显示文本，其文字可以是系统字体或BMFont字体。构造函数 // 创建一个新的Label实例 let label:Label = new Laya.Label...
收起
Laya Node
2019-10-24 17:58:02
Node节点类显示列表管理Laya运行时显示的所有对象 Node节点类可以排列显示列表中的显示对象 Node节点类对象可以有子显示对象结构描述 Package laya.display Class Laya.Node Ineritance Node / ...
收起
Laya Component
千次阅读 2019-10-11 01:19:52
LayaAir自带的组件类都位于laya.ui包中，所有的组件直接或间接地继承自Component类，Component类是UI组件的基类。每个组件都拥有属于自己的属性、方法和事件。使用组件可以使程序设计与界面设计分离，以提高代码的可...
收起
Laya Base
2019-08-14 15:17:17
在线文档 http://layaair.ldc.layabox.com/api/ 在线案例 http://layaair.ldc.layabox.com/demo/?category=2d&group=Sprite&name=DisplayImage 官方案例 https://github.com/layabox/layaair-demo 开发...
收起
Laya Class
2019-11-04 15:14:50
ClassUtils是一个类工具类 ...laya.utils Class Laya.ClassUtils Inheritance ClassUtils / Object 属性描述 getClass() 根据名字获取类对象方法描述 addGraphicsToSprite() 将Graphics...
收起
Laya Text
2019-10-11 01:22:42
文本 Text 结构描述 Package laya.display Class public class Text Inheritance Text / Sprite / Node / EventDispatcher / Object ...LayaAir可以通过laya.display.Text类添加文本，给文本设置字体...
收起
laya小游戏2048合成
2020-03-28 10:18:27
通过该课程可以快速上手2d小游戏的制作。了解layabox的使用，该游戏使用的语言是TS，laya版本是2.4.0
收起
语言 2d
Laya Script
2019-10-25 11:55:52
Laya2.0 IDE采用挂载组件脚本与场景管理的方式进行开发，在IDE中编辑场景和页面组件，通过添加脚本的方式，使项目开发更利于程序、美术、策划的协同工作，并对初次接触Laya的开发者更易于上手且开发方式更加友好。...
收起
Laya2.6.1升级Laya2.7.1，UI显示出错
2020-12-29 06:28:35
<div><p>https://github.com/layabox/LayaAir/blob/18b98135af981a6b10c9071a5dfec524d1314fbd/src/layaAir/laya/display/Node.ts#L764</p> 经过对比前后代码，发现!child._getBit(Const.NOT_READY)) 这个判断...
收起
laya教程
2020-08-20 10:48:47
2018年至今从事小游戏开发（LAYA引擎）在小游戏领域单品注册用户超过600万的有4款参与过的作品: 《怪物逃X》《空中飞X》《水枪奇X》《滑板冲冲X》《蛋糕飞X》《纠结大X》等我从0开始接触LAYA到游戏上线亲身爬...
收起
Laya LocalStorage
2019-10-10 13:22:58
H5提供了两种在客户端浏览器存储数据的方法 localStorage用于没有时间限制的数据存储 sessionStorage针对一个session会话的数据存储，存储在...Laya.LocalStorage 继承自 laya.net.LocalStorage用于没有时间限制的...
收起
Laya Socket
2019-09-30 09:21:32
LayaAir引擎的laya.net.Socket类库是对HTML5中WebSocket接口的封装，允许服务器与客户端进行全双工（full-duplex）的...使用WebSocket收发数据的格式为二进制或字符串，如果收发二进制数据则需配合laya.utils.Byte类...
收起
Laya Sprite
2019-09-22 23:56:44
游戏中Sprite精灵是在屏幕中能够被控制的显示对象，如果屏幕中的显示对象不能被控制那就只是一个节点。准确来说，Sprite精灵是一个能够通过...laya.display.Sprite Class Laya.Sprite Inheritance Sprite / No...
收起
laya龙骨换装_Laya的骨骼换装
2021-01-17 15:40:55
参考：Laya 2.5.0一从DragonBones骨骼动画转成Laya可用骨骼动画打开DragonBones软件，打开示例项目剑客-骨骼嵌套。 (DragonBones登录失败的话，因为服务器迁移，这个登录没有部署。需要去下载5.6.3版本，这个版本...
收起
Laya Loader
2019-09-19 03:51:40
资源加载是指游戏进入时都会有一个给资源载入界面，载入界面中用到的资源最好是放在游戏包中，进行首次加载...Laya.Loader 类可用来加载文本、JSON、XML、二进制、图像等资源。项目值 Package laya.net.Loa...
收起
记录Unity转Laya（Laya高级应用）
千次阅读 2019-08-12 11:20:28
附上官网Demo链接 ...name=Laya3DCombineHtml 顺便说一下，我使用的版本是2.1.0 想实现上面图中Laya与HTML结合的效果，光使用官方的代码是不够的。先看一下官方代码： class Laya3D...
收起
Laya卡顿
2020-06-04 11:50:33
特效第一次播放会卡顿，所以可以提前播放一次还有就是使用SphereColliderShape（球形碰撞器）会卡顿，我一开始还以为是特效问题，结果别的没有特效的用了以后也会卡，不知道要怎么调，最后只能...Laya版本2.4 ...
收起
layabox 打印_Layabox 集成指南
2021-01-17 19:11:01
LAYABOX 引擎小游戏 SDK 使用指南本文将会为您介绍如何使用 LAYABOX 引擎 SDK 接入您的项目。建议在接入开始前，先阅读数据规则一章，在了解TA数据规则后再进行接入。您可以在访问 GitHub 获取 LAYABOX 引擎小游戏 ...
收起
Laya HttpRequest
2019-10-09 09:12:35
LayaAir引擎中 Laya.HttpRequest 是专门用于处理HTTP协议网络请求而封装的类库，实质上包装的是浏览器原生的 XMLHttpRequest 对象。 HttpRequest 通过封装浏览器提供的 XMLHttpRequest 对象提供对HTTP协议的访问支持...
收起
Laya XML
2019-11-04 16:21:07
Laya使用Utils工具类提供的parseXMLFromString方法，可以利用DOMParse对象将XML字符串解析为JavaScript原生的XMLDocument对象。 W3C并没有定义XMLDocument接口，因为document接口本来就是为XML定义的，而HTML只是XML...
收起
Layabox 1 layabox的项目文件以及项目配置
千次阅读 2019-08-12 22:29:22
本人使用的是layabox ide 2.1版本。首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。 .laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。比如文件夹内的compile.js中33行就是...
收起
laya 暂停游戏
2021-03-06 16:56:42
//Laya.timer.scale = 1;//恢复游戏 //上面这个会影响定时任务 //Laya.updateTimer.resume() //Laya.physicsTimer.resume() //Laya.stage.renderingEnabled = true
收起

Laya

LayaAir功能介绍

LayaAir2.0引擎库功能

laya3d

Laya Mouse

鼠标事件

鼠标按住

鼠标拖动

Laya Timer

延迟调用callLater

延迟执行 once

间隔循环 loop

Laya Note

搭建Http服务器

TypeError: Laya.Templet is not a constructor

Uncaught getUint16 error - Out of bounds

Laya.loader.getRes() undefined

laya.debugtool.js

Uncaught Can not find class laya.html.dom.HTMLDivElement

TypeScript 实现日志

Laya暂停

Laya Browser

Laya Stat

Laya Label

Laya Node

Laya Component

Laya Base

Laya Class

Laya Text

laya小游戏2048合成

Laya Script

Laya2.6.1升级Laya2.7.1，UI显示出错

laya教程

Laya LocalStorage

Laya Socket

Laya Sprite

laya龙骨换装_Laya的骨骼换装

Laya Loader

记录Unity转Laya（Laya高级应用）

Laya卡顿

layabox 打印_Layabox 集成指南

Laya HttpRequest

Laya XML

Layabox 1 layabox的项目文件以及项目配置

laya 暂停游戏

laya

延迟调用`callLater`