适应手机分辨率问题

Cocos2d-x JavaScript
#1

我想请问下，cocos2d-js是如何自适应手机分辨率，在哪里能设置呢？在main.js文件里面好像是写死分辨率了，不过手机分辨率不同那么就无法适应了。

#2

cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.FIXED_HEIGHT);

main.js里面这句话最后一个参数有五个选择，分别代表了不同的适配方案，具体可以看代码注释或者运行看看效果

#3

你好，我还想问问，图片尺寸问题适应屏幕怎么解决好，感觉拉伸好难看。

#4

可以在做游戏使用资源的时候，图片就用中等大小的，这样缩放和拉伸，效果就不会太糟

#5

— Begin quote from ____

引用第2楼jason_tsai于2014-08-21 16:17发表的 回 1楼(superdragon) 的帖子 :
你好，我还想问问，图片尺寸问题适应屏幕怎么解决好，感觉拉伸好难看。 http://www.cocoachina.com/bbs/job.php?action=topost&tid=224916&pid=1035281

— End quote

你的问题是非等比拉伸的问题，还是分辨率低导致显示质量不高？

#6

都有，但主要是等比拉伸问题

#7

关于屏幕适配方案可以参考这个文档
http://cocos2d-x.org/docs/manual/framework/html5/v2/resolution-policy-design/zh

#8

假如我有两套资源，一套是 320480，另一套是 640960，程序如何做到，对应去适配呢？

#9

哎，我也很想知道，不能适配就只能拉伸图片了。

#10 
var frameSize = cc.view.getFrameSize();
    if (frameSize.height > SmallResource.size.height)
    {
        cc.loader.resPath = "res/iphonehd";
        cc.view.setDesignResolutionSize(
            MediumResource.size.width,
            MediumResource.size.height,
            cc.ResolutionPolicy.SHOW_ALL
        );

        ScaleFactor = Math.min(MediumResource.size.height/DesignResolutionSize.height,
                    MediumResource.size.width/DesignResolutionSize.width);
    }
    else
    {
        cc.loader.resPath = "res/iphone";
        cc.view.setDesignResolutionSize(
            SmallResource.size.width,
            SmallResource.size.height,
            cc.ResolutionPolicy.SHOW_ALL
        );

        ScaleFactor = Math.min(SmallResource.size.height/DesignResolutionSize.height,
                    SmallResource.size.width/DesignResolutionSize.width);
    }

    // set font size by ScaleFactor
    initFontSize();


```



var ScaleFactor = 1;
var DesignResolutionSize = cc.size(320, 460);
var SmallResource  = new Resource(cc.size(320, 480), "res/iphone");
var MediumResource = new Resource(cc.size(640, 960), "res/iphonehd");

var FontSize = {
    loadingFontSize: 30,
    levelFontSize: 75,
    numberFontSize : 50,
    messageFontSize : 21,
    scoreFontSize : 21,
    bestFontSize : 21
};

function initFontSize()
{
    for (var fs in FontSize) {
        FontSize = FontSize * ScaleFactor;
    }
}


```


现在用得方案是这样，根据ScaleFactor去设置字体大小，位置等。
#11

虽然cocosjs提供了一套适配机制，但是还是没法完全满足绝大部分机型的全屏（这里说的全屏是不会出现黑边），可以采用quick-x的多屏适配机制的，可以保证不出现黑边（看背景图做的是不是很大了），界面布局也采用QX的布局方式，应该够用了。这个是个人做微信游戏的总结，好多公司会纠结于这个黑边问题，他们会问为什么网页能全屏而且等比缩放，你们这个就不行呢（(/ □ )）