在想cocos适配之前,我们想想网页是怎么适配的。浏览器有各种规格,网页的一般做法是:背景图片铺满,网页内容保持在背景图片上居中,就实现了适应或者适配。css一般这样:

.bg{
height:582px;
background-image:url('images/top_team_bg.png');
background-size:auto 100%;
background-position: center center;
background-repeat: no-repeat;
} .content {
width:1000px;
margin:0 auto;
}

 核心:

background-position: center center;

因为是背景图片,所以横向显示可以不全,但永远会显示中间的部分,就是我们的网页内容。content部分宽度是固定的,并且是居中的。
回到cocos上,原理完全一样,让背景铺满,内容居中。
背景铺满,在背景是顶级节点的情况下(和canvas平级),可以用Widget,left:0;right:0;
content居中我们用js去控制,下面的代码,在编辑器里我们设置content的宽度是2048,ts代码:

adaptScreen(items: Array<cc.Node>) {
if(cc.director.getVisibleSize().width <= 2048) return;
if(items instanceof Array) {
items.forEach(item => {
try {
item.x += Math.floor((cc.director.getVisibleSize().width - 2048) / 2 )
} catch(e) {
cc.log(e)
}
})
} else {
cc.log(items)
cc.log('传入的参数必须是数组')
}
}

  

cocos creator游戏适配这事的更多相关文章

  1. Cocos Creator 游戏开发

    Cocos Creator 游戏开发 https://www.cocos.com/products#CocosCreator 一体化编辑器: 包含了一体化.可扩展的编辑器,简化了资源管理.游戏调试和预 ...

  2. cocos creator屏幕适配的一些知识点

    一. cocos creator 提供的几种适配策略 EXACT_FIT: 整个应用程序在指定区域可见,无需尝试保留原始纵横比.可能会出现失真,应用程序会被拉伸或压缩.也就是说设计分辨率的长和宽不会等 ...

  3. kbengine_js_plugins 在Cocos Creator中适配

    kbengine_js_plugins 改动(2017/7/6) 由于Cocos Creator使用严格模式的js,而原本的kbengine_js_plugins是非严格模式的,因此为了兼容和方 便C ...

  4. Cocos Creator iPhoneX适配的解决办法

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  5. Cocos Creator采坑:原来使用Cocos Creator做游戏,是有服务器!!!

    我傻傻的以为,我们没有服务器. 今天上传测试代码,测试才发现! 原来我们真的是有服务器的!只不过是一个本地的服务器~!需要服务器打开,然后,扫码才能访问!! 为了证明我们是有服务器的,我做了一下测试 ...

  6. Cocos Creator实现的《点我+1》

    一.前言 在学习Cocos中,需要一些东西来练手,于是前段时间就开发仿照一款公司之前的产品<点我+1>来做,仿照过程中,所有的算法逻辑都是自己研究的,并没有参考公司代码,也没有使用公司的美 ...

  7. Cocos Creator代码编辑环境配置

    1,可以使用较为适合js的webstorm,亦可以采用VS: 2,若需要webstorm,在下载之后,在文件,设置内外部编辑器选用webstorm.exe,即可: 3,Visual Studio Co ...

  8. Cocos Creator中按钮组件数组的使用

    Cocos Creator游戏开发中经常使用到按钮,特别是大量按钮的情况,此时使用数组来管理这些按钮就显得更具通用性.我大致走了一下官方的示例,好像没有发现有这个小内容(或者有,但我却是没有找到),于 ...

  9. 反复横跳的瞄准线!从向量计算说起!基于射线检测的实现!Cocos Creator!

    最近有小伙伴问我瞄准线遇到各种形状该怎么处理?如何实现反复横跳的瞄准线?最近刚好在<Cocos Creator游戏开发实战>中看到物理系统有一个射线检测,于是,基于这个射线检测,写了一个反 ...

随机推荐

  1. heap实现

    //STL提供的是Max heap,使用vector作为底部容器 //push_heap算法:首先将元素放到堆所对应的数组的末端,然后从该节点开始向上调整, //若当前结点键值比父结点大,则兑换位置, ...

  2. XCode 7 高速切换代码窗体和文档窗体

    XCode 7 高速切换代码窗体和文档窗体 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  3. cc2540 usbdongle 安装驱动失败的终极解决方法 【原创,多图】

    Ghost winxp win7系统安装CC2540 usbdongle CDC驱动程序 [重要提示] 因为非常多朋友使用Ghost系统.导致安装cdc驱动时安装不成功,出现 "INF中的服 ...

  4. LeetCode 350. Intersection of Two Arrays II (两个数组的相交之二)

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  5. splay专题复习——bzoj 3224 &amp; 1862 &amp; 1503 题解

    [前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...

  6. leetcode题解||Palindrome Number问题

    problem: Determine whether an integer is a palindrome. Do this without extra space. click to show sp ...

  7. 深分页(Deep Pagination)

    取回阶段 | Elasticsearch: 权威指南 | Elastic https://www.elastic.co/guide/cn/elasticsearch/guide/current/_fe ...

  8. POJ 3221 Diamond Puzzle.

    ~~~~ 题目链接:http://poj.org/problem? id=3221 显然是BFS找最优解.但是终止条件不好写.看到有一仅仅队交上去一直TLE. 比赛完了看题解原来是以目标状态为起点,B ...

  9. oc72--NSArray排序

    // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property (nonatomi ...

  10. SQL service 自动解决依赖包 验证

    依赖关系解决 ============================================================================================= ...