Понимание размера изображения для экранов с различным разрешением

Мне трудно собрать всю информацию о размерах изображений для @1x, @2x и @3x вместе. Я использовал редактор сцен в XCode с размером сцены 1334x750 (пиксельные размеры экрана iPhone 6). Итак, когда я определяю размер изображения для спрайта в этой сцене, это тот размер, который я должен использовать для @2x?

Из того, что я прочитал в документации, CGSize использует точки, а не пиксели, поэтому, если у меня есть изображение CGSize (ширина: 50, высота: 50), это не зависит от мой размер сцены в Редакторе сцен?

Вопрос в нижней строке: как размеры CGSize преобразуются в то, как я экспортирую свои изображения для @1x, @2x и @3x в пикселях и каким должен быть PPI при экспорте?

4 4
ios swift image-size sprite-kit

4 ответа:

Концепция проста. Размер в раскадровке или Построителе интерфейса должен быть размером вашего ресурса в формате @1x.

Дисплей retina (или iPhone 6+ @3x размер ) не означает, что у вас есть много места, чем раньше, это означает, что вы можете нарисовать 2 ( или 3) пикселя, где вы рисуете 1 раньше.

Таким образом, для представления изображения 50x50 px cou должен иметь 3 ресурса : - Image@1x.png ( 50х50 Пикс.) - Image@2x.png ( 100х100 Пикс.) - Image@3x.png (150x150 px)

1

Xcode может обрабатывать векторные изображения, поэтому вы можете забыть о @2X и @3X изображениях, если вы можете экспортировать свои изображения в формате PDF, например, в панели Sketches export одним из вариантов формата экспорта является PDF, поэтому создайте свое художественное произведение @1X и экспортируйте в формате PDF, а затем в Xcode, когда вы добавляете изображение в активы.xcassets, вы можете установить атрибут images Scales в Single Scale. Xcode будет генерировать необходимые изображения @2X и @3X из вашего векторного PDF во время сборки.

3

Предположим, что вы создали образ в библиотеке ресурсов, состоящий из 3 наборов одинаковых изображений, @1x.png имеющих размер 50x50 pixels, @2x.png размера 100x100 pixels и @3x.png размера 150x150 pixels.

Вам не нужно беспокоиться о том, какой из них использовать в вашей раскадровке(потому что раскадровка автоматически использует @1x.png), а какой использовать для целевого устройства, такого как iPhone6, или iphone7, или iPad(потому что по умолчанию Программирование всего оборудования находит свои пиксели относительно требуемого изображения среди этих @1x. png, @2x. png и @3x. png)

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

Тайны автоматической компоновки Часть 1

Тайны автоматической компоновки Часть 2

1

@1x и @2x раньше относились к изменению графики retina, когда вышел iPhone 4.

IPhone 3GS был 320x480, iPhone 4-640x960. Это означало, что точки на дюйм были буквально одинаковы, но ppi был удвоен, следовательно, @2x. Когда iPhone 5 вышел, единственное, что изменилось, была высота, поэтому ppi был таким же для ширины, никаких проблем здесь не было.

Затем мы попали в 6 и 6+. В этот момент apple заявила, что к черту все, постарайтесь сохранить ppi, которые коррелируют с предыдущие iPhone, не имея сохранить предыдущую полезную область iPhone, или обеспечить большие пиксели экрана для больших устройств. Теперь @2x утратил свое первоначальное значение

Но, чтобы действительно сбить нас с толку, они сделали iPhone SE, который вернулся к размеру экрана ppi iPhone 5, так что @2x снова имеет смысл.

В основном, когда вы думаете о графике @2x, подумайте о размере разрешения 1-го iPhone.

Теперь у вас есть выбор, который вы должны сделать. Вы можете сделать ваши приложения более / менее удобными площадь, вы можете черный ящик дополнительной полезной площади, или вы можете масштабировать и принять некоторую потерю качества из-за того, что игровые пиксели больше не являются 1:1 с пикселями экрана.
1