cocos2d-html5- v2.0 等比缩放

最新推荐文章于 2022-08-08 09:45:10 发布

原创最新推荐文章于 2022-08-08 09:45:10 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#constructor #function #游戏 #浏览器 #api

javascript 同时被 2 个专栏收录

9 篇文章

订阅专栏

cocos2d-html5

8 篇文章

订阅专栏

本文介绍了cocos2d-html5 v2.0版本中游戏界面自适应浏览器窗口缩放的问题及改进方法。作者发现了原版示例的不足，包括缩放函数位置、缩放效果不佳和居中问题。作者将缩放函数抽取到单独的单体中，并在游戏加载后调整缩放，同时监听窗口resize事件以实现更好的等比缩放和居中效果。文章提供了一个改进后的示例链接和代码下载地址。

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

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

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

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

3. 没有垂直和水平居中

于是我对其进行了修改：

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

//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之前添加以下代码

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

ok。。。

示例地址：http://www.conciz.com/ice/cocos2d4/

代码下载：http://vdisk.weibo.com/s/fkp9E/1349848745