Cocos creator 遊戲背景迴圈滾動--Javascript編寫
阿新 • • 發佈：2019-02-08
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; } } });
最終效果：圖片移動不出現漏洞
