Cocos2d-JS屏幕适配(NO-BORDER模式)

  次阅读 作者:智能小宝 来源:互联网 2015-09-28 10:51 我要评论(0)

距离上一篇博客已经有将近一年时间,没有写什么一个是因为一直太忙,另外一个也是不知道要写什么,还是做游戏项目,不过从手游转到了Html5游戏,继续使用Cocos2d,语言换成了JS。

不多叙旧,这次简单说下Cocos2d-JS的适配问题,上一个项目(手机QQ空间玩吧的《点点萌萌消》,欢迎试玩^_^)没有考虑分辨率适配问题,直接采用的是640*960的方式进行开发,基本上不用考虑适配问题。

当前这个项目需要考虑屏幕白边问题,今天有点闲工夫,就慢慢研究了一上午,还有点意思。说有点意思是因为NO_BORDER模式需要计算屏幕尺寸,而这也将解决屏幕适配问题。

接着在代码中对这个适配层进行位置和大小的计算,如果依然按照这篇博客的代码写,可能不能得到想要的效果,因为Cocos2d-JS是有点不同的。

现在我们重新考虑NO_BORDER模式的原理。

代码中对NO_BORDER的解释是:Theentire application fills the specified area, without distortion but possiblywith some cropping,while maintaining the original aspect ratio of theapplication.(翻译即是:程序将是充满整个区域,做裁剪而不是变形处理,裁剪不会改变原有宽高比)

如上图所示:在iPhone4s(我目前用的)的手机上,如果说设计高宽为1280*720(设计高宽通过cc.view.setDesignResolutionSize函数设置),那么屏幕上显示的高宽到底是多少呢?而这个高宽也是我们适配层需要设置的大校

不是960*640,也不是1280*720,是不是有点意思了。

对于NO_BORDER模式,手机屏幕大小作为摄像头的尺寸,设计高宽作为对象(舞台),那么,在这个例子中,摄像头需要做放大操作,使得屏幕高度能容纳720的像素展示。

感性的做一下放大操作,可以感知适配层大小必须为宽960.0*(720.0/640.0)和高720.0。

理性分析下,很快适配层的大小就计算出来了代码见后面的dockUI函数。

NO_BORDER适配合适分辨率差异大且UI相对独立的情况,效果算是比较理想的吧。

var _LayoutUtil = cc.Class.extend({

//UI层

dockUI: function(panelUI) {

panelUI.setAnchorPoint(0.5, 0.5);

var size = cc.view.getFrameSize();

var wsize = cc.director.getWinSize();

var rw = wsize.width/size.width;

var rh = wsize.height/size.height;

panelUI.setPosition(wsize.width/2, wsize.height/2);

if(rw > rh){

panelUI.setContentSize(cc.size(size.width*rh, size.height*rh));

}else{

panelUI.setContentSize(cc.size(size.width*rw, size.height*rw));

}

},

//锚点默认为0.5

/**

* 停靠在左边,距离左边距intervalX个像素

* @param{CCNode} node节点

* @param{int} intervalX 边距

* @return {null}无

*/

dockLeft: function(node, intervalX, isCenter) {

intervalX = intervalX | 0;

var parent = node.getParent();

var pos = node.getPosition();

var size = node.getContentSize();

if(isCenter){

node.setPosition(size.width / 2 + intervalX, node.getParent().getContentSize().height/2);

}else{

node.setPosition(size.width / 2 + intervalX, pos.y);

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...