Egret社区

如何适配不同设备的dpi?

2019-8-13 12:52
2084
1银子
官方,老鸟们好。

最近正在学习egret,想问下如何适配不同设备的dpi。

例如
pc window.devicePixelRatio = 1
iphone6s 的 window.devicePixelRatio = 2
iphone6s plus 的 window.devicePixelRatio = 3
xiaomi9 的 window.devicePixelRatio = 2.75


设计师会给3套图
例如
image@x1.png 100X100
image@x2.png 200X200
image@x3.png 300X300

如何针对不通的设备适配不同的图片呢?
这种不标准的xiaomi9 [color=var(--darkreader-inline-color) ]2.75 怎么处理呢?
[color=var(--darkreader-inline-color) ]

谢谢~


分享到 :
0 人收藏

4 个回复

倒序浏览
as9567585  初学乍练 | 2019-8-13 14:37:06
任何参考链接都感谢
熊猫少女  官方团队 | 2019-8-14 16:38:31
1419664796  炉火纯青 | 2019-8-15 10:51:57
本帖最后由 1419664796 于 2019-8-15 10:53 编辑

白鹭已经给你做了
[mw_shl_code=applescript,true] egret.runEgret({
            renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor: function (context) {
                var backingStore = context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
                return (window.devicePixelRatio || 1) / backingStore;
            }[/mw_shl_code]

1565837282(1).jpg
比如iphone X 他的宽是375  他已经帮你把canvas设置成比屏幕大3x(width:1128)的了,所以可以解决canvas糊掉的问题
至于你所提到不同dpi用不同的素材,你仍然停留在DOM中用CSS写样式的思路,canvas和CSS还是很不一样的
iphone X 宽是375 你的素材是750 可以理解成图片已经是高清的了,一般情况不会糊掉
参考 https://segmentfault.com/a/1190000004505090
nofastfat  圆转纯熟 | 2019-8-15 11:00:52
做游戏不同于传统网页开发。
在egret里面,可以忽略DPI这个概念。
需要关注的单位是产品设计尺寸(像素,如横版的1334*750, 竖版的740*1334),
然后选择合适的缩放策略去适配不同机型的分辨率。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

as9567585

初学乍练

积分: 2 帖子: 2 精华: 0

楼主热帖

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部