文档章节

JavaScript强化教程——cocosjs屏幕适配方案

哟猫Intry
 哟猫Intry
发布于 2016/06/29 14:42
字数 1286
阅读 48
收藏 1

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——cocosjs屏幕适配方案
 
首 先说点题外话,对于任何大型项目来说,coding的规范重要,在cocos2dx-jsbinding这个框架中,javascript是一个绝对核心 的脚本语言,99%的游戏逻辑都由js完成。脚本的编写量绝对大于大多数的web项目,掌握javascript的扎实的基础至关重要。
 
入 正题,今天讨论的是如何使用jsb来处理移动平台的多分辨率适配问题。就目前的移动平台来讲,分辨率可谓是百花齐放,且不谈安卓平台各种稀奇古怪的分辨 率,就ios平台有 ip4(960*640),ip5(1136*640),ipad2,mini(1024*768),ipad3,ipad4(2048*1536),这 四种当然今后还有更多,如何保证一套代码,一套资源通吃android和ios平台,同时游戏的布局又不会发生偏差,能够恰当好处,这是我们追求的目标。 cocos2d-x本身提供有几种屏幕适配API,但是并不是非常完美,并且每种方案都有自己的缺陷,我介绍一下如何用js来处理这个棘手的问题。首先我 们要定义实际使用资源的分辨率,也就是美术设计是用的分辨率大小,这里我们将资源定义为960*640,这个分辨率有什么好处?第一是这个分辨率是一个中 等类型的分辨率,它比1年前的主流android分辨率800*480)要大,比新出的高端机型分辨率要小一点,同时也是主流的ios分辨率。选资源大小 有一个要点,不能选的过高,这样对低端机型就是浪费,你需要花很大的下载来存这些资源,不值得,但是选太小的也不行,高端机型上又模糊无比,所以选择一个 中等的分辨率。
 
 分 辨率适配的核心思想是缩放,也就是layer.scale函数,但是一定要是等比缩放,如果用layer.scaleX或者layer.scaleY函 数,虽然可以把游戏画面非常简单的搞成分辨率适配成没有黑边,但是整个游戏画面已经被拉伸或者压挤,不能达到我们需要的效果。

   游戏中一般有3大类层。

   1.大于屏幕的层,可实现拖动、缩放或者可以随着角色移动移动场景画面的,一般这种场景为主城、副本等等。

   2.居中的层,一般是同时基于水平方向和竖直方向居中的,也有基于一个方向居中的。这种一般为ui弹层。

   3.靠边的层,一般是ui,这些ui分别是紧贴屏幕边缘。

   以上几种类型是基本的类型,当然某一个场景可能是上面几种层类型的组合。比如一个传统九宫格的战报场景,人物的排列是基于居中的,ui分布是靠边的,实 现的时候我们将人物和ui分别绘制再2个layer中,每个layer基于相应的类型进行缩放,就可以达到想要的效果。

   下面分别来说明下,三种类型的layer如何做缩放。

   第一种:这种其实最简单,因为这种层的底图超过屏幕(一般都超出很多,因为要做移动和多点缩放,或者要随着角色移动至少一屏),所以只要做一个通用缩放就可以,何谓通用缩放,还是看代码

// 获取屏幕尺寸
            var size = cc.Director.getInstance().getWinSize();
           this.designResolution = cc.size(960,640); 
            // 获取高宽系数
            var widthRatio = size.width/this.designResolution.width,heightRatio = size.height/this.designResolution.height;
            if (widthRatio !=1 || heightRatio!=1){
                // 按照比例小的系数去进行缩放
                if (widthRatio<heightRatio){
                    this._scaleRatio = widthRatio;
                }else{
                    this._scaleRatio = heightRatio;
                }
            }else{
                this._scaleRatio = 1;
            }

            this.setScale(this._scaleRatio);

第二种:在上面通用缩放的基础上设定层的坐标,使之可以上下左右居中

var size = cc.Director.getInstance().getWinSize();
            this.setPosition(cc.p((size.width-this.designResolution.width*this._scaleRatio)/2,(size.height-this.designResolution.height*this._scaleRatio)/2));

第三种:这种layer是紧靠屏幕边缘的,所以我们要分别设定他的锚点,我们将整个layer分为9个点,刚好呈现一个“米”字型,其中每个点都需要new一个单独layer来设定它的锚点。

this._uiLayerMap = this._uiLayerMap || {};
            if (this._uiLayerMap[directionType]){
                return this._uiLayerMap[directionType];
            }
            var layer = cc.Layer.create();
            layer.setPosition(cc.p(0,0));
            this._uiLayerMap[directionType] = layer;
            // 根据directionType设定锚点位置
            switch (directionType){
                case 1:
                    layer.setAnchorPoint(cc.p(0,1));
                    break;
                case 2:
                    layer.setAnchorPoint(cc.p(0.5,1));
                    break;
                case 3:
                    layer.setAnchorPoint(cc.p(1,1));
                    break;
                case 4:
                    layer.setAnchorPoint(cc.p(1,0.5));
                    break;
                case 5:
                    layer.setAnchorPoint(cc.p(1,0));
                    break;
                case 6:
                    layer.setAnchorPoint(cc.p(0.5,0));
                    break;
                case 7:
                    layer.setAnchorPoint(cc.p(0,0));
                    break;
                case 8:
                    layer.setAnchorPoint(cc.p(0,0.5));
                    break;
            }
            this.addChild(layer);

当然,这些层生成完以后还需要做一个通用缩放。使用的时候要注意2点。

1.设定坐标的时候要按照size.width和size.height来计算大小,例如我设定屏幕右下角ui的坐标为

sprite1.setPositon(size.width,50);
    sprite2.setPositon(size.width-80,50);
    sprite3.setPositon(size.width-160,50);

2.针对每个角的layer需要选择上面设定相应锚点layer。

http://www.h5edu.cn/

© 著作权归作者所有

共有 人打赏支持
哟猫Intry
粉丝 0
博文 46
码字总数 31138
作品 0
昌平
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
移动web开发适配方案之Rem

移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法。但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同...

西风瘦码
07/25
0
0
Cocos Creator屏幕适配

本文主要讨论如果在Cocos Creator上实现不同的屏幕适配方案,补充官方文档的说明。 Cocos2d-JS屏幕适配 在Cocos2d-JS中,设计分辨率到设备分辨率的适配方案有5种,分别是: cc.ResolutionPol...

乐_然
05/23
0
0
关于移动端动态化方案的再思考——Weex

在移动端日益兴起的今天,APP 本身的灵活性、迭代更新的周期、成本优化等动态性问题,成为很多移动应用的客观需求。而针对动态性,开发者们也探索出一些有力的解决方案:Hybrid 方案、结构化...

OSC源创君
07/09
0
0
xFace3.x 开发技巧(4)---适配方案

适配方案 分辨率适配方案 1. 使用meta标签进行缩放适配(该方案仅适用于xFace平台) Webkit具备高效缩放视图的能力,因此我们可以借助viewport的设置来让界面自动适应近似分辨率的屏幕. Viewp...

xFace3
2013/12/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

文件的压缩与解压(linux)

Linux下*.tar.gz文件解压缩命令 1.压缩命令:   命令格式:tar -zcvf 压缩后文件名.tar.gz 被压缩文件名 可先切换到当前目录下。压缩文件名和被压缩文件名都可加入路径。 2.解压缩命令: ...

qimh
23分钟前
1
0
invalid character found in the request target 异常

这个异常时因为Tomcat 9不支持请求格式出现“{”等非法字符的问题 因为tomcat版本问题遇到的坑,记录一下。 问题 今天由于要测试一下订单详情页的异步查询,在本地起了一个服务,发送的请求是...

edwardGe
27分钟前
1
0
发现抓包软件fiddler的bug

1个请求他跳转之后,直接400,被拦在了Apache,使用fiddler 的,replay requests 是同样的结果,但是replay composer确是正常的。 也就是说这replay requests 是发原来的包,replay composer...

NLGBZJ
37分钟前
1
0
linux screen 命令详解

shell关闭后, 主机仍然运行 screen命令 启动jenkins以后, screen, 然后按ctrl+a 再按d 这样暂停了子界面, 这时候回到了父界面 用screen –ls查看目前子界面的状态 [root@free /]# screen -l...

SuShine
38分钟前
1
0
mac机器切换无线网络导致网页不能打开的问题

问题: 公司和家里使用不同的WI-FI,每次从家到公司时自动切换网络后,公司的许多地址不能访问, ping域名是可以ping同的,但是网页却打不开... 问题分析: 初步猜想是DNS缓存的问题? 对于MAC系统没...

Lennie002
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部