Welche Software sollte ich verwenden, um gestochen scharfe Spielgrafiken für iOS-Spiele zu erstellen?

Ich benutze Illustrator dafür. Wenn die Plattform, die Sie verwenden werden, SVG unterstützt, machen Sie es. Ansonsten sind hier einige Gedanken dazu, wie man gestochen scharfe Raster-UI-Elemente mit KI (JPG, PNG usw.) erstellt. Wohlgemerkt, ich bin ein Pixelpicker und ein bisschen besessen davon.

• Stellen Sie sicher, dass Sie zunächst ein RGB-Dokument erstellen (im Gegensatz zu CMYK), damit Sie die Farben so sehen können, wie sie aussehen werden, wenn Sie die webfreundlichen Dateien exportieren.

• Machen Sie sich mit der Funktionsweise von "An Pixelraster ausrichten" vertraut. Wenn diese Option für eine Form aktiviert ist, rasten alle ihre Handler am Pixelraster ein (dh an einem exakten Pixel, nicht an einem Bruchteil). Dies kann zu rätselhaften (oder gewünschten) Artefakten führen. Wenn es inaktiv ist, haben Sie die Freiheit, die Form an gebrochenen Pixeln zu platzieren und ihre Abmessungen ebenfalls gebrochen zu machen. Ich bevorzuge diese Option standardmäßig deaktiviert, da ich die Freiheit habe, sie einzuschalten, wenn ich sie brauche.

  • Um die Option beim Erstellen eines Dokuments zu aktivieren/deaktivieren, vergewissern Sie sich, dass sie unten im Abschnitt „Erweitert“ im Fenster „Neues Dokument“ aktiviert/deaktiviert ist. Bitte beachten Sie, dass die Standard-Webprofile, die für RGB-Bilder empfohlen werden, dies standardmäßig aktiviert haben.

  • Um es für eine bestimmte Form zu aktivieren/deaktivieren, wählen Sie die Form aus, öffnen Sie das Transformationsfenster (erweitern Sie die Optionen, falls erforderlich) und kreuzen Sie es unten an oder nein.

  • Um die Standardeinstellung für ein bereits erstelltes Dokument zu ändern, klicken Sie auf in der Ecke des Transformationsfensters, um das Optionsmenü zu erweitern, und aktivieren/deaktivieren Sie Align new objects to pixel grid. Die neue Standardoption gilt für zukünftige Objekte. Die bereits im Dokument vorhandenen Objekte behalten ihre Einstellungen.

• Beachten Sie, dass die Koordinaten relativ zu den Ecken oder dem Mittelpunkt der Formen (Ursprung) sein können. Nutzen Sie dies zu Ihrem Vorteil, aber denken Sie daran (oder überprüfen Sie noch einmal), was Sie auswählen, wenn die Breite oder Höhe Ihrer Form ungerade ist. Wenn Sie in diesem Fall eines der 4 Zentren auswählen, können Sie die Formen am Ende bei Bruchteilen von Pixeln (0,5 Übersetzungen) platzieren. Um den Ursprung der Koordinaten einer Form zu ändern, verwenden Sie die linke obere Ecke des Transformationsfensters

  

• Seien Sie sich bewusst, wie gebrochene Pixel Ihr Ergebnis beeinflussen. Pixelbruchteile werden beim Speichern für das Web geglättet (als hellere Farben dargestellt), wodurch die Illusion entsteht, dass sie gebrochen sind. Beispielsweise wird eine schwarze Linie mit einer Breite von 1 Pixel als eine Reihe schwarzer Pixel gerendert. Aber wenn Sie seine Breite auf 0,5 Pixel einstellen, wird es als eine Reihe von hellgrauen Pixeln gerendert, die die Illusion einer dünneren Linie erzeugen. Dasselbe passiert mit Formen, die nicht auf ein exaktes Pixel ausgerichtet sind. Schauen Sie sich diese beiden Quadrate an, eines an der Pixel-Gier ausgerichtet und eines um 0,5 nach links und unten verschoben. Dieses Bild ist vergrößert.

  

• Haben Sie keine Angst vor gebrochenen Pixeln. Eckige Formen, wie Rechtecke, sehen am besten aus, wenn sie am Pixelraster ausgerichtet sind. Andererseits finde ich, dass Kreise besser aussehen, wenn sie sowohl auf X als auch auf Y um 0,5 verschoben werden.

• Jetzt, da Sie den Trick kennen, nutzen Sie ihn zu Ihrem Vorteil. Wenn Sie einer 1-Pixel-Linie eine hellere Farbe geben, wird sie im Endergebnis dünner aussehen, selbst wenn keine Bruchpixel verwendet werden.

• Aktivieren Sie die Pixelvorschau (immer oder oft) ( View->Pixel Previewoder Alt+ Ctr+ Y), damit Sie sehen können, wie die Grafiken aussehen, wenn Sie sie speichern, um späte Überraschungen zu vermeiden. Grafiken sind immer noch vektoriell, sodass Sie sie strecken und verkleinern können, ohne die Auflösung zu verlieren, aber sie sehen so aus, als würden sie auf die spezifischen Pixelabmessungen gerendert. Dies ist besonders nützlich für Formen, die nicht am Pixelraster ausgerichtet sind oder Pixel mit Teilabmessungen haben. Sehen Sie sich dieses vergrößerte Bild an.

• Stellen Sie sicher, dass die Zeichenflächen am Pixelraster ausgerichtet sind, um zusätzliche Artefakte während der Pixelvorschau und Überraschungen beim Speichern zu vermeiden. Öffnen Sie das Zeichenflächenfenster, doppelklicken Sie auf das Symbol rechts neben dem Namen der Zeichenfläche und vergewissern Sie sich, dass eine der Ecken und die Abmessungen der Zeichenfläche pixelgenau sind.

• Stellen Sie sicher, dass Sie mit den 3 Möglichkeiten vertraut sind, wie Sie den Strich einer geschlossenen Form ausrichten können. Es kann entweder an der Außenseite der Form, der Innenseite der Form oder der Mitte des Strichs ausgerichtet werden. Standardmäßig sind sie an der Mitte des Strichs ausgerichtet. Wenn Sie beispielsweise ein Quadrat haben, das perfekt am Pixelraster ausgerichtet ist, und ihm einen Strich mit Breite = 1 Pixel hinzufügen, wird der Strich standardmäßig an der Mitte des Strichs ausgerichtet. Da der Strich nur 1 Pixel breit ist, sieht er sowohl auf X als auch auf Y um 0,5 Pixel verschoben aus und fügt einen verschwommenen Strich um die Form herum hinzu, wenn sie schließlich gerendert wird. Dies ist in einigen Fällen möglicherweise nicht das, was Sie möchten.

• Beachten Sie, dass vertikale Linien mit ungerader Breite (z. B. 1 Pixel) mit dem Pixelraster (ohne Anti-Aliasing gerendert) ausgerichtet werden müssen, um 0,5 nach links oder rechts verschoben werden müssen. Ähnliches passiert mit horizontalen Linien: Sie müssen um 0,5 nach oben oder unten verschoben werden. Um dies in Aktion zu sehen, wählen Sie eine Linie aus und wählen Sie im Transformationsfenster „An Pixelraster ausrichten“. Dann schauen Sie sich an, was mit seinen Koordinaten passiert.

  • Um die Ausrichtung des Strichs zu ändern, öffnen Sie das Strichfenster, zeigen Sie die Optionen an, falls sie ausgeblendet sind, und wählen Sie die gewünschte Option neben "Strich ausrichten".

• Achten Sie beim Speichern der endgültigen Grafik auf die Optionen „Art Optimized“ und „Type Optimized“ im Dialogfeld „Save for Web“. Sie optimieren das endgültige Rendering ein wenig mehr und geben der von Ihnen ausgewählten Option den Vorzug. In einigen Fällen musste ich zwei Optionen des Bildes speichern (eine für Kunst optimierte und eine andere für Schrift optimierte) und dann mit Photoshop ein endgültiges Bild erstellen, um das optimale Bild zu erzielen.

• Ich habe nur mit Retina beim Erstellen von Websites, nicht bei eigentlichen Apps. Zumindest für das Web, da Retina eine höhere Pixeldichte als die meisten Displays hat, stelle ich immer sicher, dass ich die Bilder doppelt so groß speichere, wie ich sie benötige. Wenn ich jedoch die Größe auf der Webseite angebe, gebe ich die tatsächliche Größe an, nicht die doppelte. Wenn ich also ein 30 x 30 Pixel großes Symbol benötige, achte ich darauf, dass Sie es in 60 x 60 Pixel speichern, aber wenn ich es auf meiner Webseite platziere, gebe ich an, dass es 30 x 30 Pixel groß ist. Netter Trick, Sie können die Abmessungen des endgültigen Bildes kurz vor dem Speichern im Fenster "Für Web speichern" ändern. Da es sich um Vektorbilder handelt, passen sie sich perfekt an die neue Dimension an. Sie können auch einen Prozentsatz eingeben, also gebe ich in meinem Workflow 200 % ein, bevor ich speichere.

Wenn Sie statische Bilder wünschen, erledigen Illustrator oder Photoshop die Arbeit. Wenn Sie Interaktivität/Animationen wünschen, haben Flash oder Edge Animate diese Fähigkeit.

Wie in meiner Antwort auf die andere verwandte Frage erwähnt , sollten Sie ein Adobe Creative Cloud-Abonnement erwerben, damit Sie mit der gesamten genannten Adobe-Software experimentieren können.

Eine der einfacheren Möglichkeiten, mit Multi-Density-Bildschirmen (z. B. Retina) umzugehen, ist die Verwendung von auflösungsagnostischen Dateiformaten.

Für die iOS-Entwicklung ist SVG ideal. Eine SVG-Datei ist eine Vektordatei, also haben Sie unabhängig von der Skalierungsgröße oder der Pixeldichte des Bildschirms immer das „scharfste“ Bild, das möglich ist.

Dies erspart Ihnen auch die Mühe, mehrere Bildsätze für Retina- und Nicht-Retina-Bildschirme erstellen zu müssen.

Was die Animation betrifft, müssen Sie wirklich herausfinden, welche Anforderungen die von Ihnen verwendete Entwicklungsplattform erfüllt. Einige möchten, dass Sie einzelne Bilder als Frames für die Animation importieren. Manchmal wollen sie Sprite Sheets. Manchmal übernimmt die App das Tweening für Sie. Es hängt alles ab.