Jump to content

  • Log In with Google      Sign In   
  • Create Account


Matthiee

Member Since 18 Jan 2013
Offline Last Active Jan 23 2013 07:16 AM

Topics I've Started

2D Isometric rendering with camera/viewport

18 January 2013 - 10:10 AM

Hello everyone!

I'm at the early stages of making a 2D Isometric game.
But I'm not trying to implement the camera system from my older 2D game note this one was not isometric. And it works but I expected the result to be different.

 

I will now try to explain the problem but here is already a link to the source code.

http://www.mediafire.com/download.php?23ybba3uamaadzj

 

Here is the camera class:

public class Camera
{
    public Int32 X { get; private set; }
    public Int32 Y { get; private set; }
    public Int32 Width { get; private set; }
    public Int32 Height { get; private set; }

    public Camera(Int32 x, Int32 y, Int32 width, Int32 height)
    {
        this.X = x;
        this.Y = y;
        this.Width = width;
        this.Height = height;
    }

    public void SetLoc(Point pt)
    {
        this.X = pt.X;
        this.Y = pt.Y;
    }

    public void SetLoc(Int32 x, Int32 y)
    {
        this.X = x;
        this.Y = y;
    }

    public void SetSize(Size sz)
    {
        this.Width = sz.Width;
        this.Height = sz.Height;
    }

    public void SetSize(Int32 w, Int32 h)
    {
        this.Width = w;
        this.Height = h;
    }
}

 

 

The player class:

 

public class Player
{
    public static Bitmap bmpPlayer = Helper.loadImage(@".\char.png");
    public Camera playerCam;
    public Int32 X;
    public Int32 Y;

    public Player(Int32 x, Int32 y)
    {
        X = x;
        Y = y;
        playerCam = new Camera(x - 20, y - 15, 40, 30);
    }

    public void Render(Graphics g)
    {
        Int32 xx = (Y * bmpPlayer.Width / 2) + (X * bmpPlayer.Width / 2) - 100;
        Int32 yy = (X * bmpPlayer.Height / 2) - (Y * bmpPlayer.Height / 2) + 390;

        g.DrawImageUnscaled(bmpPlayer, new Point(xx, yy));
    }
}

 

 

 

The Tile class:

 

 

public class Tile
{
    public static Bitmap bmpTile = Helper.loadImage(@".\tile.png");
    public static Bitmap bmpDot = Helper.loadImage(@".\dot.png");
    public Int32 x;
    public Int32 y;
    public Int32 tileId;
    public Int32 xoffset;
    public Int32 yoffset;
    public Tile(Int32 x, Int32 y, Int32 id)
    {
        this.x = x;
        this.y = y;
        this.tileId = id;
    }

    public void render(Graphics g)
    {
        Int32 xx = (y * bmpTile.Width / 2) + (x * bmpTile.Width / 2) +xoffset;
        Int32 yy = (x * bmpTile.Height / 2) - (y * bmpTile.Height / 2) +yoffset  ;
           
        g.DrawImageUnscaled(bmpTile, new Point(xx, yy));
        if (tileId == 1)
            g.DrawImageUnscaled(bmpDot, new Point(xx, yy));
    }
}

 

 

 

 

 

The actual form:

 

 

public partial class Form1 : Form
{
    public Player p = new Player(20, 20);
    public Tile[,] map;
    public Boolean GameEnded = false;
    public Form1()
    {
        InitializeComponent();
        map = new Tile[1000, 1000];

        for (Int32 x = 0; x < 1000; x++)
            for (Int32 y = 0; y < 1000; y++)
            {
                    map[x, y] = new Tile(x, y, 0);
            }
    }

    private void Form1_Shown(object sender, EventArgs e)
    {
        Bitmap buffer = new Bitmap(this.Width,this.Height);
        Int32 width = map.GetLength(0);
        Int32 height = map.Length / width;
        while (!GameEnded)
        {
            buffer = new Bitmap(this.Width, this.Height);
            Graphics g = Graphics.FromImage(buffer);
            g.Clear(Color.Black);
            for (Int32 x = p.playerCam.X - 1; x < p.playerCam.Width + p.playerCam.X; x++)
            {
                for (Int32 y = p.playerCam.Height + p.playerCam.Y - 1; y >= p.playerCam.Y - 1; y--)
                {
                    if (x > -1 && y > -1 && x < 1000 && y < 1000)
                    {
                        map[x, y].xoffset = -100;
                        map[x, y].yoffset = 390;
                        map[x, y].render(g);
                    }
                }
            }
            p.Render(g);
            g.Dispose();

            Graphics gg = this.CreateGraphics();
            gg.DrawImageUnscaled(buffer, Point.Empty);
            gg.Dispose();
            buffer.Dispose();

            Thread.Sleep(10);
            Application.DoEvents();
        }
    }

    private void Form1_KeyDown(object sender, KeyEventArgs e)
    {
        if (e.KeyCode == Keys.Up)
        { p.playerCam.SetLoc(p.playerCam.X - 1, p.playerCam.Y + 1); }
        else if (e.KeyCode == Keys.Down)
        { p.playerCam.SetLoc(p.playerCam.X + 1, p.playerCam.Y - 1); }
        else if (e.KeyCode == Keys.Right)
        { p.playerCam.SetLoc(p.playerCam.X + 1, p.playerCam.Y + 1); }
        else if (e.KeyCode == Keys.Left)
        { p.playerCam.SetLoc(p.playerCam.X - 1, p.playerCam.Y - 1); }
    }

    private void Form1_FormClosing(object sender, FormClosingEventArgs e)
    {
        this.GameEnded = true;
    }
}

public class Helper
{
    public static Bitmap loadImage(string path)
    {
        Bitmap loadedImage = (Bitmap)Image.FromFile(path);
        loadedImage.MakeTransparent(Color.Fuchsia);
        return loadedImage;

    }
}

 

 

 

 

 

 

I know this code isn't very clear but this is just for testing purposes.

So the problem here is when I get to the end of the map  the map would get some strange transformations:

when going to the left:

08mVS.png

 

when going to the right:

KpEHP.png

 

As you see when it goes to the right it looks like it is zooming out and I also have some other weird formations, and when moving the camera it doesn't feel right :\

Can anyone help me or give me some tips smile.png?


PARTNERS