我看了两篇转载的文章有了些大概的了解。也在hellocpp里面实验过。现在来cocos2d-x屏幕适配总结一下:
主要分两大类:
竖版游戏:
设置解释器的大小,正常解释器的大小应该与设计分辨率的大小是一致的
eglView.init(“HelloCpp”,640,960);
eglView.setFrameSize(640,960);
设计分辨率:640*960
分辨策略:kResolutionFixedWidth(保持传入的设计分辨率宽度不变,根据屏幕分辨率修正设计分辨率的高度。)
例:CCEGLView::sharedOpenGLView()->setDesignResolutionSize(640, 960,kResolutionFixedWidth);
屏幕缩放因子:setContentScaleFactor(最大资源宽度/设计分辨率宽度)
例:Director::getInstance()->setContentScaleFactor(largeResource.size.width/designResolutionSize.width);
应该是:Director::getInstance()->setContentScaleFactor(640/designResolutionSize.width);(让这个图片再宽度上全显示在屏幕上,高度会按宽度的比例等比缩放)
设计分辨率: ResolutionSize
sprite当前分辨率下的位置
精灵应该是相对位置:
百分比形式:sprite->setPosition(Point(Screen.width* sprite.x/ ResolutionSize.width,Screen.Height * sprit.y / ResolutionSize.Hight);
还有一种相对于一个固定控件的方法:(待研究)
测试的一个方法:
注: 游戏底图的高度 需要按照 分辨率最大的设置的高度一致(现在最大的一款大概是480*854) 长宽比1.779,设计是640宽度,算出来最大高度大概是1138.666
所以底图的最大高度就是1138.6666
注:开始也试过不改变画布大小的方法,就是按照640*960来弄, 然后底图换成比较大的,然后设置layout(层容器的setSize),但是设置的时候,他只超向上的方向上缩放,所以导致整体图像不能居中了,这样就有问题了。有人说通过设置锚点来搞定,完全扯淡,
锚点:贴图中——调整位置的点,所以必须是贴图,想layer 那样的东西 设置锚点完全是没用的
说下我怎么实现了这种比较烂的方法:
编辑界面是在cocostduio界面下编辑的:
注意事项:
Panel是画布也就是层容器,这里要设置画布大小:640*1139(保持宽度,高度会跟着宽度来等比缩放)
ImageView 也就是图片控件大小同画布大小(640*1139)这就是底图有底图就弄一个,没有就弄成透明的背景,所有的控件都要建在这个控件上,因为在图片控件建立的控件,
原点是改图片的中心点。x轴向右,y轴向上
cityback 底板: 底板上不能建立控件,因为我们一会要对底板进行拉伸,如果底板上子节点,这样子节点也会拉伸,图标拉伸了。这样肯定不行。
其他的图标我们建在:ImageView 上,大概有个参照,按照640*960的效果图,加控件(1139-960/2上下都要留出这样的大小,也就是居中), 如果是一块不想改变的控件区就弄一个层容器来弄(下面调整位置的时候调整层容器,里面的东西不管了。)
载入我们cocostudio的 .ExportJson 或json文件.ExportJson导出的是大图,也就是资源拼合成一张图,然后通过*.plist定位到了大图的位置,通过Rect来取出相应的图片,提升了渲染速度,json 也就是小图,没有拼合的, cocostudio 导入模板的时候,要是json
640*960 下:
设置读出来的: layout 居中显示
local VisibleSize = CCDirector:sharedDirector():getVisibleSize()
local layoutw, layouth = layout:getContentSize()
local VisibleOriginPoint = CCDirector:sharedDirector():getVisibleOrigin()
layout:setPosition(VisibleOriginPoint.x/2, VisibleOriginPoint.y/2+VisibleSize.height/2-layouth/2)
// VisibleOriginPoint 当前屏幕的原点坐标,这种分辨策略是0
这样640*960下就没有任何问题了
我们在480*854 下面查看效果: 鉴于这个高宽比,会显示出来640*1139的大小(也就是上下都有一截黑边,然后图标全都在中间)
在面我们来调整位置和缩放一些底板(这样就保证了图标什么的没有任何问题,只拉伸了底板)
说一下调整位置:很重要的
首先:为什么需要在图片上建控件,不能在层容器上直接建控件。
A 的坐标 (比如:100, 100) B的坐标(100,-100)
在高度上乘以一个大于1的比例: 比如1.2A(100,120) B(100, -120)都是向两边进行放大
在高度上乘以一个小于1的比例:比如0.8A(100, 80) B(100,-80) 都向中间进行缩进
所以就是让所有的东西进行居中对齐了嘛
调整位置函数函数:(只调整高度,因为宽度被保持)
function adjustPosition(layout, nameTabel)
local VisibleSize = CCDirector:sharedDirector():getVisibleSize()
local DesignResolutionSize = CCEGLView:sharedOpenGLView():getDesignResolutionSize()
local scaley = VisibleSize.height / 960
for k, v in pairs(nameTabel) do
local widget = layout:getChildByName(v)
widget:setTouchEnabled(true)
local widgetx, widgety = widget:getPosition()
widget:setPosition(widgetx, widgety*scaley)
CCLuaLog(“widgetx, widgety*scaley = “..widgetx..” “..widgety*scaley)
end
end//缩放底板
function adjustBackScaleY(layout, nameTabel)
local VisibleSize = CCDirector:sharedDirector():getVisibleSize()
local DesignResolutionSize = CCEGLView:sharedOpenGLView():getDesignResolutionSize()
local scaley = VisibleSize.height / 960
for k, v in pairs(nameTabel) do
local widget = layout:getChildByName(v)
widget:setTouchEnabled(true)
widget:setScaleY(scaley)
–local widgetx, widgety = widget:getPosition()
–widget:setPosition(widgetx, widgety*scaley)
–CCLuaLog(“widgetx, widgety*scaley = “..widgetx..” “..widgety*scaley)
end
end
这样就可以了: 同一行上的可以用一个层容器包含起来,那样调位置的时候,只要调这个层容器就可以,不过也可以一个个弄
如果不想改变在960 640 的图标的间隔:
那就见个层容器 640 * 960大小的,把除了底板 和 需要向下对齐的东西 放在里面就可以了。
因为层容器建在图片上,层容器是在下面的,大于1的情况是向下调整的,而我们希望他向上调整,小于1的情况向上调整,而我们希望向下调整。
所以函数做如下调整:
function adjustLayoutPosition(layout, nameTabel)
local VisibleSize = CCDirector:sharedDirector():getVisibleSize()
local DesignResolutionSize = CCEGLView:sharedOpenGLView():getDesignResolutionSize()
local scaley = VisibleSize.height / 960
for k, v in pairs(nameTabel) do
local widget = layout:getChildByName(v)
widget:setTouchEnabled(true)
local widgetx, widgety = widget:getPosition()
widget:setPosition(widgetx, widgety/scaley)
CCLuaLog(“widgetx, widgety*scaley = “..widgetx..” “..widgety/scaley)
end
end
最后效果480*854
<!–more–>
最后看来这是一种很烂的方法,而且还很复杂
横版游戏:
分辨策略:kResolutionFixedHight(保持传入的设计分辨率高度不变,根据屏幕分辨率修正设计分辨率的宽度。)
例:CCEGLView::sharedOpenGLView()->setDesignResolutionSize(640, 960, kResolutionFixedHight);
屏幕缩放因子:setContentScaleFactor(最大资源宽度/设计分辨率宽度)
例:Director::getInstance()->setContentScaleFactor(largeResource.size.height/designResolutionSize.height);
应该是:Director::getInstance()->setContentScaleFactor(960/designResolutionSize.height);(让这个图片在高度上全显示在屏幕上,宽度会按高度的比例等比缩放)
设计分辨率: ResolutionSize
sprite当前分辨率下的位置
精灵应该是相对位置:
百分比形式:sprite->setPosition(Point(Screen.width* sprite.x/ ResolutionSize.width,Screen.Height * sprit.y / ResolutionSize.Hight);