LayaAir之脚本的使用 _LayaAir

智慧并不产生于学历,而是来自对于知识的终生不懈的追求。这篇文章主要讲述LayaAir之脚本的使用相关的知识，希望能为你提供帮助。
一, 前景我所说的脚本是 runtime , 扩展脚本, 附加脚本

其中, runtime和扩展脚本需要使用继承方案,而附加脚本使用的是组合的方案
二, 美术的操作Ⅰ,runtime

文章图片

Ⅱ,扩展脚本
类似于Unity / Cocos Creator中组件的感觉, 会在UI编辑器中显示相关属性, 具体操作如下
1,打开"新建"面板, 操作如下图

文章图片

2,先择"扩展脚本" , 注意"脚本名称"和运行名称, 如下图

文章图片

3,添加属性

文章图片

4, 拖动进行附加到相关的组件,如下图我对Box(myBox)绑定了这个扩展脚本

文章图片

Ⅲ,附加脚本
和"扩展脚本"一样也有Unity / Cocos Creator中组件的感觉.操作上除了脚本类型要改成"附加类型",其余的一下,如下

文章图片

添加类似的属性 ①, speed ②,userName

注意,也需要拖动绑定,这次我绑定的是Box(myBox1),如下:

文章图片

三, 编写相关的脚本代码Ⅰ,runtime

namespace game { /** * 脚本 ( runtime脚本类型 ) */ export class ImageRuntime extends Laya.Image { private readonly scaleTime: number = 100; public constructor() { super(); }protected createChildren(): void { super.createChildren(); console.log("add runtime"); //设置组件的中心点 this.anchorX = this.anchorY = 0.5; this.addEvent(); }private addEvent(): void { this.on(Laya.Event.MOUSE_DOWN, this, this.onEventHandler); this.on(Laya.Event.MOUSE_UP, this, this.onEventHandler); this.on(Laya.Event.MOUSE_OUT, this, this.onEventHandler); }private removeEvent(): void { this.off(Laya.Event.MOUSE_DOWN, this, this.onEventHandler); this.off(Laya.Event.MOUSE_UP, this, this.onEventHandler); this.off(Laya.Event.MOUSE_OUT, this, this.onEventHandler); }private onEventHandler(e: Laya.Event): void { switch (e.type) { case Laya.Event.MOUSE_DOWN: Laya.Tween.to(this, {scaleX: 0.8, scaleY: 0.8}, this.scaleTime); break; case Laya.Event.MOUSE_UP: case Laya.Event.MOUSE_OUT: Laya.Tween.to(this, {scaleX: 1, scaleY: 1}, this.scaleTime); break; } }/** * doSomething * @param data */ public doSomething(data: string): void { console.log(`runtime doSmothing : ${data}`); }public destroy(): void { super.destroy(); console.log("remove runtime"); this.removeEvent(); } } }

Ⅱ,扩展脚本( 很可惜 : speed 和 userName 还是需要再定义一下 )

/** * Created by alexhu on 2021/6/2. */ namespace scripts { /** * 扩展脚本 */ export class ExtendsScriprs extends Laya.Box { public speed: number = 0; public userName: string = ""; private state: number = 0; public constructor() { super(); this.frameOnce(2, this, this.onFrame); //2帧后运行 }private onFrame(): void { var usrN: Laya.Label = this.getChildByName("userN") as Laya.Label; usrN.text = this.userName; this.frameLoop(1, this, this.onLoop); }private onLoop(): void { if ( this.x = Laya.stage.width - this.width) { this.state = 1; this.x -= this.speed; }else{ switch (this.state){ case 0: this.x += this.speed; break; case 1: this.x -= this.speed; break; } } }/** * doSomething * @param data */ public doSomething(data: string): void{ console.log(`扩展脚本 doSmothing : ${data}`); }public destroy(): void { super.destroy(true); this.clearTimer(this, this.onLoop); } } }

Ⅲ,附加脚本 ( 很可惜 : speed 和 userName 还是需要再定义一下 )

/** * Created by alexhu on 2021/6/3. */ namespace scripts{ /** * 脚本 (附加脚本) */ export class AdditionalScripts{ public speed: number = 0; public userName: string = ""; private target: Laya.Box; private tw: Laya.Tween; /** * 重点 : 规定的函数 owner, 引擎会自动的调用 * @param value */ public set owner( value: Laya.Box ){ console.log(`自动执行 owner`); this.target = value; this.target.frameOnce(2,this,this.onFrame); //在2帧后执行操作 }private onFrame(): void{ let userName: Laya.Label = this.target.getChildByName("addName") as Laya.Label; userName.text = this.userName; this.startTweenAnim(); }private startTweenAnim(): void{ this.target.scaleX = this.target.scaleY = 1.0; this.anim_1(); }private anim_1: () => void= () => { this.clearTw(); this.tw =Laya.Tween.to( this.target, { scaleX: 0.5, scaleY: 0.5 }, 500 , Laya.Ease.backIn, Laya.Handler.create(this, this.anim_2) ); }; private anim_2:()=> void = () => { this.clearTw(); this.tw =Laya.Tween.to( this.target, { scaleX: 1.0, scaleY: 1.0 }, 500 , Laya.Ease.backIn, Laya.Handler.create(this, this.anim_1)); }; private clearTw(): void{ if( this.tw ){ Laya.Tween.clear( this.tw ); } }private callback: ( tag: string, ...args ) => void = ( tag, ...args )=> { switch (tag){ case "add_demo": console.log(`得到传值 : ${args[0]}`); break; } } public destroy(): void{ this.clearTw(); this.tw = null; this.target = null; } } }

注意附加脚本 , 没有没法定义单独的diSomething方法, 我定义了一个callback, 需要更改laya.ui.js底层如下: (注意这个需要自己修改底层)