How do I split tilesets to single tiles with c#?

[Manifest222]

Hey guys, I have been using Visual C# 2008 for well, since it came out. I have gotten used to it and thought it would be fun to attempt making a small, decent level editor. Now I've made one of my tile sets, but I've ran into a problem right at the start. I can't seem to find a way to take the picture box that is holding my .bmp tile set, and split the tile set into individual 32 x 32 tiles. I've come out with a few theories on how to do this, I just don't know how you would code it.

// Checks for when you click the button that when clicked will split the tiles individually... before your very own eyes //
private void splitTiles_Click(object sender, EventArgs e)
{
// Calls method "splitTileSet()" with an argument of "myDesertPic" which is the picture box on my form which holds my tile set image //
splitTileSet(myDesertPic);
}

// Method in which will initiate the process of which will split the tile set to individual tiles //
private void splitTileSet(PictureBox myPic)
{
//Code that would split the tiles... aka, the part I don't know shit about. //
}

Okay, so simply put... I have no idea how to do this first part... so if anyone has an idea of how to take a picture box with a .bmp image (a tile set) and split the tile set into individual 32 x 32 tiles that can be displayed as there own image, please help me out, thanks.

P.S. By the way, this program is being written in c#, thanks again guys, peace out.

[Lord Pingas]

Here you go, friend.

http://www.lazyfoo.net/SDL_tutorials/lesson06/index.php

This is C++ but it should give you the right idea.

Hope this helps.

[Manifest222]

Thanks for the URL. The only problem is, this guy was using SDL with Dev-C++ which is COMPLETELY different from Visual C# 2008. I understand what I need to do... I just have know idea how to code it. Here are basically the steps of what I need to do:

0: Create an Array that would hold ALL of our tiles from the tile set, maybe using a structure, or just an array... hard to choose from.

1: Get the actual image bitmap of the picture box and contain that image in a bitmap variable.
2: From the bitmap variable we make, we need to draw a specific section of the image bitmap, and display it on the screen (BY ITSELF), and then some how give it a name that would allow me to access it later.

Basically to do step two, we would have to

3: Make some sort of dynamic rectangle calling an x, y, width, and height argument that allows us to position WHERE we want to get the section we want to draw individually, and that would allow us to actually DRAW specific sections of our bitmap, by repeating the process... probably through a "for loop".

4: Change the name to "tileSet_Tile_" + (then somehow get the amount of elements that are in the array)

5: Add the tileSet_Tile_numHere to the array that is holding all of our tiles from the tile set, so that I can remove them later.

I hope you guys understand what I'm trying to do, and that you cane help me out. Thanks.

[Falco Girgis]

Here you go, friend.

http://www.lazyfoo.net/SDL_tutorials/lesson06/index.php

This is C++ but it should give you the right idea.

Hope this helps.

You have GOT to be shitting me.

You haven't gotten much feedback in this topic, because it's completely dependent on your graphics API. What are you using to render your sprites? Is this just built-in C# 2D graphics (I'm very unfamiliar with C#), or are you using something like OpenGL with it?

In OpenGL (and most graphics APIs), it's as simple as specifying a location on the big sheet that you want to render from.

[RyanPridgeon]

I've rarely used C#, and never used the PictureBox class but after a bit of googling I found out that it basically handles drawing by using the Bitmap class which is part of GDI.

Now I assume you're loading your main tileset into one of these Bitmap instances, which is correct. What you want to do now is create an array of Bitmap and use Bitmap's built in procedures to help you split the main Bitmap into this array. Then you can call draws to the PictureBox using the elements of this array.

I don't have much time to look into it further but this page will hopefully give you some idea of how to do it.
http://msdn.microsoft.com/en-us/library ... itmap.aspx

[hurstshifter]

Manifest, it sounds like you have the theory down on how this should be accomplished. IMHO the best thing for you to do would be to make your best attempt at doing this with a little help from google and the replies that have already been posted. Then, you can come back here and post some code if you are having problems

[Manifest222]

Here you go, friend.

http://www.lazyfoo.net/SDL_tutorials/lesson06/index.php

This is C++ but it should give you the right idea.

Hope this helps.

You have GOT to be shitting me.

You haven't gotten much feedback in this topic, because it's completely dependent on your graphics API. What are you using to render your sprites? Is this just built-in C# 2D graphics (I'm very unfamiliar with C#), or are you using something like OpenGL with it?

In OpenGL (and most graphics APIs), it's as simple as specifying a location on the big sheet that you want to render from.

Pretty much I'm just using the built-in C# 2D Graphics from Visual C# 2008 Express Edition. AKA (I'm working with "Forms")

[Live-Dimension]

4: Change the name to "tileSet_Tile_" + (then somehow get the amount of elements that are in the array)

ArrayName.length();

IF memory serves correct. Could be a method, I think its a property. C#'s code complete will give you the right answer.

Or you could use a foreach loop, iterating through the array, and using a counter if you really wanted to.

Manifest, it sounds like you have the theory down on how this should be accomplished. IMHO the best thing for you to do would be to make your best attempt at doing this with a little help from google and the replies that have already been posted. Then, you can come back here and post some code if you are having problems

This.
I'm/we're not following what your way of doing this too well. Some code or a clear-cut explanation so we can pesudo-code something would help.

[dandymcgee]

I honestly can't think of any way to split a bitmap into sub-images using just C# (as opposed to OGL or DirectX, etc.). Google's is probably your best bet since you clearly understand exactly what you're looking for.

[Manifest222]

Figured it out, and it was fairly simple...

To tell you the truth, just doing this took me two days to get together, probably cause I'm a new person to C#, and it works perfectly. Thanks guys for helping me find this out, and I guess I could just give you guys the code. Note that I am just using the Visual C# 2008 Express Edition program and NOTHING else, so no need to go get a graphics API program.

Code: Select all

// psuedo code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class LevelEditor : Form
    {
        Bitmap[] myTileBitmapSetArray = new Bitmap[500];
        PictureBox[] myTilePictureBoxSetArray = new PictureBox[500];

        Image myCurrentSelectedTileFromTileSet = null;

        public LevelEditor()
        {
            InitializeComponent();

            splitTileSet(myDesertPic);
        }

        private void splitTileSet(PictureBox myPic)
        {
            for (int myInt1 = 0; myInt1 < myPic.Image.Height / 32; myInt1++)
            {
                for (int myInt2 = 0; myInt2 < myPic.Image.Width / 32; myInt2++)
                {
                    Bitmap myBitmap = new Bitmap(myPic.Image);
                    Rectangle myRect = new Rectangle(myInt2 * 32, myInt1 * 32, 32, 32);

                    Bitmap myTile = myBitmap.Clone(myRect, myPic.Image.PixelFormat);

                    myTile.Tag = "TileSet_Tile_" + Convert.ToString(myInt1) + "_" + Convert.ToString(myInt2);

                    myTileBitmapSetArray[myInt1 * (myPic.Image.Height / 32) + myInt2] = myTile;

                    PictureBox myTilePicBox = new PictureBox();

                    myTilePicBox.Name = "TileSet_PictureBox_" + Convert.ToString(myInt1) + "_" + Convert.ToString(myInt2);
                    myTilePicBox.Location = new Point(myInt2 * 32 + 12, myInt1 * 32 + 12);
                    myTilePicBox.Width = 32;
                    myTilePicBox.Height = 32;
                    myTilePicBox.Image = myTile;
                    myTilePicBox.Visible = true;

                    this.Controls.Add(myTilePicBox);
                    myTilePictureBoxSetArray[myInt1 * (myPic.Image.Height / 32) + myInt2] = myTilePicBox;

                    myTilePicBox.MouseClick += new MouseEventHandler(selectTileFromTileSet);
                }
            }

            this.Controls.Remove(myPic);
        }

        private void selectTileFromTileSet(object sender, MouseEventArgs e)
        {
            PictureBox mySenderPic = sender as PictureBox;

            myCurrentSelectedTileFromTileSet = mySenderPic.Image;
            TileSet_SelectedTile.Image = myCurrentSelectedTileFromTileSet;

            Selector.Visible = true;
            Selector.Location = mySenderPic.Location;
            Selector.Location = mySenderPic.Location;
        }
    }
}

This does ABSOLUTELY everything I was hoping to get... and I'm actually proud of myself because this is my first program I have EVER written in C#, so anyone who needs for some reason a way to take a picture and cut it into little tiles allowing you to use them individually, feel free to use this.

[XianForce]

Erm if I'm not mistaken... your using some sort of library API with:

Code: Select all

using System.Windows.Forms;

[Manifest222]

Erm if I'm not mistaken... your using some sort of library API with:

Code: Select all

using System.Windows.Forms;

Yes I am, it's built in to Visual C# 2008 Express Edition, it's just a built in library. It's sort of a built in library that allows you to make things like, calculators, forms, other shit, editors, uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh...............h and whatever other programs are nice and tighty looking.

[Live-Dimension]

It's not built into c# at all, rather, it's "built in" to the .net framework. VB.net has the exact same methods and way of doing things, just with a different syntax.

Anyway, just a few things to nitpick :P

First - the last function, you repeat a call twice.

Selector.Location = mySenderPic.Location;
Selector.Location = mySenderPic.Location;

Second though, you use the number 32 ALOT. I assume its an individual tile width/height. It's common programmer practice to specify variables to commonly used numbers that are likely to change, ie,

uint TileWidth = 32; uint TileHeight = 32;

For each time you've put the tile width/height you use that variable. It helps alot in code management, readability and reuse. What if you decided to use 64px tiles instead, you have to go through the script and figure out whether each 32 implies the tilewidth/tileheight or is for something else that just happens to equal 32. It's much easier and quicker to simply change the variables TileWidth/TileHeight then each time you put the number 32.

[Lord Pingas]

Derp, I'm so stoopid.

Sorry, I thought you was using a graphics API.

[Manifest222]

It's not built into c# at all, rather, it's "built in" to the .net framework. VB.net has the exact same methods and way of doing things, just with a different syntax.

Anyway, just a few things to nitpick :P

First - the last function, you repeat a call twice.

Selector.Location = mySenderPic.Location;
Selector.Location = mySenderPic.Location;

Second though, you use the number 32 ALOT. I assume its an individual tile width/height. It's common programmer practice to specify variables to commonly used numbers that are likely to change, ie,

uint TileWidth = 32; uint TileHeight = 32;

For each time you've put the tile width/height you use that variable. It helps alot in code management, readability and reuse. What if you decided to use 64px tiles instead, you have to go through the script and figure out whether each 32 implies the tilewidth/tileheight or is for something else that just happens to equal 32. It's much easier and quicker to simply change the variables TileWidth/TileHeight then each time you put the number 32.

First - Yes I just noticed that... the main reason why was because with the location class you can set an x and y position, but you have to do it separately. This made me wander if I could just set there classes to the same thing, and now there are two lines of code that are the same. I actually do that a lot to tell you the truth. Thanks for showing me that though.

Seconds - Oh shit! Never thought of it like that, thanks man! I'll start using integers and shit like that now.

Now about the Graphics API Part. I know, it's not built in because of course it is "being used" or "included" or "streamed". Therefor, if we absolutely MUST include Graphics API, it must not be built in. But it is also at the same time of not being built in, it IS built in, but only somewhat. If you go and get the Visual C# 2008 Express Edition (free version) you will notice that when you create a new form, if you try to code it, the program just does all the including and liberation for you, and one of those sections of liberation is the Graphics API from the .net you said earlier. Either way, I guess I should have said, "It's extremely easy to use the Graphics API that comes with the program" in stead of "You don't have to use a graphics api".

Alright thanks man, I appreciate your time to tell me about this.