【cocos2dx】スクロールレイアーとスワイプで動くレイアーの実装

【cocos2dx】スクロールレイアーとスワイプで動くレイアーの実装
   

cocos2dxの中にUIを簡単に作成できるクラスがv3から登場しました。
今までは利用をしたことなかったのですが、Cocos2d-xレシピ本にも載っているので少し勉強をしてみました。

スクロールレイアー

これはメニュー等を表示する際によく利用されているスクロールができるレイアーのことです。
下記のようなコードを使います。

#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);



これだけでスクロールレイアーが作成できます。

実践

ただ、ここまででは実際のゲームではあまり利用の機会がないと思いますので、ここから色々と改造をしていかなくてはいけません。
一番オーソドックスな使い方は、このスクロールレイアーにMenuを設置をすることだと思います。
この時には問題があるのが、実際にメニューが隠れているのに押せてしまうことです。

これを解決するには面倒なのですが、ui::ScrollViewクラスを拡張して利用しなくてはいけません。

スワイプで動かせるレイアー

以前は、この実装がcocos2dxでは簡単にできなかったのですが、UIクラスに非常に便利なモノがあります。
それが

#include "ui/CocosGUI.h"


auto _pageView = ui::PageView::create();
_pageView->setContentSize(Size(winsize.width,winsize.height));
_pageView->setPosition((winsize - _pageView->getContentSize())/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);
        
    }

これだけの実装で、配したコンテンツをスワイプで動かすことができます。

一周回す

このImageViewクラスを実装してみればわかるのですが、コンテンツの両端までしかスワイプできません。
もちろん、これだけでも良いのかもしれないのですが、私個人としてはグルグル一周回るようにしたいのです。

ただ、これは今日一日実装を試しみたのですがダメでした。
ImageViewクラス自体がガッチリとできているので、拡張するよりは、新しく作ったほうが早そうです。
ですので、こちらに関しては、以前から使いまわしているものを利用しようかと思っています。

最後に

今までcocos2dxのUIクラスに関しては見向きもしなかったのですが、実は色々なことができるようになっていました。
ですので、使う使わないは別として一通りは試してみようかと思っています。



開発のプロが教える Cocos2d-x逆引きガイドブック開発のプロが教える Cocos2d-x逆引きガイドブック
清水 友晶,松浦 晃洋,加島 拓,加藤 直人,木村 信行,小林 伸隆,鶴田 亮,西田 寛輔,藤田 泰生,八反田 智和(HatchUp)

マイナビ
売り上げランキング : 40548

Amazonで詳しく見る

Related Posts Plugin for WordPress, Blogger...