一、使用方式
制作一个自定义的Box预设组件，将页面中要制作成预设组件的元素设置好要用的属性值，全选并按快捷键Ctrl+B组合成Box组件（开发者可以根据自己的需求转换为对应的组件）。然后从层级目录中将转换好的Box组件拖入到资源列表中，生成预设组件。如动图：
添加一个预设
自定义组件制作成预设组件后，在资源面板中会生成一个.prefab为后缀的组件，同时UI界面中的Box组件颜色会发生改变（这个颜色代表该组件为自定义预设组件）。最后就可以在不同页面中将该组件拖入使用了。如果想在某个界面中修改预设组件的属性值，可以直接在该UI界面上双击组件进行修改。
image.png
可以看到，单独修改预设中的元素属性，会从Auto变成新的修改值，并且不会影响其它预设。
image.png
优点：可以在当前页面直接双击到子级修改属性；预设之后在UI界面上显示的依旧是组件
缺点：已经做了预设的组件内部不能添加新的元素，只能修改组件属性面板中的值
二、引擎处理
1.随便放两张图片，导出的预设Box.json
{
"type":"Box",
"props":{ "y":0, "x":0, "presetID":1, "isPresetRoot":true },
"compId":5,
"child":[
{
"type": "Image",
"props": { "y": 0,
"x": 0,
"width": 150,
"skin": "comp/image.png",
"presetID": 2,
"height": 109
},
"compId": 3
},
{ "type": "Image",
"props": { "y": 250,
"skin": "comp/img_bg.png",
"presetID": 3
},
"compId": 4 }
],
"loadList":["comp/image.png", "comp/img_bg.png"],
"loadList3D":[],
"components":[]
}
2.然后是使用了预设的Scene
image.png
这个scene使用了两个预设，其中一个预设更改了宽度。注意画红线的width:303，就是其中一个预设更改的地方。
三、代码动态创建prefab
1.引擎中的prefab源码
public class Prefab {
/**@private */
public var json:Object;
/**
* 通过预制创建实例
*/
public function create():* {
if (json) return SceneUtils.createByData(null,json);
return null;
}
}
这里可以看出prefab并不是一个显示对象，只是一个封装，create返回的才是显示对象。
2.参考官方文档 引擎常见问题Frequently Asked Questions
先创建一个叫dongtai的prefab，然后从scene中把它删除掉。然后在scene上创建一个Button，为button添加这个script测试一下：
import Event = laya.events.Event;
export default class Click1 extends Laya.Script {
private pref:Laya.Prefab = null;
onAwake(): void{
Laya.loader.create('dongtai.json',Laya.Handler.create(this,this.onPrefabLoader));
}
onClick(e: Event): void {
if(this.pref){
var ppp = Laya.Pool.getItemByCreateFun("MyPrefab",this.pref.create,this.pref);
console.log('create prefab',ppp);
ppp.x = Math.random()*200;
this.owner.parent.addChild(ppp);
}
}
onPrefabLoader(obj:any):void{
this.pref = new Laya.Prefab();
this.pref.json = obj;
console.log("load prefab:",obj);
this.owner.parent.addChild(this.pref.create());
}
}
四、给prefab添加script
和给一个button挂载script没什么两样，创建script类后就能添加上去了。这里以官方提供的示例DropBox.prefab为例，这里面除了物理引擎类型的刚体、碰撞体，就是一个name=levelTxt的标签，还有就是DropBox的Script了，看一下prefab和script是怎么互动的：
export default class DropBox extends Laya.Script {
/**盒子等级 */
level: number = 1;
/**等级文本对象引用 */
private _text: Laya.Text;
/**刚体对象引用 */
private _rig: Laya.RigidBody
constructor() { super(); }
onEnable(): void {
/**获得组件引用，避免每次获取组件带来不必要的查询开销 */
this._rig = this.owner.getComponent(Laya.RigidBody);
this.level = Math.round(Math.random() * 5) + 1;
this._text = this.owner.getChildByName("levelTxt") as Laya.Text;
this._text.text = this.level + "";
}
...
1.getComponent是Node.as中的方法，这是laya2.0出现的新方法：
/**
* 获得组件实例，如果没有则返回为null
* @param clas 组建类型
* @return 返回组件
*/
public function getComponent(clas:Class):* {
if (_components) {
for (var i:int = 0, n:int = _components.length; i < n; i++) {
var comp:Component = _components[i];
if (comp is clas)
return comp;
}
}
return null;
}
这里获取刚体引用，直接根据类型来获取的。而获取标签就是用getChildByName传统方式了。观察UI，刚体确实是没有name属性的。
2.自定义标签label
onTriggerEnter(other: any, self: any, contact: any): void {
var owner: Laya.Sprite = this.owner as Laya.Sprite;
if (other.label === "buttle") {
...
这里判断箱子和子弹的碰撞，用了自定义标签label。去Bullet.prelab看一下，label标签填的确实是buttle。
3.GameControl extends Laya.Script
这个脚本通过@prop方式(type:Prefab)，把Bullet和dropBox设置进来，然后就可以很方便地用代码动态创建了。顺便也暴露了startGame和stopGame这些控制方法。
4.class GameUI extends ui.test.TestSceneUI
游戏主界面，作为一个scene，挂载了GameControl这个脚本。怎么互动呢？
private _control: GameControl;
...
this._control = this.getComponent(GameControl);
并且也暴露了一些方法，提供给dropBox使用：
} else if (other.label === "ground") {
//只要有一个盒子碰到地板，则停止游戏
owner.removeSelf();
GameUI.instance.stopGame();
}
这里GameUI被做成了单例，方便其他类引用。
网友评论