Giter Club home page Giter Club logo

fairygui-cocoscreator's Introduction

FairyGUI-cocoscreator

A flexible UI framework for Cocos Creator, working with the FREE professional Game UI Editor: FairyGUI Editor.

Official website: www.fairygui.com

关于版本

  • ccc3.0 适用于CocosCreator 3.4以上版本
  • master 适用于CocosCreator 2.4或更新的版本
  • ccc2.1-2.3 适用于CocosCreator 2.1-2.3版本
  • ccc2.0 适用于CocosCreator 2.0版本
  • ccc3.0-3.4 适用于CocosCreator 3.0-3.4版本
  • 不支持CocosCreator 1.x版本

目录结构

  • source fairygui的源码
  • demo 例子工程,可用CocosCreator直接打开
    • UIProject UI 工程,可以FairyGUI编辑器打开

获取fairygui库

如果你只是想添加或者更新fairygui库到你的项目,那么下载以下文件即可:

  • bin/fairygui.js
  • bin/fairygui.d.ts

编译源码

使用VSC打开source目录,执行gulp build任务.

License

MIT

fairygui-cocoscreator's People

Contributors

davyzhang avatar doorxp avatar kinggithub avatar libla avatar luozhifu avatar terrantian avatar vikingsc2007 avatar xiaoguzhu avatar xiongshihai123 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fairygui-cocoscreator's Issues

使用问题

可否使用大白话说明下如何使用呀?本人小白一枚,看着这样的一个项目有些懵逼。

文本置灰

想问下字体置灰这个功能是存在的么,因为看编辑器中对字体置灰有效果,但是在运行中 发现无效
包括用demo测试同样发现(位图字体以及系统字体)都可发现在编辑器生效,运行时 无效
引擎:CocosCreator2.09

位图字体&图片填充&高级组点击

经测试官方Demo和自己制作的Demo以及实际项目使用中发现:
1.位图字体在组件套组件中会出现偏移(左右居中向上偏一点,上下居中向下偏一点),组件中正常
2.高级组点击无效(不知是Bug还是本来不可用)
3.图片填充采用:垂直-起点为下的方式,填充表现为旋转填充

1.设计图
image
2.运行图
image

引擎版本:2.0.7
测试用Demo:
BugDemo.zip

然后提个建议呗:
谷主有时间可以支持下字体描边么(cocoscreator据我看到的2.0.7版本可以用LabelOutline组件进行描边)

cc 3.8 mask error

mask.ts:175 Uncaught TypeError: Cannot set properties of null (setting 'stencilStage')
at Mask.set (mask.ts:175:9)

fix like this:
image

GLoader全屏适配有问题

let bgLoader = new fgui.GLoader();
bgLoader.fill = fgui.LoaderFillType.ScaleFree;
bgLoader.icon = "img/switchtogame/qp_loading";
fgui.GRoot.inst.addChild(bgLoader);
bgLoader.makeFullScreen();
bgLoader.addRelation(fgui.GRoot.inst, fgui.RelationType.Size); 主,我建了一个全屏的loader,里面显示一张图片,想让图片全屏显示,关联也设置了,窗口大小 不变时,没问题,但是拉窗口边框,调整大小时,loader里显示的图片没有平铺 。我用同样的关联方式,建了一个GImage,窗口大小变化时,gimage能平铺。

另外:提前在编辑器里创建了loader及添加了相应的图片,关联类型设置的也是跟随组件大小变化,拉窗口边框调整大小时,也会无规律的出现黑边, 不能平铺。

Cocos2.09遮罩问题

在使用中发现2.09的反向遮罩点击,会出现被遮挡的地方点击也有效的问题

以前用2.07没这个问题

通过观察CC源码发现是官方做了修改
image
image

然后我修改了下fgui的源码,
image
反向遮罩暂时没问题,因为没有通读整个源码,但是担心这样改会出现其他问题,所以还是官方处理下吧

ScrollPane中mouseWheelEnabled没有set方法

在官网的教程中,提供了一个mouseWheelEnabled,打开或关闭鼠标滚动支持。
image

但是在实际使用中
翻了下源码,,发现没有set方法,,虽然可以自己加但还是说明一下

cocos 2.4.3,2.4.4打成原生android包闪屏报错

cocos 2.4.3,2.4.4闪屏报错
2021-02-20 13:58:03.102 19144-19214/org.cocos2d.demo E/jswrapper: [ERROR] (/Applications/CocosCreator/Creator/2.4.3/CocosCreator.app/Contents/Resources/cocos2d-x/cocos/scripting/js-bindings/jswrapper/v8/Object.cpp, 574): Invoking function (0x760da9ea60) failed!
2021-02-20 13:58:03.117 19144-19214/org.cocos2d.demo E/jswrapper: ERROR: Uncaught TypeError: Cannot read property '_device' of null, location: src/cocos2d-jsb.5725f.js:0:0
STACK:
[0]init@src/cocos2d-jsb.5725f.js:34310
[1]ctor@src/cocos2d-jsb.5725f.js:34298
[2]CCClass@(no filename):5
[3]227.i.requestBuffer@src/cocos2d-jsb.5725f.js:32375
[4]227.i.getBuffers@src/cocos2d-jsb.5725f.js:32383
[5]227.i.genBuffer@src/cocos2d-jsb.5725f.js:32415
[6]227.i._expandFill@src/cocos2d-jsb.5725f.js:32497
[7]227.i.fill@src/cocos2d-jsb.5725f.js:32437
[8]fill@src/cocos2d-jsb.5725f.js:23143
[9]updateGraph@src/assets/Script/lib/fairygui.86ac1.js:2795
[10]handleSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:2806
[11]setSize@src/assets/Script/lib/fairygui.86ac1.js:687
[12]set height@src/assets/Script/lib/fairygui.86ac1.js:674
[13]applyOnSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:7692
[14]__targetSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:7808
[15]198.c.emit@src/cocos2d-jsb.5725f.js:28811
[16]emit@src/cocos2d-jsb.5725f.js:7668
[17]setSize@src/assets/Script/lib/fairygui.86ac1.j
2021-02-20 13:58:03.117 19144-19214/org.cocos2d.demo D/debug info: Uncaught Exception:
- location : (see stack)
- msg : Uncaught TypeError: Cannot read property '_device' of null
- detail :
[0]init@src/cocos2d-jsb.5725f.js:34310
[1]ctor@src/cocos2d-jsb.5725f.js:34298
[2]CCClass@(no filename):5
[3]227.i.requestBuffer@src/cocos2d-jsb.5725f.js:32375
[4]227.i.getBuffers@src/cocos2d-jsb.5725f.js:32383
[5]227.i.genBuffer@src/cocos2d-jsb.5725f.js:32415
[6]227.i._expandFill@src/cocos2d-jsb.5725f.js:32497
[7]227.i.fill@src/cocos2d-jsb.5725f.js:32437
[8]fill@src/cocos2d-jsb.5725f.js:23143
[9]updateGraph@src/assets/Script/lib/fairygui.86ac1.js:2795
[10]handleSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:2806
[11]setSize@src/assets/Script/lib/fairygui.86ac1.js:687
[12]set height@src/assets/Script/lib/fairygui.86ac1.js:674
[13]applyOnSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:7692
[14]__targetSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:7808
[15]198.c.emit@src/cocos2d-jsb.5725f.js:28811
[16]emit@src/cocos2d-jsb.5725f.js:7668
[17]setSize@src/assets/Scrip
2021-02-20 13:58:03.117 19144-19214/org.cocos2d.demo D/jswrapper: JS: [ERROR]: (see stack) Uncaught TypeError: Cannot read property '_device' of null [0]init@src/cocos2d-jsb.5725f.js:34310
[1]ctor@src/cocos2d-jsb.5725f.js:34298
[2]CCClass@(no filename):5
[3]227.i.requestBuffer@src/cocos2d-jsb.5725f.js:32375
[4]227.i.getBuffers@src/cocos2d-jsb.5725f.js:32383
[5]227.i.genBuffer@src/cocos2d-jsb.5725f.js:32415
[6]227.i._expandFill@src/cocos2d-jsb.5725f.js:32497
[7]227.i.fill@src/cocos2d-jsb.5725f.js:32437
[8]fill@src/cocos2d-jsb.5725f.js:23143
[9]updateGraph@src/assets/Script/lib/fairygui.86ac1.js:2795
[10]handleSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:2806
[11]setSize@src/assets/Script/lib/fairygui.86ac1.js:687
[12]set height@src/assets/Script/lib/fairygui.86ac1.js:674
[13]applyOnSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:7692
[14]__targetSizeChanged@src/assets/Script/lib/fairygui.86ac1.js:7808
[15]198.c.emit@src/cocos2d-jsb.5725f.js:28811
[16]emit@src/cocos2d-jsb.5725f.js:7668
[17]setSize@src/assets/Script/lib/fairygui.86ac1.js:696
[18]onWinResize@src/ass
2021-02-20 13:58:03.117 19144-19214/org.cocos2d.demo E/jswrapper: [ERROR] (/Applications/CocosCreator/Creator/2.4.3/CocosCreator.app/Contents/Resources/cocos2d-x/cocos/scripting/js-bindings/jswrapper/v8/Object.cpp, 574): Invoking function (0x760da9ea60) failed!

CocosCreator3.3.2项目中fgui导出的UI代码文件报错,找不到名称'fgui'

npm install --save fairygui-cc导入到cocosCreator3.3.2项目后,在用到的组件脚本中可以用过下列代码引入fgui来完成相关调用
import * as fgui from "fairygui-cc";

但是fgui发布代码导出的.ts文件中,用到了fgui关键字,但是并没有通过上述import来完成导入,导致无论是编译还是运行,都会提示找不到fgui的错误,如果在该UI_xxx.ts文件中手动加入上述import语句,则一切运行正常,但是这个ts文件显然不是fgui官方推荐修改的,而且当发布的UI文件代码变多时,这种操作将变得非常繁琐,请问谷主有啥解决办法吗?

升级2.4碰到了一个问题

protected onConstruct() {

    this._backGround = this.getChild("backGround");
    this._guideLayer = this.getChild("guideLayer");
    this._guideLayer.setPivot(0.5, 0.5, true);
}

public GuidePlayer(target: fgui.GComponent) {
    let screenPos = target.localToGlobal(0, 0);
    let localPos = this.globalToLocal(screenPos.x, screenPos.y);
    this._guideLayer.setSize(target.width, target.height);
    fgui.GTween.to2(this._guideLayer.x, this._guideLayer.y, localPos.x, localPos.y, 0.5).setTarget(this._guideLayer, this._guideLayer.setPosition);
}

同样的代码在之前2.3.4版本可以到达正确的位置 target的锚点也是setPivot(0.5,0.5,true) 升级到2.4 发现到达的位置是左上角..

关于fgui.UIObjectFactory.setExtension功能的使用

您好,是这样,我这边有员工在项目中使用了fgui.UIObjectFactory.setExtension功能
确实是挺方便的,但是我们没有在官方文档上找到。也许是我的疏忽。
想请问一下,这个文档在哪个章节,方便的话直接给URL更好;这个API如果还没有文档化,是否还处于不稳定阶段,设计上是否会移除或者做调整,如果我们用在项目中,是否有风险?
谢谢

可以考虑对包资源添加一个分页加载的模式

目前的包发布支持纹理集设置,所以如果制作组件或窗口时,刻意将这个组件所用的纹理设置为同一纹理集,那么加载这个组件时,如果能够只加载对应依赖的纹理集,而非加载整个包所有纹理资源,可以有效降低加载时间,同时也可以有效减少项目中包的数量。我们项目目前已经通过覆盖部分GWindow、UIPackage方法,实现了这一特性,但还是希望有官方支持版本

遮罩在CC中运行时放缩关联不起作用

打算做一个圆形头像的组件,于是在组件中放了一个圆形在下层,用作自定义遮罩,上层是一个loader.圆形与Loader都设了和容器组件的宽高自动伸缩关联.
把组件容器的遮罩设到圆形上了
image

结果表现为,那个圆形遮罩的自适应放缩没有工作,还是原先的大小,图片容器是有正常的随外部容器组件变大的
image

去掉遮罩后的效果
image

补充说明:
在编辑器中显示正常,在CC中不正常

临时方案:
暂时我的处理办法是,先不在编辑器中设遮罩,好让那个用于遮罩的圆形能正常的做关联放缩,再在运行时通过程序去把它设为容器组件的遮罩.

[feature request] 需要移除所有事件监听的方法

有些小的ui对象会被不同的界面创建很多次, 用对象池缓存了之后没有办法移除全部的事件因为很多时候用的匿名函数.

如果能统一移除所有的点击事件就可以重新再次给他们加不同的响应函数

混合模式错误

在分支cc3.0-3.4 fgui编辑器中修改了组件的效果混合模式为普通,然后滤镜为添加改变颜色,在编辑器实测有效果变化,然而打包到cocosCreator3.8.2运行并没有改变,猜测对于混合模式的修改代码没有更新

位图字体行距问题

测试引擎:CocosCreator2.0.7

总结下Bug:位图字体设置动态改变字号,使用过程中:如果字体的字号不为原始字号,那么在运行中可以发现,字号比原始小则行距实际效果会缩短,字号比原始大则行距实际效果会增大

编辑图:
image
image
image

运行图:
image

弧形的进度条错误

180的进度条编辑器与运行时表现不一致,翻了下源码,估计90的也会有问题

按钮模拟触发点击异常

Button.fireClick();这个Api,,实际使用中发现,,可以触发注册的回调,,但是没有模拟点击的效果,,但是教程是
image

GCombox 点击选中图片不切换的bug

需要加入选中时icon的赋值

 GComboBox.prototype.onClickItem2 = function (index) {
            if (this.dropdown.parent instanceof fgui.GRoot)
                this.dropdown.parent.hidePopup();
            this._selectedIndex = index;
            if (this._selectedIndex >= 0)
            {
                this.text = this._items[this._selectedIndex];
                this.icon =  (this._icons != null && this._selectedIndex < this._icons.length) ? this._icons[this._selectedIndex] : null;
            }
            else
            {
                this.text = "";
                this.icon = null;
            }
            this._node.emit(fgui.Event.STATUS_CHANGED, this);
        };

富文本使用自动收缩和单行存在的问题

在最新的Demo中,CocosCreator版本为2.0.7
富文本使用自动收缩,预览正常,实际运行无效果
image
image

可以发现,当我更改了Demo中的文本框大小,且勾选自动收缩,在编辑器中正常,实际运行中发现文本框大小已改变,但是字体大小却没有收缩

2.富文本使用单行(这个问题不知是我使用错误,还是Bug,看一下呗)
image
image

我通过将编辑器中富文本框的大小改为固定长度,并选中单行模式,在实际运行中可发现文本框长度正常,但是文本却换行了,而不是我理想中的单行

2.1.2版本,GLoader设置autoSize和锚点设为中心时,不兼容(没效果)

GLoader设置autoSize和锚点设为中心时,不兼容。
已解决,代码如下,
`
GLoader.prototype.updateLayout = function () {
....

if (this._autoSize) {
this._updatingLayout = true;
if (this._contentWidth == 0)
this._contentWidth = 50;
if (this._contentHeight == 0)
this._contentHeight = 30;
this.setSize(this._contentWidth, this._contentHeight);
this._updatingLayout = false;
this._container.setContentSize(this._width, this._height);
//change by MixMarvel
// this._container.setPosition(pivotCorrectX, pivotCorrectY);
this._container.setPosition(-this.pivotX * this._width, this.pivotY * this._height);
if (this._content2 != null) {
this._content2.setPosition(pivotCorrectX - this._width / 2, pivotCorrectY - this._height / 2);
this._content2.setScale(1, 1);
}
if (this._contentWidth == this._width && this._contentHeight == this._height)
return;
}
......

`

bug: GLoader3D可能出现错误

GLoader3D#onChange方法会默认顺序执行 instanceof sp.Skeletoninstanceof dragonBones.ArmatureDisplay,但如果项目中因不使用dragon Bones模块而将此模块从引擎文件中分离,此时就会因dragonBones未定义而出现错误,在onChange中进行如下修改可避免错误,仅供参考:

if (this._contentItem.type == fgui.PackageItemType.DragonBones) {
    this.onChangeSpine();
}
if (this._contentItem.type == fgui.PackageItemType.DragonBones) {
    this.onChangeDragonBones();
}

引擎版本: 2.3.3,fgui库分支: ccc2.1-2.3

GList.removeChildAt

现版本先super.removeChildAt(),dispose为true时会导致child._node被置null,下面child.off报错
修改为
public removeChildAt(index: number, dispose?: boolean): GObject {
var child: GObject = this.getChildAt(index);
child.off(Event.CLICK, this.onClickItem, this);
super.removeChildAt(index, dispose);
return child;
}

Text使用UBB语法和加粗

在最新的Demo中,CocosCreator版本为2.0.7,使用Text组件,可发现两个问题,
1.编辑器中对其加粗,,实际运行中无效果
2.编辑器中使用UBB语法对其加粗,实际运行无效果
image
image

image

image

List的mouseWheel依旧还有Bug

如果list不是虚拟列表,那么mouseWheel使用没有任何问题
但如果list设置成虚拟列表后,那么mouseWheel的滚动并不符合预期

Scroll,鼠标滚轮滑动方向问题

在官网的在线demo例子中,基础功能展示->Clip&Scroll->,在界面中使用鼠标滚轮可发现,鼠标滚轮向上滚动,列表向下移动,鼠标滚轮向下滚动,列表向上移动,

包括最新的demo中的示例(我在实际中的使用)也存在此问题

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.