cocos creator游戏适配这事
在想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游戏适配这事的更多相关文章
- Cocos Creator 游戏开发
Cocos Creator 游戏开发 https://www.cocos.com/products#CocosCreator 一体化编辑器: 包含了一体化.可扩展的编辑器,简化了资源管理.游戏调试和预 ...
- cocos creator屏幕适配的一些知识点
一. cocos creator 提供的几种适配策略 EXACT_FIT: 整个应用程序在指定区域可见,无需尝试保留原始纵横比.可能会出现失真,应用程序会被拉伸或压缩.也就是说设计分辨率的长和宽不会等 ...
- kbengine_js_plugins 在Cocos Creator中适配
kbengine_js_plugins 改动(2017/7/6) 由于Cocos Creator使用严格模式的js,而原本的kbengine_js_plugins是非严格模式的,因此为了兼容和方 便C ...
- Cocos Creator iPhoneX适配的解决办法
研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...
- Cocos Creator采坑:原来使用Cocos Creator做游戏,是有服务器!!!
我傻傻的以为,我们没有服务器. 今天上传测试代码,测试才发现! 原来我们真的是有服务器的!只不过是一个本地的服务器~!需要服务器打开,然后,扫码才能访问!! 为了证明我们是有服务器的,我做了一下测试 ...
- Cocos Creator实现的《点我+1》
一.前言 在学习Cocos中,需要一些东西来练手,于是前段时间就开发仿照一款公司之前的产品<点我+1>来做,仿照过程中,所有的算法逻辑都是自己研究的,并没有参考公司代码,也没有使用公司的美 ...
- Cocos Creator代码编辑环境配置
1,可以使用较为适合js的webstorm,亦可以采用VS: 2,若需要webstorm,在下载之后,在文件,设置内外部编辑器选用webstorm.exe,即可: 3,Visual Studio Co ...
- Cocos Creator中按钮组件数组的使用
Cocos Creator游戏开发中经常使用到按钮,特别是大量按钮的情况,此时使用数组来管理这些按钮就显得更具通用性.我大致走了一下官方的示例,好像没有发现有这个小内容(或者有,但我却是没有找到),于 ...
- 反复横跳的瞄准线!从向量计算说起!基于射线检测的实现!Cocos Creator!
最近有小伙伴问我瞄准线遇到各种形状该怎么处理?如何实现反复横跳的瞄准线?最近刚好在<Cocos Creator游戏开发实战>中看到物理系统有一个射线检测,于是,基于这个射线检测,写了一个反 ...
随机推荐
- heap实现
//STL提供的是Max heap,使用vector作为底部容器 //push_heap算法:首先将元素放到堆所对应的数组的末端,然后从该节点开始向上调整, //若当前结点键值比父结点大,则兑换位置, ...
- XCode 7 高速切换代码窗体和文档窗体
XCode 7 高速切换代码窗体和文档窗体 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...
- cc2540 usbdongle 安装驱动失败的终极解决方法 【原创,多图】
Ghost winxp win7系统安装CC2540 usbdongle CDC驱动程序 [重要提示] 因为非常多朋友使用Ghost系统.导致安装cdc驱动时安装不成功,出现 "INF中的服 ...
- LeetCode 350. Intersection of Two Arrays II (两个数组的相交之二)
Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...
- splay专题复习——bzoj 3224 & 1862 & 1503 题解
[前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...
- leetcode题解||Palindrome Number问题
problem: Determine whether an integer is a palindrome. Do this without extra space. click to show sp ...
- 深分页(Deep Pagination)
取回阶段 | Elasticsearch: 权威指南 | Elastic https://www.elastic.co/guide/cn/elasticsearch/guide/current/_fe ...
- POJ 3221 Diamond Puzzle.
~~~~ 题目链接:http://poj.org/problem? id=3221 显然是BFS找最优解.但是终止条件不好写.看到有一仅仅队交上去一直TLE. 比赛完了看题解原来是以目标状态为起点,B ...
- oc72--NSArray排序
// Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property (nonatomi ...
- SQL service 自动解决依赖包 验证
依赖关系解决 ============================================================================================= ...