如何使用cocos2dx-jsbinding 来处理分辨率适配

布满荆棘的人生 2022-08-02 14:33 185阅读 0赞

首先说点题外话，对于任何大型项目来说，coding的规范重要，在cocos2dx-jsbinding这个框架中，javascript是一个绝对核心的脚本语言，99%的游戏逻辑都由js完成。脚本的编写量绝对大于大多数的web项目，掌握javascript的扎实的基础至关重要，这里推荐一篇好的博客，由浅入深的讲解从js的一些编写习惯，到设计模式，值得细细品读。汤姆大叔的博客：[http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html][http_www.cnblogs.com_TomXu_archive_2011_12_15_2288411.html]。  
  
   进入正题，今天讨论的是如何使用jsb来处理移动平台的多分辨率适配问题。就目前的移动平台来讲，分辨率可谓是百花齐放，且不谈安卓平台各种稀奇古怪的分辨率，就ios平台有ip4(960\*640),ip5(1136\*640),ipad2,mini(1024\*768),ipad3,ipad4(2048\*1536),这四种当然今后还有更多，如何保证一套代码，一套资源通吃android和ios平台，同时游戏的布局又不会发生偏差，能够恰当好处，这是我们追求的目标。cocos2d-x本身提供有几种屏幕适配API，但是并不是非常完美，并且每种方案都有自己的缺陷，我介绍一下如何用js来处理这个棘手的问题。首先我们要定义实际使用资源的分辨率，也就是美术设计是用的分辨率大小，这里我们将资源定义为960\*640，这个分辨率有什么好处?第一是这个分辨率是一个中等类型的分辨率，它比1年前的主流android分辨率800\*480)要大,比新出的高端机型分辨率要小一点，同时也是主流的ios分辨率。选资源大小有一个要点，不能选的过高，这样对低端机型就是浪费，你需要花很大的下载来存这些资源，不值得，但是选太小的也不行，高端机型上又模糊无比，所以选择一个中等的分辨率。  
  
   分辨率适配的核心思想是缩放，也就是layer.scale函数，但是一定要是等比缩放，如果用layer.scaleX或者layer.scaleY函数，虽然可以把游戏画面非常简单的搞成分辨率适配成没有黑边，但是整个游戏画面已经被拉伸或者压挤，不能达到我们需要的效果。  
  
   游戏中一般有3大类层。  
  
   1.大于屏幕的层，可实现拖动、缩放或者可以随着角色移动移动场景画面的,一般这种场景为主城、副本等等。  
  
   2.居中的层，一般是同时基于水平方向和竖直方向居中的，也有基于一个方向居中的。这种一般为ui弹层。  
  
   3.靠边的层，一般是ui，这些ui分别是紧贴屏幕边缘。  
  
   以上几种类型是基本的类型，当然某一个场景可能是上面几种层类型的组合。比如一个传统九宫格的战报场景，人物的排列是基于居中的，ui分布是靠边的，实现的时候我们将人物和ui分别绘制再2个layer中，每个layer基于相应的类型进行缩放，就可以达到想要的效果。  
  
   下面分别来说明下，三种类型的layer如何做缩放。  
  
   第一种：这种其实最简单，因为这种层的底图超过屏幕（一般都超出很多，因为要做移动和多点缩放，或者要随着角色移动至少一屏），所以只要做一个通用缩放就可以，何谓通用缩放，还是看代码

1.  // 获取屏幕尺寸  
    
2.          var size = cc.Director.getInstance().getWinSize();  
    
3.         this.designResolution = cc.size(960,640);   
    
4.          // 获取高宽系数  
    
5.          var widthRatio = size.width/this.designResolution.width,heightRatio = size.height/this.designResolution.height;  
    
6.          if (widthRatio !=1 || heightRatio!=1)\{  
    
7.              // 按照比例小的系数去进行缩放  
    
8.              if (widthRatio<heightRatio)\{  
    
9.                  this.\_scaleRatio = widthRatio;  
    
10.             \}else\{  
    
11.                 this.\_scaleRatio = heightRatio;  
    
12.             \}  
    
13.         \}else\{  
    
14.             this.\_scaleRatio = 1;  
    
15.         \}  
    
16.   
    
17.         this.setScale(this.\_scaleRatio);

复制代码

第二种：在上面通用缩放的基础上设定层的坐标，使之可以上下左右居中

1.  var size = cc.Director.getInstance().getWinSize();  
    
2.          this.setPosition(cc.p((size.width-this.designResolution.width\*this.\_scaleRatio)/2,(size.height-this.designResolution.height\*this.\_scaleRatio)/2));

复制代码

第三种：这种layer是紧靠屏幕边缘的，所以我们要分别设定他的锚点，我们将整个layer分为9个点，刚好呈现一个“米”字型，其中每个点都需要new一个单独layer来设定它的锚点。

1.  this.\_uiLayerMap = this.\_uiLayerMap || \{\};  
    
2.          if (this.\_uiLayerMap\[directionType\])\{  
    
3.              return this.\_uiLayerMap\[directionType\];  
    
4.          \}  
    
5.          var layer = cc.Layer.create();  
    
6.          layer.setPosition(cc.p(0,0));  
    
7.          this.\_uiLayerMap\[directionType\] = layer;  
    
8.          // 根据directionType设定锚点位置  
    
9.          switch (directionType)\{  
    
10.             case 1:  
    
11.                 layer.setAnchorPoint(cc.p(0,1));  
    
12.                 break;  
    
13.             case 2:  
    
14.                 layer.setAnchorPoint(cc.p(0.5,1));  
    
15.                 break;  
    
16.             case 3:  
    
17.                 layer.setAnchorPoint(cc.p(1,1));  
    
18.                 break;  
    
19.             case 4:  
    
20.                 layer.setAnchorPoint(cc.p(1,0.5));  
    
21.                 break;  
    
22.             case 5:  
    
23.                 layer.setAnchorPoint(cc.p(1,0));  
    
24.                 break;  
    
25.             case 6:  
    
26.                 layer.setAnchorPoint(cc.p(0.5,0));  
    
27.                 break;  
    
28.             case 7:  
    
29.                 layer.setAnchorPoint(cc.p(0,0));  
    
30.                 break;  
    
31.             case 8:  
    
32.                 layer.setAnchorPoint(cc.p(0,0.5));  
    
33.                 break;  
    
34.         \}  
    
35.         this.addChild(layer);

复制代码

当然，这些层生成完以后还需要做一个通用缩放。使用的时候要注意2点。  
  
1.设定坐标的时候要按照size.width和size.height来计算大小，例如我设定屏幕右下角ui的坐标为

1.  sprite1.setPositon(size.width,50);  
    
2.  sprite2.setPositon(size.width-80,50);  
    
3.  sprite3.setPositon(size.width-160,50);

复制代码

2.针对每个角的layer需要选择上面设定相应锚点layer。

源引：http://blog.csdn.net/kepoon/article/details/11972183

[http_www.cnblogs.com_TomXu_archive_2011_12_15_2288411.html]: http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html