目錄

我的開發環境：

使用cocos creator開發中涉及的主要內容：

使用cocos creator開發中碰到的問題及解決方案：

1：場景工程中沒有被依賴關聯的圖片聲音或者其它資源，匯出到微信後找不到

2：cocos creator微信排行榜子域問題

3 遊戲過程中要避免頻繁的建立與銷燬物件。在PC瀏覽器上測試時可能幀率比較穩定看不出來，釋出到微信上就會比較明顯了。

4：關於cocos creator UI適配

我的開發環境：

開發工具：cocos creator 1.9.3     vscode 1.26   chrome   微信web開發者工具（隨官方版本更新）

系統：win7 64

說明：由於主要是釋出到微信平臺及web平臺，所以沒有配置移動app相關的環境

cocos creator與其它開發工具的關聯配置在選單 Cocos Creator----->偏好設定 中

使用cocos creator開發中涉及的主要內容：

JS指令碼 

設計模式

 遊戲邏輯 

AI  

微信小遊戲API（主要是 分享 排行 廣告 使用者資訊） 

引擎相關（UI控制元件 UI的適配  UI管理  資源  場景層級編輯 網路  聲音  prefab）

使用cocos creator開發中碰到的問題及解決方案：

• 1：場景工程中沒有被依賴關聯的圖片聲音或者其它資源，匯出到微信後找不到

有些在場景工程中沒有指定而通過程式碼中動態載入的資源，cocos creator不會匯出到釋出目錄下，需要手動拷貝到對應的目錄或者在工程的場景樹中加一個隱藏的控制元件指定該資源。

• 2：cocos creator微信排行榜子域問題

由於微信排行榜的開放資料只能在子域獲取，所以相關的UI都應放在子域中。目前1.9.3版本中cocos提供的子域解決方案存在效率問題，所以排行榜最好做成一個彈出介面，平時不顯示。（如果一定要一直顯示，可以降低update的頻率）

cocos creator中子域排行榜在部分安卓手機上會出現模糊的現象，解決方案如下：

主域加上如下程式碼：

var openDataContext = wx.getOpenDataContext();
var sharedCanvas = openDataContext.canvas;
if (sharedCanvas) {
sharedCanvas.width = cc.game.canvas.width * 2;
sharedCanvas.height = cc.game.canvas.height * 2;
}

子域新增如下程式碼：

cc.view._convertPointWithScale=function(point) 
{
    var viewport = this._viewPortRect;
    point.x = (point.x - viewport.x) / (this._scaleX / 2);
    point.y = (point.y - viewport.y) / (this._scaleY / 2);
};

cc.view._convertTouchesWithScale=function(touches) 
{
    var viewport = this._viewPortRect, scaleX = this._scaleX / 2, scaleY = this._scaleY / 2, selTouch, selPoint, selPrePoint;
    for (var i = 0; i < touches.length; i++) 
    {
        selTouch = touches[i];
        selPoint = selTouch._point;
        selPrePoint = selTouch._prevPoint;
        selPoint.x = (selPoint.x - viewport.x) / scaleX;
        selPoint.y = (selPoint.y - viewport.y) / scaleY;
        selPrePoint.x = (selPrePoint.x - viewport.x) / scaleX;
        selPrePoint.y = (selPrePoint.y - viewport.y) / scaleY;
    }
};

• 3 遊戲過程中要避免頻繁的建立與銷燬物件。在PC瀏覽器上測試時可能幀率比較穩定看不出來，釋出到微信上就會比較明顯了。

可以在遊戲loading時預先建立遊戲中的物件，迴圈利用。以我做的貪吃蛇專案為例，示例如下（由於是初次接觸JS，有寫的不對的地方可以留言）

cc.Class({
    extends: cc.Component,

    properties: {
        //蛇頭
        SnakeHeadPrefab:
        {
            default: null,
            type: cc.Prefab,
        },

        //蛇身
        SnakeBodyPrefab:
        {
            default: null,
            type: cc.Prefab,
        },

        //食物
        SnakeFoodPrefab:
        {
            default: null,
            type: cc.Prefab,         
        },
        //--------------------------
        //蛇頭列表
        _SnakeHeadUseList:
        {
            default:[],
        },
        _SnakeHeadFreeList:
        {
            default:[],
        },
        //蛇身列表
        _SnakeBodyUseList:
        {
            default:[],    
        },
        _SnakeBodyFreeList:
        {
            default:[],    
        },

        //食物列表
        _SnakeFoodUseList:
        {
            default:[], 
        },

        _SnakeFoodFreeList:
        {
            default:[], 
        },
    },

    // LIFE-CYCLE CALLBACKS:
    
    //遊戲中用到的物件快取池
    onLoad ()
    {

        //預建立 10個頭，300個身子
        for(var i = 0; i < 11; ++i)
        {
            this._SnakeHeadFreeList.push(cc.instantiate(this.SnakeHeadPrefab));
        }
        for(var i = 0; i < 300; ++i)
        {
            this._SnakeBodyFreeList.push(cc.instantiate(this.SnakeBodyPrefab));
        }
        //300個食物
        for(var i = 0; i < 300; ++i)
        {
            this._SnakeFoodFreeList.push(cc.instantiate(this.SnakeFoodPrefab));
        }
    },

    start () 
    {

    },


    //獲取空閒的頭
    GetFreeHead()
    {
        return this.GetFree(this._SnakeHeadFreeList, this._SnakeHeadUseList, this.SnakeHeadPrefab);
    },

    //銷燬頭
    DelUseHead(delObj)
    {
        this.DelUse(this._SnakeHeadFreeList, this._SnakeHeadUseList, delObj);      
    },
      
    //獲取空閒的Body
    GetFreeBody()
    {
        return this.GetFree(this._SnakeBodyFreeList, this._SnakeBodyUseList, this.SnakeBodyPrefab);
    },

    DelUseBody(delObj)
    {
        this.DelUse(this._SnakeBodyFreeList, this._SnakeBodyUseList, delObj);      
    },

    //食物
    GetFreeFood()
    {
        return this.GetFree(this._SnakeFoodFreeList, this._SnakeFoodUseList, this.SnakeFoodPrefab)
    },

    DelUseFood(delObj)
    {
       return this.DelUse(this._SnakeFoodFreeList, this._SnakeFoodUseList, delObj);      
    },

    GetFree(freeList, useList, prefab)
    {
        if(freeList.length == 0)
        {
            cc.log("GetFree new ");
            var newObj = cc.instantiate(prefab);
            freeList.push(newObj);
            return this.GetFree(freeList, useList, prefab);
        }  
        var lastObj = freeList.pop();
        useList.push(lastObj);

        return lastObj;
    },

    DelUse(freeList, useList, delObj)
    {
        delObj.parent = null;

        var index = useList.indexOf(delObj); 
        if(index < 0 || index >= useList.length)
        {
            //cc.log('error DelUse index invalid------');
            return false;
        }  

        useList.splice(index, 1);
        freeList.push(delObj);
        return true;
    }
    

    // update (dt) {},
});

• 4：關於cocos creator UI適配

橫屏下，建議使用 Fit Width ,豎屏下，建議使用 Fit Height, 有些UI需要新增 Widget對齊掛件，以顯示在相對於螢幕左，頂，右，底的位置

我的遊戲是橫屏的，配置如下：

使用者資訊需要顯示在螢幕左上角：