Rendering 2D tiles from a tileset in a SkiaSharp game

In this part we are investigating rendering images or pictures from file and finally we will create a tile renderer. The tileset that is being rendered is from Aleksandr Makarov at itch.io.

- The first step is to add the tiles png file to the solution.
- Create a folder called Media and add the png file to it.
- Right click the folder and select Add existing item. Make sure the file extension is set to any file type *.
- Then change the Build Action to Embedded resource to make sure the image can be loaded from within the executable or package

Properties to set for the image

The PixelApplication class init method loads the bitmap / image from the embedded resource. The bitmap is rendered using the canvas DrawBitmap method. This accepts a reference to the bitmap and a target rect, which determines the position and the size of the bitmap. In this case it is rendered at 4 times the original size.

    public class PixelApplication
    {
        private double width;
        private double height;
        SKBitmap tilesBitmap;
        SKRect targetRect = new SKRect(0, 0, 4*128, 4*192);

        public void Init(double w, double h)
        {
            width = w;
            height = h;

            // https://iknowkingrabbit.itch.io/mas-grass-land
            string resourceID = "pixelapp.Media.tileset.png";

            // https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/basics/bitmaps
            Assembly assembly = GetType().GetTypeInfo().Assembly;

            using (Stream stream = assembly.GetManifestResourceStream(resourceID))
            {
                tilesBitmap = SKBitmap.Decode(stream);
            }
        }

        public void Render(SKCanvas canvas, double updateDelta)
        {
            canvas.Clear(_fillColor);

            // Render the complete tileset as a bitmap
            canvas.DrawBitmap(tilesBitmap, targetRect);
        }
    }
	

After this tutorial when the application starts you should see the tileset rendered. In the next part we will draw one tile of this set on the screen.

Render a complete tile set