cocos2dx：update方法实现游戏场景瀑布流滚动效果

cocos2dx：update方法实现游戏场景瀑布流滚动效果

设备/引擎：Mac（11.6）/cocos

开发工具：Xcode（13.0）

开发语言：Objective-c/c++

开发需求：让界面元素自下而上呈瀑布流运动，同时用户可以通过上下滑动来控制流动的快慢，从而进行选择

项目中有一个玩法的场景数过多，若采用用户自行左右滑动或上下滑动来选择场景，则会造成部分用户的流失，部分用户缺乏自我探索游戏内容的能力，他们更希望能一次性呈现尽可能多的场景，只负责玩即可。

介于此种情况，最后决定使用瀑布流的形态来进行场景展示，用户不做操作即可对所有场景有所了解，同时添加了滑动操作，以便用户可以更快的浏览所有场景，或更快的找到想玩的场景。

cocos中有一个自带的update函数，可以通过scheduleUpdate时间计时器来调用该函数，从而达到所有场景上移的效果，形成瀑布流。
update函数有一个时间的参数，可以通过这个参数来刷新位置，人的肉眼是看不出中间的停顿的，所以不必担心不连贯的问题。
部分代码如下：

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;
}

内容其实不复杂，如上代码部分，在函数每次被刷新的时候，对项目中的所有场景的Y轴坐标进行+1，同时需要计算一下整个屏幕最上、最下的Y轴坐标，用来让场景首尾相接，不出现断层的情况，来达到更加连贯的效果。

手动滑动操作，这部分比较复杂的是需要考虑滑动的时候，停止刷新场景的位置，滑动的距离需要同步到所有场景的位置，滑动结束后，自动刷新的位置需要与最后滑动的位置一致等等……

停止刷新可以直接调用unscheduleUpdate()函数，与启动刷新的scheduleUpdate()函数对应，在用户触摸屏幕开始滑动时调用即可。

重置场景位置部分比较复杂，需要考虑的因素也比较多，本次项目中的代码如下：

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;
    }
}

重点是计算好上滑下滑的距离，同时修改移动场景的Y坐标，且保证用户上滑下滑不会出现断层的现象，即实现无缝衔接的瀑布流效果。

除此之外，还有一个要点就是用户选择好一个场景进去玩之后，再出来的时候，所有场景的位置需要与点进去的时候一致，这个就需要将所有场景的位置进行实时的存储，存储方式看自己习惯，上述代码中的最后一行

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

即是对场景的坐标进行实时的存储。

整体而言瀑布流原理比较简单好理解，重点是其中的一些坐标细节需要根据项目进行细致的规划设计，保证效果的流畅性！！！

关于瀑布流的部分大体就是上述这些，希望能给大家提供到帮助！！！