【用Cocos Creator給暗戀的女生寫一個遊戲(3)】——遊戲加載界面

恰好今天Creator1.2釋出，我們緊跟潮流，就用1.2開始做吧

X給遊戲起了一個名字47-21，其中深意自己體會。

(其實就是思琪名字的諧音，并且今年是她21歲的生日。。。當然你也可以了解為思琪愛你…)

因為X基本沒有什麼美術功底，是以一切簡約為主。。。

先看一下要相處一個月的東西

X要做一個豎屏的遊戲，是以他把布局改成了這個樣子

并把偏好設定改成了豎屏

建立場景 Load，并在Canvas節點下建立單色Sprite，并給其添加widget元件，使其充滿全屏，并調整背景顔色為天藍色

在Bg節點下建立一個Layout節點，調整大小為530x530，添加元件widget，使其水準垂直居中

其中Resize Mode 選為Children，這種模式會固定布局的大小，調整子節點的大小，padding是子節點距離邊界的距離，spacing是子節點之間的間距，将Sprite元件下的SpriteFrame圖檔删掉就可以去掉Layout的背景

建立兩個Animation Clip取名為Change1和Change2，給數字96835添加Animation元件，以數字9為例，把Clip拖入屬性面闆就可以添加一個動畫，然後點選動畫編輯視窗的左上角，就可以開始編輯動畫。

給動畫添加opacity屬性，在0：00和0：20添加兩個關鍵幀，并在第二個關鍵幀裡将節點的opacity改為0，動畫播放速度調整為0.1，點選一下播放按鈕就可以看見數字漸漸消失的效果，我們把動畫儲存，并給數字6 3 5都添加上剛才制作的動畫。

現在開始做數字8的動畫，同樣的步驟将Change2添加節點數字8的default clip屬性中，這裡我們添加兩個動畫屬性，一個是opacity，另一個是spriteFrame，第一個關鍵幀添加數字8圖檔，在第二個關鍵幀添加蛋糕圖檔，opacity改為0，其他屬性如圖

儲存後點選運作預覽，就會得到中間的幾個數字消失的效果，然後蛋糕從中間出現，最終定格在下面的畫面

添加進度條節點，調整大小位置如圖，progress設定為0，将Bar節點的顔色調整為綠色

調整進度條大小時可以調整scale屬性，子節點會随着父節點一起放大

建立腳本起名為“Load”，添加到Canvas節點上

Load.js

cc.Class({
    extends: cc.Component,

    properties: {
        loadBar: cc.ProgressBar,
    },

    // use this for initialization
    onLoad: function () {
        var load = function(){//十次過後加載下一場景
            this.loadBar.progress += 0.1;
            if(this.loadBar.progress > 0.9){
                cc.director.loadScene("Menu");
            }
        }
        this.schedule(load,0.8);
    },
});
           

這裡我們啟動了一個定時器，沒0.8秒讓進度條進一格，進度條滿時進入菜單界面，因為我們的遊戲本身比較簡單，是以這裡的加載界面隻是一個假象，意思意思就行了。。。

最後要把進度條節點拖入到它的引用框

然後建立一個Menu場景，現在運作一下