What UI system we need?

I do think leveraging an already popular or commercial solution could be very fruitful. It’s just a matter of whether it’s worth tying ourselves to their API. With things like Spine coming out ahead with strong support, I think it’s worth considering.

1 Like

+1 for libRocket http://librocket.com/wiki/frontend/features

No need to reinvent how to do UI, Web standards are there for us to use.
Maybe it will even be possible to use the same tools / UI code for C++ and javascript…
Cross-platform and CMake based is what cocos need I think.
Disclaimer : I didnt know about it, but it definitely looks interesting…

Another possible choice is CEGUI http://cegui.org.uk/features

It has been there for a long time and is used mostly in games.
I also has an editor now.
Disclaimer : I haven’t tried it yet, but I always wanted to :slight_smile:

1 Like

Yep. If it’s working and can be integrated easily into cocos2d-x, it should be used instead of re-implementing the wheel.

@Asmodehn
The only “bad taste” about it is the inactivity for a while now. But someone was suggesting, that they are just busy on their own games.
As long as javascript can deal with RML(there are already .js implementations to generate HTML out of RML), there is no problem to share the tools/UI code between different languages.

CEGUI, who does not know it, was used in some pretty successful commercial games.
Seems to be pretty stable.

Regarding “reinventing the wheel”. Wasn’t it announced, that cocos2d-x is getting a new sound engine?
Same applies here: Is it really needed or is integrating middleware the better approach?

CEGUI seems too heavy for mobile games.
About Audio engine, what we want to have is

  • it is easy to use
  • it will not increase application size, especially on iOS and Android
  • it should be cross-platform
  • it is an enhancement version of old one

Is there a good sound engine can meets these requirements?

The first sound engine that comes into mind, regarding those requirements, is fmod http://www.fmod.org/
It’s one of the best sound engines/sound middleware out there.

They recently changed their licensing requirements. They now have a FMOD Studio Free For Indies! License – Budget under $100k USD but they have a credit requirement in the docs or on screen.

I don’t know if those restrictions are against a consideration.

  • Usage: It’s very easy to use. Playing sounds is as simple as with
    cocos2d-x now.
  • Application size: The mobile lib for example is about 1.5MB in size.
  • Cross platform: Nearly every platform is supported: Windows, Linux,
    Mac, iOS, Android and consoles
  • Enhancement: It has plenty of features. From streaming music over the
    net, to DSP effects and 3D sound.
  • Comes with an editor: Think of CocoStudio for sound/music

But of course there are other ones as well that would meet the requirements. E.g. https://www.audiokinetic.com/products/wwise/
http://www.radgametools.com/miles.htm

and even a free open source one:
http://www.crickettechnology.com/

Regarding fmod and wwise is like Pepsi vs. Cola :smile:

Please see this: I have opened a feature regarding to TextBox text customization http://www.cocos2d-x.org/issues/5346

Also about UI there is a problem with RelativeLayouts. The example in wiki does not work. Here is the detailed description of the problem: Relative Layouts don't work on cocos2d-x 3.1? Please fix it too.

I would try to add support to QT in all modes. There is no need to reinvent the weel. IMO

@iQD
Thanks for the information. fmod is good, but it is not free. And i think it is not problem to use it by yourself. Audio engine is not needed when developing cocos2d-x games. You don’t have to use it if you don’t like it and use the one you like.

And i think it is not hard to use other sound engine in cocos2d-x.

@naghekyan
Thanks. We will fix it.

@owen
Please check the issue.
Thanks.

@zhangxm I have found the problem with the relative layouts. It is necessary to change layout->setContentSize(visibleSize); to layout->setSize(visibleSize);. Please update the wiki: http://www.cocos2d-x.org/wiki/Containers

And thank you for considering to support TextBox text customization features (http://www.cocos2d-x.org/issues/5346)!

I am thinking supporting existing mature UI system, such as NoesisGUI. Now the UI system is heavily used in Cocos Studio.

1 Like

@zhangxm you want NoesisGUI to replace all existing UI classes in cocos2d-x or you want to use them as an additional way of creating UI?

Just my 2 cents to the audio stuff: Of course you can’t use fmod because it’s not free but nevertheless the audio part is a big part which is important for developing games. It’s not only the UI what counts. And yes, it’s of course able to use a different audio engines. But I don’t want to do it, that’s the reason I am using cocos2d-x :stuck_out_tongue_winking_eye:

And now the UI Stuff:
I would also like to see a UI System with a different approach (see the examples above this post). Would be also extremely nice if the system is based on a widely spread language like HTML.

While developing and improving the new system cocos2d-x could support both systems (legacy and shinyUI :stuck_out_tongue_winking_eye: ). But that would be a lot of work.

About UI :
How about that one : http://feathersui.com ?

Apart from that, the only mature UI ( easily embeddable in a game ) based on markup language that I could find are CEGUI and libRocket.

If it s too heavy we probably need to have a look at smaller UI libraries. But I dont know of any one that is mature and that we can easily integrate.

Even if we cant find a perfect UI library for cocos, I would prefer to reuse/maintain/fork/takeover an already existing one (libRocket?), that can work with other engines than cocos, instead of starting again a UI framework from the beginning, that will work only on cocos engine…

About supporting existing mature UI systems, how about supporting http://berkelium.org/, or make it easy to use https://code.google.com/p/chromiumembedded/ for people who want HTML based UI ?

As an additional way.
But i have to discuss it with other guys.

My understanding is that there are currently 3 UI systems integrated in to Cocos; Menu/Items, CCControl (extensions/GUI), and CocosGUI (cocos/ui). I would like to see them better integrated, or a clear sign that 2 of the 3 are being deprecated, so that we as developers trying to help with bettering Cocos can focus on just one, which I would guess would be CocosGUI.

As a C++ programmer coming from iOS, my familiarity/preference has been for CCControl, but I could learn to use CocosGUI if that is the course of action. My issue with CocosGUI is that there is an added layer of abstraction through ProtectedNode and Widget and Layout that can get confusing, and as a programmer I prefer to add the buttons/sliders/scrollviews directly to a scene’s base Layer or sub Layer. As a side note, I think there is redundancy in other places too, like I think that Node, Layer, LayerColor, etc. should all be joined into one class, a Layer with a background layer that is always on the bottom of the child stack.

As others have done, I too have created a system using JSON to do automatic layout, but that was before CocoStudio, which (as a Mac user) is still not “ready for primetime” so it’s not a viable option for me yet. That being said, I would rather see the output from CocoStudio better documented, so we can tweak it directly, than see an HTML/CSS UI system added on top of the C++ version of Cocos. That said, I think Cocos does need a web view class similar to the experimental video player, so we could have an in-app browser for things like privacy policies that live on a website.

I’m very happy that CocoStudio has skeletal armature animation tool, and I am desperately waiting for the Mac version to include it. Spine becomes very expensive once you cross a certain threshold, plus requires some hackery to support 3+ resolutions (at least last I looked). As for other “for pay” libraries, the main reasons I switch to Cocos from Corona for cross platform development is no licensing fee and the open source nature of the product, and having to start paying for closed source libs would become a burden.

容许我先用中文表达一下:

  1. 坐标系比较反常,一般UI系统的坐标系原点在左上角,这不是随便定的,这是有它的道理的。人眼是从左到右从上到下看的。 不是所有控件都是UI编辑器里摆放的,有时需要代码去创建,计算位置,比如ListView,ScrollView等,这个时候你会发现,如果原点在左上角,那么x方向 和y方向 的坐标计算方式是一致的,但原点在左下角的话,计算方式是不一致的,有时候还相当别扭。
  2. 目前引擎和studio里对原点的定义是不一致的,引擎里Node 的原点在左下角,但studio里的原点却在锚点位置,相当不习惯。

可以参考flash的UI框架,相当漂亮和好用。。。如果cocos可以直接解析swf,那ui编辑器都省了。。可以参考scaleform

谁帮忙翻译成英文吧。。

google translate does a really good job. The translation is pretty understandable:

Allow me to use Chinese to express:

  1. relatively unusual coordinate system, the origin of the coordinate system is generally in the upper left corner of the UI system, it’s not just given, it has its reason. From left to right from top to bottom of the human eye to see. Not all controls are placed in the UI editor is sometimes necessary code to create, calculate the position, such as ListView, ScrollView, etc., this time you will find that if the origin in the upper left corner, then the calculated coordinates x direction and y direction is the same, but the origin in the lower left corner, then the calculation is different cause, sometimes quite awkward.
    2 engine and studio in the current definition of origin is inconsistent, engines Node origin in the lower left corner, but the studio where the origin was in the anchor position, quite accustomed to.

Can refer flash UI framework, quite beautiful and easy to use. . . If cocos can parse swf, that ui editor are saved. . Can refer scaleform

Who help translate it into English. .