Pixi.js: iOS 上的摆动 spritesheet 动画

创建于 2017-02-16  ·  29评论  ·  资料来源: pixijs/pixi.js

示例:http: //moonrat.co.uk/html5/pixi-ios-animation-bug/

您看到的是 3 种尺寸的动画,顶部为 x0.5,中间为 x0.75,底部为 x1。 左侧采用常规渲染路径,右侧三个动画使用 pixi-picture。

现在,我_仅在 WebGL 模式下的 iOS 设备上看到此问题_。 任何其他浏览器,甚至是 Mac 上的 Safari,都可以正常工作。 画布模式下的iOS,绝对没问题。 但是使用 WebGL 的 iOS(iPad 和 iPhone)设备……摇摆不定

@ivanpopelyshev建议试一试 pixi-picture,以获得更准确的渲染,它对大多数设备都有帮助,但并非对所有设备都有帮助,而且它很少能解决问题

这是我在上述示例中查看的所有 iOS 设备的列表

iPad Mini 2:10.0.2 - pixi 抖动,pixi-picture 没有
iPad 4:8.4 - pixi 抖动,pixi-picture 可以,但不那么重要
iPad Air:10.2 - pixi 抖动,pixi-picture 没有
iPad Air:10.3 - pixi 抖动,pixi-picture 没有
iPad Air2:8.3 - pixi 抖动,pixi-picture 有,但没那么严重

iphone 4s: 9.1 - pixi 抖动,pixi-picture 有,但没那么严重
iphone 4s:9.2.1 - pixi 抖动,pixi-picture 有,但不那么
iphone 5: 9.1 - pixi 抖动,pixi-picture 也一样
iphone 5: 10.1 - pixi 抖动,pixi-picture 也一样
iphone 5s:10.0.2 - pixi 抖动,pixi-picture 没有
iphone 6: 8.2 - pixi 会抖动,pixi-picture 会,但不太会
iphone 6: 10.0.2 - pixi 震动,pixi-picture 有,但少
iphone 6+:8.4 - pixi 抖动,pixi-picture 有,但不那么
iphone 6+:9.2.1 - pixi 抖动,pixi-picture 有,但不那么
iphone se:10.2 - pixi 抖动,pixi-picture 没有
iphone 7: 10.2 - pixi 会抖动,pixi-picture 会,但不太会

有任何想法吗?

💾 v4.x (Legacy)

最有用的评论

如果问题只是 IOS 上的精灵摇摆不定,那么是的,请执行“如果 ios 则将精度片段设置为高”。
如果不是ios,则可能需要图片插件。 但这不是我的 ios 唯一问题:)

所有29条评论

附加信息; 在最后一个 pixi v3 上不会出现这种摆动: http ://moonrat.co.uk/html5/pixi-ios-animation-bug-v3/

v3更好? 那很有意思

仅在旋转某些形状时(当它们的角度在 0 附近移动时会发生这种情况),我在 iOS 上遇到了相同的“摆动”问题。 无法回到 v3…

我认为可能的唯一区别是我们将顶点数据存储在 v4 中的 float32 数组中? 也许是精度问题?

@GoodBoyDigital我今天测试了它, @themoonrat说它是一样的。

酷 - 也许着色器精度?

是否值得将 roundPixels 设置为 false 进行测试,看看是否会阻止它?

2017 年 2 月 17 日星期五 16:13,Mat Groves [email protected]写道:

酷 - 也许着色器精度?


您收到此消息是因为您订阅了此线程。
直接回复此邮件,在 GitHub 上查看
https://github.com/pixijs/pixi.js/issues/3742#issuecomment-280692953
或使线程静音
https://github.com/notifications/unsubscribe-auth/AAipZJ8DLKkA3bRJQIOYcmTDpXZgfTehks5rdccygaJpZM4MDJtw
.

roundPixels 默认为 false,我已经检查过了。

等等,等等,这让我想起了!

@ivanpopelyshev - 你知道你是如何要求我将默认着色器精度更改为 highp 的,但它并没有改变任何东西。 好吧,我刚刚在你今天早上给我的新版本上试过了,它_确实_修复了它!

好吧,这很奇怪。
所以。
即使是当前的 dev 分支,具有用于 PRECISION 的 highp 也可以工作。 然而....

PIXI.settings.PRECISION = 'highp'
不工作
如果你直接进入 pixi.js,然后编辑
PRECISION: 'mediump',

PRECISION: 'highp',
然后它工作。

那么,高精度+双值? 似乎 double->float->highp 转换对 iphone/ipad 来说是件坏事。 我认为那是因为它不圆,但实际上截断了很多东西。

所以看起来这是一个没有被拾取的设置问题而不是其他任何问题

不错的赶上@themoonrat

k,我有一个修复; 这是由于导入设置的风格。 使导入时间成为静态,而不是当前的动态。 尽快提高公关

此外,我们真的应该在 Sprrite 中使用 Float64Array 而不是 Float32Array,这样可以稍微减少错误。

编辑:它不会,但通过其他一些措施可以:)

@ivanpopelyshev我认为我们现在很好 - 我们将它们作为 float32 上传,所以没有必要以双精度保存它们..

不幸的是,我仍然在使用 pixi4.4.1 的 iPad Mini3 上遇到问题。
我正在手动设置 PIXI.settings.PRECISION = 'highp',还有什么我应该做的吗?

您是否在控制台中看到弃用警告? 如果是,那么您确实在使用 4.4.1 。

你的用例是什么? 一个阶段只有几个精灵?

是的,我看到了请使用 PIXI.settings.PRECISION_FRAGMENT 弃用警告。
我的测试只有 1 个 AnimatedSprite 以 24fps(速度 0.4)播放。
动画是使用 TexturePacker 创建的,基本纹理尺寸是 POT (2048x2048)
在 4.4.1 中,他的晃动比以前少,但仍然是明显的抖动。

如果你使用 pixi-picture 渲染器呢? 只需添加这个: https ://github.com/pixijs/pixi-picture/tree/master/bin 并写

sprite.pluginName = 'picture';

伟大的! 使用 pixi-picture 它看起来很完美:)
所以这是一个替代的精灵渲染器?
我们应该在哪些情况下使用它? (除了这个明显的情况)。 它可以用作通用渲染器(支持多纹理批处理)还是更多特定用途的东西?

然后我知道主精灵渲染器出了什么问题。 Pixi 图片是根本不批处理的愚蠢东西,但它减少了边框伪影并支持叠加/硬光混合模式。

主要区别在于如何传递 UV 坐标。 主要的精灵渲染器使用 Uint16,而像所有其他插件一样的图片使用 Float 的。

供参考:
PIXI.settings.PRECISION_FRAGMENT = 'highp';
在没有任何插件的情况下为我解决了不稳定的 ios 动画

ps - @ivanpopelyshev ,你默认设置了 PRECISION_VERTEX 'highp' 来解决这个问题,但也许你选错了? 我的游戏将其降级为“中等”有什么缺点吗?
pps - 如果启用旧模式,我们是否应该将任何“highp”设置降级为“mediump”?

我有同样的问题,我使用 pixi v4.6.2。 这对我来说是非常关键的错误。 @ivanpopelyshev ,有人解决了这个问题吗?

PIXI.settings.PRECISION_FRAGMENT = 'highp'
在创建渲染器之前

请记住,有些设备不支持它,最好只在存在摆动的特定设备上启用 highp。

此外,如果您想解决少量对象的问题,请使用 pixi-picture 插件和sprite.pluginName='picture'

如果问题只是 IOS 上的精灵摇摆不定,那么是的,请执行“如果 ios 则将精度片段设置为高”。
如果不是ios,则可能需要图片插件。 但这不是我的 ios 唯一问题:)

@ivanpopelyshev@themoonrat谢谢,它有效。

该线程已被自动锁定,因为它关闭后没有任何最近的活动。 请针对相关错误打开一个新问题。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

gaccob picture gaccob  ·  3评论

Darker picture Darker  ·  3评论

zcr1 picture zcr1  ·  3评论

readygosports picture readygosports  ·  3评论

SebastienFPRousseau picture SebastienFPRousseau  ·  3评论