本文目录
如何自适应屏幕尺寸
1.首先，在网页代码的头部，加入一行viewport元标签。 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。 2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%;或者width:auto;3、相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。body {font: normal 100% Helvetica, Arial, sans-serif;}上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1 {font-size: 1.5em;}然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。small {font-size: 0.875em;}small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
cocos2dx 怎么获得spine动画大小
1、利用导数和函数图像解题。2、当x=0时，x的导数为1，sinx的倒数也是1。3、当x》0时，sinx的导数0时sinx《x，xx。4、或者，1.8版本以上的atlas做了修改，在第二行添加了size，所以只要删除size这一行即可。5、动作制作的时候如果层级有发生改变或者切换了skin，slot，请K帧一下，修改的部分：draworder和bone，一般首尾都K一下就行了。6、别忘记newskeletonanimation在create时候最后一个参数scale。
如何使用cocos2dx-jsbinding 来处理分辨率适配
辨率适配的核心思想是缩放，也就是layer.scale函数，但是一定要是等比缩放，如果用layer.scaleX或者layer.scaleY函数，虽然可以把游戏画面非常简单的搞成分辨率适配成没有黑边，但是整个游戏画面已经被拉伸或者压挤，不能达到我们需要的效果。 游戏中一般有3大类层。 1.大于屏幕的层，可实现拖动、缩放或者可以随着角色移动移动场景画面的,一般这种场景为主城、副本等等。 2.居中的层，一般是同时基于水平方向和竖直方向居中的，也有基于一个方向居中的。这种一般为ui弹层。 3.靠边的层，一般是ui，这些ui分别是紧贴屏幕边缘。 以上几种类型是基本的类型，当然某一个场景可能是上面几种层类型的组合。比如一个传统九宫格的战报场景，人物的排列是基于居中的，ui分布是靠边的，实现的时候我们将人物和ui分别绘制再2个layer中，每个layer基于相应的类型进行缩放，就可以达到想要的效果。 下面分别来说明下，三种类型的layer如何做缩放。 第一种：这种其实最简单，因为这种层的底图超过屏幕（一般都超出很多，因为要做移动和多点缩放，或者要随着角色移动至少一屏），所以只要做一个通用缩放就可以，何谓通用缩放，还是看代码// 获取屏幕尺寸 var size = cc.Director.getInstance().getWinSize(); this.designResolution = cc.size(960,640); // 获取高宽系数 var widthRatio = size.width/this.designResolution.width,heightRatio = size.height/this.designResolution.height; if (widthRatio !=1 || heightRatio!=1){ // 按照比例小的系数去进行缩放 if (widthRatio《heightRatio){ this._scaleRatio = widthRatio; }else{ this._scaleRatio = heightRatio; } }else{ this._scaleRatio = 1; }this.setScale(this._scaleRatio);复制代码第二种：在上面通用缩放的基础上设定层的坐标，使之可以上下左右居中var size = cc.Director.getInstance().getWinSize(); 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来设定它的锚点。this._uiLayerMap = this._uiLayerMap || {}; if (this._uiLayerMap){ return this._uiLayerMap; } var layer = cc.Layer.create(); layer.setPosition(cc.p(0,0)); this._uiLayerMap = layer; // 根据directionType设定锚点位置 switch (directionType){ case 1: layer.setAnchorPoint(cc.p(0,1)); break; case 2: layer.setAnchorPoint(cc.p(0.5,1)); break; case 3: layer.setAnchorPoint(cc.p(1,1)); break; case 4: layer.setAnchorPoint(cc.p(1,0.5)); break; case 5: layer.setAnchorPoint(cc.p(1,0)); break; case 6: layer.setAnchorPoint(cc.p(0.5,0)); break; case 7: layer.setAnchorPoint(cc.p(0,0)); break; case 8: layer.setAnchorPoint(cc.p(0,0.5)); break; } this.addChild(layer);复制代码当然，这些层生成完以后还需要做一个通用缩放。使用的时候要注意2点。1.设定坐标的时候要按照size.width和size.height来计算大小，例如我设定屏幕右下角ui的坐标为sprite1.setPositon(size.width,50);sprite2.setPositon(size.width-80,50);sprite3.setPositon(size.width-160,50);复制代码2.针对每个角的layer需要选择上面设定相应锚点layer。
