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。。。

补充：移动开发 , 其他 ,