Tutorial 3: Das erste 2D Game: Jetzt wird gezeichnet

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Tutorial 3: Das erste 2D Game: Jetzt wird gezeichnet

      Im letzten Tutorial wurde die Objekte für den Player, den Gegner(Enemy) und das Spiel Environment(das allgemeine spiel) erstellt.
      Nun geht es erst mal darum diese beim start zu öffnen und mit werten zu befüllen.
      Hierfür gehen wir in die Methode Initialize aus der Game.cs, dort initialisieren wir die variablen

      Quellcode

      1. protected override void Initialize()
      2. {
      3. // TODO: Fügen Sie Ihre Initialisierungslogik hier hinzu
      4. [COLOR="red"] player = new Player();
      5. enemy = new Enemy();
      6. environment = new GameEnvironment();[/COLOR]
      7. base.Initialize();
      8. }

      Ab diesem Punkt sind die variablen einsatzfähig, d.h. ist es logisch das in der Initialize Mehtode zu machen.
      Nun geht es darum die Standartwerte zu füllen, das machen wir auch noch in dieser Methode.

      Quellcode

      1. protected override void Initialize()
      2. {
      3. // TODO: Fügen Sie Ihre Initialisierungslogik hier hinzu
      4. player = new Player();
      5. enemy = new Enemy();
      6. environment = new GameEnvironment();
      7. //Globale Einstellungen
      8. [COLOR="#f4a460"] environment.bgColor = Color.CornflowerBlue; //Die Hintergrundfarbe für das Spiel(Standart hintergrundfarbe von)
      9. environment.isMenu = false; //Ob das Menu offen ist (Vor erst nicht, das Menu kommt später)
      10. environment.lost = false; //Ob das Spiel verloren ist
      11. environment.won = false; //Ob das Spiel gewonnen ist
      12. environment.windowHeight = this.GraphicsDevice.Viewport.Height; //Die Fenster Höhe abspeichern
      13. environment.windowWidth = this.GraphicsDevice.Viewport.Width; //Die Fenster Breite abspeichern[/COLOR]
      14. //Player Einstellungen
      15. [COLOR="#2eFF57"] player.Bombs = new List<Bomb>(); //Bomben Array/Liste Initialisieren
      16. player.lives = 3; //Leben festlegen
      17. player.pos = new Vector2(0, 0); //Standartposition für den Spieler bei Spielbeginn
      18. player.speed = new Vector2(0, 0); //keine bewegung am start[/COLOR]
      19. //Gegner Einstellungen
      20. [COLOR="#48d1cc"] enemy.Bombs = new List<Bomb>(); //Bomben Array/Liste Initialisieren
      21. enemy.lives = 100; //Leben festlegen (100%)
      22. enemy.pos = new Vector2(0f, environment.windowHeight - 97f); //Die position (0pixel auf X, und die Fenster höhe - die höhe des bildes auf der Y)
      23. enemy.speed = new Vector2(150f, 0f); //Geschwindigketi(mit 5 pixeln pro sek nach rechts)
      24. [/COLOR]
      25. base.Initialize();
      26. }
      Alles anzeigen


      Die verschiedenen einstellungen habe ich farblich markiert.
      Bei den globalen einstellungen habe ich vor erst isMenu auf false gestellt, da das menü später kommt.
      won und lost ist auf false, weil die dem spiel nacher sagen ob es weiter rechnen muss oder ob das spiel vorbei ist und wie es geendet hat, und wenn eins davon von anfang an auf true wäre gäb es ein ergebnis bevor dass spiel angefangen hätte.
      bgColor ist die Hintergrund farbe, da lasse ich euch freie wahl was ihr nehmt, ConrflowerBule ist für gewöhnlich bei XNA games standart.

      Bei den Spieler und gegner einstellungen ist sind position und Geschwindigkeit interresant.
      Die koordinaten sind pixel in einem koordinaten system, allerdings sieht ein Programm Koordinaten system anders aus als ein Mathematisches
      Das ist ein Mathematisches:

      und das ein Pixel system:


      Wie man Sieht orientiert sich das Pixel system nach der oberen linken ecke, was bedeutet dass im gegensatz zum Mathematischen die y werte rumgedreht werden müssen(aus + wird -)
      daher Startet der spieler mit player.pos=new Vector2(0f, 0f); auf der Position 0,0 also in der Linken oberen ecke des programms.
      und bewegt sich nicht.
      auch interresant ist diese zeile:

      Quellcode

      1. enemy.pos = new Vector2(0f, environment.windowHeight - 97f);

      Die sagt nichts anderes als auf der x position 0(linker rand) und auf der y position soll es die gesammte fenstergröße - die eigene größe (97) sein, das bedeutet das der untere rand der gegner textur genau auf dem unteren rand des Spielfendes liegt.
      Und mit .speed = new Vector2(150f, 0f); wird gesagt dass sich der gegner in einer sekunde un 150 pixel nach rechts verschieben soll(klingt wenig ist aber schnell genug).
      das .Bombs = new List<Bomb>(); muss sein, damit man die listen(einfache array klasse) verwenden kann.

      Nun müssen die Texturen und töne geladen werden die wir in der Content Pipline gespeichert haben.

      Im letzten Tutorial habe ich am Ende den Asset Name angesprochen, das zeige ich euch nochmal genauer:
      Im Projektmappen explorer haben wir den Unterpunkt Bomber Content(Content)
      dieser enthält die Content objekte, klickt man auf eines dieser objekte so erscheinen die einstellungen im Eigenschafts fenster

      Das rote ist diese Asset Name einstellung, die ist ganz wichtig, denn über diese einstellung ruft ihr das elemt auf.
      also bennene ich die mal um:
      Aus dem Zepelin mache ich PlayerIMG
      Aus der Bombe Mach ich bomb
      Aus dem Gegner mach ich EnemyIMG
      aus dem Laser(gegner atk) mach ich Shot
      Aus den Spieler Leben mach ich PL
      Aus den Gegner Leben mach ich EL
      Aus der Hintergrund musik mach ich BGM
      aus dem Bomben Explosions sound mach ich Boom
      Aus dem Mauszeiger mach ich Cursor
      und aus dem Laser sound Mach ich Laser

      Jetzt geht es an die Verwendung:
      Hiefür gehen wir in die Methode Load Content

      Quellcode

      1. protected override void LoadContent()
      2. {
      3. // Erstellen Sie einen neuen SpriteBatch, der zum Zeichnen von Texturen verwendet werden kann.
      4. spriteBatch = new SpriteBatch(GraphicsDevice);
      5. [COLOR="red"] player.tex = Content.Load<Texture2D>("PlayerIMG"); //Textur für den Spieler
      6. enemy.tex = Content.Load<Texture2D>("EnemyIMG"); //Textur für den Spieler
      7. environment.bgMusic = Content.Load<SoundEffect>("BGM"); //Hintergrund Musik Laden
      8. environment.bgMusicInstance = environment.bgMusic.CreateInstance(); // Hintergrund Musik Instanz zum abspielen Erstellen
      9. environment.bgMusicInstance.IsLooped = true;//Damit die musik wieder von forn anfängt
      10. environment.bgMusicInstance.Play();//Abspielen starten
      11. environment.cursorTex = Content.Load<Texture2D>("Cursor"); //Mauszeiger bild Laden[/COLOR]
      12. }
      Alles anzeigen

      Wie man recht deutlich erkennen sollte kann man die Contentpipline mit Content oder this.Content ansprechen
      Mit der Methode Load können dann die entsprechenden objekte geladen werden
      Hinter das load muss in <> klammern der Typ stehen, unsere texturen haben wir ja schon in der Objekte.cs als Texture2D angegeben, die 2d Texturen klasse aus XNA, die müssen wir natürlich zum texturen laden hier angeben.
      Bei sounds ist es der typ SoundEffect.
      Hinter diese Klammern kommt dann in runde Klammern() als string der Asset name, den man vorher im eigenschaftsfenster festgelegt hat.

      Quellcode

      1. Content.Load<[COLOR="#00ffff"]Typ[/COLOR]>("[COLOR="orange"]ASSET[/COLOR]");


      Desweiteren habe ich hier auch die erste musik verwendet:

      Quellcode

      1. environment.bgMusic = Content.Load<SoundEffect>("BGM"); //Hintergrund Musik Laden
      2. environment.bgMusicInstance = environment.bgMusic.CreateInstance(); // Hintergrund Musik Instanz zum abspielen Erstellen
      3. environment.bgMusicInstance.IsLooped = true;//Damit die musik wieder von forn anfängt
      4. environment.bgMusicInstance.Play();//Abspielen starten

      Mit dem ersten wird das lied geladen,
      Dann wird eine Instanz erzeugt, mit instanzen kann man mehrere töne gleichzeitig spielen und hat auch mehr möglichkeiten
      Mit dem Dritten(isLooped) wird eingestellt dass die musik in einer schleife also immer wieder nacheinander abgespielt werden soll
      und mit .Play(); wird das abspielen gestartet.
      Gestoppt wird es mit .Stop();

      Nun lassen wir das erste mal was zeichnen:
      Den Player und den gegner
      das wird in der Methode Draw gemacht

      Quellcode

      1. protected override void Draw(GameTime gameTime)
      2. {
      3. GraphicsDevice.Clear(Color.CornflowerBlue);
      4. [COLOR="red"] spriteBatch.Begin();
      5. spriteBatch.Draw(player.tex, player.pos, Color.White);
      6. spriteBatch.Draw(enemy.tex, enemy.pos, Color.White);
      7. spriteBatch.End();[/COLOR]
      8. base.Draw(gameTime);
      9. }

      Den Standartmäßigen XNA code einfach ingorieren, und den code dazwischen schreiben (das erste löscht das letzte bild, das letzte zeichnet das neue)

      Wir zeichen über den spriteBatch, ein standartmäßiges objekt zum 2d zeichnen.

      Um überhaupt was zeichnen zu können muss mach diesen zu erst starten, spriteBatch.Begin(); und am ende nach der zeichen aktion wieder schließen
      spriteBatch.End();
      gezeichnet wird mit der .Draw methode(spriteBatch.Draw).
      diese Methode benötigt mindestens 3 argumente, hat aber noch 17 überläufe(wann anders mehr dazu)
      Die wichtigen angaben sind Was, Wo und Welche Farbe
      als erstes wird immer eine Texture2D gefordert, da gebe ich meine player Textur(player.tex), danach die position, entweder als rectangel, wo man position sowie größe hat, und XNA dann die größe anpasst, oder über einen vector2, welcher nur die position speichert, und die standartmäßige textur größe verwendet.
      Wir verwenden einfach mal nur einen vector2, da wir auch bei der objecte.cs die position in einem solchen gespeichert haben(player.pos)
      Die farbe gibt an wie die textur gefärbt werden soll(auf welche farbe weiß abgebildet werden soll) das hat etwa den selben effekt wie bei photoshop strg+U und bei gimp einfärben (ganz cool eigentlich).

      also noch mal zusammenfassend

      Quellcode

      1. spriteBatch.Draw(Textur, Position/rectange, Farbe);


      Und im nächsten tutorial bringen wir bewegung rein
    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )