Effizientes Zeichnen von Umrissen um Sprites

Ich programmiere ein Spiel mit XNA und experimentiere mit verschiedenen Methoden, um einen "ausgewählten" Effekt auf meine Sprites zu erzielen. Das Problem ist, dass jedes im Spritebatch gezeichnete anklickbare Element mit mehr als einem Sprite gezeichnet wird (jedes Objekt kann aus bis zu 6 Sprites bestehen).

Ich würde mich freuen, wenn mir jemand einen Rat geben könnte, wie ich meinen Sprites mit X Pixeln einen Umriss hinzufügen kann (die Umrissbreite kann also unterschiedlich viele ganze Pixel betragen).

Danke im Voraus,

• Greg.

Bei weitem der einfachste Weg, dies zu tun (der wahrscheinlich beste Weg, es sei denn, Sie sind wirklich auf Leistung bedacht), besteht darin, zwei Kopien Ihrer Sprites zu haben.

• Die reguläre Version
• Eine "fette", ungefärbte Version - im Grunde genommen eine weiße Version Ihres Sprites. X-viele Pixel "dicker" als das Original.

Zeichne dein gesamtes Objekt mit der "fetten" Version, dann zeichne die reguläre Version darüber.

Indem Sie die "fette" Version weiß machen, können Sie die in SpriteBatch integrierte Farbtönung verwenden, um die Auswahlfarbe dynamisch zu ändern.

Um Ihre "fette" Version zu erstellen, empfehle ich, eine Inhalts-Pipeline-Erweiterung zu schreiben , die automatisch Ihre ursprünglichen Sprites aufnimmt , deren Alphakanal liest und einen neuen Alphakanal erstellt, indem der maximale Alphakanal im Originalbild x-viele Pixel um jeden Pixel abgetastet wird. und Einstellen von RGB = (1,1,1).

Sie müssen sicherstellen, dass alle Sprites einen ausreichenden transparenten Rand haben, um die Kontur hinzuzufügen (Sie können dies im Inhaltsprozessor überprüfen - und bei Bedarf sogar Platz schaffen).

Wenn Sie nur ein paar Sprites haben, können Sie einfach einen guten Bildeditor (GIMP, Photoshop) verwenden und dies von Hand tun: Alphakanal zur Auswahl, Auswahl erweitern, Auswahl zur Alpha, Farbkanäle weiß füllen.

Ich nehme an, Sie müssen zuerst alle Teile, die jedes Objekt haben, auf ein einzelnes Sprite zeichnen. Dann müsste man wohl einen Shader schreiben, um die Kanten des Sprites zu erkennen und ein Pixel dort zu zeichnen, wo es eine Kante findet. Ich gehe davon aus, dass es dafür bereits einige Shader geben muss, die Sie entweder verwenden oder portieren können.

Abhängig von den Anforderungen kann es auch sinnvoll sein, für das Sprite nach Bedarf eine Übersicht zu erstellen. Ich gehe davon aus, dass Ihre Sprites Transparenz haben und unregelmäßig geformt sind, anstatt nur Rechtecke zu sein (obwohl dies gut funktionieren würde, sollten Konturrechtecke Trivial sein).

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

Beachten Sie, dass Sie dies nicht bei jedem Zeichnen tun müssen (ich nehme an, Sie könnten es auch tun), sondern nur das neue Gliederungs-Sprite erstellen, wenn Sie das Sprite wechseln.

Der einfachste Brute-Force-Ansatz besteht darin, zwei Kopien jedes Sprites zu erstellen, eine normale und eine hervorgehobene. Tauschen Sie sie dann einfach aus, wenn sie markiert sind.

Wenn Sie Speicherplatz haben, müssen Sie nicht komplizierter werden. Außerdem haben Künstler die vollständige Kontrolle über das Aussehen, wenn sie hervorgehoben werden, so dass Sie einen Umriss oder alles andere machen können, was Sie möchten.

Wie wäre es mit einem anderen Sprite für jedes Sprite, das einen Umriss des Basissprites darstellt? Zeichnen Sie beim Zeichnen eines umrandeten Objekts die Basis-Sprites, erstellen Sie eine Maske für das kombinierte Rendering und zeichnen Sie dann die Umrandungs-Sprites ohne die Maske.

Einige unterschiedliche Lösungen mit unterschiedlichen Kompromissen.

Am einfachsten: Rendern Sie das Objekt mit einer flachen Farbe mehrmals und ruckeln Sie an der Position (nach links, oben, unten, rechts usw.). Dadurch wird eine Outlines-Version von allem erstellt, was Sie darüber rendern erlauben Sie fette Ränder ohne viele Extrarender. Ein Rand von ein oder zwei Pixeln kann bei 4x in Ordnung sein.

Am schnellsten: Verarbeiten Sie die Textur vor und erstellen Sie eine Kopie, die bereits umrandet ist oder nur umrandet ist, oder es handelt sich um eine flache 8-Bit-Graustufenmaske, die Sie in einem Shader einfärben können. Dies geht wahrscheinlich schnell zu Lasten des Speichers.

Am besten: Meiner Meinung nach ist es wahrscheinlich die beste Lösung, eine SDF-Darstellung (Signed Distance Field) Ihres Objekts zu erstellen. Diese Texturen können viel kleiner als die Quelltextur sein und dennoch nützliche Daten erfassen. Im Wesentlichen codiert jedes Pixel, wie weit es von dem Objekt entfernt ist, mit dem es generiert wurde. Mit diesen Daten können Sie alle Arten von Effekten von Glühen bis zu Konturen schreiben. Der Rand kann sich in Größe und Farbe usw. ändern und ist immer noch ein relativ billiger Shader und nur ein zusätzlicher Draw. Nachteil ist das Werkzeug und die Vorverarbeitung.

Ich bin mir nicht sicher, ob es effizient ist, aber der einfachste Weg, den ich sehen kann, wäre, eine größere Version des Sprites in der Farbe zu zeichnen, die Sie zuerst auswählen möchten. Zeichne das Sprite darüber. Sie sehen nur den Rand des ersten Sprites und erhalten den Auswahleffekt.

EDIT: Wie Sie den Kommentaren entnehmen können, ist dies jedoch keine gute Idee.

Ich bin damit einverstanden, das Sprite zu vergrößern. Bei weitem die einfachste Route, und Sie können sie auf die Auswahl eines beliebigen Sprites anwenden, ohne zusätzliche Sprites speziell für diesen Zweck erstellen zu müssen.

• spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = neue Farbe (255, 0, 0, 255);

Ersetzen Sie die Farbe des Original-Sprites durch eine Konturfarbe (oder tönen Sie sie sogar, wenn Sie möchten). Rendern Sie dieses flach schattierte oder getönte Sprite viermal mit einem Versatz von 1 Pixel: Bei x ist y = (- 1, -1), dann (+ 1, -1), dann (-1, + 1) und dann (+1) , +1). Wiederholen Sie diesen Vorgang für alle Sprites, aus denen das Objekt besteht.

Danach rendern Sie die Original-Sprites in der richtigen Reihenfolge bei (0,0).