Transparent rim when scaling bitmap in C#

Question

I am trying to make platformer engine c# windows forms, so I am trying it out with super Mario tilesheet I found on the Internet. I cropped every picture I need its own tile object. When I draw it as it is It is alright. Because it is 16x16 picture I added scale factor. When I try to scale it picture gets transparent right and bottom edge.

Does anyone know the reason for it? I do scaling in the draw method. I have tried all similar results I found. Thanks in advance.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;

namespace PlatformerRunner
{
    class Tile
    {

        public int id;
        public int width;
        public int height;
        public bool solid;
        public String name;
        public Bitmap image;

        public Tile(int id, int width, int height, bool solid, String name, Bitmap image)
        {

            this.id = id;
            this.width = width;
            this.height = height;
            this.solid = solid;
            this.name = name;
            this.image = image;

        }


        internal void draw(Graphics g, int x, int y)
        {
            int s = Game.scale;
            g.DrawImage(new Bitmap(image, width * s, height * s), x * width * s, y * width * s);
        }
    }

}

Image at scale 1

Image at scale 2

This is game structure that draws every tile. background just goes from (0,0) to (width,height)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;

namespace PlatformerRunner
{

    enum GameStructureType
    {

        BACKGROUND,
        PLATFORM,
        BUILDING,
        PORTAL

    }

    class GameStructure
    {

        public int id;
        public int x;
        public int y;
        public int width;
        public int height;
        public Tile tile;
        public GameStructureType type;

        public GameStructure(int id, int x, int y, int width, int height, Tile tile, GameStructureType type)
        {

            this.id = id;
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.tile = tile;
            this.type = type;

        }

        public void draw(Graphics g)
        {

            for (int i = x; i < x + width; i++ )
            {

                for (int j = y; j < y+height; j++)
                {

                    tile.draw(g,i,j);

                }

            }

        }

    }
}

This behavior is caused by different quality settings. See https://stackoverflow.com/q/566245/3936440 — ViRuSTriNiTy, Dec 05 '17 at 07:32

score 0 · Accepted Answer · answered Dec 05 '17 at 09:00

Apparently the default resizing done by the Bitmap constructor will sample transparent pixels beyond the image boundaries, which leads to the behavior you are seeing. To get a higher quality resize, you can use the ResizeImage method from @mpen's excellent answer on how to resize an image. Change your Tile class to use that method to create the new image instead of the Bitmap constructor.

internal void draw(Graphics g, int x, int y)
{
    int s = Game.scale;
    Bitmap resized = (s > 1) ? ResizeImage(image, width * s, height * s) : image;
    g.DrawImage(resized, x * width * s, y * height * s);
}

Note: if scale doesn't change often and you are going to be drawing the same image repeatedly, you might want to cache the resized image so you are not recreating it each time you call draw.

Transparent rim when scaling bitmap in C#

1 Answers1

Linked