Skip to content

Monogame del 3, [Mer om texturer]

Välkommen till del tre i min lilla Monogame tutorial på svenska.

Vi testade ju på lite texturer i förra delen och jag lämnade er med lite olika exempel ni kunde laborera med. Det sista exemplet var ltie spännade då det trots att vi bara angett blå och röd i våran textur,


Det är egentligen en väldig massa saker som händer och jag tänker idag bara lyfta på locket lite för att vi ska få en grundläggande förståelse för vad det är som händer.
När vi skapar vår textur som vi kallar för papper så anger vi att den ska vara 2 pixlar lång och 1 pixel hög, totalt kommer våra textur bestå av två pixlar den ena anger vi att den ska vara röd och den andra blå. Det är allt vi gör när vi skapar våran textur.

När vi sedan ritar texturen med följande kod
  1.  
  2.             spriteBatch.Begin();
  3.             spriteBatch.Draw(papper, new Rectangle(10, 10, 100, 100), Color.White);
  4.             spriteBatch.End();
  5.  

Så vill vi att våran textur ska täcka upp en yta som är placerad 10 pixlar ut från höger och 10 pixlar ner från överkant på fönstret. Och sen vill vi att den ska fylla upp 100 pixlar i bredd och 100 pixlar i höjd. Det blir ju lite omöjligt när våran textur som vi ska rita bara är 2 pixlar bred och 1 pixel hög.

När grafikkortet ska rita upp en textur på det här viset så kan den använda sig av lite olika tekniker, men den vanligaste tekniken kallas på engelska för bilinear texturefiltering. Krångligt ord måhända men det den gör är att räkna om dom där 100 pixlarna i bredd och 100 pixlarna i höjd till två värden mellan 0 och 1, dessa två koordinater kallar man för U samt V. Man kan säga vart procentuellt i ytan där man ritar är man sedan gör man samma sak för den textur man ska rita ifrån. I det här fallet "papper"

Så första pixeln som ritas är 0% vertikalt in i rektangeln och 0 % horisontellt det blir UV kordinaterna 0U och 0V, man kan skriva ihop det i vektor form och få 0.0 ,0.0. Vektorer är lite av ett ämne för sig som är lite mer matematiskt. 0% in i våran textur så har vi en pixel som är röd, eftersom texturen bara är en pixel hör så spelar det ingen roll vad det vertikal värdet är så vi kan utesluta det, det kommer ändå bara att bli samma som det horisontella värdet. nästa pixel är 1% in och 1 % in är fortfarande röd, inte fören vi kommer till 50 procent in i texturen så ändrar det si och blir blå.

Varje gång som grafikkortet kollar i texturen vad det är för färg i uv koordinaterna så gör den en genomsnitts beräkning som resulterar i att våran bild när den ritas ut blir en färgskala mellan dom färger som finns i texturen. Det här gör att vi kan rita våran textur i vilken storlek som helst och grafikkortet kommer hjälpa oss att skala om bilden så att det passar och ser så bra ut som möjligt. Om vi skulle vilja ha ett mer pixelperfekt resultat så måste vi stänga av den där bilinear filtering och det kommer vi komma till framöver när vi går in djupare i vad spritebachen gör och kan göra.

Det var allt jag ville gå igenom idag men innan vi avslutar så tar vi lite nya exempel på vad vi kan rita med våra texturer.

  1.  
  2.             papper = new Texture2D(GraphicsDevice, 2, 2);
  3.             papper.SetData<Color>(new Color[] { Color.Red, Color.Blue, Color.Green, Color.Yellow });
  4.  

Det här blir en 2 * 2 pixlar stor gradient textur med 4 färger i


  1.  
  2.     public class GameTutorialGame : Game
  3.     {
  4.         GraphicsDeviceManager graphics;
  5.         SpriteBatch spriteBatch;
  6.         Texture2D papper1;
  7.         Texture2D papper2;
  8.         public GameTutorialGame()
  9.         {
  10.             graphics = new GraphicsDeviceManager(this);
  11.            
  12.         }
  13.  
  14.         protected override void Initialize()
  15.         {
  16.             spriteBatch = new SpriteBatch(GraphicsDevice);
  17.             papper1 = new Texture2D(GraphicsDevice, 255, 255);
  18.             Color[] colors = new Color[255 * 255];
  19.             for (int y = 0; y < 255; y++)
  20.             {
  21.                 for (int x = 0; x < 255; x++)
  22.                 {
  23.                     colors[(y * 255) + x] = new Color(x, y, 0);
  24.                 }
  25.             }
  26.             papper1.SetData<Color>(colors);
  27.  
  28.             papper2 = new Texture2D(GraphicsDevice, 2, 2);
  29.             papper2.SetData<Color>(new Color[] { Color.Black, Color.Red, Color.Green, Color.Yellow });
  30.  
  31.             base.Initialize();
  32.         }
  33.  
  34.         protected override void Update(GameTime gameTime)
  35.         {
  36.             if (Keyboard.GetState().IsKeyDown(Keys.Escape)) Exit();
  37.             base.Update(gameTime);
  38.         }
  39.  
  40.         protected override void Draw(GameTime gameTime)
  41.         {
  42.             spriteBatch.Begin();
  43.             spriteBatch.Draw(papper1, new Rectangle(10, 10, 255, 255), Color.White);
  44.             spriteBatch.Draw(papper2, new Rectangle(300, 10, 255, 255), Color.White);
  45.             spriteBatch.End();
  46.  
  47.             base.Draw(gameTime);
  48.         }
  49.     }
  50.  

Nu skapar vi två texturer, papper1 och papper2. I papper1 så sätter vi alla pixlarna manuellt i färgskalan svart till röd till grön till gul. papper två har bara 4 pixlar med samma grundfärger, när vi sedan ritar ut dom bredvid varandra så kan vi jämföra hur bra den där bilinjära filtereffekten är. Tänk på att den bara är 4 pixlar stor men medans den andra är 65025 pixlar stor, men skapar ändå ett ganska bra resultat.



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