這篇文章中，我們將做個簡單的登錄界面，實現(xiàn)這樣的效果，無限滾動的背景，上面有兩個小鳥在飛翔，一個登錄按鈕，按鈕上面有兩個人物在奔跑。
目前項目的整體效果如下圖：
OK~~~開始，第一步，我們先新建一個空工程，如下圖： ?
接著我們新建幾個文件夾，比如預(yù)設(shè)體、場景、紋理、動畫、聲音等，做好分類，如下圖：
我們把我們需要的資源放進(jìn)去，一張背景圖，還有人物跑動的圖，小鳥的圖，還有bgm背景音樂，但注意，從網(wǎng)上down的資源里只有大圖，沒有對應(yīng)的plist文件，就無法計算切割大圖里的各個小圖。我們先用PS處理下大圖，如下圖：
使用切片工具把大圖切成各個小圖，保存，然后我們用TP軟件把各個小圖合成大圖跟對應(yīng)的plist文件，如下圖：
導(dǎo)出格式我們選cocos2d-x，可以看到會生成一張紋理大圖跟對應(yīng)的plist文件，接下來我們把所需的資源都導(dǎo)到項目工程里，如下圖：
資源導(dǎo)入后，我們新建一個場景，叫Menu，點擊Canvas，我們將設(shè)計分辨率改成1134*750，iphone6的分辨率，
接下來我們需要加個背景，直接把背景紋理拖進(jìn)去，用矩形變換工具等比例改變圖的大小，就是放大，大小超出紫色框，紫色框就是我們可見的屏幕范圍，如下圖：
但這樣只是背景不動，體驗會差點，所以我們做個背景無限滾動的效果。首先，我們新建一個空節(jié)點，叫bg，拖兩張一樣的背景圖到bg里，分別叫bg1，bg2，調(diào)整位置，無縫連接在一起，如下圖：
?
然后我們給節(jié)點bg添加一個animation組件，并且新建一個動畫clip，叫做menu_bg_loop_clip，把clip拖進(jìn)animation組件中，Play On Load打鉤，如下圖：
然后我們點擊動畫編輯器，打開左上角的開啟編輯模式，點擊屬性列表的?，我們選x，水平移動屬性，加入關(guān)鍵幀，需要移動的位置，模式選loop，修改sample跟speed可以調(diào)整動畫運行，速度如下圖：
不過感覺還是單調(diào)了點，我們加入兩只飛翔的小鳥，這樣的話，就感覺生動了許多。首先，我們加個一個精靈，叫birds1，給它加上兩個動畫組件，小鳥有兩個動畫，一個是自身扇翅膀的動畫，一個是位移的動畫，然后創(chuàng)建兩個clip，分別叫birds_fly_clip，birds_move_clip，如下圖：
首先我們編輯鳥自身的動畫，其實就是添加幀動畫，屬性列表添加spriteFrame，如下圖：
然后就是添加位移動畫了，這個可以隨便自己定義位置，第一個只鳥我們只是移動位置x，然后我們把鳥拖進(jìn)Preb中，做成預(yù)設(shè)體，同理第二只鳥也是一樣的操作，位移動畫我們可以跟第一只鳥不一樣，同樣做成預(yù)設(shè)體，，如下圖：
然后我們添加一個button，如下圖：?
接下來，我們在按鈕上添加兩個精靈，分別叫p1，p2，它們會做一個奔跑的動畫，幀動畫的添加從上同那樣操作就可以，如下圖：
OK，差不多了，這樣我們不用寫一行代碼，看看效果如何：
我感覺還行，就是gif效果不好~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
