Даёшь растр, или как повысить качество динамической картинки!

Графика
Трололо и тратата, мы везем с собой кота (:

Сразу объясню, что подразумеваю под динамической картинкой — это картинка которая может вращаться (:

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

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

Я пошел по тому же пути и начал дальше копать те самые загадочные проценты. Дело началось с 250% и закончилось на 115%. Результаты меня порадовали. Остановился я в диапазоне 120-115%. И выбрал 117%.(хотя в этом диапазоне почти все одинаковые картинки получаются)

А вот flash'ка теста:



300%:


А это предыдущие тест:


Вообщем, перепроверив все, сделал вывод — лидируют 300%. Получаем немного больше размер флешки(ну совсем мало, если использовать подобную графику, где задействовано 5-10 цветов, увеличенная PNG весит всего около 14Кб)

диапазон 125-115%
  • +8

Комментарии (37)

0
Немного не понял смысл процентов.
Вращаем не оригинальный растр, а увеличенный на 120-115%?
Или уменьшенный? Как?
0
картинку заранее увеличиваемся на 17%, а во флеше мы ее уменьшаем до оригинального размера.
0
Картинку заранее увеличиваемся на 17%, а во флеше мы ее уменьшаем до оригинального размера.
0
Любопытно. Но скорее всего применимо только к вектор-стайл графике с изначально не четкими линиями. Оригинал в примере сам по себе мыльный. Для пиксельарта, хорошего рендера и четкого вектора способ, увы, не прокатит.
0
Оригинал как раз таки построен на шейпах. Он не мыльный. Скорей всего такие ощущения из-за маленького размера + прозрачные линии.
0
А вот и пиксель-арт:
z3lf.com/test3.swf
0
это читерский пиксельарт x2 без деталей :)
Ради интереса попробовал пиксельный танчик покрутить, увеличив на 117% и на 300%:
suntsev.com/pic/test117.swf

Картинки в библиотеке подключены как png+allow smoothing. Без смуса совсем страшно. На мой вкус оригинал лучше, 117 хуже всех, в 300 есть бонус в виде сглаженной картинки на 90градусных углах.

В «защиту» флеша скажу, что фотошоп CS3 вращает такой пиксель сильно хуже, совсем размывая и сглаживая :(
0
да, опять таки перепроверил. 300% все таки лучше:
z3lf.com/test4.swf

самый лучший результат.
0
В фотошопе есть настройки сглаживания про повороте.
0
Я про оригинал в статье, он таки мыльный, достаточно на "#1" посмотреть, такой антиалиасинг даже старый фотошоп себе не позволяет :)
уменьшение размера и есть главная причина мыла. Основной финт ушами при создании четкой графики состоит в рисовании под лупой, но в исходном размере, благо нынешние векторные редакторы выравнивают по пиксельной сетке. А если вы делали графику грубо говоря в 500пикселей, затем уменьшили ее до игровых размеров в 64пикселя и увеличили на 117%, то более менее результат может быть только на простых формах. Либо на фото-текстуре, но с пропажей мелких деталей, вроде зрачков глаз. Ибо каждое увеличение/уменьшение это интерполяция, откуда тут четкости взяться.
0
Согласен. Но речь идет о том как безболезнено поворачивать растровую графику.
0
А только меня смущает побочный эффект увеличения конечного размера флешки? О_о
0
Битмапу можно программно попиксельно увеличить, уже после загрузки
0
Кстати, вот это я под сомнением. Мне кажется, в данном случае, графика должна быть идеальной в увеличенном размере. (такие увеличение при растре возможны только с шейпами)
Надо будет проверить, увеличив в PS пиксели в 3раза, и глянуть результат.
0
Я тут имел ввиду целочисленное увеличение, то есть 300%, тогда все ровно должно получится. В любом случае можно всегда методом draw увеличить с помощью матрицы.
0
сейчас попробывал эти 300%, вроде стало получше, но вот размер увеличился в 7-ь раз.
0
Это что такое можно было увеличить, чтобы получить прирост аж в 7 раз? Обычные картинки у меня дают увеличение в размере 1.5 раза.
0
картинки где-то 60х60 увеличил на 300% как я понял, а в игре сделал скейл 0.33. Много альфапустот, прозрачность увеличивает размер)
0
можно пример картинки? что-то слабо верится.
0
nfinfo.narod.ru/test.swf
0
да вижу. из-за сглаженности много ест, если увеличивать без сглаживания, то размер получается почти аналогичный.
Но такой способ работать не будет. Предполагается то, что графику можно будет увеличить до 300% без потери качества, т.е. как в примере с вектором.
+4
«Безболезненно» вращать битмапы не получится, мыло будет всегда. И на это можно спокойно забить, игрок этого не заметит.
  • qdrj
  • qdrj
  • ↓
+2
И на это можно спокойно забить, игрок этого не заметит.
Не всегда, у меня был случай, когда зрачки из-за мыла при повороте у персонажа пропадали полностью, и из милого и пушистого он превращался в зомби с горящими белками глаз) В примере с овцами, та которая 33%, достаточно не мыленая, чтобы мелкие детали не пропадали.
+1
Есть разные ситуации. Если стиль графики векторный с четкими тонкими линиями, то может получиться дикий контраст: с одной стороны четкий бекграунд (который векторый, но cacheAsBitmap) и очевидно любому взгляду мыльные юниты. При обычной растровой графике оно бы было незаметно.
0
Еще есть варинат пререндерить вращения в фотошопе или где надо. Через 10-15 градусов. А потом подсовывть в округленный до ближайшего кратного этому градусу угла. Места больше будет занимать, но производительность и качество картинки возрастет.
0
c 300% ты получаешь почти аналогичные картинки.
0
10°-15° это слишком большой шаг, для больших изображений и 1° мало для плавного вращения, для ускорения приведенного способа можно точно также как и с вектором сделать программный пререндер на каждый угол, но памяти — соответственно скушается придостаточно.
0
Конечно, при таком шаге и для больших картинок выигрыш будет сомнительным. Смысл есть для небольших по размерам и быстро двигающихся спрайтов, где пользователь не заметит небольшого расхождения по углам. Хороший пример такого пре-рендера — www.kongregate.com/games/LongAnimals/heavy-weapons — там все козявки нарендереные предварительно в векторе (но с тем-же или даже с большим успехом можно и в растре, т.к. потом их нарендреный ыектор выводится как битмап, вроде-бы). Получилось в итоге на отлично.
0
Повторюсь — «мыло» не раздражает, оно не очень заметно, если это не пиксел-арт, где весь смысл в точном и четком расположении каждого пиксела. «зубатка» при вращении — раздражает, рывки при движении — раздражают, но не замыливание.
Хотелось бы увидеть конкретные скрины где из-за замыливания картинке становится плохо. Я с этим ни разу не сталкивался, хотя в играх у меня тонны графического контента в растре.
0
Разница очевидна:
z3lf.com/test5.swf
0
Я не спорю тем, что разница видна.

Я сижу вглядываюсь в монитор, где изображен сферический кот в вакууме, без фона, без остальных объектов, естественно я вижу, что левая картинка четче. Но правая тоже нормально выглядит. Моему глазу она даже больше нравится, на ней нет это противной «зубатки».
0
Ладно, я думаю да, не совсем целесообразно тестить на белом фоне. И смотрю что мнения разошлись, кому-то мыло не мешает, а кому-то(как мне) оно ужасно раздражает)
0
Дело не только в том раздражает не раздражает, из за сглаживания могут теряться детали, как я выше писал:
0
Да детали теряются, есть решение, делать все резким, т.е. зрачки абсолютно черными, а вокруг чисто белый цвет и после сглаживания, вид становится более менее, но по детальности конечно не сравнится, с этим я вообще не знаю что делать.
0
Я это знаю, я в итоге все перешарпил, потому что не знал этой фитчи со скейлингом тогда, но сильно шарпить это не всегда айс — полутона теряются.
0
И еще пришлось практически попиксельно потом доорабатывать — двойная работа
+2
Еще один побочный эффект скейлинга — при low качестве флешки, овца — 33% имеет наилучший вид, без серьезных «лесенок».
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.