Skip to content

Monogame del 2, [Rita rektanglar]

Välkommen tillbaka.

Från och med nu så ska jag försöka hålla mig till lite kortare avsnitt och ämnen
Idag tänkte jag att vi ska försöka rita något i vårat fönster. Men vi börjar städa upp lite ifrån föregående avsnitt då vi testade ordningen som monogame anropar våran applikation. Vi återkommer till det vartefter som det blir aktuellt att ta upp det.

Vi städar bort alla funktioner utom konstruktorn, Initialize, Update och Draw. Så kvar har vi följande kod:

  1.  
  2. using Microsoft.Xna.Framework;
  3. using Microsoft.Xna.Framework.Input;
  4.  
  5. namespace GameTutorial
  6. {
  7.     public class GameTutorialGame : Game
  8.     {
  9.         GraphicsDeviceManager graphics;
  10.  
  11.         public GameTutorialGame()
  12.         {
  13.             graphics = new GraphicsDeviceManager(this);
  14.         }
  15.  
  16.         protected override void Initialize()
  17.         {
  18.             base.Initialize();
  19.         }
  20.  
  21.         protected override void Update(GameTime gameTime)
  22.         {
  23.             if (Keyboard.GetState().IsKeyDown(Keys.Escape)) Exit();
  24.             base.Update(gameTime);
  25.         }
  26.  
  27.         protected override void Draw(GameTime gameTime)
  28.         {
  29.             base.Draw(gameTime);
  30.         }
  31.     }
  32. }
  33.  


Vårat svarta fönster ska fortfarande köras om vi trycker på F5.


För att kunna rita nånting på skärmen så måste vi ha två saker. En Textur och en Batcher eller SpriteBatcher som det heter i Monogame.

En Textur är ett objekt som närmast kan beskrivas som ett genomskinligt papper. När vi sen kommer rita i fönstret så är det som att vi slänger på fler och fler av dessa Textur-papper. PÅ ett papper har vi ett träd, ett annat ett hus och kanske en bakgrund med lite berg. alla dessa papper bygger tillsammans upp en färdig bild som vi sedan vill visa upp i fönstret.

Och det är med spritebatchen som hjälper oss med just den delen att komponera ihop och lagra alla papper i ordning. För det är något som är ganska tidskrävande för en dator.

Vi börjar med att skapa en textur, (ett genomskinligt papper). Det gör vi genom att deklarera en variabel som vi döper till papper av typen Texture2D, Texture2D ligger i ett nytt namespace som heter Graphics under MonogameFramework. Så vi måste lägga till det namespacet också.
Vi ska prata mer om vad en texture faktiskt egentligen är senare någon gång, papper kanske inte är den bästa liknelsen, men det tar vi då.

När vi deklarerat våran texture utanför konstruktorn så behöver vi i initiera den. Det gör vi i funktionen Initialize genom att skriva:
papper = new Texture2D(GraphisDevice, 1,1); GraphicsDevice är ett objekt som vi får av Monogame, men om vi skriver den här koden i konstruktor istället så har inte graphicsdevice blivit initierad än och vi kommer få ett null exception error på graphicsdevice. Om ett objekt inte initierats så har det värdet null. Vilket innebär att det inte har något värde alls. det är som en tom ballong.

GraphicsDevice måste iallafall vara med för att hjälpa oss bygga upp texturen, 1, 1 säger att texturen ska vara en pixel bred och en pixel hög.

Vi ska nu ha följande kod.

  1.  
  2. using Microsoft.Xna.Framework;
  3. using Microsoft.Xna.Framework.Graphics;
  4. using Microsoft.Xna.Framework.Input;
  5.  
  6. namespace GameTutorial
  7. {
  8.     public class GameTutorialGame : Game
  9.     {
  10.         GraphicsDeviceManager graphics;
  11.         Texture2D papper;
  12.  
  13.         public GameTutorialGame()
  14.         {
  15.             graphics = new GraphicsDeviceManager(this);
  16.         }
  17.  
  18.         protected override void Initialize()
  19.         {
  20.             papper = new Texture2D(GraphicsDevice, 1, 1);
  21.             base.Initialize();
  22.         }
  23.  
  24.         protected override void Update(GameTime gameTime)
  25.         {
  26.             if (Keyboard.GetState().IsKeyDown(Keys.Escape)) Exit();
  27.             base.Update(gameTime);
  28.         }
  29.  
  30.         protected override void Draw(GameTime gameTime)
  31.         {
  32.             base.Draw(gameTime);
  33.         }
  34.     }
  35. }
  36.  


Nu vill vi såklart rita ut vårat nya fina papper i fönstret. Det gör vi i Draw funktionen. Men först behöver vi ett nytt objekt. SpriteBatch som vi talade om tidigare. Det är ett ganska stort och invecklat objekt men vi tar en sak i taget utan att gå alldeles för långt ner på djupet.
Spritebatchen måste vi skapa sälva så vi deklarerar den tillsammans med vårat papper så här

  1.  
  2.         SpriteBatch spriteBatch;
  3.  

och i Initialize initierar vi den genom att skriva
  1.  
  2.         spriteBatch = new SpriteBatch(GraphicsDevice);
  3.  


Toppen, nu är allt klart för att börja rita.
Vi hoppar över till Draw funktionen och lägger till följande kod.

  1.  
  2.             spriteBatch.Begin();
  3.             spriteBatch.Draw(papper, new Rectangle(10,10,100,100), Color.White);
  4.             spriteBatch.End();
  5.  
  6.             base.Draw(gameTime);
  7.  


spriteBatch.Begin(); Säger att vi vill börja rita, talar vi inte omd et så kommer inte spritebatchen tillåta oss att rita nånting.
spriteBatch.Draw(papper, new Rectangle(10,10,100,100), Color.White); säger att vi vill rita vårat papper, vart den ska ritas anger vi med new Rectangel(10,10,100,100) vilket säger att vårat papper börjar 10 pixlar ifrån vänster och 10 pixlar ifrån toppen av vårat fönster. Sen säger den att vårat papper är 100 pixlar bred och 100 pixlar hög.


Rectangel(horisontellposition, vertikal position, bredd, höjd)



Color.White är lite krånglig, men den talar om vilken färg vi vill blanda med. Så den färgen vi skriver här kommer blanda sig med den färg som är på texturen som vi ritar. Det är också något som vi kommer till senare.

Men vad händer då om vi kör vårat program. Det händer ju ingenting..? Samma gamla svarta fönster... Som vi pratade om så är vårat papper genomskinligt och ett genomskinligt papper ska ju såklart vara osynligt att se. För att rita något på vårat papper så måste vi skriva en ny lite invecklad rad kod uppe i Initialize, efter att vi initierat vårat papper.


  1.  
  2. papper.SetData<Color>(new Color[] { Color.White });
  3.  


när vi initierade vårat papper sa vi att det skulle vara 1 pixel brett och 1 pixel högt. totalt består vårat papper av en pixel totalt och den pixeln fyller vi med fägen vit.
papper.SetData anger att vi vill ange färg som data för vad texturen ska inehålla. (För en textur kan vara och inehålla mycket annat än färg) sen anger vi en array av färger med endast en komponent, Vit.

Våran kod i sin helhet ser nu ut så här

  1.  
  2. using Microsoft.Xna.Framework;
  3. using Microsoft.Xna.Framework.Graphics;
  4. using Microsoft.Xna.Framework.Input;
  5. using System;
  6.  
  7. namespace GameTutorial
  8. {
  9.     public class GameTutorialGame : Game
  10.     {
  11.         GraphicsDeviceManager graphics;
  12.         SpriteBatch spriteBatch;
  13.         Texture2D papper;
  14.  
  15.         public GameTutorialGame()
  16.         {
  17.             graphics = new GraphicsDeviceManager(this);
  18.            
  19.         }
  20.  
  21.         protected override void Initialize()
  22.         {
  23.             spriteBatch = new SpriteBatch(GraphicsDevice);
  24.             papper = new Texture2D(GraphicsDevice, 1, 1);
  25.             papper.SetData<Color>(new Color[] { Color.White });
  26.  
  27.             base.Initialize();
  28.         }
  29.  
  30.         protected override void Update(GameTime gameTime)
  31.         {
  32.             if (Keyboard.GetState().IsKeyDown(Keys.Escape)) Exit();
  33.             base.Update(gameTime);
  34.         }
  35.  
  36.         protected override void Draw(GameTime gameTime)
  37.         {
  38.             spriteBatch.Begin();
  39.             spriteBatch.Draw(papper, new Rectangle(10,10,100,100), Color.White);
  40.             spriteBatch.End();
  41.  
  42.             base.Draw(gameTime);
  43.         }
  44.     }
  45. }
  46.  
  47.  


Vi kör igen och se på tusan vår första vita rektangel är ritad...


Det var allt för den här delen, men jag lämnar lite kodändringar som kan vara spännade att testa och leka med för att se vad som händer.

  1.  
  2. papper.SetData<Color>(new Color[] { Color.Blue});
  3.  

  1.  
  2. papper.SetData<Color>(new Color[] { Color.Red});
  3.  

  1.  
  2. spriteBatch.Draw(papper, new Rectangle(200,200,100,100), Color.White);
  3.  

  1.  
  2. spriteBatch.Draw(papper, new Rectangle(0,10,800,10), Color.Orange);
  3.  

  1.  
  2. spriteBatch.Draw(papper, new Rectangle(10,10,100,100), Color.White);
  3. spriteBatch.Draw(papper, new Rectangle(300,10,100,100), Color.White);
  4. spriteBatch.Draw(papper, new Rectangle(150,200,100,100), Color.White);
  5.  

Lite mer avancerat, fundera kring vad som händer här...
  1.  
  2. papper = new Texture2D(GraphicsDevice, 2, 1);
  3. papper.SetData<Color>(new Color[] { Color.Red, Color.Blue });
  4.  

Trackbacks

No Trackbacks

Comments

Display comments as Linear | Threaded

No comments

Add Comment

You can use [geshi lang=lang_name [,ln={y|n}]][/geshi] tags to embed source code snippets.
Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Form options