一级类图
- Config3D
- Config 全局参数。如需更改,请在初始化引擎之前设置
- UIConfig
- Laya3D
- Laya
-
EventDispatcher 可调度事件基类
- Resource
- SoundChannel
- Sound
- HttpRequest
- Loader
- LoaderManager
- AnimationTransform3D
- Transform3D
- BaseRender
- Texture
-
Node
- UIComponent
- AnimationPlayer
- Accelerator
- Shake
- Gyroscope
- Socket
- Physics
- TimeLine
-
Component 组件基类
- ConstraintComponent
- CannonPhysicsComponent
- PhysicsComponent
- Script3D
- Animator
- CommonScript
- Script
- EffectBase
- RigidBody
- JointBase
- ColliderBase
- Widget
- Browser
1. 显示相关
1.1 节点 Node
Node节点类:
- 是可以放在显示列表中的所有对象的基类
- 显示列表管理Laya运行时显示的所有对象
- 可以排列显示列表中的显示对象
- 对象可以有子显示对象
常用Node操作:
-
- 节点操作
- 增
- addChild
- 删
- destroy
- 查
- getChildAt
- getComponent
- 改
- replaceChild
-
- 生命周期
- onAwake() 组件被激活后执行,此时所有节点和组件均已创建完毕,此方法只会执行一次。
- onDestroy() 组件被销毁时执行
- onDisable() 组件被禁用时执行,比如节点从舞台移除后。
- onEnable() 组件被启用后执行,比如节点被添加到舞台后。
-
- 事件分发
- on
-
- 定时器
- clearTimer
- timerOnce
继承概览图:
- Laya.Display.Node
-
Sprite 是基本的显示图形的显示列表节点
- Text 显示文本
- Input 输入文本
-
Scene 场景类
- View 视图类,相对布局
- Dialog对话框
- View 视图类,相对布局
- Scene3D 3D场景类
- AnimationBase 动画基类
- FrameAnimation 节点关键帧动画播放类
- EffectAnimation 动效模板
- Animation 是Graphics动画类
- FrameAnimation 节点关键帧动画播放类
- Stage 舞台类 通过 Laya.stage 单例访问
- Skeleton 骨骼动画
- MovieClip 播放swf动画
- Video Video将视频显示到Canvas上
- HTMLDivElement HTML图文类
- TileAniSprite TildMap的动画显示对象
- MapLayer 层级类
- GridSprite
- Particle2D 粒子播放类
- PhysicsDebugDraw 物理辅助线
- UIComponent ui控件类的基类
- Image
- Box 控件容器类
- List
- UIGroup
- ViewStack
- ScaleBox
- Panel
- Tree
- LayoutBox
- Button
- Clip
- ColorPicker
- Label
- Slider
- ScrollBar
- ComboBox
- ProgressBar
- TipManager
- WXOpenDataViewer
- DialogManager 对话框管理容器,所有的对话框都在该容器内
- Text 显示文本
- Sprite3D
- ReflectionProbe
- RenderableSprite3D 可渲染3D精灵的父类
- MeshSprite3D 网格
- SkinnedMeshSprite3D
- PixelLineSprite3D 像素线渲染精灵
- ShuriKenParticle3D 3D粒子
- TrailSprite3D
- SimpleSkinnedMeshSprite3D
- LightSprite 灯光
- PointLight 点光
- SpotLight 聚光
- DirectionLight 平行光
- BaseCamera
- Camera摄像机
-
Sprite 是基本的显示图形的显示列表节点
1.2 场景
舞台 Stage
舞台类,显示列表的根节点,所有显示对象都在舞台上显示
功能:
- 展示相关,长宽
- 外设相关 鼠标相关
场景 Scene
负责场景创建,加载,销毁等功能 场景被从节点移除。
作用:
- load() 加载场景及场景使用到的资源
- open() 加载并打开场景
- close() 根据地址,关闭场景(包括对话框)
- closeAll() 关闭所有场景,不包括对话框,如果关闭对话框,请使用Dialog.closeAll()。
- destroy() 根据地址,销毁场景(包括对话框)
- gc() 销毁当前没有被使用的资源,该函数会忽略lock=true的资源。
- setLoadingPage() 设置loading界面,引擎会在调用open方法后,延迟打开loading界面,在页面添加到舞台之后,关闭loading界面。
- showLoadingPage() 显示loading界面
- hideLoadingPage() 隐藏loading界面
子类:
- View
- 视图类 增加相对布局功能
- Dialog
- 弹出对话框
- Handler 事件处理器类。可以处理close事件
生命周期:
- onOpened 场景打开完成后,调用此方法
- onClosed 关闭完成后,调用此方法
1.3 元素
精灵 Sprite
游戏中Sprite精灵是在屏幕中能够被控制的显示对象,如果屏幕中的显示对象不能被控制那就只是一个节点。准确来说,Sprite精灵是一个能够通过改变自身属性,比如角度、位置、伸缩、颜色等,变为可控动画的2D图像
作用:
- 展示宽高 getBounds
- 获取宽高,也可以设置
- 鼠标事件 mouseEnabled
- 默认不接受鼠标事件,即mouseEnabled=false
- 可做容器
- 常用的视图操作(大小 位置 缩放 纹理图片 拖拽)
1.4 视图组件
UIComponent
所有视图组件直接或间接地继承自Component类,Component类是UI组件的基类。每个组件都拥有属于自己的属性、方法和事件。使用组件可以使程序设计与界面设计分离,以提高代码的可复用性。
分类:基础组件、容器组件、视图组件
继承关系:
-
UIComponent
-
Image
- AdvImage 广告插件
-
Box
- List 控件可显示项目列表。默认为垂直方向列表。
-
UIGroup 以自动布局的项集合控件
- RadioGroup 控件定义一组 Radio 控件,这些控件相互排斥; 因此,用户每次只能选择一个 Radio 控件。
- Tab 组件用来定义选项卡按钮组。
- ViewStack 视图堆栈类
- ScaleBox 自适应缩放容器,容器设置大小后,容器大小始终保持stage大小
- Panel 面板容器类
- Tree 使用户可以查看排列为可扩展树的层次结构数据
-
LayoutBox 布局容器类
- HBox 水平布局容器类
- VBox
-
Button
- CheckBox 组件显示一个小方框,该方框内可以有选中标记
- Radio 控件使用户可在一组互相排斥的选择中做出一种选择
-
Clip 位图切片动画
- FontClip 字体切片,简化版的位图字体
- ColorPicker 组件将显示包含多个颜色样本的列表,用户可以从中选择颜色。
-
Label 显示文本
- TextInput 显示和输入文本
-
Slider 用户可以通过在滑块轨道的终点之间移动滑块来选择值
- HSlider 水平方向
- VSlider 垂直
-
ScrollBar 滚动条组件
- VScrollBar
- HScrollBar
- ComboBox 下拉列表,用户可以从该列表中选择单个值
- ProgressBar 加载进度
- TipManager 鼠标提示管理类
- WXOpenDataViewer 微信开放数据展示组件,直接实例本组件
-
Image
2. 脚本组件
核心类概览:
- Component
- ConstraintComponent 约束组件的父类
- FixedConstraint
- ConfigurableConstraint
- CannonPhysicsComponent 创建物理组件的父类
- PhysicsTriggerComponent 物理触发器组件
- PhysicsComponent
- CharacterController 角色控制器
- PhysicsTriggerComponent 物理触发器组件
- Rigidbody3D 刚体碰撞器
- PhysicsCollider 静态物理碰撞器
- Script3D 3D脚本的父类,该类为抽象类,不允许实例
- Animator 动画组件
- CommonScript 公共脚本类
- Script 组件的生命周期, 抽象类,不允许实例
- EffectBase 插件基类,基于对象池管理
- FadeIn 淡入效果
- FadeOut
- RigidBody 2D刚体
- JointBase 关节基类
- DistanceJoint 距离关节
- GearJoint 齿轮关节
- MotorJoint 马达关节:用来限制两个刚体,使其相对位置和角度保持不变
- MouseJoint
- PrismaticJoint
- PulleyJoint
- RevoluteJoint
- RopeJoint
- WeldJoint
- WheelJoint
- ColliderBase
- ChainCollider 2D线形碰撞体
- CircleCollider 2D圆形碰撞体
- PolygonCollider 2D多边形碰撞体
- BoxCollider 2D矩形碰撞体
- Widget 相对布局插件
- ConstraintComponent 约束组件的父类
2.1 脚本处理 Script
挂脚本的原则
- 脚本要控制哪个节点,就挂在哪个节点上。
- 如果是全局的管理类,一般都会挂到根节点上。
生命周期:
- onAwake() 组件被激活后执行,此时所有节点和组件均已创建完毕,此方法只执行一次。
- onEnable() 组件被启用后执行,比如节点被添加到舞台后。
- onStart() 第一次执行update之前执行,只会执行一次。
- onTriggerEnter(other:any,self:any,contact:any) 开始碰撞时执行
- onTriggerStay(other:any,self:any,contact:any) 持续碰撞时执行
- onTriggerExit(other:any,self:any,contact:any) 结束碰撞时执行
- onMouseDown(e:laya.events.Event) 鼠标按下时执行
- onMouseUp(e:laya.events.Event) 鼠标抬起时执行
- onClick(e:laya.events.Event) 鼠标点击时执行
- onStageMouseDown(e:laya.events.Event) 鼠标在舞台按下时执行
- onStageMouseUp(e:laya.events.Event) 鼠标在舞台抬起时执行
- onStageClick(e:laya.events.Event) 鼠标在舞台点击时执行
- onStageMouseMove(e:laya.events.Event) 鼠标在舞台移动时执行
- onDoubleClick(e:laya.events.Event) 鼠标双击时执行
- onRightClick(e:laya.events.Event) 鼠标右键点击时执行
- onMouseMove(e:laya.events.Event) 鼠标移动时执行
- onMouseOver(e:laya.events.Event) 鼠标经过节点时触发
- onMouseOut(e:laya.events.Event) 鼠标离开节点时触发
- onKeyDown(e:laya.events.Event) 键盘按下时执行
- onKeyPress(e:laya.events.Event) 键盘产生一个字符时执行
- onKeyUp(e:laya.events.Event) 键盘抬起时执行
- onUpdate() 每帧更新时执行,尽量不要在这里写大循环逻辑或者使用getComponent方法
![][componentlifecycle]
2.2 碰撞
1. 基本概念
- 钢体 rigidbody: 在运动中和受力作用后,形状和大小不变,而且内部各点的相对位置不变的物体。
- 碰撞体 collider:碰撞体是给物体加一个判定框,当碰撞框重叠的时候,两物体发生碰撞。
- 关节joint: 关节可以对两个或多个物体进行一种约束。
刚体属性:
- isKinematic是否为运动刚体
- mass质量
- gravity 重力
- angularVelocity 角速度
- angularDamping 角阻尼
- linearVelocity 线性速度
- linearDamping 线性阻尼
碰撞:
- 碰撞器
- 3D碰撞器,由碰撞器和碰撞器形状两部分组成。
- 3D碰撞器根据特点的不同,分为静态碰撞器、刚体碰撞器、角色碰撞器。
- 触发器 Listner
碰撞类型:
- PhysicsCollider: 静态碰撞器 它的特性是不受力,不会产生物理移动。
- Rigidbody3D: 刚体&碰撞器
- isKinematic=false: 默认情况下,动力学类型的刚体碰撞器,通常用动力学刚体碰撞器进行受力的交互反馈。例如,撞击后的反弹、飞出或者倒下,放在空中会受重力影响而掉落
- isKinematic=true: 运动学类型刚体碰撞器,不受重力、不受速度、不受其它力的影响,在物理世界中永远处于静止,只能通过transform去改变节点坐标来移动。有移动的碰撞器需求,例如来回移动的跳板或障碍
- CharacterController: 角色碰撞器,角色控制器是无法设置为触发器的。但是,角色碰撞器与触发器进行接触,仍然可以激活触发器的生命周期方法。继承于物理组件的父类PhysicsComponent
碰撞形状:
- LayaAir引擎支持8种3D碰撞形状
- 盒形BoxColliderShape
- 球形SphereColliderShape
- 圆柱形CylinderColliderShape
- 胶囊形CapsuleColliderShape
- 圆锥形ConeColliderShape
- 平面形状StaticPlaneColliderShape
- 复合形状CompoundColliderShape
- 网格形状MeshColliderShape
- Unity中可导出的碰撞形状
- 盒形碰撞体Box collider
- 球形碰撞体Sphere Collider
- 胶囊形碰撞体Capsule Collider
- 网格碰撞体 Mesh Collider
//使用示例
//1. 创建圆锥形3D模型节点对象
let cone = new Laya.MeshSprite3D(Laya.PrimitiveMesh.createCone(raidius, height));
//把圆锥形3D节点对象添加到3D场景节点下
this.newScene.addChild(cone);
//设置随机位置
this.tmpVector.setValue(Math.random() * 6 - 2, 6, Math.random() * 6 - 2);
cone.transform.position = this.tmpVector;
//2. 为圆锥形3D节点对象创建刚体碰撞器
let _rigidBody = <Laya.Rigidbody3D>(cone.addComponent(Laya.Rigidbody3D));
//创建圆锥形碰撞器形状(使用节点对象的值,保持一致性)
let coneShape = new Laya.ConeColliderShape(raidius, height);
//为刚体碰撞器添加碰撞器形状
_rigidBody.colliderShape = coneShape;
2. 生命周期方法
检测物理碰撞的方式有两种:
- 碰撞事件生命周期方法
- onCollisionEnter 刚发生物理碰撞时,也就是碰撞事件生命周期内的第一次进入碰撞,自动执行的生命周期虚方法,该方法只会执行一次。
- onCollisionStay 持续的物理碰撞时,也就是碰撞事件生命周期内的第二次碰撞到碰撞离开前,自动执行的生命周期虚方法。该方法在持续碰撞期间,每帧都会执行。
- onCollisionExit 物理碰撞结束时,自动执行的生命周期虚方法,该方法只会执行一次。
- 触发事件生命周期方法
- onTriggerEnter 刚发生物体接触时,也就是触发事件生命周期内的第一次进行接触,自动执行的生命周期虚方法,该方法只会执行一次。
- onTriggerStay 持续的物体接触时,也就是触发事件生命周期内的第二次接触到接触离开前,自动执行的生命周期虚方法。该方法在持续接触期间,每帧都会执行。
- onTriggerExit 物体接触结束时,自动执行的生命周期虚方法,该方法只会执行一次。
碰撞事件的生命周期方法永远不会与触发事件的生命周期方法同时激活,只能是碰撞事件或者是触发事件
无论是碰撞事件还是触发事件的生命周期方法,从进入到离开的顺序皆为“Enter,Stay,Stay,……,Exit”。
3. 分组
- collisionGroup: 碰撞组
由于碰撞组之间的碰撞依据是位运算的按位与,按位与的计算结果非0则可以碰撞,为0则不可碰撞。
//Physics3DUtils工具类的COLLISIONFILTERGROUP_ALLFILTER属性值为-1,-1与任何2的幂值进行按位与都非0,所以取该属性值为分组时,则所有的碰撞组都可碰撞。
xxx.collisionGroup = Laya.Physics3DUtils.COLLISIONFILTERGROUP_ALLFILTER;
- canCollideWith: 过滤碰撞组
碰撞器的canCollideWith属性可以用于指定与哪个组碰撞,指定哪个,就可以与哪个碰撞。其它的都不可以碰撞,起到了过滤其它碰撞组的效果
//指定xxx碰撞器可以与其发生碰撞的碰撞组(本例只与自定义组1碰撞)
xxx.canCollideWith = Laya.Physics3DUtils.COLLISIONFILTERGROUP_CUSTOMFILTER1;
1.5相机
2D相机
把所有东西放到一个sprite下面,通过设置scrollRect来达到类似的效果
3D相机
3. 动画
3.1 2D动画
- EventDispatcher
- Node
-Sprite- AnimationBase
- FrameAnimation
- Animation
- AnimationBase
- Node
- Tween
- Ease
- Component
- Animator
1. 图集动画
laya.display.Animation
- 图集加载:
方法1:loadAtlas() 加载图集
方法2:createFrames创建动画模板
方法3: loadImages直接播放图集中指定的动画
//方法1:
this.roleAni = new Laya.Animation();
//加载动画图集,加载成功后执行回调方法
this.roleAni.loadAtlas("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){
//添加到舞台
Laya.stage.addChild(this.roleAni);
}
//方法2:
this.roleAni = new Laya.Animation();
//加载动画图集,加载成功后执行回调方法
this.roleAni.loadAtlas("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){
//添加到舞台
Laya.stage.addChild(this.roleAni);
//创建动画模板dizziness
Laya.Animation.createFrames(aniUrls("die",6),"dizziness");
//循环播放动画
this.roleAni.play(0,true,"dizziness");
}
/**
* 创建一组动画的url数组(美术资源地址数组)
* aniName 动作的名称,用于生成url
* length 动画最后一帧的索引值,
*/
function aniUrls(aniName,length){
var urls = [];
for(var i = 0;i<length;i++){
//动画资源路径要和动画图集打包前的资源命名对应起来
urls.push("role/"+aniName+i+".png");
}
return urls;
}
//方法3:
Laya.loader.load("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){
//创建动画实例
this.roleAni = new Laya.Animation();
//添加到舞台
Laya.stage.addChild(this.roleAni);
//通过数组加载动画资源,然后用play方法直接播放。由于loadImages方法返回的是Animation对象本身,可以直接使用“loadImages(...).play(...);”语法。
this.roleAni.loadImages(aniUrls("move",6)).play();
}
2. 缓动动画
- tween
- Tween 缓动类用以实现目标对象属性的缓动,例如目标对象的x或y轴的缓动距离等目标值设置,以及缓动开始、停止、清理等设置
- Ease
- 类定义了大量的缓动函数,以便实现 Tween 动画的具体缓动效果
Tween使用:
- from
- from是从缓动目标点向初始位置产生运动(从缓动目标位置来)
![][from]
- from是从缓动目标点向初始位置产生运动(从缓动目标位置来)
- to
- to是从初始位置向缓动目标的位置产生运动(到缓动目标位置去)
![][to]
- to是从初始位置向缓动目标的位置产生运动(到缓动目标位置去)
3. 时间轴动画
- 在LAYAIDEL中制作时间轴动画,输出文件 .ani
- 使用:
//1. 加载图集成功后,执行onLoaded回调方法
Laya.loader.load("res/atlas/ui.atlas", Laya.Handler.create(this, onLoaded));
//2. 创建一个Animation实例
var tl = new Laya.Animation();
//加载动画文件
tl.loadAnimation("TimeLine.ani");
//3. 添加到舞台
Laya.stage.addChild(tl);
//播放Animation动画
tl.play();
4. 骨骼动画
- Spine骨骼动画
- IDE内 生成 sk文件
- Spine骨骼动画适配版 skel文件
- DragonBones骨骼动画
- 在IDE中绘制骨骼动画
- 使用:
//初始化舞台
Laya.init(1334,750);
//创建一个Skeleton对象
var skeleton = new Laya.Skeleton();
//添加到舞台
Laya.stage.addChild(skeleton);
skeleton.pos(600,700);
//通过加载直接创建动画
skeleton.load("res/spine/spineboy/spineboy.sk");
3.2 3D动画
LayaAir3D支持unity导出Mecanim动画系统。
- 在Unity3D制作动画
- 导出后的资源拷贝到项目 bin/res 目录下
- 加载动画
var ani= role3D.getChildAt(0).getComponent(Laya.Animator);
- 播放控制
//获取精灵
var monkey = Laya.Loader.getRes("res/threeDimen/skinModel/LayaMonkey/LayaMonkey.lh");
this.scene.addChild(monkey);
//获取角色动画组件
var ani = monkey.getChildAt(0).getComponent(Laya.Animator);
//创建一个动画动作状态
var state1 = new Laya.AnimatorState();
//设置动作状态的名称
state1.name = "hello";
//设置动作状态播放的起始时间(起始时间与结束时间的设置为0-1的百分比数值) 要截取的时间点 / 动画的总时长
state1.clipStart = 10/40;
//设置动作状态播放的结束时间
state1.clipEnd = 20/40;
//得到默认动画赋值给Clip(getDefaultState默认动画为Unity中animation的数组顺序0下标的动画)
state1.clip = ani.getDefaultState().clip;
//动画播放是否循环
state1.clip.islooping = true;
//添加动画状态到动画组件里
this.ani.addState(state1);
//播放动画
this.ani.play("hello");
4. 资源
4.1 资源管理
- EventDispatcher
- Loader
Laya.Loader由LoaderManager统一管理,一般情况下,开发是不需要自己创建Loader实例。
4.2 网络资源
- EventDispatcher
- HttpRequest
- Socket
4.3 多媒体
声音
- SoundManager
- EventDispatcher
- Sound
- SoundChannel
SoundManager 是一个声音管理类。提供了对背景音乐、音效的播放控制方法。 引擎默认有两套声音方案:WebAudio和H5Audio 播放音效,优先使用WebAudio播放声音,如果WebAudio不可用,则用H5Audio播放,H5Audio在部分机器上有兼容问题
视频
- EventDispatcher
- Node
- Sprite
- Video
- Sprite
- Node
Video将视频显示到Canvas上。Video可能不会在所有浏览器有效
4.4 定时器资源
- Timer
- EventDispatcher
- Node (有Timer的功能)
- 延迟:
Laya.timer.callLater
Laya.timer.once(delay, ...)
Laya.timer.frameOnce(delay, ...)
- 间隔循环
Laya.timer.loop
Laya.timer.frameLoop
- 暂停恢复
Laya.timer.pause()
Laya.timer.resume()
- 结束
Laya.timer.clear()
Laya.timer.clearAll()
4.5 鼠标事件
//第1种
{
//在舞台上添加鼠标事件监听
Laya.stage.on(Laya.Event.MOUSE_DOWN,this, this.onMouseDown);
}
//点击触发事件
onMouseDown() {
//记录点击到舞台上的点
this.point.x = Laya.MouseManager.instance.mouseX;
this.point.y = Laya.MouseManager.instance.mouseY;
//产生射线
this.camera.viewportPointToRay(this.point,ray);
//拿到射线碰撞的物体
this.scene.physicsSimulation.rayCast(this.ray,this.outHitResult);
//如果碰撞到物体
if (this.outHitResult.succeeded)
{
//删除碰撞到的物体
this.text.text = "碰撞到了" + this.outHitResult.collider.owner.name ;
console.log("碰撞到物体!!")
}
}
//第2种
export default class MouseScript extends Laya.Script3D{
constructor(){super();}
//物体必须拥有碰撞组件(Collider)
//当被鼠标点击
onMouseDown(e){
//console.log("点击到了我box",owner.name);
//从父容器销毁我自己
this.owner.removeSelf();
}
}
this.staticLayaMonkey.addComponent(MouseScript);
4.6 统计
- Stat
是一个性能统计面板,可以实时更新相关的性能参数
method:
- show()
- hide()
- enable()
- onclick()
4.7 储存
- localStorage
- Browser
localStorage 用于没有时间限制的数据存储
sessionStorage 针对一个session会话的数据存储,存储在sessionStorage中的数据会在浏览器会话结束时(浏览器关闭时)被清除。可以从window中拿到
1. LocalStorage
method:
- clear():void 清除本地存储信息
- getItem(key:string):string 获取指定键名的值
- getJSON(key:string):any 获取指定键命对应的对象类型值
- removeItem(key:string):void 删除指定键名的信息
- setItem(key:string, value:string):void 存储指定键名和字符串类型的键值
- setJSON(key:string, value:any):void 存储指定键名及其对应的Object对象类型的值
2. sessionStorage
Laya.Browser继承自laya.utils.Browser,时浏览器代理类,封装了浏览器及原生JS提供的功能。
// 获取当前页面中的sessionStorage会话对象
const sessionStorage:any = Laya.Browser.window.sessionStorage;
5. 进阶
5.1 H5通信
Laya.Browser:
properties:
- document dom树
- window 窗口
- container 画布
method:
- supportLocalStorage:boolean 是否支持LocalStorage
- supportWebAudio:boolean 是否支持WebAudio
- window:any 获取浏览器原生window对象的引用
//添加dom
Laya.Browser.document.body.appendChild(input);
5.2 Android通信
conch
conch只能LayaNative环境下调用,在网页版本中是没有conch定义的,所以需要判断一下是否存在
Js调用
if(window.conch){
window.conch.setOnBackPressedFunction(()=>{
console.log('press back '+n);
if(n-- <=0){
window.conch.exit();
}
else{
//用户自己的代码,例如返回上层页面
}
});
}
Android调用
ConchJNI. ("common.Utils.revive()");