手机做网站需要多少天,官方网站建设计划,招聘信息发布平台,西数 网站建设版本 Creator 3.8.x#xff0c;FairyGUI 2022 大部分内容来自 https://en.fairygui.com/docs/sdk/creator
1.新建cocos项目#xff0c;根目录运行 npm install --save fairygui-cc 引入 fairyGUI库 2.assets目录之外新建fairyGUI项目 3.fairyGUI中编辑UI 完成后发布到Creato…版本 Creator 3.8.xFairyGUI 2022 大部分内容来自 https://en.fairygui.com/docs/sdk/creator
1.新建cocos项目根目录运行 npm install --save fairygui-cc 引入 fairyGUI库 2.assets目录之外新建fairyGUI项目 3.fairyGUI中编辑UI 完成后发布到Creator的assets/resources目录或者其子目录下。注意图片设置为RAW格式即可不需要设置为Sprite。因为FairyGUI会自己分析Sprite。 4.加载。一种是你负责把文件加载第二种是让FairyGUI自己去加载。第一种方式是方便你做一个混杂了其它资源的总体的加载或者显示进度的需求等
//这里填写的是相对于resources里的路径let res [ UI/Bag, //描述文件UI/Bag_atlas0 //纹理集];cc.loader.loadResArray(res, function(err, assets) {//都加载完毕后再调用addPackagefgui.UIPackage.addPackage(UI/Bag); //下面就可以开始创建包里的界面了。});//这里填写的是相对于resources里的路径fgui.UIPackage.loadPackage(UI/Bag, function(err) {//这里不需要再调用addPackage了直接可以开始创建界面了});5.卸载。当一个包不再使用时可以将其卸载。
//这里可以使用包的id包的名称包的路径均可以
fgui.UIPackage.removePackage(Bag);包卸载后所有包里包含的贴图等资源均会被卸载由包里创建出来的组件也无法显示正常虽然不会报错所以这些组件应该或已经被销毁。 一般不建议包进行频繁装载卸载因为每次装载卸载必然是要消耗CPU时间意味着耗电和产生大量GC的。UI系统占用的内存是可以精确估算的你可以按照包的使用频率设定哪些包是常驻内存的建议尽量多。 5.创建ui 每个场景 都需要有一个GRoot这是UI的根节点。场景载入后需要手动创建GRoot。
调用 fgui.GRoot.create();public static create(): GRoot {GRoot._inst new GRoot();director.getScene().getChildByName(Canvas).addChild(GRoot._inst.node);GRoot._inst.onWinResize();return GRoot._inst;
}创建FGUI对象。 let view:fgui.GComponent fgui.UIPackage.createObject(“包名”, “组件名”).asCom;//以下几种方式都可以将view显示出来//1直接加到GRoot显示出来fgui.GRoot.inst.addChild(view);//2使用窗口方式显示aWindow.contentPane view;aWindow.show();//3加到其他组件里aComponnent.addChild(view);如果界面内容过多创建时可能引起卡顿FairyGUI提供了异步创建UI的方式异步创建方式下每帧消耗的CPU资源将受到控制但创建时间也会比同步创建稍久一点。例如
let handler new AsyncOperation();
handler.createObject(包名,组件名, myCreateObjectCallback);void myCreateObjectCallback(obj:fgui.Gobject)
{
}关闭界面一般用隐藏即可即
//如果是加在GRoot或者其他父节点的
view.removeFromParent();//如果是窗口
view.hide();如果界面不再使用了可以销毁它
view.Dispose();场景切换时所有界面都会被销毁。如果不想被销毁需要创建出界面后把根节点设置为常驻并且切换场景前确保关闭界面。
cc.game.addPersistNode(view.node);6.事件系统 FairyGUI直接使用了Creator的事件系统所以GObject.on/off其实是通过GObject.node.on/off实现的也就是可以通过GObject.node进行任何事件的操作包括自定义的事件。在事件回调中cc.Event中的currentTarget反映的是这个事件是由哪个node派发的如果要获得这个node对应哪个GObject可以用这样的方法
aObject.on(someEventName, this.onHandle, this);onHandle(evt:cc.Event) {cc.log(evt.currentTarget); //node对象cc.log(fgui.GObject.cast(evt.currentTarget)); //gobject对象
}7.鼠标/触摸类事件 对于鼠标事件和触摸事件FairyGUI里都使用自定义的事件常量定义在fgui.Event里这和Creator自身的cc.Node.EventType.TOUCH_BEGIN是不一样的要注意区别。因为Creator自己的触摸逻辑很难处理穿透/不穿透以及自定义区域点击这些情况。
鼠标/触摸事件回调函数有一个参数evt:fgui.Eventfgui.Event继承于cc.Event。 TOUCH_BEGIN 鼠标按键按下左、中、右键或者手指按下。鼠标按钮可以从evt.button获得0-左键,1-中键,2-右键。如果是触摸事件可以从evt.touchId获得手指ID如果是鼠标事件evt.touchId恒定为0。 TOUCH_MOVE 鼠标指针移动或者手指在屏幕上移动。这个事件只有两种情况会触发1、在TOUCH_BEGIN里调用了evt.captureTouch()那么后续的移动事件都会在这个对象上触发无论手指或指针位置是不是在该对象上方。2、GRoot上的TOUCH_MOVE始终会触发不需要使用captureTouch捕获。 TOUCH_END 鼠标按键释放或者手指从屏幕上离开。如果鼠标或者触摸位置已经不在GObject范围内了那么组件的TouchEnd事件是不会触发的如果确实需要可以在TOUCH_BEGIN里调用evt.captureTouch()请求捕获。 CLICK 点击事件。可以从evt.isDoubleClick判断是单击还是双击。侦听点击事件有个快捷方式GObject.onClick(callback,…)比GObject.on(fgui.Event.CLICK,…)简洁点。 ROLL_OVER 鼠标指针或者手指移入显示对象区域时触发。 ROLL_OUT 鼠标指针或者手指移出显示对象区域时触发。 MOUSE_WHEEL 鼠标滚动事件。 如果不在事件回调流程中需要获得当前鼠标或者手指的位置可以用
//touchId是手指id如果你不关心这个不传入即可
let pos1:cc.Vec2 fgui.GRoot.inst.getTouchPosition(touchId);在任何时候如果需要获得当前点击的对象或者鼠标下的对象都可以通过以下的方式获得
let obj:fgui.GObject fgui.GRoot.inst.touchTarget;//判断是不是在某个Fgui组件内
cc.Log(testComponent.isAncestorOf(obj));8.字体 如果要使用ttf字体需要这些步骤
1、首先需要得到cc.Font对象这个对象你是从loadRes获得还是直接在场景中通过脚本的变量获得可按照项目需求。
2、使用fgui.UIConfig.registerFont给这个cc.Font注册一个FairyGUI里使用的字体名称假定aFont就是cc.Font对象
fgui.UIConfig.registerFont(myfont, aFont);3、如果这个是全局字体
fgui.UIConfig.defaultFont myFont;4、如果这个是某个文字单独指定的字体例如
这里用到了黑体这个名字的字体这是与UIConfig.defaultFont不同的字体那么我们需要注册这种字体。即
fgui.UIConfig.registerFont(黑体, aFont);cocos 组件的声明周期接口
注意事项
1.fgui坐标系是以左上角为原点的。cocos则是左下角
