Wie wird Pixel Art in einer App verwendet?

Question

Ich habe eine iOS-App, die Sprite-Kit verwendet, und ich bin bereit, meine Kunstwerke hinzuzufügen. Das Artwork ist Pixel-Art und ist von Natur aus sehr klein. Ich versuche, den besten Weg zu finden, diese in Art und Weise anzuzeigen, in dem:

1. Alle der Technik ist die gleiche Größe, was bedeutet, dass ein Bildpixel genau die Menge der realen Welt Pixel nimmt, wie in allen anderen Bilder.

2. Es wird nicht verwischt, um die Texturen glatter aussehen zu lassen, was häufig beim Skalieren von Bildern passiert.

Ich habe versucht, wie so die zweite Lösung:

self = [super init]; 
if(self){ 
    self.size=size; 
    self.texture = [SKTexture textureWithImageNamed:@"ForestTree1.png"]; 
    self.texture.filteringMode = SKTextureFilteringNearest; 

    [self.texture size]; 
} 
return self; 

Der obige Code in der Initialisierung des SKSpriteNode ist, die die Textur haben.

Dieses ist mein ursprüngliches Bild (für eine einfache Referenz skaliert):

Das Problem ist, dass mein Ergebnis ist immer wie folgt aussieht:

(Der Boden der Rumpf, der versetzt wird, ist nicht Teil dieser Frage.) Ich verwende keine Bewegungsunschärfe oder ähnliches. Ich bin mir nicht sicher, warum es nicht korrekt angezeigt wird.

Edit 1: ich nicht erwähnt oben, dass die Bäume ständig Animieren wurden, wenn die Screenshots aufgenommen wurden. Wenn sie immer noch sehen sie wie folgt aus:

Das obige Bild von zwei Bäumen ist mit einer überlappenden aufgrund eines Fehlers verursacht blätterte später behoben werden. Meine Frage ist nun, wie kann ich verhindern, dass das Bild während der Animation unscharf wird?

Edit 2:

ich mehrere Instanzen des Baumes am Hinzufügen, die jeweils die gleiche Textur zu laden. Ich weiß es als nichts mit der Animation zu tun, weil ich den Code geändert, um nur einen Baum hinzuzufügen und zu animieren, und es wurde perfekt pixelig.

Answer 1

ich das Problem gelöst habe ...aber es ist wirklich ein Hack. Ich habe eine SKScene, die der Elternknoten zu allen "Bäumen" (SKSpriteNodes) ist. Diese Szene fügt sich selbst mehrere Bäume hinzu. Zuerst dachte ich, dass dies ein Problem wäre, denn wenn ich nur einen Baum hinzufügen würde, würde das Bild korrekt angezeigt. Die answer to this question führte mich zu der Annahme, dass ich ein Singleton in der (die Textur ist in einem) programmatisch erstellen und es an die Baumklasse übergeben muss, um die Textur von einer Init-Methode zu erhalten. Ich habe eine Eigenschaft in der SKScene gemacht, um den Texturatlas zu halten, so dass ich es jedes Mal an die Baumklasse weitergeben konnte, wenn ich eine neue erstellte. Ich habe versucht, die Textur aus Textur Atlas (in der Baumklasse) mit der textureNamed: Methode zu laden. Das hat immer noch nicht funktioniert. Ich kehrte zurück zum Laden der Textur mit SKTexture textureWithImageNamed: Methode und es funktionierte. Weiter mehr ich änderte, um Code zurück, so dass die Baum-Unterklasse würde nicht gesendet werden Singleton überhaupt und es funktionierte immer noch.

Im SKScene bekomme ich den Texturatlas mit:

[SKTextureAtlas atlasNamed:@"Textures"]; //Textures is the atlas name. 

und den Rückgabewert gesetzt die SKTextureAtlas Eigenschaft oben beschrieben zu sein. Ich dachte, dass vielleicht der Atlas musste einfach in den Code zu einem bestimmten Zeitpunkt initialisiert, so habe ich versucht, dies:

SKTextureAtlas *myAtlas = [SKTextureAtlas atlasNamed:@"Textures"]; 

und die folgenden allein auf einer Linie:

[SKTextureAtlas atlasNamed:@"Textures"] 

aber weder gearbeitet. Anscheinend muss ich eine Eigenschaft in der Stammklasse meines Baumes haben, die die ist, die die Textur enthält, die der Baum ohne Bezug auf eine SKTextureAtlas überhaupt verwendet ... Ist das ein Fehler oder etwas? Es funktioniert jetzt, aber es fühlt sich an wie ein Hack.

Answer 2

Die Pixel in Ihrem Bild müssen perfekt mit den Pixeln auf dem Bildschirm übereinstimmen.

Wenn Ihr Bild 100x100 ist und Sie es über einen ganzen Bildschirm mit 105x105 anzeigen, wird es interpoliert, um herauszufinden, wie es gemacht wird.

Wenn Sie es mit einer skalierten Auflösung von einigen Vielfachen von 2 anzeigen (was richtig funktionieren sollte), müssen Sie dem Renderer trotzdem sagen, dass er bei der Skalierung keine Pixel interpolieren soll.

Answer 3

Sie müssen "nearest" Filtern verwenden:

self.texture.filteringMode = SKTextureFilteringNearest; 

Answer 4

[self setScaleMode:SKSceneScaleModeAspectFill]; 

SKTexture* texture = [SKTexture textureWithImageNamed:@"image"]; 
[texture setFilteringMode:SKTextureFilteringNearest]; 

SKSpriteNode* imageNode = [SKSpriteNode spriteNodeWithTexture:texture]; 
[self addChild:imageNode]; 

Funktioniert perfekt für mich. Es gibt keine Unschärfe mit Animation