くまのがっこう神経衰弱バトルのチュートリアルに使ったスライドビューの作り方をご紹介します。このビューはスワイプ操作かボタン操作を行うとページ単位でスライドが移動します。ここではスワイプ操作のみに絞ったサンプルをご紹介します。
SlideView.h
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
#ifndef __SliderView__ #define __SliderView__ #include "cocos2d.h" USING_NS_CC; class SlideView : public cocos2d::Layer { private: // スライドの間隔と数 int _sliderSpan; int _sliderNum; // スライドの座標 int _sliderX; int _sliderP; float _swipeX; float _swipeD; // スライドの機能 void slidePage(); // スライドのレイヤー Layer* _layerSlide; public: virtual bool init(); CREATE_FUNC(SlideView); // タッチイベントの処理 bool onTouchBegan(Touch* touches, Event *event); void onTouchMoved(Touch* touches, Event *event); void onTouchEnded(Touch* touches, Event *event); void onTouchCancelled(Touch* touches, Event *event); // スライドビューをセットアップ void setSpan(int span); void setNum(int num); void addSlide(Layer* layer); }; #endif /* defined(__SliderView__) */ |
SlideView.cpp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
#include "SlideView.h" bool SlideView::init() { if ( !Layer::init() ) { return false; } /* 変数を初期化 ----------------------------------------------------- */ _sliderSpan = 0; _sliderNum = 0; _sliderX = 0; _sliderP = 0; /* レイヤーを生成 ----------------------------------------------------- */ _layerSlide = Layer::create(); this->addChild(_layerSlide); /* タッチイベントの処理をリスナーへ登録 ----------------------------------------------------- */ auto listener = EventListenerTouchOneByOne::create(); listener->onTouchBegan = CC_CALLBACK_2(SlideView::onTouchBegan, this); listener->onTouchMoved = CC_CALLBACK_2(SlideView::onTouchMoved, this); listener->onTouchEnded = CC_CALLBACK_2(SlideView::onTouchEnded, this); listener->onTouchCancelled = CC_CALLBACK_2(SlideView::onTouchCancelled, this); this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this); return true; } void SlideView::setSpan(int span) { _sliderSpan = span; } void SlideView::setNum(int num) { _sliderNum = num; } void SlideView::addSlide(Layer* layer) { _layerSlide->addChild(layer); } // タッチイベントの処理 bool SlideView::onTouchBegan(Touch* touch, Event *event) { // get touch point. auto point = Director::getInstance()->convertToGL(touch->getLocationInView()); _sliderX = _layerSlide->getPosition().x - point.x; _swipeX = point.x; _swipeD = 0; return true; } void SlideView::onTouchMoved(Touch* touch, Event *event) { // get touch point. auto point = Director::getInstance()->convertToGL(touch->getLocationInView()); _layerSlide->setPosition(point.x + _sliderX, 0); _swipeD = _swipeX -point.x; _swipeX = point.x; } void SlideView::onTouchEnded(Touch* touch, Event *event) { // swipe if (20 < fabs(_swipeD)) { if (_swipeD < 0) { if (0 < _sliderP) { _sliderP--; } } else { if (_sliderP < _sliderNum - 1) { _sliderP++; } } } else { // slide int sX = _layerSlide->getPosition().x; if ((sX < -_sliderSpan * _sliderP - _sliderSpan / 4 ) && _sliderP < _sliderNum - 1) { _sliderP++; } else if ((-_sliderSpan * _sliderP + _sliderSpan / 4 < sX) && 0 < _sliderP) { _sliderP--; } } slidePage(); } void SlideView::onTouchCancelled(Touch* touch, Event *event) { slidePage(); } void SlideView::slidePage() { _layerSlide->runAction(EaseOut::create(MoveTo::create(0.3, Point(-_sliderSpan * _sliderP, 0)) ,2)); } |
HelloWorldScene.h
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h" #include "SlideView.h" USING_NS_CC; class HelloWorld : public cocos2d::Layer { private: // スライドビュー SlideView* _viewSlide; // スライドを載せるレイヤー Layer* _layerSlide; public: static cocos2d::Scene* createScene(); virtual bool init(); CREATE_FUNC(HelloWorld); }; #endif // __HELLOWORLD_SCENE_H__ |
HelloWorldScene.cpp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
#include "HelloWorldScene.h" USING_NS_CC; Scene* HelloWorld::createScene() { auto scene = Scene::create(); auto layer = HelloWorld::create(); scene->addChild(layer); return scene; } bool HelloWorld::init() { if ( !Layer::init() ) { return false; } // スライドビューを生成して表示 _viewSlide = SlideView::create(); _viewSlide->setSpan(500); _viewSlide->setNum(3); this->addChild(_viewSlide); // スライドのレイヤーのポインタをスライドビューに渡す _layerSlide = Layer::create(); _viewSlide->addSlide(_layerSlide); // スライドのレイヤーにスライドを載せる auto slide1 = Sprite::create("HelloWorld.png"); slide1->setPosition(Point(320, 320)); _layerSlide->addChild(slide1); auto slide2 = Sprite::create("HelloWorld.png"); slide2->setPosition(Point(820, 320)); _layerSlide->addChild(slide2); auto slide3 = Sprite::create("HelloWorld.png"); slide3->setPosition(Point(1320, 320)); _layerSlide->addChild(slide3); return true; } |
スライドビューを生成するところとかスライドを載せるところとかをもっとスマートに書ければと思うのですが、ゲームを作っている最中はとりあえず動けばそのまま作業を進めてしまうのでどうしても書きっぱなしな感じになります。こうしてブログでまとめるとキレイに書き直したくなります。
