Creating Image Gallery using cocos2d-x3.0 and NetBeans IDE 8.0
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
- Linux Kubuntu 14.04
- cocos2d-x 3.0
- Androind NDK, SDK
- 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.
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
Replace HelloWorldScene.h, and HelloWorldScene.cpp with the attached code attachment:ImageGallery.zip
HelloWorldScene.h
#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
#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.
std::vector<std::string> myImages={
"image001.png",
"image002.png",
"image003.png"
};
Calculate Aspect ratio and scaling the image proportional to its width and height
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
pointStartPos=touch->getLocation();
In onTouchEnded method
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
Director::getInstance()->setDepthTest(true);
Director::getInstance()->replaceScene(TransitionPageTurn::create(0.5f, HelloWorld::scene(i_index), is_left));
or TransitionSlideInL/TransitionSlideInR
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
SimpleAudioEngine::sharedEngine()->playEffect("ouch.wav");
Happy gaming :;ok
000001.png (106.6 KB)
000003.png (182.1 KB)
000004.png (651.1 KB)
ImageGallery.zip (827.8 KB)
