Jump to content

  • Log In with Google      Sign In   
  • Create Account

FREE SOFTWARE GIVEAWAY

We have 4 x Pro Licences (valued at $59 each) for 2d modular animation software Spriter to give away in this Thursday's GDNet Direct email newsletter.


Read more in this forum topic or make sure you're signed up (from the right-hand sidebar on the homepage) and read Thursday's newsletter to get in the running!


Matthiee

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

#5022921 2D Isometric rendering with camera/viewport

Posted by Matthiee on 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