Tile Editor is off center?

[Hapax]

I don't want to use them. My program is going to have a lot more than just tile editing features. Besides, If I thought any of the other tile editors were any good, I wouldnt go to all the trouble of building my own now would I

I know what you mean. I like to work on the creation tools myself too. However, if your reason for making it is to use it rather than the actual making, then go with pre-made stuff. I'm not sure what you are going to be adding to your tile editors that others' cannot do - I like the fact they just give me the tile map numbers, for example - but if you want your editor to do more than that, good luck. Oh, and let us all use it!

Here is a drawing I did in MS paint of what I think a 2d vector would look like visually:
http://oi60.tinypic.com/11ifg2o.jpg

Most important thing to remember is that they start at 0, not 1.

[Ixrec]

Here is a drawing I did in MS paint of what I think a 2d vector would look like visually:
http://oi60.tinypic.com/11ifg2o.jpg

Most important thing to remember is that they start at 0, not 1.

It's also important to point out that picture makes no distinction between pointers and values.

I would suggest a google image search for "ragged arrays", since that's what a std::vector of std::vectors effectively is.  Here's a few good pictures I see in the results.

This one is pretty language/type-agnostic, since it just shows the structure:


This one shows C-strings:


And this one shows 2D arrays in Java:

[Chay Hawk]

I know what you mean. I like to work on the creation tools myself too. However, if your reason for making it is to use it rather than the actual making, then go with pre-made stuff. I'm not sure what you are going to be adding to your tile editors that others' cannot do - I like the fact they just give me the tile map numbers, for example - but if you want your editor to do more than that, good luck. Oh, and let us all use it!

I would rather make m,y own tools to use, then if there is a feature i want or something I would like to add or change I can just do it right then and there, I don't need to ask for a feature request and hope and pray its added and then wait months for it to come out, ya know what I mean? I'm sure there's some open source tile editors out there but eh, it just feels more satisfying to me knowing that if i make a game it will be with the tools I created. I have some pretty good ideas for a tile map editor. I have used quite a few of them myself and I plan on using more just to see what they don't have and to gather ideas. I'm going to write down all of the features each one has and what they are all missing and what can be improved on. I't might sound like a huge task but I find it's just research and development, and that to me is fun to do as well. And as for sharing it, I definitely will!!

Most important thing to remember is that they start at 0, not 1.

Oh I forgot about that but other than that is it correct?

It's also important to point out that picture makes no distinction between pointers and values.

I would suggest a google image search for "ragged arrays", since that's what a std::vector of std::vectors effectively is.  Here's one good picture I see in the results:

Ok thank you I will search for that and see what else I can find.

[Hapax]

Does this help?
It's similar to what Ixrec posted but aimed at describing the specific case you are using in your program...



You should still follow Ixrec's advice 

[Ixrec]

Other good-to-know things about using arrays to store grids:

The terms "row major" and "column major" are used to describe whether you're storing a grid by rows or by columns.  I believe Hapax's image shows column major, if I'm reading it right.

When the grid's rows/columns are all guaranteed to be the same length, a ragged array is not necessarily the best way of storing it.  First, it makes certain operations harder than others for no apparent reason.  For instance, if you store it in row major format, then the code to move rows around is completely different from and much easier than the code to move columns around.  Second, it's guaranteed not to be stored in one contiguous block of memory, which usually isn't a big deal, but if you expect to work with large, complicated grids it's usually easier, faster and simpler to have just one block of memory so there's less indirection and reallocation going on.  Third, and theoretically speaking the most important, a ragged array can have each "row" or "column" be a different length, and you may not want that to be possible.

The alternative I'm hinting at is to store an X by Y grid by simply using a single vector of size X times Y.  You can then wrap this vector in a class with methods like get(x,y) and set(x,y) that abstract away all the row/column index conversion, so you get the simple contiguous memory without sacrificing the intuitive (row, column) notation.

[Chay Hawk]

Yeah that all makes sense, the images really help a ton. I seem to be having trouble with my code again -_-, I decided that I want to load a sprite sheet in, instead of individual tiles, because i'm going to have to do that anyways so why not do it now. I need to get the width and height of it and for some reason I cant seem to do it. Also The sprite sheet is on top of everything else, in the sense that when i go over it with my mouse it goes underneath it. I need to check and see if the mouse is IN the tile sheets boundaries, and I just cant seem to get it.

#include <SFML/Graphics.hpp>
#include <iostream>
#include <vector>
#include <fstream>
#include <string>

using namespace std;

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "Tile Editor");
    sf::Event event;
    sf::Mouse mouse;
    sf::Clock clock;
    sf::Time time;
    sf::View scrollScreen;
    sf::View zoomScreen;
    vector<vector<sf::Sprite> > Grid;
    vector<vector<int> > saveGrid;
    int GridSizeX = 10; //Anything higher than 200x200 tiles is bad
    int GridSizeY = 10;
    window.setFramerateLimit(60);

    scrollScreen.reset(sf::FloatRect(0, 0, window.getSize().x, window.getSize().y));

    sf::Texture blankGridTexture;
    sf::Sprite blankGridSprite;
    if(!blankGridTexture.loadFromFile("Resources/Tiles/Grid.png"))
    {

    }
    blankGridSprite.setTexture(blankGridTexture);
    blankGridSprite.setOrigin(0, 0);

    //Load Grass
    sf::Texture tileTexture;
    sf::Sprite tileSprite;
    if(!tileTexture.loadFromFile("Resources/Tiles/Grass.png"))
    {
        cout << "Couldnt load resources" << endl;
    }
    tileSprite.setTexture(tileTexture);
    tileSprite.setOrigin(16, 16);

    //Load flower grass texture
    sf::Texture flowerGrassTexture;
    sf::Sprite flowerGrassSprite;
    if(!flowerGrassTexture.loadFromFile("Resources/Tiles/FlowerGrass.png"))
    {
        cout << "Couldnt load flower tiles" << endl;
    }

    //Set mask for editing square
    sf::Image mask;
    mask.loadFromFile("Resources/Tiles/EditSquare.png");
    mask.createMaskFromColor(sf::Color(200, 191, 231));

    sf::Texture editSquareTexture;
    sf::Sprite editSquareSprite;
    editSquareTexture.loadFromImage(mask);
    editSquareSprite.setTexture(editSquareTexture);
    editSquareSprite.setOrigin(16, 16);

    //Load TileSheet
    sf::Texture tileSheetTexture;
    sf::Sprite tileSheetSprite;
    if(!tileSheetTexture.loadFromFile("Resources/Tile Sheets/Outside_A5.png"))
    {

    }
    tileSheetSprite.setTexture(tileSheetTexture);

    //Input grid into vector
    Grid.resize(GridSizeX);
    for (int x = 0; x < GridSizeY; x++)//Column
    {
        for (int y = 0; y < GridSizeY; y++)//Row
        {
            blankGridSprite.setPosition(x * 32, y * 32);
            Grid[x].push_back(blankGridSprite);
        }
    }

    while(window.isOpen())
    {
        while(window.pollEvent(event))
        {
            switch(event.type)
            {
                case sf::Event::Closed:
                    window.close();
                break;

                case sf::Event::Resized:

                    sf::FloatRect viewArea(0, 0, event.size.width, event.size.height);
                    window.setView(sf::View(viewArea));
                    scrollScreen.reset(sf::FloatRect(0, 0, window.getSize().x, window.getSize().y));
                    zoomScreen.reset(sf::FloatRect(0, 0, window.getSize().x, window.getSize().y));
                break;
            }
        }
    window.clear(sf::Color::White);

    time = clock.getElapsedTime();

    scrollScreen.setViewport(sf::FloatRect(0, 0, 1.0f, 1.0f));

    sf::Vector2i pixel_pos = sf::Mouse::getPosition(window);
    sf::Vector2f coord_pos = window.mapPixelToCoords(pixel_pos, scrollScreen);

    cout << "Row: " << floor(coord_pos.y / 32) << ",";
    cout << "Column: " << floor(coord_pos.x / 32) << endl;


    if(sf::Keyboard::isKeyPressed(sf::Keyboard::A))
    {
        scrollScreen.move(-10, 0);
    }
    else if(sf::Keyboard::isKeyPressed(sf::Keyboard::D))
    {
        scrollScreen.move(10, 0);
    }
    if(sf::Keyboard::isKeyPressed(sf::Keyboard::W))
    {
        scrollScreen.move(0, -10);
    }
    else if(sf::Keyboard::isKeyPressed(sf::Keyboard::S))
    {
        scrollScreen.move(0, 10);
    }

    //Draw map
    for(int x = 0; x < Grid.size(); x++)
    {
        for(int y = 0; y < Grid[x].size(); y++)
        {
            window.draw(Grid[x][y]);
        }
    }


    int indexX = floor(coord_pos.x / 32);
    int indexY = floor(coord_pos.y / 32);

    //Set position of edit square to the mouse
    editSquareSprite.setPosition(floor(coord_pos.x / 32) * 32 + 16, floor(coord_pos.y / 32) * 32 + 16);

    if(sf::Mouse::isButtonPressed(sf::Mouse::Left))
    {
        if((indexY < GridSizeY) && (indexY >= 0) && (indexX < GridSizeX) && (indexX >= 0))
        {
            Grid[indexX][indexY].setTexture(tileTexture);
            window.draw(editSquareSprite);
        }
        else
        {
            cout << "Out of bounds" << endl;
        }
    }
    if(sf::Mouse::isButtonPressed(sf::Mouse::Left))
    {
        if((indexY > tileSheetSprite.getPosition().y) && (indexY > tileSheetSprite.getPosition().y) &&
           (indexX > tileSheetSprite.getPosition().x) && (indexX > tileSheetSprite.getPosition().x))
        {
            cout << "On new tile sheet" << endl;
            window.draw(editSquareSprite);
        }
        else
        {
            cout << "Out of bounds sprite sheet" << endl;
        }
    }
    if(sf::Mouse::isButtonPressed(sf::Mouse::Right))
    {
        if ((indexY < GridSizeY) && (indexY >= 0) && (indexX < GridSizeX) && (indexX >= 0))
        {
            Grid[indexX][indexY].setTexture(blankGridTexture);
            window.draw(editSquareSprite);
        }
        else
        {
            cout << "Out of bounds" << endl;
        }
    }
    if(sf::Mouse::isButtonPressed(sf::Mouse::Middle))
    {
        if((indexY < GridSizeY) && (indexY >= 0) && (indexX < GridSizeX) && (indexX >= 0))
        {
            Grid[indexX][indexY].setTexture(flowerGrassTexture);
            window.draw(editSquareSprite);
        }
        else
        {
            cout << "Out of bounds" << endl;
        }
    }
    if(sf::Keyboard::isKeyPressed(sf::Keyboard::F))
    {
        string mapName;
        ofstream saveMap;

        cout << "Enter a name for your map" << endl;
        getline(cin, mapName);

        saveMap.open(mapName.append(".txt"));
    }
    tileSheetSprite.setPosition(350, 0);


    window.draw(tileSheetSprite);
    window.setView(scrollScreen);
    clock.restart();
    window.display();
    }

    return 0;
}
 

[Ixrec]

I need to get the width and height of it and for some reason I cant seem to do it.

This is a question you can very easily answer yourself by looking at the documentation.

So I won't tell you the answer.

(hint: it's probably on http://www.sfml-dev.org/documentation/2.1/classsf_1_1Texture.php)

Also The sprite sheet is on top of everything else, in the sense that when i go over it with my mouse it goes underneath it.

Are you talking about the OS cursor, or a sprite you draw at the cursor's location?  The former shouldn't be possible, and latter is a trivial fix (draw your sprite later).

I need to check and see if the mouse is IN the tile sheets boundaries, and I just cant seem to get it.

If you mean this as a fix to the previous problem: Don't draw things in a different order based on where one sprite happens to be right now.  That's completely overcomplicating the issue.  Just draw the sprite last if you want it to be on top of everything else.

[Chay Hawk]

This is a question you can very easily answer yourself by looking at the documentation.

I know how to do that, I meant I cant figure out how to check if the cursor is within bounds of the tilesheet sorry, I said it differently twice.

Are you talking about the OS cursor, or a sprite you draw at the cursor's location?  The former shouldn't be possible, and latter is a trivial fix (draw your sprite later).

Yeah the sprite is drawing under the image, and no matter where i place it in my code it wont get fixed.

If you mean this as a fix to the previous problem, no, don't do that.  Just draw the sprite last if you want it to be on top of everything else.  Anything else is overcomplicating your code.

Well what i'm trying to do is make it so that I can copy an image from the tilesheet but I need to make sure it's within bounds of the tile sheet, I want to set each 32x32 area to a number within the tilesheet so that way I can output it to a file later. I've been trying to do that for a while but I cant seem to figure it out, any hints, I cant even get anywhere with it.

[Ixrec]

I know how to do that, I meant I cant figure out how to check if the cursor is within bounds of the tilesheet sorry, I said it differently twice.

That one is also in the documentation and tutorials.  More hints:

Tutorial: http://sfml-dev.org/tutorials/2.1/window-inputs.php#mouse
Docs: http://sfml-dev.org/documentation/2.1/classsf_1_1Mouse.php

(if an sf::View is involved, there's another step you might have to do which is described in the View tutorial: http://sfml-dev.org/tutorials/2.1/graphics-view.php#coordinates-conversions)

If you need help with the actual bounds check after you get all the positions and sizes, sf::Rect::contains() and sf::Rect::intersects() might be useful: http://sfml-dev.org/documentation/2.1/classsf_1_1Rect.php  Though you can also do this trivially yourself.

Yeah the sprite is drawing under the image, and no matter where i place it in my code it wont get fixed.

That doesn't sound right at all.  Could you try to reduce your code to a complete and minimal example which demonstrates this problem and nothing else?  You are referring to where you place the draw() call for it, not where you declare the variable, right?

Well what i'm trying to do is make it so that I can copy an image from the tilesheet but I need to make sure it's within bounds of the tile sheet, I want to set each 32x32 area to a number within the tilesheet so that way I can output it to a file later. I've been trying to do that for a while but I cant seem to figure it out, any hints, I cant even get anywhere with it.

I *think* the hints I've given so far provide all the steps you need, though ask again if I missed a step.

[Chay Hawk]

If you need help with the actual bounds check after you get all the positions and sizes, sf::Rect::contains() and sf::Rect::intersects() might be useful: http://sfml-dev.org/documentation/2.1/classsf_1_1Rect.php  Though you can also do this trivially yourself.

Yeah thats what i'm trying to do, but I cant seem to get it right.

if(sf::Mouse::isButtonPressed(sf::Mouse::Left))
    {
        if((indexY > tileSheetSprite.getPosition().y) && (indexY > tileSheetSprite.getPosition().y) &&
           (indexX > tileSheetSprite.getPosition().x) && (indexX > tileSheetSprite.getPosition().x))
        {
            cout << "On new tile sheet" << endl;
            window.draw(editSquareSprite);
        }
        else
        {
            cout << "Out of bounds sprite sheet" << endl;
        }
    }

As for the tilesheet, I fixed it, I dont know what was going on but I got my placement marker to draw over it.

I *think* the hints I've given so far provide all the steps you need, though ask again if I missed a step.

Well, what i'm confused on is how am I supposed to output the sprite grid to a text document if its a vector of sprites, I need to get the current grid and whats drawn on it and write that to a text document. If I can figure out the above if statement problem I can do width / 32 and height / 32 on the image, that should give me 8 squares wide and 16 tall my tile sheet is (256 x 512) but then from there i'm a little stumped on what to do with the numbers. any hints on the steps i should take to do this would be great, it's annoying because I know what I need to do it's just kind of vague how to do it.

[Ixrec]

code

It's not obvious to me from looking at the code, but this is probably something simple you could easily find if you stepped through your code with a debugger and checked if the values of coord_pos, indexX/Y and so on are what you expect them to be.

By the way, those are terrible variable names.  Use names that makes it obvious what the actually mean, like mouseCoords, gridRow, and gridColumn.

Well, what i'm confused on is how am I supposed to output the sprite grid to a text document if its a vector of sprites, I need to get the current grid and whats drawn on it and write that to a text document. If I can figure out the above if statement problem I can do width / 32 and height / 32 on the image, that should give me 8 squares wide and 16 tall my tile sheet is (256 x 512) but then from there i'm a little stumped on what to do with the numbers. any hints on the steps i should take to do this would be great, it's annoying because I know what I need to do it's just kind of vague how to do it.

Ooooooh, you're asking how to serialize the tilemap.

Serialization of any type of data is a non-trivial problem with no easy answer.  Typically, if there are standard formats out there for this sort of data, you should use them.  Any remotely decent editor of X files will support as many X file formats as it possibly can, because none of them is objectively superior to the others.  I'm going to assume you know or can find out what file formats you want because you're the one making a tile map editor, and I've never used tile maps so I wouldn't know where to begin looking.  The documentation of those formats should tell you everything you need to know to serialize your tile maps in that format.

Even I can find at least one such format with a quick google (https://github.com/bjorn/tiled/wiki/TMX-Map-Format) so you shouldn't have to worry about making up a brand new file format yourself.  Unless your dissatisfaction for existing tile map editors also extends to existing tile map file formats...

If the format in question involves a standard data serialization language like XML or JSON, you should use an existing library to help you work with those formats efficiently.

[Hapax]

I believe Hapax's image shows column major, if I'm reading it right.

If the term means what I think it means then, yes, that's right 
It was because it seemed Chay was aiming to have the vector in the order "x before y" and this makes sense as this is how we usually describe 2D.
However, I think I'd personally always use row first ("major"?) when using 2D vectors.
That said, I'd almost always use a 1D vector for tile maps as you mentioned:

store an X by Y grid by simply using a single vector of size X times Y.

[Chay Hawk]

Well, I just want to output the grid to a file like this


000001111111100000
011111222223233211
033321110000000000

Where each number is a tile, and I can just load it into the map. Of course I would save position info in there as well.

[Ixrec]

That would be a custom file format.  If you don't care about your output being usable by anyone else's tools, and you think this format will be easier for you to work with than any of the standard stuff, then that's fine, as long as you make that decision consciously.

So what's stopping you from serializing a tilemap as a cryptic sequence of numbers like that?  Are you asking us for general advice on how to go about designing this cryptic sequence? (because my advice would be "use XML or JSON")  Are you asking us how to do file input and output? (C++ iostreams)  Are you asking how to get the image data from a sprite (well, a texture) into a sequence of bytes you can manipulate? (the key part is probably sf::Image::getPixelsPtr)

[Chay Hawk]

Well that depends on whats easier lol, if the xml or JSON thing is easier than i'll do that, but if not then yeah I would rather stick with a regular text file. What i'm having trouble with is looping through the vector and assigning a number to the different textures, if that's even possible. But the thing is I have to make it so it can do this without knowing the exact number of tiles or tile sheets and if there are other tile sheets it has to account for those and number those differently because if there are multiple tilesheets and each tile on those sheets at position 0,0 is assigned 0 and a number then when the editor tries to load the map it will be placing those tiles on top of each other. So yeah... but if there is an easier way to do that than i would like to know as well. All I want is for the tile editor to save the tiles with the textures assigned to a file, then load them when needed, how do i do that? that's what i'm trying to figure out. So yeah any kind of hints or clues, as to what exactly I should do would help me a lot i'm stumped at this point, because basically i have to convert a sprite object to an integer and that just isnt possible.