H5 游戏支付:横屏适配

2017/10/31 · HTML5 · 1
评论 ·
横屏,
游戏

原稿出处:
坑坑洼洼实验室   

对于活动端的轻量级 HTML5 互动小游戏(简称为 H5
轻互动),借使从显示屏展现形式来划分的话,可以分类为:竖屏式和横屏式。

 

图片 1

HTML5互动小游戏案例截图

平时我们做过的供给里,主倘使以竖屏式为主,而横屏式较少。对于竖屏式场景来讲,大家的阅历会相比充足,由此,此次主要式研商下横屏式场景下的一些急需注意的点,非常是何许去做横屏适配。

对于 H5 轻互动游戏的话,要完成横屏的话,首假诺焚林而猎两点:
1.无论顾客手持方向怎么样,都亟需确认保障显示器横向展现。
2.出于显示屏分辨率的各个化,因而固然是横屏下也是急需张开横屏适配,保险镜头在具有分辨率下都能够客观适配。

上面,我们本着这两点分别演说怎样消除。

正文为 H5EDU 机构合法 HTML5培育 教程,首要介绍:JavaScript强化教程​ ——
Cocos2d-JS的显示器适配方案

强制横屏呈现

页面内容展现方向可分为竖排方向和排名方向,如下图所示。

 

图片 2

页面内容呈现格局:竖向排版和横向排版

对此竖屏式 H5
轻互动的话,页面会被期望保持竖排方向突显。而一旦页面出现横排方向呈现的事态,开荒者往往会选取接纳提醒蒙层来进展和谐提醒,让顾客自己作主保持竖屏体验,如下图所示。

 

图片 3

提示蒙层提示顾客保持竖屏体验

一致地,在横屏式 H5
轻互动娱乐中能够利用一样的章程开展简要管理,在页面内容按竖排方向显示时,开荒者举行对客户提示其保持横屏体验。

只是,那对客商体验并不和煦,因为那对于那三个习贯于开垦锁定为竖排方向作用(如下图所示)的
iOS 平台客商,或然是倒闭显示器旋转成效(如下图所示)的 Android
平台用户来讲,他们须求多多个管理步骤——先关闭竖排方向锁定可能开启显示器旋转,然后再横向手持设备。

 

图片 4

竖排方向锁定功用(iOS)与显示器旋转(Android)功效

于是,越来越好的做法是强制横屏展现,对显示器 resize
事件展开监听,当剖断为竖屏时将总体根容器举行逆时针 CSS3 旋转 90
度就可以,代码如下所示。

JavaScript

// 利用 CSS3 旋转 对根容器逆时针旋转 90 度 var detectOrient = function()
{ var width = document.documentElement.clientWidth, height =
document.documentElement.clientHeight, $wrapper =
document.getElementById(“J_wrapper”), style = “”; if( width >=
height ){ // 横屏 style += “width:” + width + “px;”; //
注意旋转后的宽高切换 style += “height:” + height + “px;”; style +=
“-webkit-transform: rotate(0); transform: rotate(0);”; style +=
“-webkit-transform-origin: 0 0;”; style += “transform-origin: 0 0;”; }
else{ // 竖屏 style += “width:” + height + “px;”; style += “height:” +
width + “px;”; style += “-webkit-transform: rotate(90deg); transform:
rotate(90deg);”; // 注意旋转中式茶食的管理 style +=
“-webkit-transform-origin: ” + width / 2 + “px ” + width / 2 + “px;”;
style += “transform-origin: ” + width / 2 + “px ” + width / 2 + “px;”; }
$wrapper.style.cssText = style; } window.onresize = detectOrient;
detectOrient();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function() {
  var width = document.documentElement.clientWidth,
      height =  document.documentElement.clientHeight,
      $wrapper =  document.getElementById("J_wrapper"),
      style = "";
  if( width >= height ){ // 横屏
      style += "width:" + width + "px;";  // 注意旋转后的宽高切换
      style += "height:" + height + "px;";
      style += "-webkit-transform: rotate(0); transform: rotate(0);";
      style += "-webkit-transform-origin: 0 0;";
      style += "transform-origin: 0 0;";
  }
  else{ // 竖屏
      style += "width:" + height + "px;";
      style += "height:" + width + "px;";
      style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
      // 注意旋转中点的处理
      style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  }
  $wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();

但是!这里有坑:固然你是利用
CreateJS 框架实行付出,那么就无法经过 CSS3 门路对满含 Canvas
的根容器举行旋转管理,因为旋转后会导致 Canvas
内的戏台成分的风浪响应地方错乱。
化解办法是,换到选择 CreateJS 框架内的 Stage 的 rotation
属性对总体舞台旋转管理,代码如下:

JavaScript

if(self.isPortrait) { // 竖屏 // 舞台旋转 self.stage.x =
self.canvasHeight; // 注意:x偏移相当于旋转中式茶食管理,更简约
self.stage.rotation = 90; // more… }else { // 横屏 self.stage.x = 0;
self.stage.rotation = 0; // more… }

1
2
3
4
5
6
7
8
9
10
if(self.isPortrait) { // 竖屏
  // 舞台旋转
  self.stage.x = self.canvasHeight; // 注意:x偏移相当于旋转中点处理,更简单
  self.stage.rotation = 90;
  // more…
}else { // 横屏
  self.stage.x = 0;
  self.stage.rotation = 0;
  // more…
}
  1. 设置荧屏适配战术(Resolution Policy)

横屏适配管理

直面移动端多分辨率繁复冗杂的景况,大家对于一般意况下(也正是大范围的竖屏式)页面适配管理能够说是懂行于心,但是切换来横屏式场景下,一样的页面适配方法能够间接行使吗?会不会有啥样难点啊?

上面作者分别从 DOM 和 Canvas 双方面去动手解说如何是好横屏适配管理。

假定您还从未用过Resolution
Policy,只供给在戏耍载入进程完结之后(cc.game.onStart函数回调中),调用上面包车型大巴代码:

化解 DOM 的横屏适配难题

在移动端,常见的运动端适配方案是 REM 方案,而为了减小 JS 与 CSS
的耦合,我团队开辟页面时行使的是 VW + REM
方案。(想要精通该方案的同桌可详细阅读《利用视口单位贯彻适配布局》)。

因为页面适配的场景往往是竖屏式的,由此 VW + REM
方案表现得特别周全。不过碰着横屏式,它的缺欠就暴露了出来。

 

图片 5

近年来的 vw 单位适配方案带来的标题

如上海体育场面所示,由于响应断点的限定最大开间管理,会招致页面两边留白,当然那能够透过去掉最大开间限制来化解。而实在的欠缺在于,由于
vw
单位的风味,适配换算大小是基于荧屏宽度来讲的,因而显示器宽度越大导致容器、文字会越大,还恐怕引致
DOM 成分高出荧屏外,且文字过大并非大家所想要的客户体验。

那正是说,换来 px 单位的定势布局怎么样?

但 px
单位的一向布局只适合于有些场景,对于急需内容全屏覆盖的气象(如下图所示),就可能存在这么的壮志未酬的客商体验:相对定位的要素之间空隙过大,导致布局不好看,又恐怕空隙过小,导致成分叠放被遮挡。

 

图片 6

px单位确定地点布局适配方案带来的标题

笔者们询问到,vw
单位的特色是适配换算大时辰是基于显示屏宽度而定的,那么在威胁横屏突显时,大家就能够同理转变为显示器中度来而定,也等于vw 单位替换来 vh 单位

那般进一步考订之后就能够得到满足的适配效果,如下图所示。

 

图片 7

更加好的适配建设方案—— vw、vh 单位搭配

具体完结可参看如下 SCSS 代码:

JavaScript

$vw_base: 375; $vw_fontsize: 20; html { font-size: 20px;
//不支持vw单位时,回退到px单位 font-size: ($vw_fontsize / $vw_base) *
100vw; } @media screen and (orientation: landscape) { html { font-size:
20px; font-size: ($vw_fontsize / $vw_base) * 100vh; } }

1
2
3
4
5
6
7
8
9
10
11
12
$vw_base: 375;
$vw_fontsize: 20;
html {
  font-size: 20px; //不支持vw单位时,回退到px单位
  font-size: ($vw_fontsize / $vw_base) * 100vw;
}
@media screen and (orientation: landscape) {
  html {
    font-size: 20px;
    font-size: ($vw_fontsize / $vw_base) * 100vh;
  }
}

cc.view.setDesignResolutionSize(320, 480,
cc.ResolutionPolicy.SHOW_ALL);
setDesignResolutionSize函数的前五个参数是你想要在你的代码中央银行使的八日游分辨率,第八个参数就是你挑选的适配方案。引擎中放到了5种适配方案,种种都有协和独特的行事,详见下文。

减轻 Canvas 的横屏适配难题

消除 Canvas 的横屏适配难题,目前在实质上接纳中有二种主流的方案:

  1. 通过做两套Canvas的方案。
  2. 采用缩放的花招进行适配的方案。

两套 Canvas 的方案的做法是,页面包含多个 Canvas
分别用于横竖屏时的呼应呈现,然而它们的数码是开采的。不过,该方案难免会有局限性,相比较适合游戏逻辑数据处理大致、且舞台成分少且居中的场景;

而缩放适配方案做法是,采纳的无比普及的缩放手段——利用 CSS3 Transform 的
scale 属性,达到“一种设计尺寸适配各类分辨率显示器”的指标。

 

图片 8

行使了差异适配方案的案例

在市道上的有的成熟的主流 HTML5 游戏引擎,举例 Cocos2D、Laya、Egret
等等,它们自个儿就集成了横屏适配的方案。假诺你有去探听过,能够窥见它们分布都是选择缩放的意见进行适配。

但是,对于大家常用的 CreateJS、PixiJS
框架来讲,它们并不曾配套的现有的横屏适配建设方案得以被采用的,尤其是大家只要使用原生
Javascript 去支付四个横屏游戏的时候。

据此,上边我们来商量下怎么消除 Canvas 横屏适配难点。

瞩目:下边文中示例代码都是在 CreateJS 框架的基本功上进展编辑的。

一旦您曾经设置了统一筹算分辨率,那么你能够一向设置你的Resolution Policy:

采取合适的缩放格局

横屏适配的主干是缩放,通过 scale
属性等招数将Canvas缩放至适合显示器窗口大小
。类似于 background-size
属性的表现,缩放适配也足以有很三种格局,或有裁剪或无裁剪,或基于长边缩放或基于短边缩放等等。依据局地常见的骨子里运用场景,有相比常用的四种缩放形式:Contain、Cover、Fill、Fixed-Width、Fixed-Height。依据游戏的例外的实在景况要求,大家能够选中间一种缩放方式展开适配。

下边,大家逐个分解以上两种缩放情势的概念、落成与其适用的光景。

a. Contain模式

Canvas能够类比为一张图,而图片的适配,大家能够联想到平常用来适配背景图片的属性
background-size ,其属性值满含 containcover

借助 contain 的概念,我们把缩放的内部一种情势称为 Contain
形式。因为在这种形式下,舞台内容(gameArea)会维持宽高比进行缩放适配浏览器可视窗口(window),缩放至其能显得完整的戏台内容。

基于下图推导,我们得以吸取在这种缩放情势下的缩放比例(scaleRadio),为浏览器可视窗口与游戏剧情的大幅比或可观比之内比较小者

 

图片 9

Contain 情势下的缩放比例推导图

依照推导结论,简单代码达成如下:

JavaScript

// Contain形式基本原理函数 CONTAIN: function(){ var self = this;
self.radioX = self.radioY = Math.min((self.winWidth / self.designWidth)
, (self.winHeight / self.designHeight)); self.canvasWidth =
self.designWidth; self.canvasHeight = self.designHeight; }

1
2
3
4
5
6
7
// Contain模式核心原理函数
CONTAIN: function(){
  var self = this;
  self.radioX = self.radioY = Math.min((self.winWidth / self.designWidth) , (self.winHeight / self.designHeight));
  self.canvasWidth = self.designWidth;
  self.canvasHeight = self.designHeight;
}

可以看到,在 Contain
情势下,倘诺舞台内容宽高比与浏览器可视窗口的宽高比不对等时,舞台内容并不曾填满整个浏览器可视窗口,此时就能出现前后或左右两边会设有留空部分。

对于这种 Contain
格局,会比较相符舞台背景为纯色或许是渐变类型的H5轻互动,舞台内容与窗口的紧邻处得以自然过渡衔接,不会猝然。

b. Cover模式

同样地,借助 cover 的概念把内部一种方式称为 Cover
方式。在这种格局下,舞台内容(gameArea)会维持宽高比进行缩放适配浏览器可视窗口(window),缩放至舞台内容填满窗口。

据说下图推导,我们能够得出在这种缩放情势下的缩放比例(scaleRadio),为浏览器可视窗口与游戏内容的宽度比或可观比之内一点都不小者

 

图片 10

Cover 格局下的缩放比例推导图

依靠推导结论,轻易代码实现如下:

JavaScript

// Cover格局宗旨原理函数 COVELX570: function(){ var self = this; self.radioX
= self.radioY = Math.max((self.winWidth / self.designWidth) ,
(self.winHeight / self.designHeight)); self.canvasWidth =
self.designWidth; self.canvasHeight = self.designHeight; }

1
2
3
4
5
6
7
// Cover模式核心原理函数
COVER: function(){
  var self = this;
  self.radioX = self.radioY = Math.max((self.winWidth / self.designWidth) , (self.winHeight / self.designHeight));
  self.canvasWidth = self.designWidth;
  self.canvasHeight = self.designHeight;
}

在 Cover
形式下,要是舞台内容宽高比与浏览器可视窗口的宽高比不等于时,由于舞台内容需求填满全体浏览器可视窗口,此时就能够油但是生前后照旧左右两边被裁剪的情形。

那就是说,固然能保障游戏场景内的根本体现内容全方位呈现,被裁剪内容非亲非故重要时,那么这种
H5 轻互动项目就足以怀念采纳 Cover 格局。

怎么达成保险想要重点显示的内容能够不被裁剪呢?那时要谈起多个“安全区域”的概念,指的是相对不会被裁剪的内容区域,它应当是由微小的荧屏可视窗口(近来理应是
摩托罗拉 4 )与最大的显示器可视窗口(近日应有是 魅族 7
Plus)叠合后得出的重合区域,如下图所示。

 

图片 11

“安全区域”即为中黄虚线框内部分

开拓者应该在设计阶段与设计员、产品等相关人士进行联系,告知其不想被裁剪的剧情都应有在“安全区域”举行设计布局。

c. Fill模式

Fill 情势,能够类比为 backgrouns-size: 100% 100%
的表现,在这种方式下,不会维持宽高比,舞台内容(gameArea)的宽高分别依据舞台内容与浏览器可视窗口(window)的宽度比与中度比实行缩放,缩放至舞台内容拉伸铺满窗口。

依据下图推导,大家得以汲取在这种缩放形式下的缩放比例(scaleRadio),为对于游戏剧情的宽应用其与可视窗口的宽度比,而娱乐内容的高应用其与可视窗口的万丈比

 

图片 12

Fill 方式下的缩放比例推导图

趣事推导结论,轻易代码落成如下:

JavaScript

// Fill方式为主原理函数 FILL: function(){ var self = this; self.radioX =
(self.winWidth / self.stageWidth); self.radioY = (self.winHeight /
self.stageHeight); self.canvasWidth = self.designWidth;
self.canvasHeight = self.designHeight; }

1
2
3
4
5
6
7
8
// Fill模式核心原理函数
FILL: function(){
  var self = this;
  self.radioX = (self.winWidth / self.stageWidth);
  self.radioY = (self.winHeight / self.stageHeight);
  self.canvasWidth = self.designWidth;
  self.canvasHeight = self.designHeight;
}

这种形式下既不会留空,也不会被裁剪,然而在舞台内容宽高比与浏览器可视窗口的宽高比不等于时,展现的剧情会有一定水准的拉伸形变。

这种暴力的管理情势纵然免去了留空和剪裁的一点也不快,不过会设有拉伸形变,那就得看是或不是能够被接受了。

d. Fixed-Width模式

分化于图像,Canvas
是能够张开动态绘制大小的。所以,大家得以思虑依据荧屏窗口大小变化来动态绘制
Canvas。
从保险舞台横向内容不改变的角度考虑,我们提出这样的形式:舞台内容(gameArea)等比进行缩放至与浏览器可视窗口的均等的拉长率大小,而舞台的高度(Canvas中度)进行重新绘制其惊人为浏览器可视窗口的惊人,称之为
Fixed-Width 方式。

基于下图推导,大家得以吸取在这种缩放形式下的缩放比例(scaleRadio),为浏览器可视窗口与游乐内容的增长率比

 

图片 13

Fixed-Width 格局下的缩放比例推导图

据书上说推导结论,轻便代码落成如下:

JavaScript

// Fixed-Width方式基本原理函数 FIXED_WIDTH: function(){ var self =
this; self.radioX = self.radioY = self.winWidth / self.designWidth;
self.canvasWidth = self.designWidth; self.canvasHeight = self.winHeight
/ self.radioY; }

1
2
3
4
5
6
7
// Fixed-Width模式核心原理函数
FIXED_WIDTH: function(){
  var self = this;
  self.radioX = self.radioY = self.winWidth / self.designWidth;
  self.canvasWidth = self.designWidth;
  self.canvasHeight =  self.winHeight / self.radioY;
}

在 Fixed-Width
情势下,无论在哪些分辨率下,舞台横向内容保持不改变,而纵向中度则会动态裁补,那就能够相比较适用于这么些场戏场景能够纵向扩充的
H5 轻互动项目。

e. Fixed-Height模式

说完 Fixed-Width 方式,换个角度思考便搜查捕获 Fixed-Height
方式,舞台内容(gameArea)等比进行缩放至与浏览器可视窗口的平等的惊人民代表大会小,而舞台的宽窄(Canvas宽度)举办重复绘制其调幅为浏览器可视窗口的肥瘦。

基于下图推导,大家能够吸取在这种缩放方式下的缩放比例(scaleRadio),为浏览器可视窗口与游戏内容的中度比

 

图片 14

Fixed-Height 形式下的缩放比例推导图

听闻推导结论,简单代码达成如下:

JavaScript

// Fixed-Height格局宗旨原理函数 FIXED_HEIGHT: function(){ var self =
this; self.radioX = self.radioY= self.winHeight / self.designHeight;
self.canvasWidth = self.winWidth / self.radioX; self.canvasHeight =
self.designHeight; }

1
2
3
4
5
6
7
// Fixed-Height模式核心原理函数
FIXED_HEIGHT: function(){
  var self = this;
  self.radioX = self.radioY= self.winHeight / self.designHeight;
  self.canvasWidth = self.winWidth / self.radioX;
  self.canvasHeight = self.designHeight;
}

与 Fixed-Width 情势相反,Fixed-Height
情势下,舞台纵向内容保持不改变,而横向宽度则会动态裁补。对于这种格局的接纳场景应该会相比分布,例如常见的跑酷游戏项目H5轻互动。

cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER);
原生游戏中游玩总是选取任何荧屏空间,不过在WEB端你的网页中也许除了游戏还恐怕有其他视觉或文字成分,也许可能你供给给你的娱乐设计叁个完美的边框。所以Cocos2d-JS中Web引擎的适配方案会私下认可适配游戏Canvas成分的父节点,假如您期望游戏场景适配浏览器荧屏,那么只必要将Canvas直接放置到body下就足以了:

进入重平昔和重绘制战术

综上所述上述八种缩放格局,大家得以看看对于 Cover、Fixed-Width、Fixed-Height
情势来说,有存在被裁剪的或者。特别是 Fixed-Height
格局,对于横屏游戏的话那是相比较常用的形式,不过在显示器相当的小的时候难免会被裁剪,何况大家是不期待贴边成分被裁剪掉的,譬喻位于右上角的音乐Logo。而对于
Fixed-Width、Fixed—Height
情势,它们还存在舞台区域须要补给绘制的情状,因而对一些舞台成分来说必要再行设定其渲染大小。

进而,除了主导的缩放适配格局达成之外,为了缓慢解决贴边成分不被裁剪以及对部分舞台成分重绘制的急需,大家还索要投入七个政策:重一向和重绘制。

a. 重定位

贴边成分重一直战术的达成原理很轻易,对急需重新定位的要素对象额外设置
topleftrightbottom
的自定义属性(当然你能够命名称为别的属性名),那样我们就足以在适配的时候遵照那么些自定义属性以及实际彰显的
Canvas 大小进行重新总括地方。

为了有限支撑品质,上面是战术里须要留神的地方:

  1. 在舞台里,实际不是负有游戏成分都是急需被重一直的,由此我们只供给创制多少个数组记录需求被重一直的要素。
  2. 适于调节重平素次数,大家无需在每一帧 tick
    绘制的时候都进展重一向,只要求在 Canvas 大小更动的时候实行拍卖。

以下是重定位政策相关的代码:

JavaScript

//
halfCutHeight、halfCutWidth是基于适配后的实际Canvas大小总结出来的周旋距离
_setSize: function(){ // … if(self.isPortrait) { // …
self.halfCutWidth = (self.canvasWidth * self.radioY – this.winWidth ) /
2 / self.radioY; self.halfCutHeight = (self.canvasHeight * self.radioX

  • this.winHeight) / 2 / self.radioX; }else { // … self.halfCutWidth =
    (self.canvasWidth * self.radioX – this.winWidth ) / 2 / self.radioX;
    self.halfCutHeight = (self.canvasHeight * self.radioY – this.winHeight)
    / 2 / self.radioY; } // … }, // 贴边成分重向来主题处理函数
    _adjustPosition: function(item){ var self = this; item &&
    self.adjustPositionArr.push(item);
    self.adjustPositionArr.map(function(item, index, arr){ (typeof item.top
    == “number”) && (item.y = item.top + self.halfCutHeight >= 0 ?
    self.halfCutHeight : 0); (typeof item.left == “number”) && (item.x =
    item.left + self.halfCutWidth >= 0 ? self.halfCutWidth : 0); (typeof
    item.bottom == “number”) && (item.y = self.canvasHeight –
    item.getBounds().height – item.bottom + self.halfCutHeight >= 0 ?
    self.halfCutHeight : 0); (typeof item.right == “number”) && (item.x =
    self.canvasWidth – item.getBounds().width – item.right –
    self.halfCutWidth); }); }, //
    暴露方法:提必要开采者记录供给重平昔的粘合成分 adjustPosition:
    function(item){ var self = this; self._adjustPosition(item); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// halfCutHeight、halfCutWidth是根据适配后的实际Canvas大小计算出来的相对距离
_setSize: function(){
  // …
  if(self.isPortrait) {
    // …
    self.halfCutWidth =  (self.canvasWidth * self.radioY – this.winWidth ) / 2 / self.radioY;
    self.halfCutHeight = (self.canvasHeight * self.radioX – this.winHeight) / 2 / self.radioX;
  }else {
    // …
    self.halfCutWidth = (self.canvasWidth * self.radioX – this.winWidth ) / 2 / self.radioX;
    self.halfCutHeight = (self.canvasHeight * self.radioY – this.winHeight) / 2 / self.radioY;
  }
  // …
},
// 贴边元素重定位核心处理函数
_adjustPosition: function(item){
  var self = this;
  item && self.adjustPositionArr.push(item);
  self.adjustPositionArr.map(function(item, index, arr){
    (typeof item.top == "number") && (item.y = item.top + self.halfCutHeight >= 0 ? self.halfCutHeight : 0);
    (typeof item.left == "number") && (item.x =  item.left + self.halfCutWidth >= 0 ? self.halfCutWidth : 0);
    (typeof item.bottom == "number") && (item.y = self.canvasHeight – item.getBounds().height – item.bottom + self.halfCutHeight >= 0 ? self.halfCutHeight : 0);
    (typeof item.right == "number") && (item.x = self.canvasWidth – item.getBounds().width – item.right  – self.halfCutWidth);
  });
},
// 暴露方法:提供给开发者记录需要重定位的贴边元素
adjustPosition: function(item){
  var self = this;
  self._adjustPosition(item);        
}

b. 重绘制

对于部分以舞台区域(gameArea)作为其大小设置的参照规范的成分,在适配时遇见须求补全绘制区域时,舞台区域大小产生变化,相应地,该因素就要求开展再一次绘制,那正是重绘制攻略的留存意义。

一律地,为了保障质量,重绘制计策也是大同小异必要有限支撑:

  1. 创设对应的数组记录全显图形对象。
  2. 不在每一帧 tick 时进行重绘制,只在适配的时候重绘制。

以下是重绘制计策的相关代码:

JavaScript

// 全显图形重绘制宗旨管理函数 _adjustFullSize: function(item){ var self
= this; item && self.adjustFullSizeArr.push(item);
self.adjustFullSizeArr.map(function(item, index, arr){ item.drawRect(0,
0, self.canvasWidth, self.canvasHeight); }); }, //
暴光方法:提须求开采者记录必要重绘制的全显图形 adjustPosition:
function(item){ var self = this; self._adjustPosition(item); }

1
2
3
4
5
6
7
8
9
10
11
12
13
// 全显图形重绘制核心处理函数
_adjustFullSize: function(item){
  var self = this;
  item && self.adjustFullSizeArr.push(item);
  self.adjustFullSizeArr.map(function(item, index, arr){
    item.drawRect(0, 0, self.canvasWidth, self.canvasHeight);
  });
},
// 暴露方法:提供给开发者记录需要重绘制的全显图形
adjustPosition: function(item){
  var self = this;
  self._adjustPosition(item);        
}

至此,Canvas 横屏适配难点才得以完全缓和。

那部分内容篇幅较长,作者轻松总计下,三个简便的缓慢解决 Canvas
横屏适配难题的方案至少供给满含两点落到实处:

  • 采取合适的缩放情势
    方案内置三种缩放形式,在实质上选取中依据气象区别而采用分裂的缩放进行适配。
  • 加盟重一直和重绘制计谋
    为了保险贴边成分不被裁剪以及舞台成分动态渲染大小以适应舞台区域的动态变化。

最后的总体效应可前往体验地方进展体验,体验时可点击文本元素举办切换方式。其余,全部的贯彻方案是依照CreateJS
框架进行落实的,文中的实现方案的代码会托管作者github上。

<body>
    <canvas id=”gameCanvas”></canvas>
</body>

后话

本文首要的为主在于研讨横屏游戏中的管理点与缓和方案,因而一旦达成代码方面有任何错漏之处,请大胆地建议校订吧!又大概读者们有更加好的意见之处,也招待留言分享噢。

  1. Resolution Policy的意义

参照他事他说加以考察资料

《如何创立二个不慢适配的H5》
《Cocos2d-JS的显示器适配方案》
《Cocos2d-JS
多分辨率适配方案》
《Cocos2d-JS
对齐计策》
《Laya引擎-自动横屏适配》
《Phaser-scaleManager对象》
《How to create mobile games for different screen sizes and
resolutions》
《Egret-显示器适配战略》

游戏
H5
适配
横屏

Web开发

多谢您的翻阅,本文由 坑坑洼洼实验室
版权全部。如果转载,请注解出处:凹凸实验室()

1 赞 3 收藏 1
评论

图片 15

运用Resolution
Policy的功利很了解,不论设备显示屏大小怎样,也随意浏览器窗口的宽高比,你的嬉戏场景都会被活动放缩到荧屏大小。更器重的是,在游戏代码中,你将永恒使用你所设计的游玩分辨率来布署游戏场景。举个例子说,假诺您将统一盘算分辨率设置为320
* 480,那么在打闹代码中你的玩乐窗口右上角坐标将长久是(320,
480)(在FIXED_WIDTH情势中度或者会被缩放,同样在FIXED_HEIGHT情势下上升的幅度只怕存在缩放的气象,具体看下文表明)。

  1. 监听浏览器窗口大小变化事件

新的适配方案允许在浏览器大小变化的时候自动重新尝试适配。比方说,当客户拖拽来改换浏览器大小,也许更管用的情状,当她们转悠自个儿手提式无线电话机方向的时候。游戏中随便时刻都足以开启这种行为,只必要调用cc.view的resizeWithBrowserSize函数:

cc.view.resizeWithBrowserSize(true);
为了更加灵敏得应对转移,大家为cc.view提供了一个新的函数,你能够透过setResizeCallback函数注册三个回调函数来监听浏览器窗口大小变化事件:

cc.view.setResizeCallback(function() {
    // 做任何你所急需的游艺内容层面包车型地铁适配操作
    // 比方说,你能够本着客商的位移器材方一贯决定所要应用的适配情势
});

  1. Fullscreen API

Fullscreen
API是浏览器允许Web页面在获得客户全显示屏的二个新的创设中的API。

Cocos2d-JS在活动端浏览器中会尝试自动走入全显示屏来给顾客更加好的玩乐体验(须求提出并非装有浏览器都协理这些API)。

一派,桌面端大概具备当代浏览器都扶助Fullscreen
API,倘诺您愿意采纳那些API,Cocos2d-JS也简化了它的施用方法:

尝试走入全屏方式(需求顾客交互):
cc.screen.requestFullScreen(targetElement, onFullScreenCallback);
检查评定是或不是处在全屏方式: cc.screen.fullScreen();
脱离全屏方式: cc.screen.exitFullScreen();
4.4.3 首要概念

  1. 二十四日游外框 Frame

娱乐外框是您的嬉戏Canvas成分的始发父节点,一般意况下,它是html文书档案的body成分。不过假使您愿意,它能够是DOM结构中的放肆容器节点。Canvas成分的发端大小并不根本,显示屏适配进度中它会被活动放缩来适应你设置的外框大小。
再一次提示,若是您期望游戏窗口适应整个浏览器窗口,那么只要求将Canvas成分直接放在body下。

  1. 娱乐容器 Container

在Cocos2d-JS的初步化进度中,引擎会自动将您的Canvas成分放置到多个DIV容器中,而那几个容器会被到场到Canvas的原本父节点(游戏外框)中。这么些游戏容器是落到实处显示器适配方案的主要扶持成分,你能够因此cc.container来访谈它。

  1. 娱乐世界 Content

31日游世界代表游戏Nelly用的社会风气坐标系。

  1. 视窗 Viewport

视窗是十31日游世界相对于游戏Canvas成分坐标系中的坐标及大小.

  1. 容器适配攻略 Container Strategy

容器适配战术肩负对娱乐容器和玩耍Canvas成分实行放缩以适应游戏外框。

  1. 剧情适配战术 Content Strategy

剧情适配计谋担当将游戏世界放缩以适应游戏容器,相同的时候也会图谋并设置视窗。