好久沒用cocoscreator，有點手生，做個小項目練練手。
項目已經上傳至github，地址：
https://github.com/ccffee-jc/CocosCreatorDemo
圖片素材在上面有。
cocoscreator版本：2.3.2
正文
新建一個項目，項目，打開。
如上圖，1是放元素的地方，2是放資源的地方，3是遊戲的主視圖，4是消息欄，5是設置元素屬性的地方。
先別管那麼多，上手要緊。
設置屏幕方向
默認項目是橫屏，我們做像素鳥的話得用豎屏。
點擊上圖左上角1，這個是整個項目的根節點，設置這個節點的屬性可以改變屏幕的寬高。
設置上圖右邊2的W和H，默認是960640，我們要讓屏幕豎過來，所以這邊設置640960就行。
設置好之後就可以看到中間的框變豎着了。
在3處上面的assets處右鍵-新建-文件夾，名字輸入Scenes，然後ctrl+s保存，把途徑設置成這個文件夾。這個文件夾用於存放場景，每一個場景對應一個遊戲的界面，比如橡樹鳥，要設置兩個場景，一個主場景，一個開始場景（點開始，跳到主場景），那麼這邊就需要兩個場景，當然這個只是假設，後面也不一定做，先寫的好。
設置背景節點
這篇博只做一個輪轉着跑的背景。
下面先導入一下素材。
打開項目目錄，把下載到的素材放到和剛剛新建的Scenes文件夾同級的目錄下，再打開項目應該就有東西了。（素材在文章開頭github裏面有）
開始佈置場景
將上圖中的1的圖片拖至2的節點上，然後改名，右鍵複製，複製5個出來，名字隨意，我這邊是bg_1-5，然後修改每個圖片的大小和位置，修改3中的size，把W和H都設置成原來的兩倍，然後修改圖片位置，也就是3中的position屬性，有一個節點設置爲（0，0）然後其他節點分別以（0，0）點的節點爲基準，位移圖片width這麼長的x，左邊兩個右邊兩個，如果設置的和我一樣的話，座標從左到右應該是：
（-1132，0）（-566，0）（0，0）（566，0）（1132，0）
設置完成之後，圖片應該就和上面一樣了。
寫腳本，讓背景圖片無限滾動
先說下原理：這種背景圖片一直滾動是因爲在屏幕看不到的地方，又把圖片挪到了開始的地方，繼續滾動。
新建腳本文件：在Scenes目錄同級下新建一個文件夾，名字叫Script，用於存放腳本，在該目錄下新建一個javascript腳本文件，名字隨意，我叫的是bg，打開。我這邊用的編輯器是vscode，可以有補全提醒，推薦使用，編輯器請自行百度，或者你也可以留個言我看看能不能幫忙。
打開之後，把註釋的代碼都刪了，除了最後的update，把這個的註釋去了，應該是下面這個樣子的：
開始寫代碼，先把元素引用進來，讓元素能在代碼中被訪問到：
這邊代碼的用處是將剛剛新建的五個節點引入代碼。
properties這邊是用來應用外部參數的地方，在這個框框裏面按規範（和我一樣就行，可以改bg_1之類的名字）填寫之後，在應用腳本的節點上，就可以設置屬性，這個屬性就可以用着裏面的名字（bg_1）訪問到。
引入節點之後，之間寫背景輪轉的邏輯，在update的函數裏面這樣寫：
update這個函數會每幀執行，在這個函數裏面設置剛剛引入的bg_1的x座標就能改變背景的位置，將五個背景位置同時改變，畫面就會很平滑了。
在圖片位移到最後的座標，也就是x=-1135的位置之後，我們需要把圖片放到最開始的地方，也就是1135的位置，所以在上面有5個if，分別對應每個背景位移到最開始的邏輯。
整個腳本的代碼：
cc.Class({
extends: cc.Component,
properties: {
bg_1:{
default: null,
type: cc.Node
},
bg_3:{
default: null,
type: cc.Node
},
bg_2:{
default: null,
type: cc.Node
},
bg_4:{
default: null,
type: cc.Node
},
bg_5:{
default: null,
type: cc.Node
}
},
start () {
},
update (dt) {
this.bg_1.x-=3;
this.bg_2.x-=3;
this.bg_3.x-=3;
this.bg_4.x-=3;
this.bg_5.x-=3
if(this.bg_1.x <= -1135)this.bg_1.x = 1135;
if(this.bg_2.x <= -1135)this.bg_2.x = 1135;
if(this.bg_3.x <= -1135)this.bg_3.x = 1135;
if(this.bg_4.x <= -1135)this.bg_4.x = 1135;
if(this.bg_5.x <= -1135)this.bg_5.x = 1135;
},
});
這樣代碼就寫好了。配置一些跑跑吧。
配置腳本
點擊2的Main Camera節點，把1中的腳本拖入3的框框位置處，腳本就算掛載到了Main Camera這個節點上面了，然後將2處的節點對應着3處的Bg設置框，每個都設置進去。
配置好了，點擊4處的小三角，代碼就能跑起來了。