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