iOS - Różne obrazy na podstawie urządzenia LUB skalowania tego samego obrazu?

Question

Wygląda na to, że programiści zawsze tworzą różne zasoby obrazu dla różnych urządzeń i ładują je na podstawie urządzenia. Ale czy są jakieś wady po prostu tworzenie obrazów dla urządzenia o największej rozdzielczości (iPad), a następnie skalowanie tego obrazu dla iPhone'a 6, 5 itd.?

Używam SpriteKit, więc chciałbym po prostu utworzyć SKSpriteNodes o różnych rozmiarach i zastosować tę samą teksturę do nich i skalować go do węzła.

Wiem, że wydajność może być czymś do rozważenia (ładowanie dużych obrazów dla starszych urządzeń). Ale poza tym, czy jest coś jeszcze? Czy te obrazy wyglądałyby bardziej pikselowo/niewyraźnie?

Answer 1

Idealną/purystyczną odpowiedzią byłoby użycie oddzielnych zdjęć i kodu dla każdej rozdzielczości urządzenia.

Jednak z perspektywy czasu i zdrowia psychicznego rozsądnie jest użyć zestawu ograniczonego, ponieważ liczba rozdzielczości i rozmiarów ekranu nie zmniejszy się w najbliższym czasie. Więc po co marnować godziny na przygotowywanie wielu obrazów, chyba że łatwiej będzie to zrobić za pomocą kodu Xcode.

W przypadku obrazów o kwadratowym lub stałym współczynniku proporcji, potrzebuję tylko jednego obrazu. Problem dotyczy obrazów, takich jak tło, w których niezależnie od rozdzielczości konieczne jest zaspokojenie co najmniej różnych proporcji: tak ważne są oddzielne obrazy o proporcjach obrazu (np. 3: 2 i 16: 9), chyba że nie przeszkadza im gniecenie się, rozciąganie lub przycinanie obrazów.

Jeśli zauważysz pogorszenie wydajności podczas testowania, możesz zawsze dodać obrazy o niższej rozdzielczości później.

Pod względem pikselizacji jest to coś, czego nie można uniknąć. Jeśli myślisz o tym, co się dzieje, kiedy przechodzisz z x3 do rozdzielczości x1, musisz zmiksować 3x3 piksele w 1x1. Przy wysokiej rozdzielczości najbardziej ucierpi wszystko, co ma szerokość jednego piksela (jak linia) lub ma szybką zmianę koloru na kilka pikseli. Istnieje wiele artykułów online, na które możesz spojrzeć.

Jedynym sposobem na uniknięcie pikselizacji byłoby użycie obrazów wektorowych, ale wymagałoby to specjalnego oprogramowania do wczytywania obrazów wektorowych i renderowania ich do UIImages.

Każdy obraz będzie różnił się w zależności od skalowania. Może się zdarzyć, że wybierzesz obrazy x2, które zmniejszysz 1 dla iPhone 3 i 1 na x3 dla iPhone 6+. Objęłoby to większość obecnych urządzeń w natywnej rozdzielczości i prawdopodobnie oferowało mniej zauważalną pikselację.

Answer 2

Od jakiegoś czasu byłem pod wrażeniem, że pojedynczy obraz, który można później skalować, również jest w porządku.

Dla wielu sposobów Czyniąc to, wraz z niektórych benchmarkach, sprawdź NSHispter: Image Resizing Techniques

I do dalszego czytania, sprawdź Core Image firmy Apple doc, którego artykuł NSHipster wspomina również.

Answer 3

Nikt nie odpowiedział, czy jakość obrazu zostałaby zmniejszona. Po prostu próbowałem to zaimplementować, a obrazy wyglądają na nieco bardziej pikselizowane, niż gdyby były przechowywane w oryginalnym rozmiarze.

Answer 4

To zależy. Oczywiście bardziej ekonomiczne jest użycie jednego obrazu - lub jednego obrazu na jeden współczynnik proporcji, jeśli obcięcie obrazu spowodowałoby problem.

W przypadku zdjęć, takich jak zdjęcia, może to być całkowicie dopuszczalne, ponieważ tego rodzaju obrazy zwykle nie obejmują funkcji idealnie dopasowanych do pikseli.

Jeśli jednak mamy do czynienia z grafiką - cienkie linie, ostre kontury, doskonałe cechy pikseli - skalowanie może być poważnie szkodliwe dla jakości.

Weź pod uwagę następujący przykład: Wyobraź sobie, że chcesz utworzyć niestandardowe pole tekstowe o stałym rozmiarze. Obszar tekstowy powinien być otoczony czarnym konturem o szerokości linii 1 piksela. Używasz rozdzielczości siatkówki dla twojej grafiki, a twoim punktem startowym jest rozmiar ekranu 4 ". Jak będzie wyświetlane okno na innych rozmiarach ekranu, pod warunkiem, że pole tekstowe będzie skalowane razem z ekranem? -retina display?

Non-Retina: rozdzielczość musi być zmniejszona o połowę Wyobraź sobie blok 2x2 pikseli w twojej grafice - będzie to musiało być wyliczone w pojedynczy piksel. Nasz kontur ma tylko 1 piksel szerokości, więc 2x2 blok pikseli z linią przebiegającą przez niego zawiera dwa czarne i dwa białe piksele, w wyniku czego skalowanie jest nieco bardziej skomplikowane, ale wynik będzie rozmyta, mniej czarna i nieco grubsza

Skalowana siatkówka: Rozdzielczość musi zostać zwiększona. Wyobraź sobie urządzenie z funkcją res olizacja 1,5 x ekran 4 ". Linia 1px musiałaby mieć szerokość 1,5 piksela, co oczywiście nie zadziała. Zamiast tego oryginalna linia 1px zostanie rozciągnięta do skali szarości przez dwa (lub więcej) pikseli, przybliżając "ilość czerni", jaką miałaby linia 1,5px.

Skalowanie w jedną stronę (w górę lub w dół) spowoduje, że kontur będzie rozmazany, grubszy i mniej czarny.

Ten przykład nie jest idealny, ponieważ iOS pozwala definiować obrazy za pomocą rozciągliwych części, które doskonale skalują się. W naszym prostokątnym pudełku byłoby to możliwe. Nie działa to jednak w przypadku bardziej złożonych prac.

Jeśli piksel doskonałość jest koniecznością, nie ma sposobu, wokół obrazów dla każdej rozdzielczości lub grafiki wektorowej (kwarc/SVGKit/...)

Edit: Mam powielana moim przykładem w Photoshopie przy użyciu skalowania bilinear . Może wyglądać nieco inaczej na urządzeniu, ponieważ może użyć innego algorytmu skalowania. Ale myślę, że dostaniesz punkt ...

Answer 5

mogę odpowiedzieć z mojego doświadczenia w zakresie wykorzystania pamięci. Wystarczająco dużo ludzi odpowiedziało na temat jakości obrazu, więc jedynym problemem jest użycie pamięci. Użyłem techniki opisanej w mojej grze Piston Flip i działało dobrze, ponieważ nie używałem wielu tekstur lub węzłów. Jednak w innej grze, nad którą pracuję, wykorzystującej kafelki, nie mogę sobie pozwolić na użycie dużych obrazów i skalowanie ich, ponieważ każde urządzenie może w zasadzie obsłużyć tylko ładowanie płytek określonych dla rozmiaru ekranu.

Więc to naprawdę zależy.