Developers Manual > Cocos2d-x > How To > User Contributed Tutorials > Creating Image Gallery using cocos2d x3 0

Creating Image Gallery using cocos2d-x3.0 and NetBeans IDE 8.0

Contributed By: sayedtdm

Image Gallery can be used as part of any game as an help pages, game introduction or game Tutorial.
The tutorial include:

  • Setup of my Environment
  • Working with NetBeans IDE
  • Calculate Aspect ratio
  • Detect sliding direction
  • Using Scene Transition Effects
  • Playing sound effect

Setup of my Environment

  1. Linux Kubuntu 14.04
  2. cocos2d-x 3.0
  3. Androind NDK, SDK
  4. NetBeans IDE

There is many tutorials in this Wiki pages http://www.cocos2d-x.org/wiki/Getting_Started_with_Cocos2d-x and in this forum about the setup process and creating the hellowolrd first application in different platforms.
After setup every thing and all the dependencies , we can create a new project using

$cocos new -l cpp -p com.company.myGallery myGallery

to build the android APK

$cocos run -p android

Open NetBeans IDE

File -> New Project -> C/C++ Project with Existing sources->select your project directory
NetBeans will uses an existing makefile and existing sources. no need to configure any thing in the environment, and will give you auto-complete, and all what you need in an IDE.
NetBeans IDE C/C++ Project with Existing sources
NetBeans IDE auto-complete
Use F11 to build the application native Linux executable.
First time it take some time to build all cocos2d libraries.
Use F6 to run application native Linux executable
Run Image Gallery

Replace HelloWorldScene.h, and HelloWorldScene.cpp with the attached code attachment:ImageGallery.zip

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"

class HelloWorld : public cocos2d::Layer
{
    private :
        cocos2d::Point pointStartPos,pointEndPos;
        std::vector<std::string> myImages={
    "image001.png",
    "image002.png",
    "image003.png"
    };
public:
    unsigned int currImageIndex;
    static cocos2d::Scene* createScene();
    cocos2d::Scene* scene(unsigned int i_index);
    virtual bool init();  
    virtual void onEnter();
    void displayImage(Layer *myLayer);
    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
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
#include "HelloWorldScene.h"
USING_NS_CC;
#include "HelloWorldScene.h"
#include "SimpleAudioEngine.h"
using namespace CocosDenshion;
USING_NS_CC;
Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    layer->currImageIndex=1;
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    HelloWorld::displayImage(this);
    return true;
}
void HelloWorld::displayImage(Layer *myLayer)
{
    if(this->currImageIndex<1)this->currImageIndex=1;
    auto currImage = Sprite::create(myImages[this->currImageIndex -1]);
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Point origin = Director::getInstance()->getVisibleOrigin();
    currImage->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
    float aspectRatio=currImage->getContentSize().width/currImage->getContentSize().height;
    float newwidth=aspectRatio*visibleSize.height;
    float xR=newwidth/currImage->getContentSize().width ;
    float yR=visibleSize.height/currImage->getContentSize().height;
    currImage->setScaleX(xR);
    currImage->setScaleY(yR);
    myLayer->addChild(currImage);
}
void HelloWorld::onEnter()
{
    Layer::onEnter();
    auto listener1 = EventListenerTouchOneByOne::create();
     listener1->setSwallowTouches(true);
     listener1->onTouchBegan = [&](Touch* touch, Event* event){
         pointStartPos=touch->getLocation();
        return true;
     };
    listener1->onTouchMoved = [&](Touch* touch, Event* event){
    };

     listener1->onTouchEnded = [=](Touch* touch, Event* event){
        pointEndPos=touch->getLocation();
        bool is_left;
        unsigned int i_index=this->currImageIndex;
        if(pointEndPos.x - pointStartPos.x >0) {
            is_left=true;
            i_index++;
        }
        else {
            is_left=false;
            i_index--;
        }
        if(i_index==0) i_index=myImages.size();
        if(i_index>myImages.size()) i_index=1;
        this->currImageIndex=i_index;
        SimpleAudioEngine::sharedEngine()->playEffect("ouch.wav");        
        Director::getInstance()->setDepthTest(true);
        //Director::getInstance()->replaceScene(TransitionPageTurn::create(0.5f, HelloWorld::scene(i_index), is_left));
        if(is_left)Director::getInstance()->replaceScene(TransitionSlideInL::create(0.5f, HelloWorld::scene(i_index)));
        else Director::getInstance()->replaceScene(TransitionSlideInR::create(0.5f, HelloWorld::scene(i_index)));
     };  
     auto dispatcher = Director::getInstance()->getEventDispatcher();
     dispatcher->addEventListenerWithSceneGraphPriority(listener1, this);
}
Scene* HelloWorld::scene(unsigned int i_index)
{

    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    layer->currImageIndex=i_index;
    HelloWorld::displayImage(layer);
    scene->addChild(layer);
    return scene;
}

In the header file HelloWorldScene.h you can change to your images names, add more images,its preferred the images to be in PNG format.

1
2
3
4
5
6
        std::vector<std::string> myImages={
    "image001.png",
    "image002.png",
    "image003.png"
    };

Calculate Aspect ratio and scaling the image proportional to its width and height

1
2
3
4
5
6
    float aspectRatio=currImage->getContentSize().width/currImage->getContentSize().height;
    float newwidth=aspectRatio*visibleSize.height;
    float xR=newwidth/currImage->getContentSize().width ;
    float yR=visibleSize.height/currImage->getContentSize().height;
    currImage->setScaleX(xR);
    currImage->setScaleY(yR);

Detect sliding direction

In onTouchBegan method

1
         pointStartPos=touch->getLocation();

In onTouchEnded method

1
2
3
4
5
6
7
8
9
10
11
        pointEndPos=touch->getLocation();
        bool is_left;
        unsigned int i_index=this->currImageIndex;
        if(pointEndPos.x - pointStartPos.x >0) {
            is_left=true;
            i_index++;
        }
        else {
            is_left=false;
            i_index--;
        }

Using Scene Transition Effects

Use TransitionPageTurn
1
2
3
        Director::getInstance()->setDepthTest(true);
        Director::getInstance()->replaceScene(TransitionPageTurn::create(0.5f, HelloWorld::scene(i_index), is_left));

or TransitionSlideInL/TransitionSlideInR

1
2
3
4
        Director::getInstance()->setDepthTest(true);
        if(is_left)Director::getInstance()->replaceScene(TransitionSlideInL::create(0.5f, HelloWorld::scene(i_index)));
        else Director::getInstance()->replaceScene(TransitionSlideInR::create(0.5f, HelloWorld::scene(i_index)));

can read more about it here http://www.cocos2d-x.org/wiki/Transitions

Playing sound effect with sliding

1
        SimpleAudioEngine::sharedEngine()->playEffect("ouch.wav");       

Happy gaming :;ok

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.