Convert to Vector w Scratch: dlaczego grafika nadal wygląda na rozpikselowaną

Przycisk Convert to Vector w Scratch nie wektoryzuje konturów kostiumu rastrowego. Przenosi grafikę rastrową do trybu edycji wektorowej, w którym może ona pozostać pojedynczym obiektem obrazu. Dlatego kostium w formacie PNG może nadal wyglądać na rozpikselowany po kliknięciu tego przycisku. Aktualny kod źródłowy edytora graficznego Scratch zachowuje podczas tej operacji obiekt rastrowy; nie odtwarza kolorowych obszarów jako ścieżek.

Jeśli chcesz zmieniać kształt kostiumu lub kolory jego poszczególnych części, potrzebujesz kształtów wektorowych narysowanych od nowa lub utworzonych przez wektoryzację. W przypadku celowo zaprojektowanego pixel artu pozostawienie obrazu rastrowego może być właściwym wyborem. Zacznij od sprawdzenia wybranego kostiumu, a następnie zdecyduj, w jakim zakresie trzeba go odtworzyć na potrzeby Twojego projektu.

Co zmienia ten przycisk

Otwórz kartę Costumes swojego duszka i wybierz kostium, który chcesz sprawdzić. Nazwa przycisku konwersji wskazuje tryb, do którego możesz się przełączyć: Convert to Vector pojawia się w trybie rastrowym, a Convert to Bitmap — w trybie wektorowym.

Zmiana trybu udostępnia inny zestaw narzędzi do edycji. Nie oznacza jednak, że każdy obiekt na obszarze roboczym ma teraz edytowalny kontur. Kostium wektorowy może zawierać obraz rastrowy obok kształtów, które narysujesz samodzielnie. To samo rozróżnienie wyjaśniamy w naszym poradniku o plikach SVG zawierających obrazy rastrowe.

Zanim zaczniesz eksperymentować, zachowaj kopię oryginalnego kostiumu. W szczególności konwersja narysowanej grafiki wektorowej do obrazu rastrowego spłaszcza jej geometrię do pikseli. Późniejsze przełączenie z powrotem nie odtwarza dawnych węzłów. Jeśli potrzebujesz odzyskać te kształty, użyj Undo lub zachowanego oryginału.

Sprawdź kostium na trzy sposoby

Sama ramka zaznaczenia niewiele dowodzi: może ją mieć zarówno obraz, jak i grupa kształtów wektorowych. Sprawdź konkretną część, którą chcesz edytować. Poniższa procedura diagnostyczna wykorzystuje rakietę jako przykład, ale równie dobrze sprawdzi się zwierzę, odznaka lub ikona do materiałów lekcyjnych.

1. Sprawdź kontur. W kopii kostiumu wybierz Reshape i kliknij krawędź statecznika rakiety. Poszukaj węzłów biegnących wzdłuż tej krawędzi, zamiast uchwytów wokół prostokąta. Jeśli grafika jest zgrupowana, zaznacz ją i użyj Ungroup, gdy ta opcja jest dostępna, zanim sprawdzisz konkretną część. Jeśli nie masz pewności, czy prawidłowo używasz Reshape, narysuj tymczasowe koło obok grafiki i porównaj sposób, w jaki narzędzie je zaznacza.
2. Sprawdź jeden kolor. Zaznacz nos rakiety i spróbuj zmienić jego wypełnienie (Fill). Czy możesz zmienić kolor tego obszaru bez zmiany korpusu lub innych części? Cofnij próbną edycję. Zaznaczenie całego obrazu nie daje możliwości niezależnej edycji nosa, nawet jeśli obraz przedstawia kilka kolorów.
3. Sprawdź kostium w miejscu, w którym będzie widoczny. Porównaj kostium w edytorze z jego wyglądem na scenie przy rozmiarze używanym w projekcie. Możliwość edycji konturu i ostrość na ekranie to dwie osobne kwestie do sprawdzenia. Sam poszarpany wygląd w podglądzie na scenie nie jest wystarczającym powodem do wektoryzacji grafiki, która już ma użyteczne ścieżki.

W ostatnim przypadku bardziej ogólny poradnik diagnozowania rozpikselowanego SVG pomaga odróżnić zawartość pliku od sposobu, w jaki aplikacja ją wyświetla.

Wybierz rozwiązanie dopasowane do grafiki

Zachowaj obraz rastrowy, jeśli piksele są częścią projektu

Mała pikselowa postać nie staje się lepszym kostiumem tylko dlatego, że jej plik jest wektorowy. Jeśli schodkowe krawędzie, maleńkie oczy i ograniczona paleta są celowe, oceń ją w rozmiarze, w którym zamierzasz jej używać. Zachowaj oryginalny obraz i unikaj wielokrotnego zmieniania jego rozmiaru podczas eksperymentowania.

To samo dotyczy zdjęcia lub malowanego tła, którego faktura jest ważniejsza niż edycja poszczególnych konturów. Wektoryzacja tych szczegółów do postaci kształtów zmienia grafikę. Jeśli chcesz zachować kwadratowe piksele wewnątrz SVG, jest to inne zadanie niż wygładzanie sylwetki; nasz poradnik konwersji pixel artu wyjaśnia ten wybór.

Narysuj prosty kostium od nowa za pomocą narzędzi wektorowych Scratch

W przypadku rakiety złożonej z korpusu, nosa, okna i stateczników narysowanie tych części osobno daje Ci bezpośrednią kontrolę nad ich strukturą. Zacznij tworzyć nowy kostium w trybie wektorowym. Użyj narzędzi koła, prostokąta, linii i pędzla do zbudowania głównych części, a następnie dopracuj kontury za pomocą Reshape.

Zacznij od największej sylwetki i stopniowo przechodź do elementów wewnątrz niej. Dodaj małe okno, gdy korpus będzie już dobrze rozpoznawalny w docelowym rozmiarze. Zachowaj statecznik jako osobny obiekt, jeśli będziesz potrzebować możliwości przesuwania go niezależnie. To decyzja projektowa: automatyczna wektoryzacja nie potrafi zdecydować, których części będą wymagać Twoje późniejsze edycje.

Możesz też zbudować kształty w zewnętrznym edytorze grafiki wektorowej. Oryginalny poradnik Pinnguaq o grafice wektorowej w Scratch pokazuje importowanie grafiki SVG, zaznaczanie jej elementów, zmienianie wypełnień i rozmieszczanie elementów. Właśnie do takiej edytowalnej struktury warto dążyć.

Zwektoryzuj odpowiedni clipart, gdy źródło jest wyłącznie rastrowe

Wektoryzacja jest przydatna, gdy masz już płaską ilustrację, którą chcesz zachować, ale ponowne rysowanie każdego konturu byłoby zbędną pracą. Użyj najwyraźniejszego źródłowego PNG lub JPG, jaki masz. W tym przypadku PerfectVector może odtworzyć odpowiedni clipart jako ścieżki SVG, które możesz sprawdzić przed zaimportowaniem do Scratch. Celem jest odzyskanie edytowalnych kształtów z obrazu źródłowego; później nadal trzeba sprawdzić możliwość edycji kostiumu.

Wektoryzacja odwzorowuje widoczne obszary. Może podzielić statecznik na kilka części lub połączyć stykające się obszary, które chcesz przesuwać osobno. Małe oczy, wąskie szczeliny i napisy wymagają szczególnej uwagi. Jeśli chcesz zrozumieć, jak działa takie odtwarzanie, zacznij od wyjaśnienia wektoryzacji obrazów.

Zaimportuj SVG i sprawdź środek kostiumu

Mechanizm przesyłania kostiumów w Scratch przyjmuje SVG jako grafikę wektorową. Zaimportuj sam pobrany plik SVG, zamiast jego zrzutu ekranu lub podglądu PNG.

1. Wybierz istniejącego duszka i otwórz Costumes. Użyj Upload Costume w menu wyboru kostiumu, aby dodać SVG obok oryginału. Jeśli chcesz utworzyć osobnego duszka, użyj zamiast tego Upload Sprite.
2. Porównaj zaimportowaną grafikę ze źródłem. Sprawdź kontur, odstępy między częściami, oczy i tło. Jeśli źródło już zawierało kształty wektorowe, napraw lub ponownie wyeksportuj ten SVG, zamiast wektoryzować jego rastrowy podgląd.
3. Powtórz sprawdzanie konturu i pojedynczego koloru. Upewnij się, że potrzebne Ci części można edytować, a następnie cofnij próbne zmiany. Usuń z roboczej kopii wszelkie tymczasowe kształty użyte do porównania.
4. Sprawdź położenie względem krzyżyka wskazującego środek w edytorze kostiumów. Zachowaj ten sam wizualny punkt odniesienia we wszystkich powiązanych kostiumach: w przypadku rakiety możesz użyć środka korpusu. W razie potrzeby dostosuj położenie grafiki i porównaj ją z oryginalnym kostiumem na scenie.
5. Przełączaj się między oryginałem a zamiennikiem bez przesuwania duszka. Zwróć uwagę na niepożądany przeskok, zmianę pozornej wielkości lub prostokąt w tle. Zachowaj oryginał, aż zamiennik będzie Ci odpowiadać.

Scratch przechowuje środek obrotu każdego kostiumu; jego kod wczytywania kostiumów pobiera go z mechanizmu renderującego, jeśli nie został podany. Dlatego zgodność widocznego rysunku jest tylko częścią sprawdzania importu. Jego położenie względem środka kostiumu również musi pasować do Twojego projektu.

FAQ

Czy Convert to Vector sprawia, że kostium w Scratch jest mniej rozpikselowany? Ten przycisk nie wektoryzuje ani nie wygładza konturów obrazu rastrowego. Kostium zmienia tryb edycji, a jego grafika rastrowa może pozostać obiektem obrazu. Aby utworzyć edytowalne kontury, narysuj grafikę od nowa lub zaimportuj SVG zawierający ścieżki utworzone przez wektoryzację.

Dlaczego mogę przesuwać kostium, ale nie mogę zmieniać kształtu jego krawędzi? Przesuwanie obiektu obrazu nie wymaga węzłów na jego widocznym konturze. Sprawdź, czy została zaznaczona grupa, a następnie sprawdź jeden z jej elementów za pomocą Reshape. Obraz rastrowy zachowany w trybie wektorowym nie zyskuje węzłów konturu po zmianie trybu.

Czy wektoryzacja duszka utworzy osobne ręce, nogi lub inne ruchome części? Nie zakładaj, że tak się stanie. Wektoryzacja odtwarza widoczne obszary, które mogą różnić się od części, jakie chcesz przesuwać. Sprawdź zaimportowane kształty i w razie potrzeby rozdziel elementy lub narysuj je od nowa.

Źródła

1. Scratch Foundation: bitmap conversion implementation — Pokazuje konwersję do trybu edycji wektorowej z zachowaniem obrazu rastrowego.
2. Scratch Foundation: costume file uploader — Potwierdza, że przesyłane kostiumy SVG korzystają z formatu zasobów wektorowych.
3. Scratch Foundation: vector costume loading — Pokazuje, jak zaimportowany kostium otrzymuje środek obrotu.
4. Pinnguaq: Working With Vector Graphics Art in Scratch — Pokazuje import SVG oraz edycję poszczególnych kształtów, wypełnień i ich rozmieszczenia.

---

Jeśli Twój kostium powstał z płaskiego rastrowego clipartu i potrzebujesz edytowalnych konturów, przekonwertuj obraz źródłowy na SVG za pomocą PerfectVector. Zaimportuj wynik jako nowy kostium, a następnie sprawdź jeden kontur, jeden kolor i środek kostiumu, zanim zastąpisz oryginał.