[]LayaAir IDE 1.4.0新增功能 附加(扩展)脚本的使用

.script和.prop脚本结合IDE在代码层的使用方式
已邀请:

cuixueying

赞同来自: SONIC3D

简单说明: 
  在LayaAir IDE 1.4.0版本中,我们提供了强大的脚本扩展功能,开发者可以直接修改组件行为,甚至增加新的属性,同时还可以添加多个附加脚本来扩展,功能强大便捷!
  扩展脚本和附加脚本的区别:扩展脚本继承自组件本身,附加脚本只修改组件,不继承
使用方式:
1、附加脚本(不继承,直接修改组件行为)
  这里我们来通过附加脚本制作一个ScaleButton
 a、文件-创建项目(以AS语言为例,JS/TS同理)
 
aaa.png

 b、项目面板右键->新建->页面/场景(ExpandPage)

bbb.png

 c、在舞台拖拽一个按钮(可以设置成自己喜欢的样式),并在项目面板右键->新建->脚本(附加脚本Btn)
 
ccc.png

 这时候会在项目面板生成一个.scrpt文件,如下


ddd.png

D、增加新的属性isScale(是否缩放)并保存文件

eee.png

从项目面板中将附加脚本拖拽到组件身上,这个步骤即可将2者绑定(isScale=true允许缩放,isScale=false不允许缩放)

fff.png

E、F12发布(记得给Button组件声明一个var,一会儿我们可以观察下2种脚本之间的继承关系),会发现以下报错,不用担心,这是因为项目中Btn的逻辑脚本是需要开发者自己来创建的,编辑器找不到

000.png

F、创建Btn逻辑脚本(game.Btn)

hhh.png

G、写类逻辑,实现按钮缩放控制(主类下需要对Animation用到的图集进行一次预加载,预加载完成后开始显示ExpandPage界面)
package game
{
import laya.display.Sprite;
import laya.events.Event;

public class Btn
{
private var _owner:Sprite;
private var _isScal:Boolean;
public function Btn()
{
trace("btn的附加类已经开始执行");
}
//设置owner函数,可以直接获取到Button组件的实例
public function set owner(v:Sprite):void
{
_owner = v;
//由于时序问题,我们需要在此处添加逻辑代码,确保_owner不为null
if(_isScal&&_owner)
{
_owner.on(Event.MOUSE_DOWN,this,onDown);
}
else
{
return;
}
}
public function get isScale():Boolean
{
return _isScal;
}
public function set isScale(isScal:Boolean):void
{
this._isScal=isScal;
}

private function onDown():void
{
//按下,按钮进行缩放
_owner.scale(.8,.8);
_owner.on(Event.MOUSE_UP,this,onUp);
}

private function onUp():void
{
// 抬起,按钮回复原样
_owner.scale(1,1);
_owner.off(Event.MOUSE_UP,this,onUp);
}
}
}

H、现在我们的例子已经完成了,我们来看下效果
H-1 设置isScale=true
true.png

发布显示结果
big.png

弹起
small.png

按下

H-1 设置isScale=false
false.png

发布显示结果
big.png

弹起
big.png

按下
-------------------------------------------------第一小节完---------------------------------------------

2、扩展脚本(继承组件本身,增加新的属性)
我们在第一个项目的基础上操作,实现一个Animation播放速度是否变慢的效果
A、从组件面板2d下拖拽一个Animation组件到舞台,并将资源面板中准备好的序列帧动画文件夹 拖拽到Animation组件右侧属性面板 中的data属性上,即可自动完成图集动画的制作
步骤一、

1111.png

步骤二、记得设置autoPlay=true,否则发布后不会自动播放

2222.png

B、创建扩展脚本并书写新的属性isSlow(true播放缓慢false正常播放),会在项目面板自动生成一个.prop文件
3333.png


1212图片2.png

C、将.prop文件拖拽到Animation的属性面板,扩展Animation新的属性值

4444.png

在属性面版的最后一行会自动生成我们在.prop文件新增的属性isSlow

5555.png


D、给Animation组件声明一个var(myAni),F12发布,解决报错,同上(创建Ani.as类)
报错如下:

6666.png


创建Ani脚本

7777.png

F、在Ani脚本中书写控制Animation播放快慢的逻辑代码
package game
{
import laya.display.Animation;

public class Ani extends Animation
{
private var _isSlow:Boolean=true;
public function Ani()
{
}
public function get isSlow():Boolean
{
return _isSlow;
}
//isSlow:是否放慢速度
public function set isSlow(value:Boolean):void
{
_isSlow=value;
if(_isSlow)
{
this.interval=500;
}
}
}
}
G:查看最终运行效果
G-1 设置isSlow=true;

8888.png

Animation的以默认60FPS/S的运行速度运行
G-2 设置isSlow=false;

9999.png

Animation的运行间隔为0.5S,速度变慢
由于效果不好直接在文档中表现,请开发者手动操作体验下
------------------------------------------------第二小节完-------------------------------------------
总结:以上的代码操作仅作为参考,开发者可根据自己的实际需求进行逻辑实现(支持AS/JS/TS语言)
END!!!

taiyang5535

赞同来自:

厉害,想法很独特,解决了很多问题

要回复问题请先

商务合作
商务合作