[Cocos2d-x] UI関連クラスのまとめ:extention(拡張機能)のCCUIライブラリとネイティブのUIライブラリにおける違い

Cocos2d-xのUI(GUI)関連のAPIには、大きく分けて2種類ある。

  1. ネイティブのクラス
  2. 拡張されたクラス

ネイティブのクラス

はじめからCocos2d-xに組み込まれていたクラス。

普通にLayerやNodeにaddChild()して使う。

MenuやScrollViewなど。

拡張されたクラス

元々は、外部のライブラリとして開発されたクラス群。

現在は、ネイティブのほうに組み込まれている。

UIエディタであるCocos Studioでは、基本的にこちらを使っている。

ButtonやEditBoxなど。

名前空間

2.x系と3.x系では、名前空間が変更されているので要注意。

特に、cocos2d::extensionはネイティブ版と拡張版で中身が入れ替わっているので混同しやすい。

2.x
3.x
C++ Cocos2d-JS C++ Cocos2d-JS

イティブ版
cocos2d cc cocos2d
(cocos2d::extension)
cc
拡張版 cocos2d::extension ccs cocos2d::ui ccui

違い

ネイティブのほうでは、UIコントロール自体をひとつのNodeとして扱っているので、親コンテナがなんであっても問題なく動作する。

拡張されたクラスのほうはJavaのSwing的なつくりになっており、Widgetクラスをかならず継承し、イベントドリブンの仕組みも独自。

そのため、安易に既存のLayerやNodeにaddChild()すると、動作や表示がおかしくなることもある。

問題点

命名規約のわかりづらさ

拡張されたクラスのほうは、v2.x時代、cocos2d::extensionという名前空間だったが、v3.xではcocos2d::uiになっている。

逆に、ネイティブのほうでは一部がcocos2d::extensionのほうに入っているため、非常にややこしい。

動作の違い

ネイティブ版と拡張版を組み合わせて使うことが難しい。

後者ではルートノードを除き、NodeやLayerに入れるのではなく、独自のWidgetクラスに入れることを想定しているため。

v2.x系では、UILayerクラスにかならず入れなければならなかった。

機能の重複

ScrollViewのようにネイティブ版と拡張版の両方に似た機能が存在するが、実装や使い方が異なるため、非常にわかりづらい。

Cocos Studioでの扱い

基本的に、ネイティブ版は扱っていない。

なお、拡張版ですら、Cocos Studio 1.x系、2.x系ともに扱われていないクラスがいろいろある。

まとめ

UIの構築はCocos Studioを使うことが多いと思うが、それだと上記のとおりネイティブ版のクラスが使いづらくなってしまう。

Cocos2d-xはこのように設計上の問題が多々あるので、コーディング規約を徹底しないと痛い目を見る。

どの場合にどのUI機能を使うか、事前にはっきりと決めておく必要があるだろう。