Inledning

Ibland uppstår ett behov av att kunna rita vanliga tvådimensionella cirklar och linjer. I MonoGame bygger uppritningen på hårdvaran i grafikkortet som numera jobbar med 3D och inte 2D. Linjer går utmärkt att rita men kräver ändå kunskaper om 3D, kamera, etc. Cirklar är lite svårare.

Vi ska i denna artikel visa två enkla tekniker för att rita 2D cirklar och linjer i valfri färg.

Cirklar

När vi ska rita en cirkel så utgår vi ifrån att vi redan har en vit, lagom stor cirkel i 2D. Denna lägger vi till i vår "Content" och laddar som en Texture2D. Med hjälp av denna bild ska vi sedan kunna rita ut en valfri cirkel på given mittpunkt med en given diameter och en given färg.

	private Texture2D circleTexture;
	
	public void DrawCircle(Vector2 pos, Color color, int width = 10)
	{
		float scale = width/(float) circleTexture.Width;
		spriteBatch.Draw(circleTexture, pos, null, color, 0f, 
			new Vector2(circleTexture.Width * 0.5f, circleTexture.Height * 0.5f), 
			scale, SpriteEffects.None, 0f);
	}

Tanken är att vi skickar med en Vector2 för cirkelns placering samt en "blending color" som sätter färgen. Eftersom cirkeln är vit så kan vi med "blending color" mixa fram vilken färg vi vill. Sist men inte minst så skickar vi med en diameter.

Vi måste i canlig ordning första ladda in texturen för cirkeln i variabeln circleTexture innan vi kan rita ut den och eftesom vi använde en SpriteBatch så får vi inte heller glömma att anropa spriteBatch.Begin() samt spriteBatch.End() mellan anropen till DrawCircle().

Metoden DrawCircle() beräknar en skalfaktor beroend på texturens storlek och den önskade bredden (diametern) på skärmen. Eftersom cirkeln i artikeln endast är 100x100 pixlar så kommer alla storlekar större än 100 pixlar att bli en uppskalning. Skalar vi upp tillräckligt mycket så kommer kanterna på cirkeln att bli mindre skarp och mindre rund. För att förhindra detta så kan man utgå från en ännu större cirkel, t.ex. 500x500 pixlar.

Linjer

För att rita linjer så gör vi ungefär samma trick som med cirklar. Vi laddar en textur som är en pixel, eller i vårt fall 10x10 pixlar. Just när det gäller linjer spelar inte texturen så stor roll.

När vi ritar vill vi ange två punker, en linjebredd samt en färg. Uppritningen kommer sedan att beräkna avståndet mellan punkt 1 o 2. Rita ut en rektangel som motsvarar längden och linjebredden från punkt 1 med en rotation mot punk 2. Låter enkelt? Här är koden.

	private Texture2D pixelTexture;
	
	public void DrawLine(Vector2 pos1, Vector2 pos2, Color color, int width = 1)
	{
		Vector2 diff = (pos1 - pos2);
		float length = diff.Length();
		float angle = (float)Math.Atan2(diff.Y, diff.X) + MathHelper.Pi;
		
		spriteBatch.Draw(pixelTexture, new Rectangle((int)(pos1.X), (int)(pos1.Y), (int)length, width),
			null, color, angle, new Vector2(0, width / 2), SpriteEffects.None, 0f);
	}

Precis som innan måste vi har laddat in grafiken via LoadContent() samt anropat DrawLine() mellan .Begin() och .End() på vår SpriteBatch.

Källkod och exempel

Koden samt de korta exemplen tillsammans med texturerna finns att ladda hem nedan.