laya个人整理,方便下次回顾~

文本

   let txt: Laya.Label = new Laya.Label();
    //设置文本内容
    txt.text = "hello_laya";
    //设置文本颜色
    txt.color = "#ffffff";
    //设置文本字体
    txt.font = "Ya Hei";
    //设置字体大小
    txt.fontSize = 100;
    //设置文本取背景
    txt.bgColor = "#c30c30";
    //设置文本框的颜色
    txt.borderColor = "#23cfcf";
    //设置粗体、斜体
    txt.bold = true;
    //设置斜体
    txt.italic = true;
    //居中
    txt.centerX = 0;
    txt.centerY = 0;
    //
    Laya.stage.addChild(txt);

图片切换

    //this.m_image是一个图片节点
    console.log(">>>>原始skin", this.m_image.skin);
    //更换图片
    this.m_image.skin = "comp/vscroll$up.png";
    console.log(">>>>更换skin", this.m_image.skin);

遮罩

    //创建遮罩对象
    let cMask = new Laya.Sprite();
    //画一个圆形的遮罩区域
    cMask.graphics.drawCircle(0, 0, 100, "#ff0000");
    //圆形所在的位置坐标
    cMask.x = this.m_image.width / 2;
    cMask.y = this.m_image.height / 2;
    //实现img显示对象的遮罩效果
    this.m_image.mask = cMask;

滤镜

    //这里是滤镜的颜色数据
    var redMat: Array<number> =
        [0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0, 0, 0, 1, 0];
    //创建一个颜色滤镜对象
    var redFilter: Laya.ColorFilter = new Laya.ColorFilter(redMat);
    this.m_image.filters = [redFilter];
    //创建一个发光滤镜
    var glowFilter: Laya.GlowFilter = new Laya.GlowFilter("#ffff00", 10, 0, 0);
    //设置滤镜集合为发光滤镜
    this.m_image.filters = [glowFilter];
    //创建一个阴影滤镜
    var shadowFilter: Laya.GlowFilter = new Laya.GlowFilter("#000000", 8, 8, 8);
    //设置滤镜为阴影滤镜
    this.m_image.filters = [shadowFilter];
    //模糊处理
    var blurFilter: Laya.BlurFilter = new Laya.BlurFilter();
    blurFilter.strength = 5;
    this.m_image.filters = [blurFilter];

绘图

    let sp = new Laya.Sprite();
    Laya.stage.addChild(sp);
    //画直线
    // sp.graphics.drawLine(375, 667, 750, 667, "#ff0000", 8);
    //画折线
    // sp.graphics.drawLines(20, 88, [0, 0, 39, -50, 78, 0, 120, -50], "#ff0000", 8);
    //画折线 (贝塞尔曲线函数)
    //  sp.graphics.drawCurves(10, 58, [0, 0, 19, -100, 39, 0, 58, 100, 78, 0], "#ff0000", 3) ;
    //画三角形
    // sp.graphics.drawPoly(30, 28, [0, 100, 50, 0, 100, 100], "#ffff00");
    //画多边形 示例图 :五角星
    // let path: Array<number> = [];
    // path.push(0, -130);//五角星A点坐标
    // path.push(33, -33);//五角星B点坐标
    // path.push(137, -30);//五角星C点坐标
    // path.push(55, 32);//五角星D点坐标
    // path.push(85, 130);//五角星E点坐标
    // path.push(0, 73);//五角星F点坐标
    // path.push(-85, 130);//五角星G点坐标
    // path.push(-55, 32);//五角星H点坐标
    // path.push(-137, -30);//五角星I点坐标
    // path.push(-33, -33);//五角星J点坐标
    // sp.graphics.drawPoly(Laya.stage.width / 2, Laya.stage.height / 2, path, "#FF7F50");
    //画圆
    // sp.graphics.drawCircle(80, 80, 50, "#ff0000");
    //画圆扇形
    // sp.graphics.drawPie(80, 80, 50, 90, 180, "#ff0000");
    //画矩形
    // sp.graphics.drawRect(20, 20, 100, 50, "#ffff00");
    //画圆边矩形
    // //自定义路径
    // let path: any[] = [
    //     ["moveTo", 0, 0], //画笔的起始点,
    //     ["lineTo", 400, 0],
    //     ["arcTo", 500, 0, 500, 30, 30], //p1(500,0)为夹角B,(500,30)为端点p2
    //     ["lineTo", 500, 200],
    //     ["arcTo", 500, 300, 470, 300, 30],//p1(500,300)为夹角C,(470,300)为端点p2
    //     ["lineTo", 30, 300],
    //     ["arcTo", 0, 300, 0, 270, 30], //p1(0,300)为夹角D,(0,270)为端点p2
    //     ["lineTo", 0, 100],
    //     ["arcTo", 0, 0, 30, 0, 30],//p1(0,0)为夹角A,(30,0)为端点p2
    // ];
    // //绘制圆角矩形
    // sp.graphics.drawPath(100, 100, path, { fillStyle: "#00ffff" });
    //画圆边矩形带白边
    // //自定义路径
    // let path: any[] = [
    //     ["moveTo", 30, 0], //画笔的起始点,
    //     ["lineTo", 400, 0],
    //     ["arcTo", 500, 0, 500, 30, 30], //p1(500,0)为夹角B,(500,30)为端点p2
    //     ["lineTo", 500, 200],
    //     ["arcTo", 500, 300, 470, 300, 30],//p1(500,300)为夹角C,(470,300)为端点p2
    //     ["lineTo", 30, 300],
    //     ["arcTo", 0, 300, 0, 270, 30], //p1(0,300)为夹角D,(0,270)为端点p2
    //     ["lineTo", 0, 100],
    //     ["arcTo", 0, 0, 30, 0, 30],//p1(0,0)为夹角A,(30,0)为端点p2
    // ];
    // //绘制圆角矩形
    // sp.graphics.drawPath(100, 100, path, { fillStyle: "#ff0000" }, { "strokeStyle": "#ffffff", "lineWidth": "10" });
    //消除矢量绘制的锯齿,但会增加性能消耗
    // Laya.Config.isAntialias = true;

图集动画

缓动动画

tween有两种:from是从缓动目标点向初始位置产生运动(从缓动目标位置来),to是从初始位置向缓动目标的位置产生运动(到缓动目标位置去),两者有所不同
Laya.Tween.from(需要缓动的对象,{y:100(缓动方式)},3000(所需时间),Laya.Ease.elasticOut(缓动动画效果));
Laya.Tween.to(需要缓动的对象,{y:100(缓动方式)},3000(所需时间),Laya.Ease.elasticOut(缓动动画效果));

时间轴动画

spine动画

龙骨动画

适配问题

在这里插入图片描述更多请转https://ldc2.layabox.com/doc/?language=zh&nav=zh-ts-1-8-0

抗锯齿

LayaAir引擎内置了抗锯齿方法,并且在3D库中默认开启了,2D想开启的话可以在init()之前加入Config.isAntialias =true;。

屏幕适配的对齐模式

在这里插入图片描述

生命周期

主线生命周期方法:
生命周期方法 简要说明
onAwake 组件被激活后执行,此时所有节点和组件均已创建完毕,此方法只会执行一次
onEnable 组件被启用后执行,比如,节点被添加到舞台后执行
onStart 在第1次执行update之前执行,只会执行一次,
onUpdate 每帧更新时执行,尽量不要在这里写大循环逻辑或者使用getComponent方法
onLateUpdate 每帧更新之后执行,尽量不要在这里写大循环逻辑或者使用getComponent方法
onDisable 组件被禁用时执行,比如从节点从舞台移除后
onDestroy 手动调用节点销毁时执行
onReset 重置组件参数到默认值,如果重写了这个函数,则组件会被重置并且自动回收到对象池,方便下次复用,没有重置则不进行回收复用。
在这里插入图片描述

脚本中定义属性

如果想在编辑器内展示脚本定义的属性,可用通过特殊注释来实现
/** @prop {name: resType, tips:“abc”,type:string,accept:res} /
resType:String ="";
/
* @prop {name:int1,tips:“11”,type:Int} /
number1:Number;
/
* @prop {name:String,tips:“abc”,type:String} /
string1:String;
/
* @prop {name:bool,tips:“1,0”,type:Bool}/
bool1:Boolean;
/** @prop {name:Option,tips:“opt”,type:Option,option:“aaa,bbb,ccc”}
/
// 返回字符串
opt:String;
/** @prop {name:editOption,tips:“editopt”,type:EditOption,option:“aaa,bbb,ccc”}/
// 返回字符串
editopt:String;
/** @prop {name:check,tips:“ch11eck”,type:Check}
/
// 返回bool
check:Boolean;
/** @prop {name:color1,tips:“opt”,type:Color}/
// 返回颜色值
color1:any;
/** @prop {name:snumber1,type:sNumber,min:10,max:100}
/
snumber1:Number = 11;
/** @prop {name:node1,type:Node}/
node1:Node;
/** @prop {name:sizegrid1,type:SizeGrid}
/
sizegrid1:any;
/** @prop {name:colorarray,type:ColorArray}/
colorarray:any;
/** @prop {name:vec1,type:Vec}
/
vec1:any;
/** @prop {name:vector1,type:Vector,labes:abc,types:“Node,String,Number,Boolean”,xCount:2,sType:Number}/
vector1:any;
/** @prop {name:nodes2,type:Nodes}
/ 这一条必须选中组件上赋值才有效,在场景选择会失效
// public var nodes2:;
/** @prop {name:ease1,type:Ease}
/
sase1:any;

组件的继承关系

在这里插入图片描述

图集制作与使用详解

https://ldc2.layabox.com/doc/?language=zh&nav=zh-ts-3-2-0

按钮

 let _btn = new Laya.Button("comp/img_bg2.png", "爱我别走");
    Laya.stage.addChild(_btn);
    _btn.pos(375, 600);
    //点击事件
    _btn.on(Laya.Event.CLICK, this, (() => {
        console.log(">>>>>>>>>>>>>>");
    }))

物理系统

了解物理引擎的基础,必须要先充分的理解刚体、碰撞体、关节


刚体:是力学中为了体现物体特性的一种科学抽象概念,也是一种理想状态的力学表达模型,是指在运动中和受到力的作用后,形状和大小不变,而且内部各点的相对位置不变的物体。


LayaAir引擎中的2D刚体组件类是 Laya.RigidBody ,继承自创建组件的基类 Component。在LayaAirIDE中,我们可以直接为UI组件添加刚体组件在这里插入图片描述


刚体类型:----------------------------------------------------------------------------------静力学类型static:(刚体就是始终静止不动,无论施加怎样的力都不会移动, 不受重力影响,速度为零且不可设置 );--------------------------------------动力学类型dynamic—(刚体会根据受到的力进行移动, 会受到重力的影响,可设置速度);----------------------------------------------------------------------运动学类型kinematic(刚体不会根据受到的力进行移动,不受重力影响,可设置速度。与静力学类型的刚体主要区别就是,通常会通过设置速度(线速度和角速度)使其移动),IDE里默认为dynamic


在这里插入图片描述


重力缩放系数 gravityScale:
刚体的gravityScale属性是重力缩放系数,通过调整数值可以改变重力大小,数值可以为正数或负数,也包括了正负小数。默认值为1,即正常重力,IDE中如上图2-2所示。如果数值为0则表示没有重力。大于1的数值表示正常重力的倍数,数值越大则重力越大。gravityScale属性数值为负数,则表示反方向重力,数值越小则反方向的重力越大。


角速度 angularVelocity:
刚体的angularVelocity属性是角速度, 角速度简单理解就是单位时间的角位移,以弧度每秒进行旋转 。当我们设置angularVelocity属性为正值的时候,则按顺时针旋转位移。angularVelocity属性为负值的时候,则按逆时针旋转位移。属性值的绝对值越大,旋转位移速度越快。angulaVelocity属性的默认值为0,如图2-3所示,此时不会产生旋转位移。


角阻尼 angularDampin:
阻尼是外界作用或自身原因引起逐渐下降的衰减特性,刚体的角阻尼则是相对于角速度的旋转阻尼系数,使得旋转速度衰减。默认值为0,表示没有阻尼,如图2-4。通常阻尼的值在0到0.1之间。


线性速度 linearVelocity:
刚体的linearVelocity属性称为线速度或者线性速度,是指物体的直线运动速度,如果物体呈曲线运动,就是沿着曲线路径切线方向的单位时间即时速度。

线速度是一个矢量值,它是描述作曲线运动的质点运动快慢和方向的物理量,既有大小也有方向。
在LayaAirIDE里,linearVelocity属性值,为x,y坐标方向的速度值,例如图2-5中示例的10,10,表示x坐标(向右)速度为10,y坐标(向下)速度为10。坐标值可以为负值,坐标值的绝对值越大,速度越快。

在理解角速度与线速度的关系上,假如我们围绕一个原点画一条曲线,那这个曲线从起始到结束的角度除以单位时间就是角速度,这个曲线的长度除以单位时间,就是线速度。


线性阻尼 linearDamping:
刚体的linearDamping属性,是指线性速度的阻尼系数,使得线性速度衰减。范围从0到无穷大。默认值为0,表示没有阻尼,如图2-6。通常阻尼的值应该在0到0.1之间。


子弹 bullet:
在有些情况下,物理引擎可能会捕捉不到某些已经发生的碰撞,导致互相穿透卡在一起。
刚体的bullet属性,中文是子弹,形容射出的子弹那样高速移动的物体,bullet属性用于防止高速穿透。

bullet默认值为false,此时不对刚体作防穿透处理(连续碰撞检测),会节省性能。当设置为true时,会通过连续碰撞检测防止高速穿透。


允许休眠 allowSleep
物理引擎进行模拟时,是存在性能消耗的。当刚体停止运动时,其实我们可以不去模拟它。刚体设置为休眠状态就会跳过该刚体的模拟,直到被其它刚体解除才会醒来(关节被破坏或者手动唤醒也可以),从而节省性能的消耗


允许旋转 allowRotation:
刚体的allowRotation属性,中文是允许旋转,实际理解还是与字面意思有些差异。这里是可以控制刚体碰撞时角度是否发生旋转改变。默认值为true,如图2-9所示。表示允许刚体发生碰撞时模拟自然撞击的角度改变,看起来更加自然。当设置为false,碰撞后不会产生角度变化。


碰撞组 group:
1、如果两个对象的刚体group相等且group值大于零,它们将始终会发生碰撞。
2、如果两个对象的刚体group相等且group值小于零,它们将永远不会发生碰撞。
3、如果两个对象的刚体group值等于0或者group值不相等,则使用刚体的碰撞类别category和碰撞掩码mask来判断是否碰撞。


碰撞类别 category:
category属性表示碰撞类别,与碰撞组group关联使用,默认值为1(2的0次方),如图2-11所示。
当两个对象的碰撞组(group)值等于0或者值不相等时,使用2的幂次方值来指定碰撞类别。此属性接收位字段,范围为[1,2^31]内2的幂,共有32种不同的碰撞类别可用。


碰撞掩码 mask:
mask属性表示碰撞掩码,默认值为-1
如果说category是用于设置碰撞组的类别ID,那碰撞掩码mask就是用于指定要和哪个category类别ID的对象进行碰撞。用以实现碰撞过滤。
关于对碰撞分组,类别,掩码,以及位运算,想了解更多的,可以查看官网文档:https://ldc2.layabox.com/doc/?nav=zh-ts-3-5-5


刚体标签 label:
label属性是刚体的标签名,默认值是RigidBody。如图2-13。
当我们想在项目代码中,通过自定义标签名来识别该刚体,用于判断控制的时候,可以在label属性中进行设置。


碰撞体 collider

碰撞体顾名思义,是用来检测碰撞的形状体组件,而刚体是使游戏物体能获得重力和接受力的组件。没有碰撞体的形状区域,只有刚体,则无法产生碰撞效果。
在LayaAirIDE中,使用碰撞体组件,但没有添加刚体时,会强行添加刚体组件。碰撞体是必须依附于刚体的2D碰撞几何结构。具有摩擦(friction)和恢复(restitution)的材料性质。


LayaAir的碰撞体一共有五种,分别命名为:矩形碰撞体BoxCollider,圆形碰撞体CircleCollider,链形碰撞体ChainCollider,多边形碰撞体PolygonCollider,边线碰撞体Edgecollider;
BoxCollider也可以称为盒子碰撞体。


碰撞体的基类属性

坐标 x、y:碰撞体的坐标与父子节点坐标作用一样。x和y属性是与该碰撞体所属节点偏移的坐标,默认值都为0,如图4-1所示,修改碰撞体x与y的坐标位置就是修改与其节点偏移的位置。
摩擦系数 friction:摩擦系数是指两表面间的摩擦力和作用在其一表面上的垂直力之比值。在现实中,它是和物体表面的粗糙度有关,而和接触面积的大小无关。物理引擎模拟了摩擦系数,其属性值设置范围是0到1,值越大表示摩擦越大, 0表示没有摩擦,1表示强摩擦, 几乎移不动的摩擦
恢复(习惯性称呼弹性) restitution:对于restitution属性值,我们可以理解为弹性系数。值的设置范围是0到1,值越大表示弹性越大。如图4-3的默认值为0,此时不具有弹性,1的时候为完全弹性碰撞,会以同样的速度反弹。
密度 density:密度是单位体积的质量。当一个对象的密度越大,那么它的质量就越大,碰撞时也就相对更难以移动。密度density值可以为零或者是正数,如果为零, 那将会是一个静止的对象。 IDE里的默认值为10,建议使用相似的密度,当产生多物体堆叠在一起时,这样做可以使得堆叠更加稳定。
是否为传感器 isSensor:当游戏逻辑需要判断两个碰撞体是否相交,但不需要有碰撞反应。这时候,可以通过传感器来完成。传感器会侦测碰撞而不产生碰撞反应。isSensor的默认值为false,如图4-5所示,表示不是传感器。当设置为true时,表示为传感器,此时能够触发碰撞事件,但不会产生碰撞反应。
碰撞体标签 label:碰撞体标签与刚体标签一样,当自定义了标签名后,用于项目代码中识别控制。
label属性的默认值是当前碰撞体的种类名,在LayaAirIDE 创建的2D示例项目中,地板的矩形碰撞体BoxCollider,就使用了自定义的标签ground


矩形碰撞体 BoxCollider

宽高 width、height:
矩形碰撞体BoxCollider,也可以直译为盒子碰撞体,是封闭的直角平行四边形碰撞框,为节点添加BoxCollider组件后,默认的BoxCollider宽高会等于该节点的宽高。如果节点的宽高改变后,可以手动更改BoxCollider的width和height改变。或者通过fitsize功能来适配节点的宽高。
适配宽高大小 fitsize
当BoxCollider碰撞体的所属节点宽高改变后,碰撞体大小不会自动跟随改变。快捷的方法是,点击图5-2所示的fitsize按钮,可以自动按节点当前的宽高适配改变碰撞体的大小,让碰撞体的宽高等于所属节点的宽高。


圆形碰撞体 CircleCollider

半径 radius
圆形碰撞体CircleCollider,是一个封闭的圆形框,其大小是通过半径来控制,半径越大,碰撞体的圆形框越大。
当节点添加CircleCollider组件后,半径值默认为该节点的width的一半。如果节点宽高被改变,需要手动修改半径radius值,或者通过fitsize快捷的设置为该节点width的一半。
适配半径大小fitsize
CircleCollider的fitsize与BoxCollider的fitsize作用其实一样,都是自动按节点来适配碰撞体大小,只不过规则不同而已。在4种不同的碰撞体种类里,只有BoxCollider与CircleCollider支持fitsize这种自动适配碰撞体大小的功能。


链形碰撞体 ChainCollider 、多边形碰撞体 PolygonCollider

ChainCollider与PolygonCollider这两种碰撞体,除了继承的基类属性外,还有一个通用的属性Points。它们都是用x,y坐标点来表示一个线段节点,两个线段节点之间为线段或边,两种碰撞体都可以直接增加点,让ChainCollider成为任意多节的链条状碰撞体,让PolygonCollider成为任意凸多边形框状碰撞体。
点坐标集合 Points
Points的属性是一个由x,y坐标组成的点集合,每个x和y坐标为一个点,每一个坐标都是以逗号间隔区分。

除了直接在属性栏里输入坐标数值,在编辑界面中可以更快捷的操作。拖动线段或边上的点可改变位置,点击线段或边可增加新的线段点。双击线上或边上的点可以删除该点。

ChainCollider最少由2个点的线段组成,链接形状不能进行穿插自相交(不同的线形碰撞体可相交)。

PolygonCollider最少由3个点的封闭三角形组成,最多只能是8个点(超出会报错),并且只能是凸多边形。
我们要注意,ChainCollider碰撞体为不自相交的形状或线段

链条碰撞体ChainCollider在LayaAir2.12.1中仅提供单侧碰撞。链条碰撞体的单侧碰撞方向取决于链条碰撞体的缠绕顺序,当链条碰撞体逆时针缠绕时,碰撞发线向外;顺时针缠绕时碰撞发线向内

链形碰撞体ChainCollider只能是单侧碰撞。单侧碰撞的方向取决于链条碰撞体的缠绕顺序。当最终链的形状是呈逆时针缠绕时,碰撞的法线方向就是向外(从里向外可以发生碰撞,从外向里直接穿透)。当最终链的形状是呈顺时针缠绕时,碰撞的法线方向就是向内(也就是从外向里可以发生碰撞,从里向外直接穿透)
如果没有发生缠绕,例如直线,单边碰撞的规则是什么?
当处于水平直线时,
如果链的初始点在左边,末端点在右边,那么从下向上直接穿透,从上向下发生碰撞。
如果链的初始点在右边,未端点在左边,效果相反,从下向上碰撞,从上向下穿透。


边线碰撞体 Edgecollider

边线碰撞体EdgeCollider是LayaAir2.12.1新增的碰撞体。这个碰撞体与链条碰撞体ChainCollider非常相似。属性参数完全一样,外观看上去相似,尤其是同样都处于两点组成的线段时。
但是,区别在于点坐标集合points的值,边线碰撞体EdgeCollider只能是两个端点的直线线段

链条碰撞体ChainCollider:可以是两个端点的线段也可以是多个点的折线;另外,ChainCollider只能是单边产生碰撞,另一边是可以穿透过去的。边线碰撞体 Edgecollider可以两边都发生碰撞。



关节 Joint

LayaAir引擎封装了10种关节组件,可在IDE中直接添加使用。分别为:
距离关节DistanceJoint、
齿轮关节 GearJoint、
马达关节MotorJoint、
鼠标关节MouseJoint、
平移关节PrismaticJoint、
滑轮关节PulleyJoint、
旋转关节RevoluteJoint、
绳索关节RopeJoint、
焊接关节WeldJoint、
车轮关节WheelJoint



物理碰撞的生命周期

onTriggerEnter
onTriggerEnter是在发生物理碰撞时,也就是碰撞生命周期内的第一次进入碰撞,自动执行的生命周期虚方法。
onTriggerStay
onTriggerStay是在发生持续的物理碰撞时,也就是碰撞生命周期内的第二次碰撞到碰撞离开前,每帧都在触发,自动执行的生命周期虚方法。
onTriggerExit
onTriggerExit是在物理碰撞结束时,自动执行的生命周期虚方法。


参照: https://ldc2.layabox.com/doc/?language=zh&nav=zh-ts-3-5-0


  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值