Pixi.js: Поддержка Retina

Я согласен с этой ошибкой. В качестве справки вот как это обычно можно решить: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Это также проблема с текстом.

Допустим, у вас есть экран Retina с devicePixelRatio, равным 2, и вы хотите получить четкий холст размером 400x300. Чтобы получить это, вам нужно инициализировать средство визуализации PIXI с желаемыми размерами холста, умноженными на devicePixelRatio (800x600), а затем вручную масштабировать холст до 400x300 с помощью css. И затем, конечно, вам нужно будет включить это масштабирование во все свои вычисления: позиции, размеры шрифтов, ширину линий, загруженные ресурсы и т. Д.

Я использую что-то вроде этого:

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';

+1

Есть ли планы по решению этой проблемы в ближайшее время? Необходимость масштабировать каждый размер, положение и размер шрифта действительно болезненна. Особенно, когда есть довольно простой способ сделать это со стандартным холстом.

Такой размер библиотеки сделать сложно, потому что он зависит от того, являются ли ваши спрайты hidpi или нет. Мы оставили его в пользовательском пространстве, потому что не знаем, какие ваши спрайты масштабировать для hidpi, если они есть и когда; но ты делаешь.

Привет @englercj . Под спрайтами вы имеете в виду активы, загруженные пользователем?

@dcascais да

@englercj Спасибо за ответ.

В настоящее время, если представление средства визуализации масштабируется с помощью трюка CSS (описанного в моей предыдущей ссылке), чтобы получить правильное разрешение экрана, все, что добавляется в сцену и затем отображается с помощью масштабированного представления средства визуализации, не масштабируется соответствующим образом, он сохраняет свой пиксель значения, поэтому в основном вдвое меньше.

Это включает в себя контент, который динамически отображается в графическом контексте, тексте и загруженных ресурсах.

Другие платформы предполагают, что пользователь несет ответственность за предоставление соответствующих ресурсов для экранов различной плотности, но внутренние компоненты работают без проблем, имея свойство масштабного коэффициента, которое позволяет вам легко решить, на какую плотность отображения вы хотите нацелить. Интересно, будет ли это более простым подходом для пользователей Pixi. Позволить им беспокоиться только о правильных активах и убедиться, что коэффициент масштабирования установлен правильно.

У вас есть предложение, как добиться ожидаемого масштабирования контента, добавляемого в сцену?

Ручное масштабирование значений x, y, ширины и высоты каждого элемента в списке отображения, а в случае текста определение различных строк с именами шрифтов правильного размера может стать очень громоздким и подверженным ошибкам, если вы имеете дело с большим проект.

Спасибо.

Интересно, я хотел бы посмотреть, как работают некоторые из этих систем. Что касается масштабирования каждого элемента по отдельности, это не похоже на выход. Поскольку это граф сцены, не могли бы вы просто соответствующим образом масштабировать корневой DOC?

@englercj , я пробовал это в песочнице, и хотя он возвращал вещи к

@bmantuano Я ожидаю, что он будет масштабироваться в соответствии с выбранным алгоритмом (ближайший, линейный, бикубический и т. д.).

Чад, спасибо за ответ. Что касается алгоритма масштабирования, вы имеете в виду PIXI.scaleModes? Если это так, похоже, бикубического варианта нет.

@englercj Вот несколько JSFiddles, которые показывают, что мы пытаемся сделать, чтобы получить четкий текст и графику (динамически отрисовываемую, а не ресурсы) на дисплеях с высоким разрешением.

Масштабирование холста и масштабируемый контейнер основного экранного объекта (правильный размер, но размыт и с некоторыми проблемами)
http://jsfiddle.net/hsv8Q

Масштабирование холста (отображается четко, но неправильного размера и с некоторыми проблемами)
http://jsfiddle.net/hsv8Q/1

Без масштабирования (правильный размер, но размыто)
http://jsfiddle.net/hsv8Q/2

Надеюсь, это поможет вам понять, что мы имеем в виду. Сообщите нам, есть ли еще что-то, что мы должны попробовать.

Спасибо @dcascais за добавление этих скрипок. @englercj , первое - это то, что вы предлагали, верно? Можете ли вы увидеть там пикселизацию на устройстве с высоким разрешением?

@bmantuano К сожалению, у меня нет устройства HDPI, чтобы протестировать его :( Я собираюсь оставить его для просмотра @GoodBoyDigital или @photonstorm .

@englercj , спасибо, что @arahlf и @ n1313 , вы нашли обходной путь?

Нет, не сейчас :(

@bmantuano , я до сих пор использую подход, описанный в моем предыдущем комментарии, и у меня нет никаких проблем.

Есть ли какие-нибудь движения по этому поводу? Я использовал упомянутый метод масштабирования @ n1313, но он Retina .

Любые идеи?

@arahlf и @ n1313 ,

@GoodBoyDigital , это на вашем радаре? Было бы полезно просто получить представление о том, можно ли этого ожидать в будущем обновлении или нам нужно что-то исправить.

@GoodBoyDigital Просто хотел добавить сюда свой голос. Я работаю над многопользовательской онлайн-игрой с использованием Pixi.js, потому что мы определили его как наиболее производительный движок рендеринга, но нам очень больно из-за поддержки дисплеев Retina!

Так получилось, что я почти наполовину добавил поддержку сетчатки :) Посмотри на это место ..

Превосходно: +1:

@GoodBoyDigital , это

@GoodBoyDigital Это

Я не буду требовать от вас оценки и не буду жаловаться, если это не будет сделано в указанные сроки - просто любопытно, как долго, по вашему мнению, мы будем ждать!

Привет, ребята, только что загрузили новую ветку "dev-retina" в git hub. Было бы здорово, если бы вы все могли сыграть. Там много движущихся частей, поэтому решил, что было бы неплохо протестировать его с некоторыми реальными проектами, прежде чем объединять его в ветку dev.

Renderer теперь имеет параметр option. Одна из новых возможностей - разрешение. Итак, чтобы установить средство визуализации на сетчатку, вы можете создать средство визуализации следующим образом:

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

Все должно выглядеть так же .. но разрешение будет выше :)

BaseTexture теперь тоже имеет разрешение. Если изображение имеет высокое разрешение, тогда вам нужно будет установить разрешение на 2. Чтобы автоматически установить разрешение на два при загрузке, нужно добавить изображение с @ 2x к имени изображения.

Итак, если вы загрузите, скажем: [email protected], pixi будет считать, что его разрешение

Лучше всего поиграть! Но, пожалуйста, задавайте вопросы, поскольку это, вероятно, не так просто, как кажется :)

+1

Привет, Мэтт. Выглядит отлично! Мне удалось заставить Canvas отображать красивый и четкий текст и ресурсы. Насколько я тестировал, размер и положение, кажется, обрабатываются правильно.

Единственное, с чем у меня возникают проблемы, это с процедурами рисования Pixi.Graphics. Кажется, я не могу добиться четкости рендеринга. Однако размер и положение рендеринга правильные.

Графические объекты тоже должны быть сетчаткой? кешируете ли вы как растровое изображение
графический объект случайно? или это прямо PIXI.graphics?

Во вторник, 9 сентября 2014 г., в 17:32 dcascais [email protected] написал:

Привет, Мэтт. Выглядит отлично! Мне удалось добиться хорошего рендеринга холста.
и четкий текст и материалы. Размер и положение, кажется, обрабатываются правильно
насколько я тестировал.

Единственное, с чем у меня возникают проблемы, это Pixi.Graphics.
процедуры рисования. Кажется, я не могу добиться четкости рендеринга. В
размер и положение рендеринга правильные.

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

Мэт Гровс

_Технический партнер_

Телефон: 07708 114496 :: www.goodboydigital.com
Первый этаж, блок 9B, Queens Yard, White Post Lane, Лондон, E9 5EN
Goodboy ©. Все права защищены.

@GoodBoyDigital При описании проблемы я пропустил часть

Я создал JSFiddle, чтобы помочь описать проблему и полученный рендеринг:
Это показывает расплывчатую графику, если PIXI.Sprite получает текстуру, основанную на PIXI.Graphics:
http://jsfiddle.net/hsv8Q/13/

Эта настройка с прямым использованием PIXI.Graphics работает нормально:
http://jsfiddle.net/hsv8Q/7/

Попался! не беспокойтесь - я точно знаю, что вызывает это :)
Дам вам знать, как только он будет изменен. та!

Привет, @GoodBoyDigital , спасибо за поддержку

Одна проблема, которую я заметил в ветке сетчатки: рендеринг лучше, но области попадания не выровнены. Холст масштабируется, но области попадания - нет. Поэтому, если я хочу коснуться кнопки в центре экрана, мне нужно коснуться центра левой верхней четверти экрана, чтобы на самом деле прикоснуться к ней.

На этом экране, если я хочу нажать кнопку в центре, я должен ударить по оранжевому кружку (который я добавил позже в качестве примера), чтобы на самом деле нажать на него. Hitarea не масштабируется с остальными.

О параметре "разрешение" в функции autodetectRenderer; мы могли бы просто использовать window.devicePixelRatio, верно?

Я нашел быстрое / грязное решение проблемы, описанной выше. Проблема, похоже, находится в функциях onTouchStart, onTouchMove и onTouchEnd InteractionManager. Это можно исправить, изменив расчет touchData.global.x и touchData.global.y в ​​этих функциях и разделив их на this.resolution.

Кажется, это решает проблему, но может быть гораздо лучшее решение.

привет @GillesVermeulen
Я изменил область попадания в последний коммит. Не могли бы вы попробовать последнюю версию, пожалуйста? та!

Привет, @GoodBoyDigital , спасибо за быстрый ответ и поддержку, но возможно ли, что коммита, о котором вы говорите, еще нет на Github?

@GillesVermeulen -

Добрый день

Итак, для получения красивой хрустящей текстуры сетчатки все, что вы можете сделать:

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

дайте мне знать, если это сработает для вас. Спасибо!

@GoodBoyDigital Отлично ! Теперь это работает довольно хорошо. Я ценю новости по этому поводу.

Как общий вопрос. Вы или другие сталкивались с другими проблемами, такими как проблемы с производительностью, памятью или сбоями, из-за этого обновления в высоком разрешении?

Спасибо, Мэт.

Рад слышать!

Желаю, чтобы для этого не было волшебной пули! К сожалению, более высокое разрешение действительно повлияет на производительность и потребление памяти, поскольку вы, по сути, все будет вдвое больше. Изображения Retina занимают в 2 раза больше памяти, и webGL / Canvas потребуется для рендеринга сцены с вдвое большим количеством пикселей. На устройствах с низким объемом памяти / ЦП это может быть настоящим убийцей, поэтому очень важно быть внимательным, когда что-либо делает с высоким разрешением.

Разве это не было бы 4x? Кроме того, разве не гарантировано, что у людей с дисплеями Retina также будут быстрые компьютеры?

@iirelu действительно правда! В 4 раза больше!
Да, я не думаю, что на компьютерах с дисплеем Retina возникнут какие-либо проблемы, так как они будут довольно высокого класса.

Проблемы с памятью с большей вероятностью проявятся на мобильных устройствах с экранами сетчатки глаза.

@GoodBoyDigital , спасибо за обновление сенсорных функций. Это было то же самое, что и мое временное исправление, и, похоже, помогло.

По производительности: с недавнего времени я тестировал вещи в CocoonJS на IOS7. Производительность определенно лучше по сравнению со стандартным iOS Webview, который используется такими вещами, как Phonegap, но рисование фигур кажется очень утомительным, а фигуры не сглаживаются, как в Safari. Я полагаю, что это связано с CocoonJS и имеет мало общего с Pixi.

Как только вы примените фильтр к текстуре сетчатки (@ 2x), все позиционирование будет отключено.

Спасибо за внимание @joaomoreno ! Обязательно посмотрю: +1:

Небольшой вопрос по API, который вы представляете: нет ли противоречий между PIXI.autodetectRenderer(width, height, optionObject) и PIXI.autodetectRenderer(width, height, view, antialias, transparent )?
Сделает ли это аргумент optionObject шестым аргументом из второй подписи, как описано в src/pixi/utils/Detector.js ? Я не совсем уверен, где еще его поставить, поскольку третий аргумент уже является DOMElement, не так ли?

Следующая версия pixi будет использовать новую сигнатуру метода, это критическое изменение.

@englercj Большое спасибо за быстрый ответ. Тогда останутся ли выброшенные опции доступными каким-либо другим способом?

Объект параметров содержит все предыдущие и новые параметры. Функциональность не удаляется, вы просто передаете параметры по-другому:

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

О, удобно! Большое спасибо за это. : +1:

Поддержка Retina сейчас находится в ветке разработки. Пожалуйста, дайте мне знать, если кто-нибудь обнаружит какие-либо проблемы с этим: +1: сейчас закрыто.

У меня проблема с MacBook Pro Retina.

Я не использую {resolution:2} .

Ширина рабочей области возвращает реальные пиксели сетчатки. В моем случае это 2540 пикселей. Текстуры визуализируются в два раза больше, чем их ширина, и их ширина также не соответствует реальным пикселям сетчатки 1: 1. Таким образом, изображение размером 300 x 200 занимает 600 x 400 пикселей сетчатки, а ширина возвращается 300.

Это ожидаемое поведение?

@PierBover Да, высота / ширина объекта фактически не изменились. Он просто отображается с другим разрешением.

@englercj, но как получилось, что размеры в реальных пикселях и удвоенные пиксели смешаны?

Привет, ребята, я что-то не так делаю? Если я сделаю разрешение 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

В этом выпуске и в этом сообщении блога http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ упоминается, что изображения сетчатки нуждаются в @ 2x или @ x2 перед расширением. . Я предполагаю, что правильным является @ 2x . Это верно?

@ 2x правильно. Это может быть имя папки или добавленное к имени изображения.

assets/@2x/image.png or assets/[email protected]

@Adireddy, спасибо. Это полдела. Есть идеи, почему мой холст масштабируется, а не увеличивается разрешение?

Та же проблема здесь для сетчатки, любое использование разрешения: 2 приводит к неправильному позиционированию привязки PIXI.Text. Изменение масштаба холста в CSS мало помогает. Мне пришлось установить разрешение на 1, удвоить размер шрифта текста, а затем уменьшить его вдвое.

И даже при этом текст все равно не выглядит гладким.

Привет, Elyx0, вы можете попробовать мой текстовый плагин для мобильных устройств, доступный здесь: https://github.com/JiDW/pixi-cocoontext

Устраняет ли это ваши проблемы?

Привет @JiDW , наконец-то исправил. Я использую чистый PIXI.js, поэтому мне не нужен Cocoon, мой холст просмотра не был настроен должным образом. Спасибо

@GillesVermeulen

Я рассматриваю возможность поддержки устройств с высоким разрешением в моем проекте, поэтому мне интересно:

Холст масштабируется, но области попадания - нет.

Решено ли это в PixiJS? (например, в более поздней / последней версии)

Привет @tobireif , думаю, да. Давно не было проблемы, но это с Pixi v2. Я не думаю, что это проблема с более новой версией.

@GillesVermeulen Звучит хорошо! Спасибо!

Метод CSS, который у меня сработал с использованием холста (без pixi.js)
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; }
На всякий случай это может кому-нибудь помочь.

Привет !

У меня проблема с моим последним проектом: http://romaincazier.com/davatars/

Я не могу получить правильное разрешение пикселей для своих объектов ... Я не знаю, связано ли это с модулем визуализации или графикой, из которой я сгенерировал текстуры, но в обоих случаях я добавил window.devicePixelRatio, но это не похоже иметь какое-либо влияние.

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.