cocos waterfall effect

Development requirements: make the interface elements move in a waterfall flow from bottom to top. At the same time, users can control the flow speed by sliding up and down, so as to make choices

Development tool: Xcode

There are too many scenes for one play method in the project. If users choose the scene by sliding left and right or up and down, it will cause the loss of some users. Some users lack the ability to explore the game content. They prefer to present as many scenes as possible at one time and only play.

In this case, it is finally decided to use the form of waterfall flow for scene display. Users can understand all scenes without operation. At the same time, sliding operation is added so that users can browse all scenes faster or find the scenes they want to play faster.

There is a built-in update function in cocos, which can be called through the scheduleUpdate time timer to achieve the effect of moving all scenes up and form a waterfall flow.
The update function has a time parameter, which can be used to refresh the position. The human eye can't see the pause in the middle, so there's no need to worry about discontinuity.
Some codes are as follows:

scheduleUpdate();

void SelectAnimalScene::update(float date){
    for (int i=1; i<36; i++) {
        CCSprite* aniButton = (CCSprite*)this->getChildByTag(i);
        aniButton->setPositionY(aniButton->getPosition().y+1);
        CCLog("containHeight ====> %f",aniButton->getPosition().y);
        if (aniButton->getPosition().y>700) {
                aniButton->setPositionY(-1820);
        ColorManager::shared()->aniPosArr[i-1][1]=aniButton->getPosition().y;
}

In fact, the content is not complicated. In the above code, when the function is refreshed each time, the Y-axis coordinates of all scenes in the project are + 1. At the same time, it is necessary to calculate the Y-axis coordinates at the top and bottom of the whole screen to make the scenes connect head to tail without faults, so as to achieve a more coherent effect.

Manual sliding operation, which is more complex, needs to consider the position of stopping refreshing the scene when sliding, the sliding distance needs to be synchronized to the positions of all scenes, and the position of automatic refreshing needs to be consistent with the position of the last sliding after sliding

To stop the refresh, you can directly call the unscheduleUpdate() function, which corresponds to the scheduleUpdate() function that starts the refresh. You can call it when the user touches the screen and starts sliding.

Resetting the scene location is complicated, and many factors need to be considered. The codes in this project are as follows:

void SelectAnimalScene::resetAniPos(){
    for (int i=1; i<36; i++) {
        CCSprite* aniButton = (CCSprite*)this->getChildByTag(i);
        CCLog("containHeight ====> %d",ColorManager::shared()->aniPosArr[i-1][1]);
        CCLog("containHeight ====> %f",aniButton->getPosition().y);
        if (aniButton->getPosition().y>700) {   
            int index = aniButton->getPosition().y-700;+index;
                aniButton->setPositionY(-1820+index1);
        }else if(aniButton->getPosition().y<-1820){    
            int index = -1820-aniButton->getPosition().y;
            int index1 = moveDisY-index;
            aniButton->setPositionY(700+index1);
        }else if(aniButton->getPosition().y>=-1820 && aniButton->getPosition().y<=700){
            aniButton->setPositionY(aniButton->getPosition().y+moveDisY);
        }
        ColorManager::shared()->aniPosArr[i-1][1]=aniButton->getPosition().y;
    }
}

The key point is to calculate the up sliding distance, modify the Y coordinate of the moving scene, and ensure that there will be no fault when the user slides up and down, that is, to achieve the effect of seamless waterfall flow.

In addition, another important point is that when the user selects a scene to play in and then comes out, the positions of all scenes need to be consistent with those when he clicks in. This requires real-time storage of the positions of all scenes. The storage method depends on his habits. The last line of the above code

ColorManager::shared()->aniPosArr[i-1][1]=aniButton->getPosition().y;

That is, the coordinates of the scene are stored in real time.

On the whole, the principle of waterfall flow is relatively simple and easy to understand. The key point is that some coordinate details need to be carefully planned and designed according to the project to ensure the fluency of the effect!!!

The part about waterfall flow is basically the above. I hope I can help you!!!