Проектирование масштабируемой графики без использования векторов

Я работаю над игрой для мобильного телефона и не могу позволить себе роскошь использовать векторную графику. Я бы хотел, чтобы в игру можно было играть на самых разных устройствах, от планшетов с разрешением 2560x1600 до телефонов с разрешением 320x240. В идеале мне нужен единый набор графических ресурсов для всех разрешений.

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

Как правило, я буду создавать все для устройства высокого класса и уменьшать масштаб при загрузке игры, что дает мне базовую линейную фильтрацию.

Есть ли какие-то особые рекомендации, которым я должен следовать при создании масштабируемой графики? Шрифты — особая головная боль. Я заметил, что более гладкие шрифты с мягкими краями масштабируются лучше, чем четкие шрифты. Вот такие советы мне нужны.

Я полный новичок в дизайне, но наверняка вы создаете их точно так же: с векторами. Вы просто экспортируете их как .png или что-то еще в каждом разрешении вместо использования svg, нет?
@OGHaza Я не знаю, какое будет разрешение, сейчас, вероятно, существует 30-40 различных разрешений телефонов, и я не создаю вручную графику для всех из них. Масштабирование произойдет на телефоне, как только игра узнает разрешение.
Riiiiight, извините, неправильно понял!
Вам все равно лучше сделать это с векторами, а затем взять версию с действительно высоким разрешением, которую вы передискретизируете. Конечно, теперь в ваших векторных рисунках может быть много свободного искусства. Шрифты всегда в виде намекающих векторов пожалуйста.
Это может быть огромной ошибкой. Вы проверяли, что происходит с растровым изображением, когда вы просто «сжимаете» его на 200, 300 или 400%? Детали могут включаться и исчезать. Вот почему векторные данные часто предпочтительнее.
Векторные данные @Scott не поддерживаются на всех устройствах, вот в чем проблема. Вопрос в том, как создать графику, которая хорошо масштабируется. Например, я обнаружил, что растровые шрифты с мягкими краями масштабируются намного лучше, чем более четкие шрифты. Вот такие советы я ищу.
Эта информация была бы полезна в вопросе, Уилл.
@Scott Спасибо, вопрос обновлен, чтобы сделать ограничения более понятными.
FWIW, я считаю, что браузеры webkit прекрасно поддерживают SVG... что будет охватывать большое количество мобильных устройств (а именно iOS и Android)

Ответы (2)

Я скептически отношусь к идее, что «векторы не поддерживаются». Я уверен, что библиотеки существуют для всех мобильных платформ: векторы всегда рассматриваются только как растровые изображения.

{ отредактируйте для ясности :} Хотя приведенное ниже обсуждение «mipmap» относится к 3D-рендерингу, сами мип-карты представляют собой «растровые» текстуры, которые применяются во время рендеринга. Нет никаких причин, по которым нельзя использовать концепцию MIP-карты в качестве активов в 2D-рендеринге на основе пикселей без 3D-конвейера... { end edit }

В любом случае, наиболее распространенной альтернативой является MIP-карта, либо вычисляемая «на лету» (загрузка ЦП, меньше контроля), либо предварительно визуализируемая и сохраняемая (больше памяти). MIP-карты обычно используются для 3D-уровня детализации (LOD), где лучшие ресурсы требуются только для вещей, ближайших к области просмотра.

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

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

( http://en.wikipedia.org/wiki/Mipmap )

В компьютерной 3D-графике MIP-карты (также MIP-карты) представляют собой предварительно рассчитанные, оптимизированные наборы изображений, которые сопровождают основную текстуру, предназначенные для увеличения скорости рендеринга и уменьшения артефактов сглаживания.

«артефакты сглаживания» = комментарий Скотта «огромная ошибка».

  • 2d MIP-карты (это есть у всех графических процессоров) = аппаратное ускорение разреженного пиксельного quadtree
  • 3D MIP-карты (графический процессор поколения после 2020 г.) = разреженное воксельное дерево с аппаратным ускорением
Заметьте, я понимаю, что вы хотите единый набор, но это причина превосходства векторного и 3D-моделирования в играх и графике.
Если вы посмотрите, например, на установщик Candy Crush Saga, вы увидите, что они используют растровые изображения, таблицы спрайтов и растровые шрифты. Они вложили много времени, денег и усилий в создание игры, в которую можно играть практически на любом устройстве. Если крупнейшая в мире кассовая компания на рынке мобильных игр пойдет по этому пути, я чувствую, что должен последовать их примеру.
@WillCalderwood, следуя примеру «самых прибыльных» компаний-разработчиков программного обеспечения, не является какой-либо гарантией создания качественных решений. (См. также: Microsoft, IBM и др.)
Но, судя по всему, вы решили не использовать масштабируемые файлы, поэтому я хотел бы спросить, в чем же заключается ваш вопрос? Похоже, вы уже решили использовать спрайты растровых изображений.
@ DA01 Мой вопрос заключается в том, как создать растровую графику, которая хорошо масштабируется, например, шрифты с плавными краями. Мне было интересно, есть ли у кого-нибудь еще какие-нибудь советы.
@WillCalderwood ах! Я понимаю. Растровые изображения, увы, изначально плохо масштабируются. Я думаю, что один небольшой совет будет заключаться в том, чтобы просто убедиться, что в них не так много деталей, которые исчезают при уменьшении масштаба. (Тем не менее, шрифты, скорее всего, следует оставить в виде текста в приложении, а не отображать в виде изображений)
@ DA01 К сожалению, при рендеринге через графический процессор вы не можете позволить себе роскошь рендеринга шрифтов как чего-либо, кроме изображений.
@WillCalderwood: что касается установщика, это единый универсальный установщик для всех устройств, или они сделали то, что я предлагаю, и упаковали активы на основе размера пикселя / размера целевого окна просмотра? Возможно, они не создают «масштабируемую» графику, а ориентируются на размеры области просмотра и живут с минимальной дисперсией масштабирования. .8x-1.2x часто невозможно обнаружить, но 3-кратное масштабирование становится размытым, пикселизированным, линии выпадают и т. д. MIP-карта может быть построена как лист спрайтов одного неанимированного спрайта, и с ним можно обращаться очень похожим образом. способ..
@WillCalderwood: из вашего первого комментария мне пришло в голову, что я не был так ясен, как мог бы. Я предлагал концепцию MIP-карты для 2D-растров, а не для 3D-рендеринга.
@WillCalderwood, на какой платформе вы создаете свою игру? Вы упомянули HTML5 и холст, поэтому я предполагаю, что это, возможно, что-то вроде PhoneGap? Если это так, загрузка шрифтов в ваше приложение довольно тривиальна.
@horatio Хорошее замечание о разных установщиках для разных устройств. Я проверю apks на нескольких своих телефонах.
@DA01 DA01 Я создаю его с помощью libgdx, который по сути представляет собой оболочку OpenGL, предназначенную для ряда устройств. Все проходит через графический процессор, а шрифты ttf не проходят через графический процессор. Я могу создавать шрифты во время игры, но это очень медленно и качество не очень. Я отказался от HTML5, так как Javascript ужасен и недостаточно быстр. Я получал только 6 кадров в секунду на старом телефоне Android по сравнению с простыми 60 кадрами в секунду с собственным кодом.
«Javascript ужасен» = о, понятно. С точки зрения скорости. Да, он подходит не для всего (хотя я каждый день удивляюсь, как много еще мы можем с ним сделать).
Итак, это может быть актуально: stackoverflow.com/questions/17322995/… Похоже, эта платформа пока плохо справляется с векторными изображениями. Итак, вы можете застрять с растрами.
@ DA01 Похоже, что у SVG проблемы, аналогичные холсту HTML5, поскольку все реализуют его немного по-разному - и существует множество браузеров. Что касается Javascript, вы можете сделать с ним невероятно много — и ускорить его намного лучше, чем несколько лет назад. Но сопровождение крупных проектов — головная боль. Кроме того, сейчас есть несколько хороших сред разработки, но ни одна из них не работает на удивление хорошо.

Я в основном ориентируюсь на iOS, но мобильное сафари уже некоторое время поддерживает SVG. По-видимому, браузер Android на Honeycomb и выше также поддерживает SVG. Я склонен использовать только SVG для большинства своих иконок в мобильной iOS.

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

ОБНОВЛЯТЬ:

Если ваш вопрос

Существуют ли масштабируемые форматы изображений, которые не являются векторными?

Тогда ответ - нет, не совсем. Если это не вектор (к этому мы прибавим 3D-моделирование), то это растр. Растровые изображения имеют конечное количество пикселей, поэтому их можно масштабировать только до этой точки. Вы можете уменьшить масштаб с некоторым успехом, но обычно не очень сильно, прежде чем он начнет выглядеть плохо.

Попытка получить производительность за счет холста HTML5 не удалась + она включает в себя работу с Javascript, что ужасно :-) И люди жалуются на мобильную фрагментацию, но если умножить это на диапазон возможных браузеров, то, что они поддерживают и не поддерживают не поддерживают, и то, как они отображают то, что они делают... это ужасно. Я совершил короткую поездку по этому маршруту и ​​решил, что оно того не стоит.
Я говорю о SVG, а не о холсте.
Извините, неправильно понял. Я не встречал SVG. Я взгляну.
SVG = масштабируемая векторная графика. Вы можете сделать их в Adobe Illustrator, хотя многие предпочитают Inkscape (это с открытым исходным кодом + довольно хорошо обрабатывает SVG). Затем вы можете использовать их так же, как PNG или GIF, за исключением того, что они векторные, поэтому масштабируются до любого размера, который вы хотите.
Похоже, что более 20% телефонов Android все еще используют более ранние версии, чем Honeycomb, поэтому SVG на самом деле не вариант. Также похоже, что это не очень хорошо для таких вещей, как эффекты частиц. Хотя это вариант, с которым я мог бы когда-нибудь поиграть, пока не похоже, что это реальный вариант. Также похоже, что некоторые реализации SVG еще не используют преимущества графического процессора + это не то, для чего были разработаны графические процессоры. Я обнаружил, что графика через процессор уничтожает время автономной работы.
Проектирование масштабируемой графики без использования векторов
СпросиСетьПолитика конфиденциальности1y, 0v