How to draw thousands of tiles without killing FPS

Question

I've looked everywhere for a workaround to this issue (I may just be blind to see the solutions lying around). My game currently renders the tilemap on the screen and will not render tiles that are not actually within the screen bounds. However, each tile is 16x16 pixels, that means 8100 tiles to draw if every pixel on the screen contains a tile at 1920x1080 resolution.

Drawing that many tiles every cycle really kills my FPS. If I run 800x600 resolution my FPS goes to ~20, and at 1920x1080 it runs at around 3-5 FPS. This really drives me nuts.

I've tried threading and using async tasks, but those just flicker the screen. Probably just me coding it incorrectly.

Here's the drawing code that I currently use.

        // Get top-left tile-X
        Vector topLeft = new Vector(Screen.Camera.X / 16 - 1, 
            Screen.Camera.Y / 16 - 1);
        Vector bottomRight = new Vector(topLeft.X + (Screen.Width / 16) + 2, 
            topLeft.Y + (Screen.Height / 16) + 2);

        // Iterate sections
        foreach (WorldSection section in Sections)
        {
            // Continue if out of bounds
            if (section.X + ((Screen.Width / 16) + 2) < (int)topLeft.X ||
                section.X >= bottomRight.X)
                continue;

            // Draw all tiles within the screen range
            for (int x = topLeft.X; x < bottomRight.X; x++)
                for (int y = topLeft.Y; y < bottomRight.Y; y++)
                    if (section.Blocks[x - section.X, y] != '0')
                        DrawBlock(section.Blocks[x - section.X, y], 
                            x + section.X, y);
        }

There are between 8 and 12 sections. Each tile is represented by a char object in the two-dimensional array.

Draw block method:

public void DrawBlock(char block, int x int y)
    {
        // Get the source rectangle
        Rectangle source = new Rectangle(Index(block) % Columns * FrameWidth,
            Index(block) / Columns * FrameHeight, FrameWidth, FrameHeight);

        // Get position
        Vector2 position = new Vector2(x, y);

        // Draw the block
        Game.spriteBatch.Draw(Frameset, position * new Vector2(FrameWidth, FrameHeight) - Screen.Camera, source, Color.White);
    }

The Index() method just returns the frame index of the tile corresponding to the char.

I'm wondering how I could make it possible to actually allow this much to be drawn at once without killing the framerate in this manner. Is the code I provided clearly not very optimized, or is it something specific I should be doing to make it possible to draw this many individual tiles without reducing performance?

Answer 1

Not sure if this is the best way to deal with the problem, but I've started to use RenderTarget2D to pre-render chunks of the world into textures. I have to load chunks within a given area around the actual screen bounds at a time, because loading all chunks at once will make it run out of memory.

When you get close to the bounds of the current pre-rendered area, it will re-process chunks based on your new position in the world. The processing takes roughly 100 milliseconds, so when loading new areas the player will feel a slight slowdown for this duration. I don't really like that, but at least the FPS is 60 now.

Here's my chunk processor:

    public bool ProcessChunk(int x, int y)
    {
        // Create render target
        using (RenderTarget2D target = new RenderTarget2D(Game.CurrentDevice, 16 * 48, 16 * 48,
            false, SurfaceFormat.Color, DepthFormat.Depth24))
        {

            // Set render target
            Game.CurrentDevice.SetRenderTarget(target);

            // Clear back buffer
            Game.CurrentDevice.Clear(Color.Black * 0f);

            // Begin drawing
            Game.spriteBatch.Begin(SpriteSortMode.Texture, BlendState.AlphaBlend);

            // Get block coordinates
            int bx = x * 48,
                by = y * 48;

            // Draw blocks
            int count = 0;
            foreach (WorldSection section in Sections)
            {
                // Continue if section is out of chunk bounds
                if (section.X >= bx + 48) continue;

                // Draw all tiles within the screen range
                for (int ax = 0; ax < 48; ax++)
                    for (int ay = 0; ay < 48; ay++)
                    {
                        // Get the block character
                        char b = section.Blocks[ax + bx - section.X, ay + by];

                        // Draw the block unless it's an empty block
                        if (b != '0')
                        {
                            Processor.Blocks[b.ToString()].DrawBlock(new Vector2(ax, ay), true);
                            count++;
                        }
                    }
            }

            // End drawing
            Game.spriteBatch.End();

            // Clear target
            target.GraphicsDevice.SetRenderTarget(null);

            // Set texture
            if (count > 0)
            {
                // Create texture
                Chunks[x, y] = new Texture2D(Game.CurrentDevice, target.Width, target.Height, true, target.Format);

                // Set data
                Color[] data = new Color[target.Width * target.Height];
                target.GetData<Color>(data);
                Chunks[x, y].SetData<Color>(data);

                // Return true
                return true;
            }
        }

        // Return false
        return false;
    }

If there are any suggestions on how this approach can be improved, I won't be sad to hear them!

Thanks for the help given here!