[BlitzDelta] #2: BoundingVolumes usw. visualisieren

Hallo Leute,

willkommen zu einem weiteren Teil von BlitzDelta. Nach dem letzten Teil der Hauptserie sollte es nun mal auch mit BlitzDelta weitergehen, das Thema stand schon lange fest, es fehlte nur an Zeit zur Ausformulierung.
Jedenfalls, nun ist der Artikel da und somit ein weiterer Beitrag geschaffen, der dazu beiträgt, euch den Umgang mit Delta zu erleichtern. Im Gegensatz zum ersten BlitzDelta habe ich hier mal eine andere Form der Gliederung verwendet und hoffe, dass ich diese auch in weiteren BlitzDelta Teilen verwenden kann, da es doch praktischer so ist.

Im letzten Teil hatten wir eine einfache Methode kennengelernt, wie man Texte/Bilder blinken lässt.
In diesem Teil werden wir lernen, wie sich schnell und einfach (gemäß dem BlitzDelta Motto) BoundingVolumes und andere Sachen visualisieren lassen. Dies ist nicht schwer, aber sehr hilfreich.
Damit wir sehen, wie man sowas bewerkstelligen kann, würde ich sagen, fangen wir doch an:

 

 

Das Problem

Jeder kennt die Sache: Ihr erstellt ein Spiel und natürlich muss ein Kollisionssystem rein. Da es nur ein simples System sein soll und derzeit kein komplizierteres System gebraucht wird, nutzt ihr BoundingRectangles oder BoundingCircles (oder andere Arten von BoundingVolumes). Alles ziemlich recht und gut, allerdings bemerkt ihr nun, dass etwas noch nicht so ganz stimmt und müsst natürlich nachbessern. Jedoch sind BoundingVolumes normalerweise ja nicht sichtbar, weshalb sich das Nachbessern schwierig gestaltet. Was gebraucht wird, ist also eine Lösung, wie man die BoundingVolumes sichtbar machen kann.
Nur wie soll dies realisiert werden?

 

Die Analyse

Was wir brauchen, ist klar. Es muss eine Lösung her, die es möglich macht, vorübergehend die BoundingVolumes anzuzeigen, damit man nachbessern kann und sieht, ob es passt. Doch woher eine passende Lösung nehmen?
Eine Möglichkeit wäre es, sich einfach eine Grafik zu erstellen und diese zu zeichnen und dabei die Breite/Höhe sowie Position des BoundingVolumes zu verwenden. Jedoch was, wenn man für eine Grafik mehrere BoundingVolumes braucht, um diese anständig zu kapseln für die Kollision und dazu dann noch verschiedene Arten wie Kreise, Rechtecke, Quadrate?
Um diesen Ansatz dann noch gescheit umzusetzen, müsste man einmal für jede Art von BoundingVolume eine Grafik erstellen, dann noch eine passende Farbe (die Grafik selbst kann weiß sein und die Farbe wird codemäßig hinzugefügt, was durchaus möglich ist) zur Unterscheidung gefunden werden. Außerdem muss jede Grafik dann hochgeladen werden, im Programm selbst auch geladen und bestückt werden – viel zu umständlich.
Was wir brauchen, ist also eine noch einfachere Lösung – glücklicherweise greift Delta uns da unter die Arme.

 

Die Lösung

Delta bietet bereits alles, was wir brauchen, um unseren Ansatz schnell und einfach zu erreichen.
Sämtliche Lösungsmittel liegen im Namespace Delta.Rendering.Basics.Drawing, die zugehörige Assembly ist Delta.Rendering.Basics.
Es handelt sich hierbei um die Klassen Rect und Circle. Beide Klassen sind meiner Meinung nach perfekt dazu geeignet für solche Debuggingsachen wie Visualisierung von BoundingVolumes.

Beide Klassen bzw. deren Methoden sind statisch und können somit ohne Instanzierung verwendet werden.
Hier die entsprechenden Methodensignaturen:

Rect-Class:

#1

#2

#3

#4

Alle Methoden der Rect-Klasse haben gemeinsam, dass sie ein Rechteck sowie eine Farbe haben wollen. Zusätzlich hat man die Möglichkeit, jeweils noch eine Rotation zu übergeben für den Fall, dass das BoundingVolume gedreht sein könnte.
Als Rectangles bietet es sich hier an, das Rectangle des BoundingRectangles zu übergeben, immerhin wollen wir dieses ja sichtbar machen. Die Farbe ist frei wählbar, wählt am besten pro Rechteck stets eine unterschiedliche Farbe, damit alles unterscheidbar ist.

Mittels DrawFilled wird, wie schon aus dem Namen ableitbar, ein gefülltes Rechteck erzeugt und gezeichnet.
DrawOutline hingegen zeichnet nur die Konturen des Rechtecks, die Innenfläche bleibt ohne Farbe.
Beispielnutzung:

Dies erstellt ein Rechteck, bei dem nur die Kontur in rot gezeichnet wird, an der Stelle 0.5f|0.5f und mit der Größe von 0.25f (diese Größen sind je nach Auflösung unterschiedlich, weshalb ich hier nur die Größe in float angeben kann, aber nicht die tatsächliche Größe in Pixeln)

 

Dies war jetzt nur die Rect-Klasse, was fehlt, ist die Circle-Klasse:

Circle-Class:

#1

#2

Alle Methoden erwarten als Parameter einen Punkt, einen Radius sowie die entsprechende Farbe. Im Gegensatz zur Rect-Klasse haben wir hier aber nur zwei Methoden zur Auswahl, die aber das gleiche tun wie bei der Rect-Klasse, nur ohne Rotation (einen Kreis zu rotieren ist irgendwie auch etwas sinnfrei :D)

 

Beispielnutzung:

Der folgende Code erstellt einen Kreis im Punkt 0.5f|0.5f mit dem Radius 0.1f und der Farbe Rot.

 

Wie ihr seht, haben wir alles, was wir brauchen, um schnell und effektiv unsere BoundingVolumes sichtbar zu machen.

Damit ihr seht, wie das im Praxistest aussieht, habe ich hier einen Screenshot für euch. Dieser stammt aus Pong:Advanced bzw. Paddles, wie ich es ja erst kürzlich umbenannt habe.

Zum Einsatz kommt hier hauptsächlich die Rect-Klasse, so z.B in oben und unten im Fenster sowie um die beiden Paddles und den Ball selbst. Zusätzlich verwende ich noch die Line-Klasse, mit der ich die Linien ober- und unterhalb der Paddles zeichne sowie die Mittellinie. Alles in allem extrem hilfreich, um zu prüfen, ob alles so verläuft, wie man will (vorallem, da mein System in Paddles ein klein wenig anders ist, dort konnte ich z.B auch Schatten oder andere Sachen in die Grafik einbauen aber dennoch mein BoundingRectangle dann entsprechend ansetzen und solche Bereiche damit außenvor lassen kann)

 

 

Damit endet auch schon dieser BlitzDelta-Part. Ich hoffe, es hat euch gefallen. Schreibt mir eure Meinung in die Kommentare.
Falls ihr einen Vorschlag habt, was als nächster BlitzDelta-Part erscheinen könnte, so schreibt es mir und ich sehe, was ich tun kann.

Ansonsten sehen wir uns beim nächsten Mal, wenn es wieder heißt: BlitzDelta

Bis dann

~internetfreak

6 Gedanken zu „[BlitzDelta] #2: BoundingVolumes usw. visualisieren

  1. Barsack

    Dankeschön, genau das werde ich wahrscheinlich demnächst brauchen.
    Tutorial wie immer gut, nichts zu meckern.

    Für ein nächstes Thema habe ich leider keine Vorschläge, eventuell Kollision, aber dies ist eher ein Thema für ein ganzes, also nicht „Blitz“ Tutorial.
    Nur halt genau das was ich jetzt brauche bzw. zu dem ich gerne mehr wüsste ^^

    MFG, Barsack

    Antworten
    1. internetfreak Beitragsautor

      Wenn du genauer beschreibst, was du brauchst, dann kann ich ja mal sehen, was ich tun kann.
      Das Thema Kollision ist ja kein allzu kompliziertes, je nach Kollisionssystem. Im Source von Paddles findest du bereits ein eher einfaches System, welches aber vollkommen ausreicht für das Spiel.
      Nach dem, was du mir schon per Mail sagtest, sollte das System soweit auch für dich reichen.
      Aber wie gesagt, sag mir, was du brauchst und ich schaue, ob ich es zu einem Tutorial umfunktionieren kann, so dass alle was davon haben.

      Antworten
  2. Barsack

    Das Paddles Kolisionssystem wird höchst wahrscheinlich ausreichen….

    Jedoch ist dort ja nichts erklärt, weshalb es etwas schwer ist des in eigene Projekte rein zubringen.
    Klar, mit etwas Mühe könnt man des schaffen, aber naja, ein Tutorial wo des alles erklärt wird is natürlich immer noch das Beste. Oder auch der Kollisions-Code mit Kommentaren, würde natürlich auch viel helfen 🙂

    MfG Barsack 🙂

    Antworten
    1. internetfreak Beitragsautor

      Wie ich beim Release des Source erwähnt habe, is leider nichts kommentiert, da der Source normal nie dafür gedacht war, öffentlich zu werden. Und als ich ihn releast habe, kam er einfach as-is.
      Um besseres Verständnis zu bekommen, nimm dir das Paddle Battle Sample aus dem AppHub. Ist zwar XNA, jedoch habe ich den Code soweit davon und den dann soweit auf mein System umgestaltet (glaube es waren ein paar Verbesserungen/Veränderungen)
      Ansonsten kann ich dir auch helfen, indem ich halt nochmal reinschaue und kurz kommentiere^^

      Antworten
      1. Barsack

        Das Projekt will bei mir leider nicht aufgehen, weil bestimmte „Elemente“ fehlen sollen. Aber da des eh XNA is wäre es ganz toll wenn du in deinen Paddles Code reinschauen und alles was für ein Kollisionssystem wichtig ist kommentieren würdest ^^

        Antworten
        1. internetfreak Beitragsautor

          Wenn das Projekt nich aufgehen will, fehlt dir sicher XNA, was anderes wüsste ich nicht, was fehlen soll.
          Aber gut, hast mich überredet. Warte bis heute mittag/abend, ich schaue, dass ich nen Artikel drüber schreibe über diesen Code, wo ich dann erkläre, was der Code macht. Und über Kollision allgemein schau ich, dass ich vll auch was aufgetrieben bekomme, mal sehen, was sich machen lässt.

          Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.