Video Tutorial: Scrollable layer with Parallax (LevelHelper + Cocos2d-X)

A nice game level selection mechanism, particularly for "world" selection, is a scrollable layer that snaps to specific points. Also, I want to mix this with a parallax effect.

I've created a video tutorial that shows how to create this effect using LevelHelper, SpriteHelper and Cocos2d-x. Don't mind the sucky minimalistic "art" :)

It's my first video tutorial ever, so keep your expectations moderated :P

The process, as described in the video is:

• Create a Cocos2d-x project
• Create a Project in LevelHelper
• Use SpriteHelper to create the sprites
• Create the parallax layer in LevelHelper, using the new sprites
• Place the billboard sprites in LevelHelper, assigning them a special tag
• Export the Cocos2d-X code (would also work the same with Cocos2D)
• In XCode, handle both the touchmove and touchend events
• On touchmove move the parallax on a ratio of 1:1 with the gesture
• On touchend try to find the nearest snapping point, and trigger an animation to move the parallax to that point.

The source-code used in the tutorial is:

HelloWorldScene.h:
--------------------
inside the private section

LevelHelperLoader* loader;
LHParallaxNode* myParallax;

HelloWorldScene.cpp
----------------------
HelloWorld::HelloWorld()

loader = new LevelHelperLoader("ScrollableParalax.plhs");
myParallax = loader->paralaxNodeWithUniqueName("Parallax_1");

HelloWorld::ccTouchesMoved()

CCSetIterator it;
CCTouch* touch;

for( it = touches->begin(); it != touches->end(); it++) 
{
    touch = (CCTouch*)(*it);

    if(!touch)
        break;        

    CCPoint location = touch->locationInView();
    location = CCDirector::sharedDirector()->convertToGL(location);
        
    CCPoint prevLocation = touch->previousLocationInView();
    prevLocation = CCDirector::sharedDirector()->convertToGL(prevLocation);

    CCPoint touchDelta = ccpSub(location,prevLocation);

    if(NULL != myParallax)
    {
        CCPoint parallaxPosition = myParallax->getPosition();
        myParallax->setPosition(ccp(parallaxPosition.x + touchDelta.x, parallaxPosition.y + touchDelta.y));
    }
}

HelloWorld::ccTouchesEnded()

//find nearest selector

CCArray* sprTag = loader->spritesWithTag(SELECTOR);    

if(sprTag->count() == 0)
{
    return;
}

float minOffset = MAXFLOAT;

for(int i =0; i< sprTag->count(); ++i)
{
    LHSprite* curSprite = (LHSprite*)sprTag->objectAtIndex(i);
    float spritePosition = curSprite->getPositionX();
    
    CCSize screenSize = CCDirector::sharedDirector()->getWinSize();

    float centerPosition = screenSize.width/2 - 
        curSprite->getRealScale().width / 2;
    float offset = centerPosition - spritePosition;

    if(abs(offset) < abs(minOffset))
    {
        minOffset = offset;
    }
}

CCPoint parallaxPosition = myParallax->getPosition();

    
//if less than a threshold snap directly without any animation

if(abs(minOffset) < 50)
{
    myParallax->setPosition(
        ccp(parallaxPosition.x + minOffset, parallaxPosition.y));
}
else 
{
    myParallax->runAction(
        CCMoveBy::actionWithDuration(0.3f, ccp(minOffset, 0)));
}

HelloWorld::~HelloWorld

delete myParallax;
myParallax = NULL;