Do I need to move the tiles or the player in a 2d tile world?

Question

I'm currently creating a 2d tile game and I'm wondering if the tiles has to move or the character.

I ask this question because I already have created the "2d tile map" but it is running too slow, and I can't fix it. I tried everything now and the result is that I get 30 fps.

The reason that it is running too slow is because every 1ms with a timer, the tiles are being redrawn. But I can't figure out how to fix this problem.

This is how I make the map :

        public void makeBoard()
    {
        for (int i = 0; i < tileArray.GetLength(0); i++)
        {
            for (int j = 0; j < tileArray.GetLength(1); j++)
            {
                tileArray[i, j] = new Tile() { xPos = j * 50, yPos = i * 50 };
            }
        }
    }

Here I redraw each 1ms or higher the tiles and sprites :

        private void Wereld_Paint_1(object sender, PaintEventArgs e)
    {
        //label1.Text = k++.ToString();
        using (Graphics grap = Graphics.FromImage(bmp))
        {
            for (int i = 0; i < tileArray.GetLength(0); i++)
            {
                for (int j = 0; j < tileArray.GetLength(1); j++)
                {
                    grap.DrawImage(tileArray[i, j].tileImage, j * 50, i * 50, 50, 50);
                }
            }
            grap.DrawImage(player.movingObjectImage, player.xPos, player.yPos, 50, 50);
            grap.DrawImage(enemyGoblin.movingObjectImage, enemyGoblin.xPos, enemyGoblin.yPos, 50, 50);

            groundPictureBox.Image = bmp;
           // grap.Dispose();

        }
    }

This is the Timer with a specific interval :

        private void UpdateTimer_Tick(object sender, EventArgs e)
    {
        if(player.Update()==true) // true keydown event is fired
        {
            this.Invalidate();
        }
        label1.Text = lastFrameRate.ToString(); // for fps rate show
        CalculateFrameRate(); // for fps rate show
    }

Answer 1

As mentioned in the comments your concept is wrong. So here's just a simple summary of how to do this task:

1. Tile map is static

From functional point of view does not matter if player moves or the map but from performance point of view the number of tiles is hugely bigger then number of players so moving player is faster.

To achieve player centered or follow views you have to move the camera too.

2. rendering

Repainting every 1ms is insane and most likely impossible on nowadays computers if you got medium complexity of the scene. Human vision can't detect it anyway so there is no point in repainting more that 25-40 fps. The only reason for higher fps needs is to be synchronized with your monitor refreshing to avoid scan line artifacts (even LCD use scan lines refreshing). To have more fps then the refresh rate of your monitor is pointless (many fps players would oppose but our perception is what it is no matter what they say).

Anyway if your rendering took more then 1ms (which is more then likely) then your timer is screwed because it should be firing several times before the first handler even stops. That usually causes massive slowdowns due to synchronisation problems so the resulting fps is usually even smaller then the rendering engine could provide. So how to remedy that?

1. set timer interval to 20ms or more
2. add bool _redraw=false And use it to redraw only when you need to repaint screen. So on any action like player movement, camera movement or turn, animation change set it to true
3. inside timer event handler call your repaint only if _redraw==true and set it to false afterwards.

This will boost performance a lot. even if your repaint will take more than the timer interval still this will be much much faster then your current approach.

To avoid flickering use Back buffering.

3. camera and clipping

Your map is most likely much bigger then the screen so there is no point to repaint all the tiles. You can look at the camera as a means to select the right part of your map. If your game does not use rotations then you need just position and may be zoom/scale. If you want rotations then 2D 3x3 homogeneous matrices are the way.

Let assume you got only position (no zoom or rotating) then you can use this transformations:

    screen_x=world_x-camera_x
    screen_y=world_y-camera_y

    world_x=screen_x+camera_x
    world_y=screen_y+camera_y

So camera is your camera view position, world is you tile position in map grid and screen is the position on screen. If you got indexes of your tile in map then just multiply them by tile size in pixels to obtain the world coordinates.

To select only visible tiles you need to obtain the corner positions of your screen, convert them into world coordinates, then into indexes in map and finally render only tiles inside rectangle that these points form in your map + some margin of error (for example render 1 tile enlarged rectangle in all directions). This way the rendering will be independent on your map size. This process is called clipping.

I strongly recommend to look at these related QAs:

• Improving performance of click detection on a staggered column isometric grid
• 2D Diamond (isometric) map editor ... read the comments there !!!

The demo in the linked QAs use only GDI and direct pixel access to bitmaps in win32 form app so you can compare performance with your code (they should be similar) and tweak your code until it behaves as should.

Answer 2

Are you writing the tile implementation yourself? Probably the issue is that at every frame you're drawing all tiles.

2D engines with scrolling tiles should draw tiles on a larger sprite than the screen, then draw that sprite around which is a fast operation (you'd need to specify the language you're using so I can provide some hint on how to actually make that fast - basically an in video memory accelerated blit, but every language has it's way to make it happen)

when the border of this super-sprite is closer to the screen border than a threshold (usually half tile), the larger sprite is redrawn around the current position - but there is no need to draw all the tiles on this! start copying the supersprite on this recentered sprite and you only need to draw the tiles missing from the previous supersprite because of the offset.