cocos2dxの中にUIを簡単に作成できるクラスがv3から登場しました。 今までは利用をしたことなかったのですが、Cocos2d-xレシピ本にも載っているので少し勉強をしてみました。
スクロールレイアー
これはメニュー等を表示する際によく利用されているスクロールができるレイアーのことです。 下記のようなコードを使います。 [c]
include "ui/CocosGUI.h"
auto scrollView = ui::ScrollView::create(); scrollView->setPosition(Vec2(winsize.width/2,winsize.height/2)); scrollView->setDirection(ui::ScrollView::Direction::VERTICAL); scrollView->setBounceEnabled(true); this->addChild(_scrollView);
//スクロールする中身を追加（LayerやSpriteなど） scrollView->addChild(hogeLayer);
//中身のサイズを指定 scrollView->setInnerContainerSize(Size(hogeLayer->getContentSize().width,_hogeLayer->getContentSize().height));
//実際に表示される領域（これ以外は隠れる) auto inveSize = Size(hogeLayer->getContentSize().width,winsize.height/2); scrollView->setContentSize(inveSize);
[/c]
これだけでスクロールレイアーが作成できます。
実践
ただ、ここまででは実際のゲームではあまり利用の機会がないと思いますので、ここから色々と改造をしていかなくてはいけません。 一番オーソドックスな使い方は、このスクロールレイアーにMenuを設置をすることだと思います。 この時には問題があるのが、実際にメニューが隠れているのに押せてしまうことです。
これを解決するには面倒なのですが、ui::ScrollViewクラスを拡張して利用しなくてはいけません。
スワイプで動かせるレイアー
以前は、この実装がcocos2dxでは簡単にできなかったのですが、UIクラスに非常に便利なモノがあります。 それが [c]
include "ui/CocosGUI.h"
auto pageView = ui::PageView::create(); pageView->setContentSize(Size(winsize.width,winsize.height)); pageView->setPosition*1/2); this->addChild(_pageView);
//コンテンツ配置 for (int i = 0; i < 3; i++) {
auto imageView = ui::ImageView::create("hogehoge.png");
auto _layout = ui::Layout::create();
_layout->setContentSize(_pageView->getContentSize());
imageView->setPosition(_layout->getContentSize() / 2);
_layout->addChild(imageView);
_pageView->insertPage(_layout, i);
}
[/c]
これだけの実装で、配したコンテンツをスワイプで動かすことができます。
一周回す
このImageViewクラスを実装してみればわかるのですが、コンテンツの両端までしかスワイプできません。 もちろん、これだけでも良いのかもしれないのですが、私個人としてはグルグル一周回るようにしたいのです。
ただ、これは今日一日実装を試しみたのですがダメでした。 ImageViewクラス自体がガッチリとできているので、拡張するよりは、新しく作ったほうが早そうです。 ですので、こちらに関しては、以前から使いまわしているものを利用しようかと思っています。
最後に
今までcocos2dxのUIクラスに関しては見向きもしなかったのですが、実は色々なことができるようになっていました。 ですので、使う使わないは別として一通りは試してみようかと思っています。
 | 開発のプロが教える Cocos2d-x逆引きガイドブック 清水 友晶,松浦 晃洋,加島 拓,加藤 直人,木村 信行,小林 伸隆,鶴田 亮,西田 寛輔,藤田 泰生,八反田 智和(HatchUp) マイナビ 売り上げランキング : 40548 Amazonで詳しく見る |
*1:winsize - pageView->getContentSize(
