cocos适配_cocos creator屏幕适配 - CSDN
  • cocos 适配

    2018-07-25 15:45:15
    因为搞了好几次cocos creator发现每次换工作都会有适配的问题,网上也没找到一个完美的办法。自己总结了一个适配方案目前这两年好像基本没出什么问题,这里记录一下原理,有不对的或者更好的方法,欢迎大家告诉我。 ...

           因为搞了好几次cocos creator发现每次换工作都会有适配的问题,网上也没找到一个完美的办法。自己总结了一个适配方案目前这两年好像基本没出什么问题,这里记录一下原理,有不对的或者更好的方法,欢迎大家告诉我。

            我们知道cocos有三种适配方案,Fit Height,按Fit Width和showAll。如果只用一种不管怎么都不能满足所有屏幕前两种要么是有黑边要么就是不能显示全部的内容,showAll能保证全部显示但是会有黑边,这个黑边还不能用放大背景挡住所以直接就把这个抛弃了。

          然后我就想能不能用其他的两个方法实现showAll这样既能保证全部显示而且还可以显示放大的背景了。就按照showAll的思路取到实际屏幕大小和设计分辨率的比例。如果w1/w2 < h1/h2我就用Fit Height不然就Fit Width,然后背景放大,放大的比例就是这两个中大的哪一个啦。如果你用的是cocos的话可能你还需要对子控件位置做下对应比例的位移或者用的是相对位置。如果用cretor的话直接用widget控制就好。这种方式可以满足能全部显示你游戏内容而且每个组件直接的距离只会增加不会减少。最后上个代码

    展开全文
  • CocosCreator适配

    千次阅读 多人点赞 2019-07-16 17:23:02
    推荐阅读: ...今天给大家提供三种CocosCreator常用的三种适配方式,废话不多说,直接上代码 /************************** * * @author:shirln * @time:2019.7.15 */ cls.Ground = cc.Class({ ...

    推荐阅读:

    今天给大家提供三种CocosCreator常用的三种适配方式,废话不多说,直接上代码

    /**************************
     * 
     * @author:shirln
     * @time:2019.7.15
     */
    
    cls.Ground = cc.Class({
        extends: cc.Component,
    
        statics: {
            
            // 所有UserInfo节点列表
            pool: [],
    
            ///
            // update
    
        },
    
        properties: {
            mode: { default: 1 },
        },
    
        // LIFE-CYCLE CALLBACKS:
    
        // onLoad () {},
    
        start() {
            gm.Ground = this;
    
            // 视口大小
            var csz = cc.view.getCanvasSize();
            // 设计分辨率
            var des = new cc.Vec2(1080, 1920);
            // 进行分辨率适配
            cc.view.setDesignResolutionSize(des.x, des.y, cc.ResolutionPolicy.SHOW_ALL);
    
            // fitWidth
            var sx = csz.width / des.x;
            // fitHeight
            var sy = csz.height / des.y;
            // show_all
            var min = Math.min(sx, sy);
            // EXACT_FIT
            var max = Math.max(sx, sy);
    
            /// show_all下缩放背景
            if (this.mode == 1) {
                // 等比例黑边
                this.node.setScale(max / min, max / min);
            }
            else if (this.mode == 2) {
                // 拉伸填充
                this.node.setScale(sx == min ? 1 : max / min, sy == min ? 1 : max / min);
            }
            else if (this.mode == 3) {
                // 等比例裁剪
                this.node.setScale(max / max, max / max);
            }
    
        },
    
        // update (dt) {},
    
    });
    
    

    使用方法:在需要适配的面板上添加该脚本,并为其指定适配模式(1,2,3),三选一
    这里需要注意的是,当你使用ScrollView组件时,可能会出现bug:scrollView种超过区域的内容不会被裁剪,例如,红框范围为ScrollView:
    在这里插入图片描述
    解决方法:为添加view添加widget组件,并为其指定对其目标为ScrollView,如下:
    在这里插入图片描述

    展开全文
  • 【唠叨】  手机的屏幕大小千差万别,如现在流行的安卓手机屏幕大部分长宽比例为16:9。而iPhone 5S的长宽比例为71:40(接近16:9)... 要想让你的程序在各种手机上都能很好的呈现游戏画面,就需要进行屏幕适配。 ...

    【唠叨】

        手机的屏幕大小千差万别,如现在流行的安卓手机屏幕大部分长宽比例为16:9。而iPhone 5S的长宽比例为71:40(接近16:9),也有预测说iPhone 6S的长宽比例也将会是主流的16:9。另外还有一些平板电脑为4:3、16:10、5:4等等。当然还有一些其他的牌子可能屏幕比例也不一样。

        要想让你的程序在各种手机上都能很好的呈现游戏画面,就需要进行屏幕适配

     

    【致谢】

        http://gl.paea.cn/contents/10adab2de4f4bf1c.html

     

    【小知识】

        分辨率:是指屏幕图像的精密度,即显示器所能显示的像素有多少。

                如:分辨率480×320的意思是水平方向含有像素数为480个,垂直方向像素数320个。

                屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。

                同时分辨率也反映了屏幕长宽比例(如15:10)。

     

    【3.x】

        请移步:http://shahdza.blog.51cto.com/2410787/1550089

     

     


     

    【屏幕适配】

     

    1、两个分辨率

        1.1、窗口分辨率

        在main.cpp中有个设置窗口分辨率的函数。该函数是设置了我们预想设备的屏幕大小,也就是应用程序窗口的大小。

    //
    	eglView->setFrameSize(480, 320);
    //

        

        1.2、设计分辨率(可视区域)

        在AppDelegate.cpp中也有个设置设计分辨率的函数。该函数是设置了我们游戏设计时候的分辨率,也就是可视区域的大小,也就是说设计者初衷的游戏可视区域的分辨率屏幕大小。

        但是对于每个用户来说,他们使用的设备不一定是(480/320)的,比如手机有大有小。

        而后面的kResolutionShowAll,意思是按照原比例(480/320)进行放缩以适配实际屏幕大小。

    //
    	CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480,320,kResolutionShowAll);
    //

        

        以下贴了三张对比图,加深理解。

        (1)这是原图片大小,窗口大小为480 * 320。

    wKiom1QGyKzzrEiyAAEGcXbYaxQ985.jpg

     

        (2)若设置窗口大小为setFrameSize(960, 640),而不设置设计分辨率kResolutionShowAll的情况下,图片不放缩,原图还是480 * 320。

    wKioL1QGyLDDGT0EAAF1kC25cqU991.jpg

        

        (3)设置了kResolutionShowAll之后,图片放缩到适配整个屏幕960 * 640 了。

    wKiom1QGyK2hDNN0AAL4YpbsOus524.jpg

     

     

    2、五种适配模式

        从上面的讲解我们可以了解到,setFrameSize()是设置了窗口大小(即屏幕的实际大小),而这个参数只是为了我们开发时作为模拟参照,在实际手机上运行时,手机的屏幕大小是我们无法设置的。

        而屏幕适配的关键在于setDesignResolutionSize(),通过它来设置可视区域的分辨率以及屏幕适配模式。该函数的前两个参数为分辨率(即屏幕长宽比例),而最后一个参数则是适配的模式。

     

        2.1、适配模式

        (1)kResolutionExactFit   :拉伸变形,使铺满屏幕。

        (2)kResolutionNoBorder   :按比例放缩,全屏展示不留黑边。

                                        (长宽中小的铺满屏幕,大的超出屏幕)

        (3)kResolutionShowAll    :按比例放缩,全部展示不裁剪。

                                        (长宽中大的铺满屏幕,小的留有黑边)

        (4)kResolutionFixedWidth :按比例放缩,宽度铺满屏幕。

        (5)kResolutionFixedHeight:按比例放缩,高度铺满屏幕。

     

        2.2、计算方法

        假设:屏幕分辨率(fWidth,fHeight) ; 设计分辨率(dWidth,dHeight)。

              放缩因子:k1 = fWidth/dWidth ; k2 = fHeight/dHeight。

        则适配后的分辨率大小如下:

        (1)kResolutionExactFit   :( dWidth * k1         , dHeight * k2         )

        (2)kResolutionNoBorder   :( dWidth * max(k1,k2) , dHeight * max(k1,k2) )

        (3)kResolutionShowAll    :( dWidth * min(k1,k2) , dHeight * min(k1,k2) )

        (4)kResolutionFixedWidth :( dWidth * k1         , dHeight * k1         )

        (5)kResolutionFixedHeight:( dWidth * k2         , dHeight * k2         )

     

        2.3、有图有真相

            屏幕大小:400 X 400 。

            可视区域大小:480 X 320 。

            根据上面的计算方法,自己慢慢琢磨吧。i_f32.gif

    wKioL1QG8-7hZS8WAADziEkMLFg490.jpg        wKiom1QG8-zxDYe8AAEkbDd4bjs111.jpg

     

    wKioL1QG8-_DqPM-AAEZ_8A6D34121.jpg        wKiom1QG8-zBwDRiAAD00smIMss790.jpg

     

    wKioL1QG8-_TuGsLAAD39oAYrEo645.jpg        wKioL1QG8--giZa-AAEgbplGZdw587.jpg

     

    3、横竖换屏

        cocos2dx开发的游戏,在手机上运行的时候,默认是横屏的

     

        3.1、Android

        AndroidManifest.xml文件中

        (1)android:screenOrientation = "landscape"   //横屏显示(默认)

        (2)android:screenOrientation = "portrait"    //竖屏显示

    wKioL1QG91fAaz39AACtvtKDipE264.jpg

     

        3.2、IOS

    //
    	- (NSUInteger) supportedInterfaceOrientations{
    		//横屏显示
    		//return UIInterfaceOrientationMaskLandscape;
    		
    		//竖屏显示
    		return UIInterfaceOrientationMaskPortrait;
    	}
    //

     

    4、屏幕大小及坐标

        (1)WinSize        :屏幕大小

        (2)VisibleSize    :可视区域大小

        (3)VisibleOrigin  :可视区域的左下角坐标

    //
    	CCDirector::sharedDirector()->getWinSize()
    	CCDirector::sharedDirector()->getVisibleSize();
    	CCDirector::sharedDirector()->getVisibleOrigin();
    //

     

        图解:

    wKiom1QG-yKzBaDwAACvTwPsE8c748.jpg

    展开全文
  • cocos2dx分辨率适配

    2018-04-24 15:46:16
    cocos2dx分辨率适配

    分辨率适配的这项工作完成的任务是让图片资源随着设备分辨率的变化自动放大和缩小,假如没有做这项工作(比如不使用引擎的默认支持方案),则会当屏幕分辨率和设备分辨率不一致的时候,屏幕上出现黑边或者显示不完全.

    【基础概念】分辨率:是指屏幕图像的精密度,即显示器所能显示的像素有多少。如:分辨率480×320的意思是水平方向含有像素数为480个,垂直方向像素数320个。屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。同时分辨率也反映了屏幕长宽比例.通常设计分辨率会采用市场目标群体中使用率最高的设备的屏幕分辨率,比如目前安卓设备中 800 x 480和 1280 x 720 两种屏幕分辨率,或 iOS 设备中 1136 x 640 和 960 x 640 两种屏幕分辨率。这样当美术或策划使用设计分辨率设置好场景后,就可以自动适配最主要的目标人群设备。

    资源分辨率:图片本身的分辨率

    屏幕分辨率:用户实际设备的分辨率,可以通过director->getOpenGLView()->getFrameSize()获取,director->getOpenGLView()->setFrameSize()设置.也就是说,我们想观察游戏在何种分辨率设备上的运行效果时,只需要设置setFrameSize()就可以了.

    设计分辨率:游戏运行时资源不需要缩放的正好合适的分辨率,可以通过director->getOpenGLView()->setDesignResolutionSize()设置.

    假如不使用设计分辨率(注释掉applicationDidFinishLaunching中的director->getOpenGLView()->setDesignResolutionSize(960, 640, ResolutionPolicy::SHOW_ALL);),一个为苹果4S(960*640)设计的图在苹果6(1334*750)的显示效果是这样的:


    这种留有黑边,并且背景图不居中的效果显然不能满足需要,接下来看setDesignResolutionSize(960, 640, ResolutionPolicy::SHOW_ALL)效果:


    可以看到图片自动居中,并且整体放大了,并且保持了长款比例,缺点是左右留有黑边.传给setDesignResolutionSize的第三个参数ResolutionPolicy::SHOW_ALL被称之为适配策略,除了SHOW_ALL之外再来看其他几个策略的效果:

    ResolutionPolicy::EXACT_FIT:


    可以看到EXACT_FIT策略的优势是能填满整个屏幕,但是对图片有拉伸

    NO_BORDER:


    可以看到NO_BORDER策略的优势是可以填满整个屏幕,但是图片会超出屏幕范围.


    展开全文
  • cocos2dx3.2 ——屏幕适配

    万次阅读 多人点赞 2014-09-26 21:17:21
    文章转载:shahdza 的BLOG
  • cocos creator之分辨率、屏幕适配

    万次阅读 2018-08-28 14:29:00
    屏幕适配的基本原理 三种分辨率 设计分辨率 在cocos creator编辑器中设计的屏幕分辨率,一般就是Canvas的大小 上图中的Canvas的大小是640*960,那么设计分辨率也是640*960 获取设计分辨率的代码如下 let ...
  • Cocos2d-x屏幕适配

    千次阅读 2017-01-11 15:57:19
    Cocos2d-x屏幕适配
  • 【屏幕适配】 1、两个分辨率  1.1、窗口分辨率  在main.cpp中有个设置窗口分辨率的函数。该函数是设置了我们预想设备的屏幕大小,也就是应用程序窗口的大小。 // eglView-&gt;setFrameSize(480, 320)...
  • 百度搜索Android打开关闭虚拟导航栏 找到以下几个结果... 这里确定要使用这几行代码 View rootView=getWindow().getDecorView(); ...rootView.setSystemUiVisibility(View.SYSTEM_UI_
  • Cocos2d 屏幕适配方案

    千次阅读 2016-05-30 11:53:17
    为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 Cocos2D-X(当前稳定版:2.0.4) 中,提供了相应的解决方案,以方便我们在设计游戏时,能够更好的适应不同的环境。   而在设计游戏之初,决定着我们...
  • CocosCreator适配手机

    2019-03-01 21:02:51
  • Cocos2dxActivity.java

    2020-07-30 23:31:12
    这里是已经改好的cocos适配安卓底部导航栏隐藏的一段代码文件。只需放入工程替换掉原来就可以了。
  • Cocos2d-x 屏幕适配新解

    2017-10-18 19:48:54
    为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 cocos2d-x(当前稳定版:2.0.4) 中,提供了相应的解决方案,以方便我们在设计游戏时,能够更好的适应不同的环境。 而在设计游戏之初,决定着我们屏幕适配...
  • 在上一章教程,我们在 SHOW ALL 模式下,用了 缩放 的方式去实现多分辨率适配,左右或者上下可能会出现部分看不见的情况,但是对于「背景适配」这个场合,这种方式无疑是一种合适的方案的。但是,对于游戏画面的内容...
  • 暂时在网上还没找到一个让cocos2d开发的IPhone游戏快速地适应IPAD2 Retina模式的教程。确实,如果在项目开展初期没有规划好“一个app,多处适配”的话,到了开发末期才来做分辨率适配是比较麻烦的事,因为需要涉及到...
  • cocos2dx游戏之适配iPhoneX屏幕

    千次阅读 2018-05-15 20:22:39
    最近项目中有关于做iPhoneX屏幕适配问题,关键是这个项目已经做的差不多了,唯独iPhoneX屏幕没有适配,然后这个适配任务就落到我身上了,好了,话不多说,开始记录。。。 开始搞时在网上也查看了很多资料,但是由于...
  • 简单说下之前我使用的适配方案,也让大家了解下发展史,后面会贴出具体的操作设置,以及lua代码 2013年左右 那基本属于很早期cocos了,那个时候我经历过3种关于适配的方法 纯代码写界面,刚入行的时候,算是纯苦力输出...
  • cocos2dx屏幕适配

    2016-09-06 16:02:26
    手机的屏幕大小千差万别,如现在流行的安卓手机屏幕大部分长宽比例为16:9。而iPhone 5S的长宽比例为71:40(接近16:9),也有预测... 要想让你的程序在各种手机上都能很好的呈现游戏画面,就需要进行屏幕适配。 【致
  • 再谈cocos2d-x屏幕适配

    千次阅读 2015-05-30 14:56:55
    一直以来,在 cocos2d-x 平台中如何用一套资源适配全屏幕都是每个程序的梦想。随手百度都可以搜索到很多关于 cocos2dx 适配的文章,但是看完之后的感觉仍然是不知道如何具体操作,所以自己参考网上其他人的帖子,并...
  • 在AppDelegate::applicationDidFinishLaunching()函数里加上 CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 800, kResolutionExactFit);
1 2 3 4 5 ... 20
收藏数 5,253
精华内容 2,101
关键字:

cocos适配