Annoying sprite drawing problem (cocos2d-2.1beta3-x-2.1.0)

cocos2d-x C++
#1

I try to recreate an animation that simulates a turning sunlight into the center of the screen, between two “layers” (foreground and background).

The background will be a “sky” (now, the green sprite).
The foreground will be a “island” (now, the blue sprite).
In between these two sprites I have 10 sprites with a “ray” everyone (now, the white sprite) rotating around the center.

The expected behavior is to display the rays, over the green (sky) sprite but under the blue (island) sprite.
But there is a problem annoying iOS: ray sprites are drawn incorrectly, passing the sprite of the island. In Android not seen any strange behavior.

This is my code ( bellow the init() of my TestLayer.cpp, a CCLayer child).
(I’m using the VisibleRect “helper” class from TestCPP)

    CCSprite* sky = CCSprite::create("Img/HomeMenuLayer_Cielo.png");
    sky->setPosition(ccpAdd(VisibleRect::top(), ccp(0, -sky->getContentSize().height/2)) );
    this->addChild(sky, -50);

    CCSprite* island = CCSprite::create("Img/HomeMenuLayer_Isla.png");
    island->setPosition(ccpAdd(VisibleRect::bottom(), ccp(0, island->getContentSize().height/2)) );

    this->addChild(island, -10);

    // Rayos de sol
    int nRayos = 10;
    float radio;
    CCRotateBy* rotate;

    CCNode* nodoRayos = CCNode::create();    
    CCSprite* rayo;

    for(int i = 0; i < nRayos; i++)
    {
        rayo = CCSprite::create("Img/HomeMenuLayer_Brillo.png");

        radio = rayo->getContentSize().width;

        //rayo->setOpacity(50);

        rayo->setAnchorPoint(ccp(-0.1, 0.5f ));
        rayo->setPosition(ccpAdd(
                                 VisibleRect::center(),
                                 ccp(
                                     (cos(-2*M_PI*i/nRayos)),
                                     (sin(-2*M_PI*i/nRayos))
                                     )));
        rayo->setRotation(CC_RADIANS_TO_DEGREES(-2*M_PI*i/nRayos));

        nodoRayos->addChild(rayo, -(15+i));

        rotate = CCRotateBy::create(30, CC_RADIANS_TO_DEGREES(2*M_PI));
        rayo->runAction(CCRepeatForever::create(rotate));
    }

    this->addChild(nodoRayos, -15);

Some screenshots:
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/screenshot/IMG_0138.PNG
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/screenshot/IMG_0139.PNG
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/screenshot/IMG_0140.PNG
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/screenshot/IMG_0141.PNG
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/screenshot/IMG_0142.PNG

Resources in Img/:
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/HomeMenuLayer_Brillo.png
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/HomeMenuLayer_Cielo.png
http://dl.dropbox.com/u/164329/Cocos2Dx/sunlight/HomeMenuLayer_Isla.png

Tested with:
cocos2d-2.1beta3-x-2.1.0
In:
* iPhone 4s (FAIL)
* Samsung Galaxy S3, I9300

(I have not tried in cocos2d-2.0-x-2.0.4)

#2

Here are a couple of things you can try…

Change the ordering of how you add the children to the root node.

or

Try to enable Depth Test.
CCDirector::sharedDirector()->setDepthTest(true);