H5 游戏开采:横屏适配

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

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

对此运动端的轻量级 HTML5 互动小游戏(简称为 H5
轻互动),如若从荧屏突显形式来划分的话,能够分类为:竖屏式和横屏式。

 

澳门凯旋门游戏网址 1

HTML5互动小游戏案例截图

平凡大家做过的急需里,首借使以竖屏式为主,而横屏式较少。对于竖屏式场景来讲,大家的经验会比较充分,因而,此番重要式斟酌下横屏式场景下的有的亟需小心的点,特别是如何去做横屏适配。

对于 H5 轻互动娱乐来讲,要贯彻横屏的话,主借使消除两点:
1.无论用户手持方向怎样,都亟待确认保证显示屏横向显示。
2.由于屏幕分辨率的二种化,由此就终于横屏下也是索要开始展览横屏适配,有限扶助镜头在具备分辨率下都可以创建适配。

上面,我们针对这两点分别阐述怎样化解。

强制横屏显示

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

澳门凯旋门游戏网址, 

澳门凯旋门游戏网址 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…
}

横屏适配管理

面前碰到移动端多分辨率繁复冗杂的场所,大家对此一般情状下(相当于周围的竖屏式)页面适配管理能够说是百步穿杨于心,可是切换成横屏式场景下,一样的页面适配方法能够直接使用吗?会不会有何难题啊?

上面作者分别从 DOM 和 Canvas 两地点去动手演讲怎么做横屏适配管理。

化解 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;
  }
}

减轻 Canvas 的横屏适配难点

化解 Canvas 的横屏适配难题,近年来在实际上利用中有二种主流的方案:

  1. 通过做两套Canvas的方案。
  2. 采用缩放的手段开始展览适配的方案。

两套 Canvas 的方案的做法是,页面包涵多个 Canvas
分别用于横竖屏时的附和显示,不过它们的数额是打通的。然则,该方案难免会有局限性,相比符合游戏逻辑数据管理大致、且舞台成分少且居中的场景;

而缩放适配方案做法是,选择的极端遍布的缩甩手腕——利用 CSS3 Transform 的
scale 属性,到达“一种设计尺寸适配多样分辨率荧屏”的指标。

 

澳门凯旋门游戏网址 8

运用了分歧适配方案的案例

在市面上的部分深图远虑的主流 HTML5 游戏引擎,举例 Cocos2D、Laya、Egret
等等,它们本人就集成了横屏适配的方案。若是你有去了然过,能够窥见它们广泛都以利用缩放的眼光举办适配。

对于移动端的轻量级 HTML5 互动小游戏(简称为 H5。可是,对于大家常用的 CreateJS、PixiJS
框架来讲,它们并不曾配套的现有的横屏适配消除方案能够被利用的,特别是我们只要选用原生
Javascript 去支付一个横屏游戏的时候。

故而,上面我们来商量下如何消除 Canvas 横屏适配难题。

在意:下边文中示例代码都是在 CreateJS 框架的底子上进展编制的。

选用合适的缩放格局

横屏适配的基本是缩放,通过 scale
属性等招数将Canvas缩放至适合荧屏窗口大小
。类似于 background-size
属性的呈现,缩放适配也足以有好些个种情势,或有裁剪或无裁剪,或基于长边缩放或基于短边缩放等等。根据局地常见的实际利用场景,有比较常用的各样缩放方式:Contain、Cover、Fill、Fixed-Width、Fixed-Height。依据游戏的不等的骨子里境况要求,大家得以选中间一种缩放情势张开适配。

对于移动端的轻量级 HTML5 互动小游戏(简称为 H5。下边,大家挨个分解以上二种缩放方式的定义、实现与其适用的场景。

对于移动端的轻量级 HTML5 互动小游戏(简称为 H5。a. Contain模式

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

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

依照下图推导,大家得以吸取在这种缩放方式下的缩放比例(scaleRadio),为浏览器可视窗口与游戏剧情的上升的幅度比或可观比之内异常的小者

 

澳门凯旋门游戏网址 9

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

基于推导结论,轻易代码达成如下:

JavaScript

对于移动端的轻量级 HTML5 互动小游戏(简称为 H5。// 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

对于移动端的轻量级 HTML5 互动小游戏(简称为 H5。Cover 格局下的缩放比例推导图

依附推导结论,轻巧代码达成如下:

JavaScript

// Cover格局宗旨原理函数 COVE奥德赛: 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 形式。

怎么产生保险想要着重体现的原委能够不被裁剪呢?这时要谈起三个“安全区域”的概念,指的是绝对不会被裁剪的剧情区域,它应有是由微小的显示屏可视窗口(近期应该是
Nokia 4 )与最大的显示屏可视窗口(前段时间应当是 Samsung 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;
}

对于移动端的轻量级 HTML5 互动小游戏(简称为 H5。在 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轻互动。

参与重一向和重绘制战术

回顾上述三种缩放情势,大家能够看到对于 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上。

后话

正文重要的中央在于研商横屏游戏中的管理点与化解方案,因而一旦完成代码方面有任何错漏之处,请大胆地建议校订吧!又恐怕读者们有更加好的意见之处,也欢迎留言分享噢。

参考资料

《如何塑造贰个便捷适配的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

相关文章