...doch das werden wir bald ändern.
Somit willkommen Leute zu einem neuen Teil meiner Tutorialserie.
Es hat wieder über einen Monat gedauert, bis ich mal weitergeschrieben habe, weil ich doch relativ wenig Lust zu irgendwas hatte, auch meine Projekte stockten bisher etwas, jedoch versuche ich dies zu ändern, da ich immerhin nicht ganz untätig sein kann und will.
In diesem Teil dreht sich alles um die ersten Schritte auf dem Weg zu einem Spiel. (Auch dieses Mal wird alles ausführlich erklärt und mit Farbe versehen, um ein gutes Verständnis zu schaffen)
Wir werden unser erstes Sprites zeichnen, lernen das Koordinatensystem von XNA kennen und beschäftigen uns kurz mit der Content Pipeline.
Ok, wir haben unsere Ziele, so lasst uns anfangen.
Öffnet bitte Visual Studio und euer Projekt, das ihr beim letzten Mal angelegt habt. (Wer den letzten Teil nicht gelesen hat, der kann dies hier nachholen)

Wir wollen nun unser erstes Sprite laden, damit wir es gleich zeichnen können.
Fügt dazu über dem Konstruktor unter dem "SpriteBatch spriteBatch" folgendes hinzu:

Texture2D texture;

Die Klasse Texture2D kümmert sich um die Aufnahme des Sprites, das wir gleich laden. Alles, was mit unserem Sprite zu tun hat, wird nun durch dieses Objekt repräsentiert.
Wir wollen nun dafür sorgen, dass wir ein Sprite dem Projekt hinzufügen, welches wir gleich benutzen werden.
Macht dazu einen Rechtsklick auf das Content-Projekt im Projektmappen-Explorer (heißt bei mir XNATutorialContent (Content), kommt aber auf euren Projektnamen an, wie es genau heißt)
Im nun auftauchenden Menü wählt ihr Hinzufügen -> Vorhandenes Element


Wählt nun eine Grafik eurer Wahl aus, sie sollte allerdings nicht zu groß sein, da sie sonst u.U im Spielfenster nicht komplett gezeigt wird.
Ich benutze für diesen Teil folgende Grafik:


(Bild stammt aus Google, einfach als Suchbegriff "Erde" (ohne "") eingeben)
Nachdem ihr nun eure Grafik hinzugefügt habt, sollte sie im Projektmappen-Explorer zu sehen sein. Drückt nun F6, um das Projekt zu erstellen.
Wir wollen uns nun mal den Ort ansehen, wo die Grafik abgelegt wurde.
Dazu macht einen Rechtsklick auf den fettgeschriebenen Projektnamen (bei mir: XNATutorial)
In dem nun auftauchenden Menü wählt Ordner in Windows Explorer öffnen aus.
Es sollte sich nun ein Explorerfenster öffnen mit eurem Projekt.
Klickt nun doppelt auf bin -> x86 -> Debug -> Content
Dort sollte sich eine Datei befinden, die den Namen eurer eben hinzugefügten Datei hat, dazu die Endung .xnb
Hoppla, wieso hat meine Datei die Endung .xnb, ich habe doch eine Grafik hinzugefügt?
Nun, das liegt daran, dass XNA die schon im ersten Teil kurz angesprochene Content-Pipeline besitzt.
In dem Moment, als ihr vorhin F6 gedrückt hab, wurde euer Projekt erstellt.
Dabei wurde auch die Content-Pipeline angestoßen, sich um euren Content zu kümmern. Wie ich ja schon im ersten Teil erwähnte, läuft der Code auch auf der XBox, somit muss alles kompatibel mit dieser sein.
Durch die Content-Pipeline wird genau das für euren Content gewährleistet, denn die Content-Pipeline "konvertiert" eure Inhalte in ein spezielles Binärformat mit der Endung .xnb
Dadurch spielt es keine Rolle mehr, ob die Grafik mal die Endung .jpg oder .png hatte, am Ende ist alles sowieso gleich von der Endung her.
Wie ihr seht, ist die Content-Pipeline ein nützliches Werkzeug, eben weil sie euren Content verwaltet, braucht ihr nicht erst eine Lösung dafür suchen und implementieren (einbauen), sondern könnt euren Content hinzufügen und gleich mit ihm arbeiten. (Evtl. werde ich mal in einem separaten Artikel genauer auf die Content-Pipline eingehen, das hier ist nur ein grober Überblick, was sie macht.)
Bevor wir nun das Sprite laden, müssen wir noch kurz etwas klären.
Klickt einmal mit der Linken Maustaste im Projektmappen-Explorer auf den Eintrag, der euer Sprite repräsentiert.
Untendrunter sollte sich das Eigenschaftenfenster befinden, in dem einige Daten stehen wie Asset-Name, Buildvorgang, Content-Prozessor (er verarbeitet euren Content nach dem Laden) usw.


Uns interessiert jetzt im Moment nur die Zeile Asset-Name:
Der Name, der nebendran steht, das ist euer Name der Datei, ohne die Endung. (Bei mir lautet er firstsprite)
Wenn ihr wollt, könnt ihr ihn ändern, jedoch merkt ihn euch, wir brauchen ihn gleich nochmal.
Scrollt nun bitte zur LoadContent()-Methode.
Dort fügt folgende Zeile vor das base.LoadContent() hinzu (ihr könnt den Kommentar entfernen, wenn ihr wollt):

texture = Content.Load<Texture2D>("firstsprite");

Dort, wo bei mir firstsprite steht, tragt nun bitte euren Asset-Name der Datei ein (entweder den, den sie sowieso schon hatte oder den, den ihr eben festgelegt habt, aber bitte zwischen die "" und ohne die Endung .xnb)
Was wir eben getan haben, ist, den ContentManager anzuweisen, die Datei, die in den runden Klammern steht, mittels Content-Pipline zu laden (der ContentManager steht zwischen unserem Projekt und der Content-Pipeline und ist sozusagen der Vermittler) und eine Referenz (ein Verweis) in unserer eben angelegten Variable zu speichern. Der ContentManager hat noch eine Besonderheit.
Wenn ihr versucht, eine Datei zu laden, die schon geladen wurde, dann liefert die Load()-Methode des ContentManagers nur die Referenz der bereits geladenen Datei zurück, er lädt sie nicht nochmals.
Jetzt geht es endlich an Zeichnen des Sprites.
Scrollt nun zur Draw()-Methode.
Dort fügt nun folgende Zeilen hinzu: (unter das GraphicsDevice.Clear)

spriteBatch.Begin();
spriteBatch.Draw(texture, new Vector2(0,0), Color.White);
spriteBatch.End();

Wow, ziemlich viele neue Dinge in diesem kurzen Codestück.
Bevor ich jedoch den Coden erkläre, wollen wir uns doch mal das Resultat ansehen.
Drückt dazu F5. Wenn ihr alles richtig gemacht habt, sollte sich nun unser Spielfenster öffnen und darin sollte sich eure Grafik befinden.
Das Ganze sieht bei mir so aus:


Sollte es nicht so aussehen, bzw. Fehler auftreten, so habt ihr etwas falsch gemacht. Kontrolliert dann bitte nochmals, ob alles richtig ist. (Wenn es dann trotz Kontrolle nicht geht, kann ein Fehler im Tutorial sein, ich erbitte mir dann eine kurze Mitteilung, damit ich es ausbessern kann)
Soweit, so gut, nun die Erklärung des Codes:
Zuerst leiten wir mittels spriteBatch.Begin() den Anfang unserer Zeichenoperationen ein (alle Zeichenoperationen mit dem SpriteBatch müssen sich innerhalb eines Blocks befinden, der mir spriteBatch.Begin() anfängt, es reicht dabei, es einmal zu schreiben)
Durch den Aufruf dieser Methode wird das Zeichnen vorbereitet, denn intern werden erst alle Daten, die mittels spriteBatch.Draw auf den Bildschirm kommen, gesammelt und dann als Gesamtbild an den Monitor geschickt, nachdem weitere Faktoren Einfluss hatten.

Nun folgt der erste Aufruf von spriteBatch.Draw(), diese Methode erwartet in der einfachsten Überladung, die wir nutzen, ein Objekt vom Typ Texture2D (unsere texture-variable), danach einen Vector2 (kann man sich als Punkt im Koordinatensystem vorstellen mit x/y-Wert) und die Angabe des Farbtons.
Color.White bedeutet dabei, dass das Sprite so gelassen wird, wie es ist, denn mittels der Color-Angabe kann man das Sprite färben. (Probiert doch mal zB Color.Red oder so aus und schaut, was passiert)

Zum Vector2 habe ich ja eben erwähnt, dass es mit einem Punkt in einem Koordinatensystem vergleichbar ist. Es gibt noch den Vector3, für dreidimensionale Inhalte, also 3D-Models oder so und dann noch den Vector4, dessen Sinn ich noch nicht weiß.
Das Koordinatensystem von XNA ist etwas besonders, so liegt der Punkt (0,0) in der linken, oberen Ecke des Spielfensters, die Y-Achse erstreckt sich nach unten und die X-Achse nach rechts. Beachtet dies, wenn ihr Positionsangaben festlegt.
Im übrigen wird auch die Position der linken oberen Ecke (man nennt den Punkt das Origin) unseres Sprites über den Vector in spriteBatch.Draw festgelegt. (Die Position des Origins kann man verändern, wie, das zeige ich euch vielleicht später mal)
Mit spriteBatch.End() wird das Ende der Zeichenoperationen festgelegt, die gesammelten Daten werden aufbereitet und dann an den Monitor geschickt, wo sie schlussendlich gezeigt werden (hoffe ich doch, ansonsten ist der Monitor kaputt =/)

Damit wären wir wieder einmal beim Ende angelangt.
Ich hoffe, es gefällt euch auch dieses Mal und ich habe keine Fehler gemacht oder falsche Informationen gegeben.
Falls doch, so erbitte ich mir eine Meldung, damit ich den Fehler ausbessern kann.
Im nächsten Teil der Serie, die dieses Mal hoffentlich nicht so lange dauert, bis sie erscheint, geht es um Bewegung und Steuerung.
Ab diesem Teil wird auch immer das Sample, das wir anfertigen, hier als Download erhältlich sein, falls mal jemand keine Lust hat, den Code selbst zu tippen oder einfach nur eine neue Kopie des Codes brauch. Ich habe den Code so gelassen, wie er ist, also keine weiteren Kommentare hinzugefügt oder welche gelöscht.
Das Sample für diesen Teil könnt ihr hier herunterladen.
Ansonsten sehen wir uns beim nächsten Teil wieder.
Bis dann

Quelle
www.internetfreak.net
www.coding-cluster.net