Cocos creator 游戏背景循环滚动--Javascript编写

Cocos creator 制作游戏背景循环滚动--Javascript编写

     我们知道，在利用触控的Cocos creator编辑器开发2d横屏游戏的时候，经常需要利用背景的移动来模拟主角前进后退等效果。作为小白，在自己完成毕业设计和做一些案例的时候，接触到了这方面的东西，所以结合其他写者的方法，加上自己的一些代码，分享给需要的人。

• 了解原理

    简单来说就是场景中两张背景图片交替的在移动，在游戏的每帧中不断调整图片的位置，以实现背景的循环滚动效果。

• 实现步骤  
• 在编辑器上先添加三个节点，分别命名为backgruond，bg1，bg2，锚点都要设为（0,0）把准备好的图片拖到bg1和bg2的Sprite Frame处，如下图放置在场景中。
• 
  
• 编写代码实现

• cc.Class({
      extends: cc.Component,
  
      properties: {
         far_bg:[cc.Node],
         far_speed:0.2,
      },
  
     onLoad :function() {
         this.fixBgPos(this.far_bg[0],this.far_bg[1]);
     },
  
     fixBgPos:function(bg1,bg2){
         bg1.x = 0;
         //利用前一张图片的边框大小设置下一张图片的位置
         var bg1BoundingBox = bg1.getBoundingBox();
         bg2.setPosition(bg1BoundingBox.xMin,bg1BoundingBox.yMax)
     },
  
     update:function(dt){
         this.bgMove(this.far_bg,this.far_speed);
         this.checkBgReset(this.far_bg);
     },
  
     bgMove:function(bgList,speed){
         for(var index = 0; index < bgList.length; index++){
             var element = bgList[index];
             element.y -= speed;
         }
  
     },
  
     //检查是否要重置位置
      checkBgReset:function(bgList){
          var winSize = cc.director.getWinSize();
          var first_yMax = bgList[0].getBoundingBox().yMax;
          if(first_yMax<=0){
              var preFirstBg = bgList.shift();
              bgList.push(preFirstBg);
              var curFirstBg = bgList[0];
              preFirstBg.y = curFirstBg.getBoundingBox().yMax;
          }
      }
      
  });
  

  
  最终效果：图片移动不出现漏洞