cocos2d-html5- v2.0 等比缩放

最近比较忙，好久没看过ch5了。现在ch5已经正式发布，api和模板文件有挺大的变化。我相信，如果有基础的人适应新的变化是没有问题的，所以我没打算重写之前的关于ch5的博客。

看了新版本的helloworld例子，发现游戏界面自适应浏览器窗口进行缩放。认真看了这个例子后发现了一些不足之。

1. 调整缩放的函数居然写在一个scene里面

2. 缩放效果不是很好，当窗口的高宽比和目标高宽比不同时，会出现滚动条

3. 没有垂直和水平居中

于是我对其进行了修改：

1. 将调整缩放的函数抽出来发到一个单体里面

[javascript] 
//GameFunc.js 游戏的全局函数 
var Game=Game||{}; 
Game.Func=(function(){ 
    var instance; 
    function constructor() { 
        return { 
            adjustSizeForWindow:function () { 
                //目标高宽比 
                var targetRatio=cc.originalCanvasSize.height/cc.originalCanvasSize.width; 
                //窗口高宽比 
                var winRatio=window.innerHeight/window.innerWidth; 
 
                //重新设置画布的大小，使画布高宽比与目标高宽比相同。 
                //根据比例，设置高度或宽度与窗口大小一样 
                if (winRatio<=targetRatio) { 
                    cc.canvas.height = window.innerHeight; 
                    cc.canvas.width=window.innerHeight/targetRatio; 
                }else{ 
                    cc.canvas.height = window.innerWidth*targetRatio; 
                    cc.canvas.width=window.innerWidth; 
                } 
 
                //缩放比例 
                var xScale = cc.canvas.width / cc.originalCanvasSize.width; 
 
                //设置垂直和水平居中 
                var parentDiv = document.getElementById("Cocos2dGameContainer"); 
                if (parentDiv) { 
                    parentDiv.style.width = cc.canvas.width + "px"; 
                    parentDiv.style.height = cc.canvas.height + "px"; 
                    parentDiv.style.position = "absolute"; 
                    parentDiv.style.top = "50%"; 
                    parentDiv.style.left = "50%"; 
                    parentDiv.style.marginLeft = (-cc.canvas.width / 2) + "px"; 
                    parentDiv.style.marginTop = (-cc.canvas.height / 2) + "px"; 
                } 
                //重置坐标 
                cc.renderContext.translate(0, cc.canvas.height); 
 
                //内容缩放 
                cc.renderContext.scale(xScale, xScale); 
                cc.Director.getInstance().setContentScaleFactor(xScale); 
            } 
        } 
    } 
 
    return{ 
        getInstance:function () { 
            if (!instance) { 
                instance=constructor(); 
            }; 
            return instance; 
        } 
    } 
})(); 

这是一个延时实例化的单体，因为在游戏为加载好之前我们不能用一些ch5的类

2. 修改main.js，在游戏加载好后调整缩放，并监视窗口的resize

在applicationDidFinishLaunching函数中，在return之前添加以下代码

[javascript] 
Game.Func.getInstance().adjustSizeForWindow(); 
        window.addEventListener("resize", function (event) { 
            Game.Func.getInstance().adjustSizeForWindow(); 
        }); 

ok。。。