Pixi.js: 视网膜支持

创建于 2014-03-02 · 66评论 · 资料来源: pixijs/pixi.js

在视网膜显示器上，用 PIXI 绘制的形状看起来很模糊。我试着在论坛上发个帖子，但它并没有真正去任何地方。我进一步研究了这一点，并设置了一些普通画布与 PIXI 的并排示例，以帮助更好地演示问题。这是一把小提琴

还有截图

在尝试缩放 PIXI 画布上下文时，我不确定带有奇怪的黑色背景的交易是什么......我可能做错了，或者框架中的其他东西正在妨碍或被修改上下文。

似乎 PIXI 可以通过检查devicePixelRatio然后相应地调整画布 + 上下文属性来添加内置的视网膜支持，但我不确定可能有什么其他影响。

资料来源

arahlf

最有用的评论

一种使用画布（没有 pixi.js）对我有用的 CSS 方法
canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }
以防万一这可以帮助任何人。

370417 于 2016-02-23

❤4

所有66条评论

我同意这个错误。作为参考，这是正常处理的方式： http :

这也是文字的问题。

dcascais 于 2014-04-10

假设您有一个 devicePixelRatio 为 2 的视网膜屏幕，并且您想要获得一个清晰的 400x300 画布。为此，您需要使用所需的画布尺寸乘以 devicePixelRatio (800x600) 来初始化 PIXI 渲染器，然后使用 css 手动将画布缩小到 400x300。然后，当然，您必须将这种缩放比例合并到您的所有计算中：位置、字体大小、线宽、加载的资产等。

我正在使用这样的东西：

var canvas = document.getElementById('game'),
    scale = window.devicePixelRatio,
    width = 400,
    height = 300,
    renderer = PIXI.autoDetectRenderer(width * scale, height * scale, canvas);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

n1313 于 2014-04-23

👍2

GurudayalKhalsa 于 2014-04-30

有没有计划尽快解决这个问题？必须缩放每个大小、位置、字体大小真的很痛苦。特别是当使用标准画布有一种相当简单的方法可以做到这一点时。

bmantuano 于 2014-05-01

这个库大小很难做到，因为它取决于你的精灵是否是 hidpi。我们将它保留在用户空间中，因为我们不知道您的哪些精灵可以用于 hidpi（如果有的话）以及何时缩放；但你做了。

englercj 于 2014-05-01

嘿@englercj 。精灵是指用户加载的资产吗？

dcascais 于 2014-05-01

@dcascais是的

englercj 于 2014-05-01

@englercj感谢您的回复。

目前，如果渲染器视图使用 CSS 技巧（在我之前的链接中描述）进行缩放以获得适当的显示分辨率，则添加到舞台然后使用缩放的渲染器视图渲染的任何内容都不会相应地缩放，它会保持其像素值，所以基本上是大小的一半。

这包括在图形上下文、加载的文本和资产上动态呈现的内容。

其他平台假定用户有责任为不同的屏幕密度提供适当的资产，但内部结构无缝地工作，具有比例因子属性，让您可以轻松决定要定位的显示密度。我想知道这对 Pixi 用户来说是否是一种更简单的方法。让他们只关心适当的资产并确保正确设置比例因子。

您是否有关于如何实现添加到舞台的内容的预期缩放的建议？

手动缩放显示列表中每个项目的 x、y、宽度和高度值，如果是文本，定义具有适当大小的字体名称的不同字符串会变得非常麻烦且容易出错。项目。

谢谢。

dcascais 于 2014-05-02

有趣的是，我想看看其中一些系统是如何工作的。至于单独缩放每个项目，这似乎不是要走的路。既然这是一个场景图，你就不能适当地缩放你的根 DOC 吗？

englercj 于 2014-05-02

@englercj ，我曾在沙箱中尝试过这个，虽然它把东西吹回了合适的大小，但它让它们像素化。你会期待不同的行为吗？

bmantuano 于 2014-05-12

@bmantuano我希望它可以根据选择的算法（最近的、线性的、双三次的等）进行缩放。

englercj 于 2014-05-12

乍得，感谢您在此回复。至于缩放算法，你是指PIXI.scaleModes吗？如果是这样，似乎没有双三次选择。

dcascais 于 2014-05-13

@englercj这里有一些 JSFiddles，它们展示了我们正在尝试做些什么来在高分辨率显示器上获得清晰的文本和图形（动态绘制，而不是资产）。

画布缩放和缩放的主显示对象容器（大小正确但模糊且存在一些问题）
http://jsfiddle.net/hsv8Q

画布缩放（显示清晰但尺寸错误并且存在一些问题）
http://jsfiddle.net/hsv8Q/1

无缩放（大小正确但模糊）
http://jsfiddle.net/hsv8Q/2

希望这能帮助您理解我们的意思。让我们知道是否还有其他我们应该尝试的事情。

dcascais 于 2014-05-14

感谢@dcascais添加这些小提琴。 @englercj ，第一个是你的建议，对吧？您能在那里看到高 DPI 设备上的像素化吗？

bmantuano 于 2014-05-22

@bmantuano不幸的是，我没有 HDPI 设备来测试一个 :( 我将把这个留给@GoodBoyDigital或@photonstorm看看。

englercj 于 2014-05-22

@englercj ，感谢您到目前为止的调查。感谢帮助。 @arahlf和@n1313 ，您找到解决方法了吗？

bmantuano 于 2014-05-29

还没有：（

arahlf 于 2014-05-29

@bmantuano ，我仍在使用我之前评论中描述的方法，并且没有任何问题。

n1313 于 2014-06-09

这方面有任何动静吗？我使用了提到的缩放方法@n1313，但它正在破坏视网膜设备上的 FPS。

有任何想法吗？

SamBenson 于 2014-07-04

@arahlf和@n1313 ，感谢回复。

@GoodBoyDigital ，这是在你的雷达上吗？如果我们可以在未来的更新中期待它，或者我们是否需要解决它，这将有助于了解它。

bmantuano 于 2014-08-07

@GoodBoyDigital只是想在这里添加我的声音。我正在使用 Pixi.js 开发大型多人在线游戏，因为我们认为它是目前性能最高的渲染引擎，但我们对视网膜显示支持感到非常痛苦！

chiubaka 于 2014-09-05

碰巧的是，我实际上已经完成了添加视网膜支持的一半 :) 观看此空间..

GoodBoyDigital 于 2014-09-05

真棒：+1：

krzysztof-o 于 2014-09-05

@GoodBoyDigital ，太棒了！感谢更新。期待它。

bmantuano 于 2014-09-05

@GoodBoyDigital太棒了！非常感谢你这么快回复我。我知道这通常很难说，但你能不能给我一个非常宽松的大概估计，你认为什么时候会为 Pixi 提供视网膜支持？

如果没有在那个时间范围内完成，我不会让你接受估计或抱怨——只是好奇你认为我们会等多久！

chiubaka 于 2014-09-08

嘿伙计们 - 刚刚将新的“dev-retina”分支上传到 git hub。如果你们都可以玩，那将是王牌。那里有很多活动部件，因此认为在将其合并到 dev 分支之前，最好先用一些实际项目对其进行测试。

渲染器现在有一个选项参数。新选项之一是分辨率。因此，要将渲染器设置为 Retina，您可以创建这样的渲染器：

PIXI.autodetectRenderer(100, 100, {resolution:2})

一切都应该看起来一样......但分辨率会更高:)

BaseTextures 现在也有一个分辨率。如果图像是高分辨率图像，那么您需要将分辨率设置为 2。在加载时自动将分辨率设置为 2 的方法是将带有@2x的图像附加到图像名称。

所以如果你加载说： [email protected]那么 pixi 会假设它的分辨率为 2。

最好真的有戏！但是请提出问题，因为这可能并不像看起来那么简单:)

GoodBoyDigital 于 2014-09-08

RobinQu 于 2014-09-09

嘿马特。这看起来很棒！我能够让 Canvas 呈现漂亮而清晰的文本和资产。据我测试，大小和位置似乎得到了正确处理。

我似乎唯一遇到问题的是 Pixi.Graphics 绘图程序。我似乎无法让这些渲染清晰。不过，渲染的大小和位置是正确的。

dcascais 于 2014-09-09

图形对象也应该是视网膜？是不是缓存为位图
偶然的图形对象？还是直接 PIXI.graphics？

在星期二，2014年9月9日在下午5时32分，dcascais [email protected]写道：

嘿马特。这看起来很棒！我能够让 Canvas 渲染得很好
以及清晰的文本和资产。大小和位置似乎被正确处理
据我测试。
我似乎唯一遇到问题的是 Pixi.Graphics
绘图程序。我似乎无法让这些渲染清晰。这
不过，渲染的大小和位置是正确的。
—
直接回复此邮件或在 GitHub 上查看
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

马特格罗夫斯
_技术合作伙伴_
电话：07708 114496 :: www.goodboydigital.com
一楼, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
好孩子©。版权所有。

GoodBoyDigital 于 2014-09-09

@GoodBoyDigital在描述问题时，我错过了我拥有的部分配置。我的设置是带有基于 PIXI.Graphics 对象的纹理的 PIXI.Sprite。

我创建了一个 JSFiddle 来帮助描述问题和由此产生的渲染：
如果 PIXI.Sprite 获取基于 PIXI.Graphics 的纹理，则此图显示了模糊的图形输出：
http://jsfiddle.net/hsv8Q/13/

这个直接使用 PIXI.Graphics 的设置可以正常工作：
http://jsfiddle.net/hsv8Q/7/

dcascais 于 2014-09-10

明白了！不用担心 - 我确切地知道是什么原因造成的:)
调整后会通知您。塔！

GoodBoyDigital 于 2014-09-10

嘿@GoodBoyDigital ，感谢视网膜支持！它也来得很好，因为我们的客户需要它:)

我在视网膜分支中注意到的一个问题：渲染更好，但命中区域未对齐。画布被缩放，但命中区域没有。所以如果我想触摸屏幕中央的按钮，我必须触摸屏幕左上四分之一的中心才能真正触摸它。

kaatje_retina_offset
在这个屏幕中，如果我想点击中间的按钮，我必须点击橙色圆圈（我稍后添加作为示例）才能真正点击它。命中区域不会与其他区域一起缩放。

关于autodetectRenderer函数中的“分辨率”参数；我们可以只使用“window.devicePixelRatio”对吗？

GillesVermeulen 于 2014-09-11

我找到了一个快速/肮脏的解决方法来解决我上面描述的问题。问题似乎出在InteractionManager 的onTouchStart、onTouchMove 和onTouchEnd 函数中。可以通过更改这些函数中 touchData.global.x 和 touchData.global.y 的计算并将它们除以 this.resolution 来修复。

这似乎解决了问题，但可能有更好的解决方案。

GillesVermeulen 于 2014-09-11

嗨@GillesVermeulen
我在上次提交中调整了命中区域的内容。会尝试使用最新版本吗？塔！

GoodBoyDigital 于 2014-09-12

嘿@GoodBoyDigital ，感谢您的快速回复和支持，但是您所说的提交是否可能尚未在 Github 上发布？

GillesVermeulen 于 2014-09-12

@GillesVermeulen - 现在触摸应该很好。我只是将分辨率更改应用于鼠标事件。让我知道它现在对你是否一切正常。谢谢！

GoodBoyDigital 于 2014-09-12

下午@dcascais ！我刚刚对 Retina 分支进行了修复，它可以让您定义 generateTexture 函数的分辨率。

所以对于一个漂亮的脆视网膜纹理，你可以这样做：

var retinaTexture = myGraphicsObject.generateTexture(2)
var normalTexture = myGraphicsObject.generateTexture(1)
var smallTexture = myGraphicsObject.generateTexture(0.5)

让我知道这是否适合你。谢谢！

GoodBoyDigital 于 2014-09-14

@GoodBoyDigital不错！这现在工作得很好。我很欣赏这方面的更新。

作为一个普遍的问题。您或其他人是否遇到过基于此高分辨率更新的其他问题，例如性能、内存或崩溃问题？

谢谢你，马特。

dcascais 于 2014-09-15

很高兴听到！

希望有一颗灵丹妙药！不幸的是，更高的分辨率确实会影响性能和内存消耗，因为基本上所有东西的大小都会增加一倍。 Retina 图像占用 2 倍的内存，而 webGL / Canvas 将需要渲染具有 2 倍像素的场景。在低内存/cpu 设备上，这可能是一个真正的杀手，所以在做任何高分辨率的事情时要注意这一点非常重要。

GoodBoyDigital 于 2014-09-15

那些数字不会是 4 倍吗？也不是几乎可以保证使用视网膜显示器的人也将拥有快速的计算机吗？

iirelu 于 2014-09-15

@iirelu确实如此！ 4 倍！
是的，我不认为带有视网膜显示屏的计算机会出现任何问题，因为它们非常高端。

记忆问题更可能出现在配备视网膜屏幕的移动设备上。

GoodBoyDigital 于 2014-09-15

@GoodBoyDigital ，感谢您更新触摸功能。这与我的临时修复相同，似乎可以解决问题。

关于性能：最近我一直在 IOS7 上的 CocoonJS 中测试东西。与 Phonegap 等使用的标准 iOS Webview 相比，性能肯定更好，但绘制形状似乎非常费力，而且形状不像 Safari 中那样抗锯齿。我想这是与 CocoonJS 相关的，与 Pixi 关系不大。

GillesVermeulen 于 2014-09-17

一旦将过滤器应用于视网膜 (@2x) 纹理，所有定位似乎都已关闭。

joaomoreno 于 2014-09-22

感谢@joaomoreno 的提醒！一定要看看：+1：

GoodBoyDigital 于 2014-09-22

只是关于您提供的 API 的一个小问题： PIXI.autodetectRenderer(width, height, optionObject)和PIXI.autodetectRenderer(width, height, view, antialias, transparent之间是否存在冲突）？
这会使optionObject参数成为src/pixi/utils/Detector.js描述的第二个签名的第六个参数吗？我不完全确定把它放在哪里，因为第三个参数已经是一个 DOMElement，不是吗？

kdex 于 2014-09-29

pixi 的下一个版本将使用新的方法签名，这是一个突破性的变化。

englercj 于 2014-09-29

@englercj 非常感谢您的快速回复。那么，删除的选项是否仍然可以通过其他方式访问？

kdex 于 2014-09-30

options 对象包含所有以前的选项和新的选项。功能不会被删除，您只是以不同的方式传递选项：

https://github.com/GoodBoyDigital/pixi.js/blob/dev/src/pixi/utils/Detector.js#L14 -L19

englercj 于 2014-09-30

哦，好用！为此非常感谢。：+1：

kdex 于 2014-10-01

视网膜支持现在在开发分支中。如果有人发现任何问题，请告诉我：+1：暂时关闭。

GoodBoyDigital 于 2014-10-14

我在使用 Retina macbook pro 时遇到问题。

我没有使用{resolution:2} 。

舞台宽度返回真实的视网膜像素。就我而言，它是2540像素。纹理以两倍大小渲染，它们的宽度也不是真正的 1:1 视网膜像素。所以 300 x 200 的图像占用 600 x 400 视网膜像素，但宽度返回 300。

这是预期的行为吗？

PierBover 于 2015-03-15

@PierBover是的，对象的高度/宽度实际上并没有改变。它只是以不同的分辨率呈现。

englercj 于 2015-03-15

@englercj但是怎么会有真实像素和双倍像素混合的尺寸？

PierBover 于 2015-03-15

嘿伙计们，我在这里做错了什么。如果我将 CanvasRenderer 的分辨率设为 2 以用于视网膜显示，它会使我的画布大小增加一倍，而我的@x2图像大小则增加四倍。

    <strong i="7">@scale</strong> = window.devicePixelRatio
    width = 960/<strong i="8">@scale</strong>
    height = 556/<strong i="9">@scale</strong>

    renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:@scale})
    container = document.getElementById 'container'
    container.appendChild renderer.view

StackOverflow 问题
http://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size