Poor sprite quality when scaling

Graphics
,
1

Hello! I know c# very well, but I am new to Monogame Engine. I want to make game with NES retro style and I use resolution 320x320 and sprites 16x16 each other. But sprites have very poor quality. It isn’t legibly!

public Game1(){
        _graphics = new GraphicsDeviceManager(this);
        _graphics.PreferredBackBufferWidth = 320;
        _graphics.PreferredBackBufferHeight = 320;
        _graphics.IsFullScreen = true;
        Content.RootDirectory = "Content";
        IsMouseVisible = true;}

    protected override void Initialize(){
        WorldNode.Chunk.Init();
        base.Initialize();}

    protected override void LoadContent(){
        _spriteBatch = new SpriteBatch(GraphicsDevice);
        // TODO: use this.Content to load your game content here
        s.TextureManager.Textures.Text = Content.Load<SpriteFont>("font");   
        s.TextureManager.Textures.Atlas1 = Content.Load<Texture2D>("Atlas1");   
    }

    protected override void Update(GameTime gameTime){
        if (Keyboard.GetState().IsKeyDown(Keys.Escape))
            {Process.GetCurrentProcess().Kill();}

        base.Update(gameTime);}

    protected override void Draw(GameTime gameTime){
        GraphicsDevice.Clear(Color.LightGoldenrodYellow);
        
        _spriteBatch.Begin();
        s.WorldNode.Chunk.DrawChunk(s.TextureManager.Textures.Atlas1);
        Game1._spriteBatch.End();

        base.Draw(gameTime);
    }

Yes, I know this is natural for raster graphics

2

Try using SamplerState.PointClamp by passing it in to the _spriteBatch.Begin() method.

3

spriteBatch.Begin(SpriteSortMode.Deferred, null, SamplerState.PointClamp, null, null);
Don’t work :frowning_face:
The sprite just blurs when zoomed in, but I know solution exist

4

By “zoomed in”, how do you mean? I notice your game dimensions themselves are 320x320 so it doesn’t sound like you’re doing any actual zooming in your game. If it’s the full screen part, I wonder if it’s because 320x320 is unlikely to be a supported resolution and so it’s doing something else to fit it to the next closest resolution available (whatever that is). There’s a way to get this… it might even be after you call _graphics.ApplyChanges(), which I actually don’t see in your code.

Try setting _graphics.IsFullScreen to false and running your game. Take a screenshot of it and zoom in with mspaint (or whatever), do the graphics still look distorted?

The general approach that is suggested for low rez games is to use a normal screen resolution (ie, 1920x1080) and draw your game to a RenderTarget2D object instead. Then, when you’re ready to present that to the screen, draw it in a separate SpriteBatch pass ensuring you’re using SamplerState.PointClamp. It’s also generally advised that you scale the texture up using whole integer values and then just fit that in your screen resolution.

For example, fitting 320x320 onto 1920x1080 fits 6 times on the x axis and 3.375 on the y-axis. You’d need to floor both of those and take the minimum, so that would be a scale factor of 3. Now you can scale your 320x320 image up to 960x960 and just center that in the 1920x1080 area. There are other approaches you can take to scaling and fitting into your available area, but that’s probably the simplest one :slight_smile:

Anyway, give those thoughts some consideration. Hopefully there’s something helpful in there, lol.