本文为
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如何做缩放。
第一种:这种其实最简单,因为这种层的底图超过屏幕(一般都超出很多,因为要做移动和多点缩放,或者要随着角色移动至少一屏),所以只要做一个通用缩放就可以,何谓通用缩放,还是看代码
第二种:在上面通用缩放的基础上设定层的坐标,使之可以上下左右居中 第三种:这种layer是紧靠屏幕边缘的,所以我们要分别设定他的锚点,我们将整个layer分为9个点,刚好呈现一个“米”字型,其中每个点都需要new一个单独layer来设定它的锚点。
当然,这些层生成完以后还需要做一个通用缩放。使用的时候要注意2点。
1.设定坐标的时候要按照size.width和size.height来计算大小,例如我设定屏幕右下角ui的坐标为
首 先说点题外话,对于任何大型项目来说,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如何做缩放。
第一种:这种其实最简单,因为这种层的底图超过屏幕(一般都超出很多,因为要做移动和多点缩放,或者要随着角色移动至少一屏),所以只要做一个通用缩放就可以,何谓通用缩放,还是看代码
第二种:在上面通用缩放的基础上设定层的坐标,使之可以上下左右居中 第三种:这种layer是紧靠屏幕边缘的,所以我们要分别设定他的锚点,我们将整个layer分为9个点,刚好呈现一个“米”字型,其中每个点都需要new一个单独layer来设定它的锚点。
当然,这些层生成完以后还需要做一个通用缩放。使用的时候要注意2点。
1.设定坐标的时候要按照size.width和size.height来计算大小,例如我设定屏幕右下角ui的坐标为
2.针对每个角的layer需要选择上面设定相应锚点layer。