Есть дизайн игры, есть иконки и кнопки, как и кто это должен делать?

Question

[Артем Масиков]

Добрый день, заказал на фрилансе у разработчика игр для android и столкнулся с такой проблемой, когда разработчик предоставил тестовую версию игры, на что я в первую очередь обратил внимание, это на плохое качество иконок и косяки у кнопок которые также отображаются в плохом качестве, Вопрос:
Кто виноват и кто должен это исправлять?
Если в дизайне отображается хорошо, а в предоставленной версии все плохо, виноват дизайнер?
Или все таки разработчик?
Если дизайнер, как исправляется данная проблема с экспортом иконок и кнопок?
Все фотографии не буду скидывать, тут заметно, что на краях кнопок видно есть проблемы.
Дизайн рисовался в figma

Answer 1

[maaGames]

Вы про красноватенькие пятна под кнопками? Это происходит из-за билинейной фильтрации загруженных текстур (чтобы, если их размер не соответствует размеру экрана, они масштабировались со сглаживанием, а не ступеньками). Чтобы такого не было, нужно каждый отдельный спрайт в спрайтшите располагать на удалении ото всех остальных. Т.е. картинки должны быть не вплотную, а с рамкой в 1 пиксель с каждой стороны. В идеале, эта рамка должна повторять картинку, тогда интерполяция будет идеальной. Елси просто прозрачный отступ сделать, то пиксель по периметру кнопки может стать полупрозрачным при интерполяции.
Делать должен тот, кто подготавливал набор картинок.
Ещё каждую отдельную картинку можно сделать в виде отдельного файла, но так может быть менее удобно работать.

Comments

[Артем Масиков]

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

[maaGames]

Артем Масиков, спрайтшит большая картинка, в которой расположено куча маленьких картинок. Когда в программе задано, то нужно взять фрагмент с координатой x:0, y:0 и размером 30 на 30 пикселей, то, из-за билинейной фильтрации, может захватиться 31 пиксель. Если 31 пиксель отличается цветом от 30 пиксела, то появляется видимый артефакт.
Если же каждая картинка/иконка в отдельном файле, то непонятно, откуда появляются эти дефекты.

[maaGames]

Артем Масиков, Если игра рассчитана на экран разрешением 1280*720 пикселей, а у вас больше или меньше разрешение, то могут появляться такие (и другие) артефакты.

[Артем Масиков]

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

[Артем Масиков]

maaGames, Дизайн рисовался только для одного разрешения, 320x568, как я понимаю проблема в этом? Тогда другой вопрос, под какие еще нужно рисовать экраны, дабы избежать таких проблем в будущем?

[maaGames]

Артем Масиков, Андроид смартфонов слишком много, опэтмоу под конкретное разрешение делать нельзя. Причём, ещё и соотношение сторон бывает разное.
Не знаком с figma, конкретно ничего не подскажу. Можно попробовать отключить фильтрацию текстур (bilinear filtering или как-то так называться будет). В этом случае не будет цеплять соседние фрагменты картинки, но может появиться заметная пикселизация. Учитывая исходное разрешение, может даже лучше будет без фильтрации.
Хотя, есть ещё вариант, что когда дизайнер делал картинки кнопок, то это у него лишние пиксели в картинку попали. Напрмиер, если он нарисовал всё в большом разрешении, а потом уменьшил с фильтрацией.

[Артем Масиков]

maaGames, А как тогда разрабатывают игры для android и у них хорошо выглядят кнопки и иконки под все устройства, как они выкручиваются из этого положения? Либо что то делают фиксированным, а что то растягивается во весь экран?

[maaGames]

Артем Масиков, По разном уделают. От "плевать, всё равно купят", до создания отдельных наборов картинок для разных разрешений.
Элементы интерфейса выравнивают относительно краёв и друг друга, при этом позволяя им в некоторой степени раздвигаться, если соотношение сторон изменяется. Как бы единого решения нет, кому что нужно, те так и делают. Это я гвоорю исключительно про программы с интерфейсом в виде растеризованных картинок. Если векторная графика используется, то там никаких проблем с размерами нет. Но в реализации обойдётся дороже, скорее всего.

[Артем Масиков]

maaGames, Я заметил, в дизайне присутствуют иконки в формате svg и они выглядят превосходно, а те картинки которые в формате png, страх и ужас, а если прибавить еще и яркость на экране...
Все же я не до конца понял, как сделать красиво, к примеру у меня телефон xiaomi redmi pro 8, я на нем в первую очередь смотрю примеры которые предоставляет разработчик, и вот на этом телефоне заметны проблемы в качестве элементов, иконки к примеру на главном экране вверху их размер 30x30, я не считаю, что это слишком маленько разрешение для такого экрана, зачем им размазываться.

[Артем Масиков]

maaGames, Или может есть какие либо программа, сайт который может это исправить, я к примеру экспортирую картинку и на сайте уже исправляю данную проблему?

[maaGames]

Артем Масиков, В любом графическом редакторе откройте картинку иконки и, если там виден этот артефакт (на белом/чёрном фоне), то его нужно стереть. А если не виден, то проблема уже на тапе отображения в программе.

[maaGames]

Артем Масиков, svg - векторные картинки. Они в любом размере будут чёткими. Странно, что сделано вперемешку... Раз png выглядят плохо (если просто файл открыть, не в приложении), то это явно художник плохо сохранил.

[Денис Загаевский]

Артем Масиков, давно уже все используют вектор, а не пнг. А если пнг, то под разные dpi должны быть нарезаны разные картинки.