码迷,mamicode.com
首页 > 其他好文 > 详细

phaser小游戏框架学习中的屏幕适配

时间:2019-01-19 16:31:52      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:根据   显示   设备   user   缩放图片   scale   运行   图片模糊   适配   

    这篇博客主要讲一下上一篇博客的右侧和底部出现的问题。就是页面会有偏移量。说一下这个产生的原因吧。

    一开始在构建html页面的时候,习惯性的在页面中加了

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

加了这个,导致canvas画出的图在移动端上有些模糊,尤其是后面我们在画文字的时候,文字根本看不清楚。这个其实并不是插件的问题,也不能完全归罪于这句代码。canvas本身就会出现画出的图片模糊的问题,所以网上的方式基本都是找到设备的分辨率,让canvas依据分辨率来画图。而我在这个插件中去掉那句代码,主要是因为懒。。。然后调整canvas偏移的问题就可以了。然而事实并不是这样的。

我把代码贴一下,由于这个游戏既要在pc上运行,也要在移动端运行,样式的话,想共用一套,而且,移动端界面适配很复杂,现在大部分人用的手机是全面屏的,因此,通过一个比例关系算出来全面屏和非全面屏的区别。这样是可以解决大部分的适配问题,但仍有一个问题,就是有的手机屏幕比较宽,并且高度比较小,像这种的话,建议将界面算出来,其余的部分,可以和UI和产品沟通一下,看看可不可以增加一个统一的背景图,只针对pc和这种比较宽的手机上显示,这样基本上所有的页面适配都解决了。而我们就是采用的这种方法。

/*根据设计图和屏幕宽度的比例自动缩放图片和精灵图的大小*/
var winH = window.innerHeight
var winW = window.innerWidth

console.log(winH,winW)


var H5 = winH > winW

var isGullScreen = winH/winW;//是否是全面屏

var canH,canW,bl;


if(isGullScreen>1.9 && H5 ){//全面屏
    canW = winW;
    canH = winH;
}else if(H5 && isGullScreen < 1.9){
    
    canH = winH;
    canW = canH * 640 /1136;
}else{
    canW = winH * 640 / 1136;
    canH = winH;
}

bl = canW / 640;

上述方法在后面添加文字的时候,文字也不会出现模糊的情况了。不建议在phaser的页面出现操作DOM元素的事件。除非迫不得已,因为会有很多细节的问题需要调整。

 

phaser小游戏框架学习中的屏幕适配

标签:根据   显示   设备   user   缩放图片   scale   运行   图片模糊   适配   

原文地址:https://www.cnblogs.com/bllx/p/10291644.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!