Verfasst von: bletra | 6. Oktober 2011

Das Zusammenfuddeln einer Skybox mittels XNA – C#

Autoren: 2 Studierende der Veranstaltung .Net Framework und C#

In diesem Artikel werden wir uns an eine Implementierung einer Skybox in XNA herantasten und hilfreiche Tipps geben, wie man diese schnell und unkompliziert in sein eigenes Projekt einbauen kann.

Zunächst einmal: Was ist eigentlich eine Skybox?
Eine Skybox besteht aus sechs Bildern, die man bildlich gesprochen auf einen Würfel, auf jede Seite natürlich ein Bild, aufpresst. Hinzu kommt, wie man unten sieht, dass die Skybox, wie auch andere 3D-Objekte aus Meshes besteht. Meshes sind nichts anderes als Ansammlungen von Polygonen, die man nach dem Laden nur noch zeichnen muss:

Codefragment 1:

foreach (ModelMesh mesh in skyboxModel.Meshes)
{
  foreach (Effect currentEffect in mesh.Effects)
  {
    Matrix worldMatrix = skyboxTransforms[mesh.ParentBone.Index] *
    Matrix.CreateTranslation(cameraPosition);
    currentEffect.CurrentTechnique =
    currentEffect.Techniques["Textured"];
    currentEffect.Parameters["xWorld"].SetValue(worldMatrix);
    currentEffect.Parameters["xView"].SetValue(viewMatrix);

    currentEffect.Parameters["xProjection"].SetValue(projectionMatrix);

    currentEffect.Parameters["xTexture"].SetValue(skyboxTextures[i++]);
  }
  mesh.Draw();
}

Zu den Effekte die in diesem Codefragment benutzt werden kommen wir später noch.

Hier entstand allerdings bereits ein Problem, mit dem wir klarkommen mussten: Unsere sechs Grafiken für die Skybox, die wir mit Hilfe von GIMP hergerichtet hatten, sahen in den Überschneidungsgebieten, also Ecken und Kanten zu den anliegenden Grafiken, nicht gut aus. Man sah jede Kante und spitzzulaufende Ecke.

Somit mussten wir unser Konzept, dass wir wirklich das Schiff in der Skybox bewegen, nochmal umkrempeln. Anstatt die Skybox „festzuhalten“ und das Schiff in ihr zu bewegen, haben wir es genau andersherum gemacht. Das Schiff ist immer an derselben Position, auch wenn man meint, man fliegt in eine Richtung. Wir bewegen alles um das Schiff herum. Somit sind wir der Problematik, eine dynamisch erweiternde Skybox zu bauen, direkt aus dem Weg gegangen. Man muss gestehen, wirklich schön ist diese Lösung nicht, aber praktikabel bei unserem kleinen Projekt.

Allerdings war das leider noch nicht alles. Eine weitere Implementierung muss man noch vornehmen, um diese schöne Weltraumansicht genießen zu können. Die Grafiken müssen natürlich noch irgendwie an die Skybox geklebt werden. Das Ganze machen wir über unsere „Skybox.x“ (Auszug im Anhang). Hier muss man seine 6 Skyboxgrafiken noch in die MeshMaterialList reinbasteln.

Eigentlich war es das dann auch schon. Eigentlich: Wir hatten herausgefunden, dass XNA einen Shader benötigt um Dreiecke zu zeichnen. Sprich: Ohne einen Effekt, kein Bild. Wir haben uns dazu einen BasicShader besorgt und somit nicht nur unsere Dreiecke gezeichnet, sondern auch ein DefaultLightening gewonnen.

Codefragment 2: Implementierung des Shaders

effect = Content.Load<Effect>("effects");

Dieser Einzeiler reicht schon, um den Effekt zur Verfügung zu stellen.
Je nach Anforderung muss man nun noch die entsprechenden Funktionen aufrufen, um die Effekte anzuwenden. Für das DefaultLightening muss man nur die gleichnamige Funktion aufrufen:

Codefragment 3:

effect.EnableDefaultLighting();

Im Codefragment 1 werden vier Effektparameter und eine Effekttechnik verwendet. Diese sind soweit selbsterklärend, sodass die Technik, mit der wir unsere Welt darstellen, auf Texturen basieren. Es gibt auch noch weitere Techniken, die der Shader bereitstellt, zum Beispiel pretransformed, colored, Pointsprites und andere, mit denen wir uns aber nicht weiter auseinandergesetzt haben. Die Parameter, die wir dem Effekt zuweisen sind auch soweit logisch. Wir müssen unserem Effekt natürlich mitteilen, auf welche projektionsMatrix, viewMatrix, worldMatrix und welche Textur er sich bezieht. Somit wird der Effekt auf jedes Bild/Textur, dass durch die foreach-Schleife im Codefragment 1 gezogen wird, angewendet.

Quellen:

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: