Search code examples
c#imagexnamonogame

XNA images appear clippy/blurry?

this is somewhat of a simple question, but I have a pretty high-quality image sprite. However, when I load it into a SpriteBatch, it appears like this:

enter image description here

When it should look like this:

enter image description here

What is going on here, and how should I fix it?

Here's how I load the SpriteBatch: 

   this.landers =
            Content.Load<Texture2D>("sprites/landers");

And I have a source rectangle for it:

this.sprite = Rectangle(0, 0, 900, 900);

Then I draw it:

sb.Draw(
            texture: this.landers,
            position: this.position,
            sourceRectangle: this.sprite,
            color: Color.White,
            rotation: this.rotation,
            origin: this.relativeOrigin,
            scale: 0.06f,
            effects: SpriteEffects.None,
            layerDepth: 0f
        );
Solution

  • Resize the image in an external tool, choosing the optimal method(bi-cubic should be good, or simply take a screen shot of the image posted and crop and scale it), and use that as your source image.

    The scaling always looks best as a 1 to 1 ratio(not to mention the computations saved). The scaling of 6% (using naive but fast methods,as implemented in Monogame) will have similar "artifacts" as scaling the image to ~16.66... times(1666%) its size. The source/destination rectangles work best when scaling between 25% and 400%. Beyond that range "artifacts" tend to appear due to information loss or lack thereof.

    If you need the image larger(or smaller), create a secondary texture prescaled to the center of the needed range. The same issue occurs with font scaling.

    It is always better to start with a larger image and downscale(within reason), the information from the larger image helps with anti-aliasing, but scaling beyond the feature segmentation(separation of lines in your case) will cause distortions in the display of the image due to loss of information.