开发者社区> 技术小胖子> 正文

屏幕适配

简介:
+关注继续查看

屏幕适配

1.一款游戏能适应不同的手机分辨率,这个就是屏幕适配

2.creator屏幕适配策略:1固定高度,2固定宽度,3固定宽高度

3.cc.Canvas组件:

决定屏幕的适配策略

大小为屏幕的大小

4.美术设计分辨率:

美术任意在一个固定的分辨率下来设计资源,我们在canvas组件配置好进行释放.

什么是固定高度和固定宽度?

blob.png


blob.png



固定高度适配详解

blob.png




设计分辨率


1:设计分辨率与固定宽度和高度策略:

横屏游戏蓝色16:9的比例,橙色4:3 

固定高度,我们适配的时候会把所有的屏幕的比例

缩放到高度是一样的,唯一不用的是在宽度这个地方.

blob.png


如果是固定宽度,就把宽度设计成一样的,唯一不同的就是高度

blob.png



界面适配

1背景图做到能适配任何主流的手机分辨率

2将界面布局分为9大停靠点

blob.png


3.首先将设计分辨率设置为640x960 竖屏我们使用固定宽度为缩放比例

那么他在宽度的方向都是完全一致的,不一致的可能都是高度

blob.png


首先你放背景图的时候,要先调整这个背景图调整他的缩放,

一定使用缩放来调整,然后就是缩放宽高也要一致最好。

比如我们放大到1.25倍

blob.png


我们看到,因为是固定宽度适配,所以他的宽度要和边一致

高度就是按照比例来了,这时候你发现无论哪种分辨率他都可以适配了.

这就符合了第一个要求,背景图适配任何手机分辨率.

把背景图上下流出来一节,这样适配同的时候,就会有扩展的余地

blob.png



9个停靠点

现在我们在top的位置 放一个东西

blob.png


在Canvas最下面也放一个 节点

blob.png

中间放一个

blob.png

这时候在测试一下,发现一个问题:

在不同分辨率下虽然背景 适配了,但是里面的内容病没有适配

blob.png

blob.png

也就是说 上中下你没有对应的停靠点,这时候就要加上

一个组件就是cc.Widget





cc.Widget组件

1cc.Widget组件帮助解决停靠点的问题

2cc.Widget能够帮助解决和父亲大小保持一致的问题

3指定要相对的节点,必须是父节点或父节点以上的节点


我们在要相对父节点停靠的节点添加一个cc.Widget组件

blob.png

1target就是参考点:指定的对齐目标.只能是当前节点的

父节点,以上的节点, 为空默认就是父节点

2.Horizontal Center 对准父节点的水平中点 

blob.png

3.Vertical Center 对准父节点的 垂直终点

blob.png


选择这个表示以父亲的顶上 来进行停靠


blob.png

这时候 无论如何改变 都是居于父节点的顶部 停靠

blob.png


如果你节点是左上 就这样   以此类推

blob.png


中心点这样表示 就行

blob.png


还有一种情况 就是当上下位置改变后,中间红色区域

如何连着上下两个区域.

blob.png  blob.png


这时候 中间这个红色的就需要一个单独的widget组件

这样设置 就ok啦

blob.png



所以widget可以解决两个问题:

1 停靠点对齐问题

2 相对父亲节点大小拉伸问题


这样 就是随着父节点的大小变化而变化

blob.png


而这样就只 解决垂直方向的大小

blob.png





 本文转自超级极客51CTO博客,原文链接:http://blog.51cto.com/12158490/2067353,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
16593 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13100 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36366 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14870 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
28085 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23538 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
37300 0
21115
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载