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

    一开始在构建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小游戏框架学习中的屏幕适配的更多相关文章

  1. phaser小游戏框架学习(一)

    这两天由于项目的需要,所以简单学了一下phaser框架. 官网:http://phaser.io/ 还有一个phaser小站,是中文的网站,但是内容不如英文文档全,大家也可以去看这个网站,需要查阅AP ...

  2. phaser小游戏框架学习(二)

    今天继续学习phaser.js.上周写的学习教程主要内容是创建游戏场景,游戏中的显示对象,按钮对象的使用以及如何在不同屏幕大小中完美适配.这篇博客以介绍游戏榜单的渲染更新为主. 代码地址:https: ...

  3. 游戏框架设计中的。绑定binding。。。命令 command 和消息message 以及MVVM

    游戏框架设计中的.绑定binding...命令 command 和消息message

  4. Python---战机小游戏,学习pygame

    import pygame # 导入游戏包 pygame.init() # 导入并初始化所有pygame模块,使用其他模块之前必须先调用init()方法 print('下面是游戏代码:') # 绘制矩 ...

  5. Android 开发中的屏幕适配技术详解

    本文主要介绍Android开发中比较头疼繁琐的一个问题-屏幕适配问题.主要从适配原因.基本核心概念.适配方法等方面介详细 介绍从而是的深入或者进一步对Android屏幕适配技术的掌握和理解. 真题园网 ...

  6. 关于Unity中的屏幕适配

    一.Game视图的屏幕分辨率可以先自定义添加,供以后选择,以下是手游经常用到的分辨率: 1.1136X640,iPhone5 2.1920X1080,横屏,主流游戏都是这个分辨率 3.1080X192 ...

  7. Phaser小游戏

    本来今天打算阅读AngularJs源代码的,但是上头下来了任务,做个小霸王上面的那种接金蛋的游戏,想象最近系统的学习了一下gulp和之前熟悉了一遍的Phaser,于是就打算用这两个东西一起来做个dem ...

  8. ci框架学习中注意的事项

    视图: 加载视图:$this->load->view('name'); 一次可以加载多个视图,如: public function index() { $data['page_title' ...

  9. 微信小程序组件学习中

    一.轮播图 wxml代码: <swiper indicator-dots="true" autoplay="true" duration="10 ...

随机推荐

  1. HTTP-Runoob:HTTP请求头信息

    ylbtech-HTTP-Runoob:HTTP请求头信息 1.返回顶部 1. HTTP 响应头信息 HTTP请求头提供了关于请求,响应或者其他的发送实体的信息. 在本章节中我们将具体来介绍HTTP响 ...

  2. SEO中常用HTML代码大全,及权重排序

    做SEO必须要懂HTML,说的是一点都没错,不过其实是不需要全部都懂,最重点的你懂了会用,基本上都是事半功倍了.可以这么说一个不懂代码的优化人员不算是一个合格的好优化.下面就总结一下做优化,必须要懂得 ...

  3. 2011-03-17免Oracle客户端连远程Oracle的方法

    1.http://www.oracle.com/technetwork/topics/winsoft-085727.html上下载对应版本的instanctclinet zip包 34M 解压后92M ...

  4. HDLM命令dlnkmgr详解之三__view

    view命令主要用于显示program information, path information, LU information, HBA port information, CHA port in ...

  5. 问题:Oracle to_date;结果:oracle常用的时间格式转换

    oracle常用的时间格式转换 1:取得当前日期是本月的第几周 SQL> select to_char(sysdate,'YYYYMMDD W HH24:MI:SS') from dual; T ...

  6. 关于EMGCU中的cvertern.dll无法找到的问题

    方法1:自己到EMgucv目录的bin里面拷贝x86文件夹到自己程序的debug目录 方法2:将这个X86目录添加到PATH变量,记得要注销,否则新添加的无法起作用,VS2010还显示无法找到.

  7. elasticsearch(5) curl 操作elasticsearch

    创建索引之前可以对索引做初始化操作, 比如指定shards数量以及replicas的数量.     library为索引的名称 CURL -XPUT 'http://192.168.1.10:9200 ...

  8. python 2.7.5升级到3.4.x

    wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz .tgz cd Python-/ Python ./configure ma ...

  9. nested exception is java.net.UnknownHostException: mybatis.org异常处理

    最近自己写了个小项目(丛林商城V1.0),一个简单的网上商铺:主界面是商品的展示和登录,面对三种角色的人群:一般客户,VIP客户,管理员,与之对应的三种商品价格,登陆后根据具体角色来显示商品的价格:还 ...

  10. Django的Model使用

    创建模型 使用Django的模型主要注意两个方面:字段的类型和方法的重写.这里用一个例子来说明,其中包含了常用的字段类型和如何重写方法. from django.db import models cl ...