Tile Editor is off center?

[Ixrec]

Two things come to mind:

- I don't see the need to assign integers to everything.  Why not strings? (ie, names)

- The big question seems to be where the image files are getting stored.  Are you imagining a project as a folder that contains some .png files and a .chayhawktilemap file?  Or do you want the bytes of the images to be embedded in the .chayhawktilemap file?  Or something in between?


If I were doing something like this, my first thought would be a folder of .pngs and an .ixrectilemap file, which I might design as a JSON object like this:

{
    "textures": {
        "grass": "./grass.png",
        "snow": "./thick_snow.png",
        "water": "./clear_water.png"
   },
    "tiles": [
        [ "grass", "grass", "grass" ],
        [ "grass", "grass", "grass" ],
        [ "grass", "snow", "grass" ],
        [ "grass", "snow", "snow" ],
        [ "water", "snow", "snow" ]
    ]
}

Of course, I know bugger all about tile maps, so I assume there's a lot more data you'd want to put in here somehow, and I have no idea what it would look like, but hopefully this at least helps you start brainstorming.

[Chay Hawk]

Oh, well I just thought integers might be easier but i'll do whatever is necessary to make it work. Well, this editor will be used by other people who will load their own tile sets into the editor so I want to be able to load differet tile sets and as many tile sets as i can without having to write a single line of code, the editor should do all that work for the user, so I need to write it in that fashion. But the .png images will be stored either in a specific hard coded folder location or i'll make a dialog box that lets them choose where its at.

[Ixrec]

None of these things are really "necessary".  It's completely up to you how you go about implementing custom file formats.  It just sounds like integers would be a bit of wasted effort since the information you already have on the sprites doesn't contain any identifying integers (otherwise you wouldn't need to assign/generate them), while I assume you would have identifying filepaths or names for all of them.  And I think using JSON/XML/etc instead of a cryptic sequence of digits would make things a lot easier in the long run, but that's also something only you can properly judge.

Do you have any specific questions or is this now simply a matter of you designing your preferred format?

i'll make a dialog box that lets them choose where its at.

If you're imagining a full-blown filesystem browser popup, this may be something you need a proper GUI toolkit for.

[Chay Hawk]

I just want to go the easiest route possible. Since i'll be using tile sheets and not individual tiles like before, I need to figure out how to copy tiles from the spritesheets I was thinking if i could get this if statement working:

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;
        }
    }

What I can do is check to see if the mouse coords are within a tile and then copy that tile but I dont know how to copy tiles. I have to figure out this stuff first before I can do any file writing, because I have to have tiles to write to the grid. So if you could guide me through it without telling me outright what to do, like just give me hints and let me figure it out, that would help a lot. What I really need is a good GUI. I downloaded SFGUI and built it with Cmake but I dont know how to link to the correct files in Code blocks. I dont know what files or folders i need to link to. That GUI is just as easy as sfml to use and it would help a lot as i could put my tile sheets in a side window and my map editor next to it.

[Ixrec]

If you're having trouble with SFGUI, ask for help on its forums.  I can't help with that part.

For copying tiles, what do you mean exactly?  Are you saying your tile editor would load spritesheet.png then break it up into a few dozen tiny .pngs, one for each tile?  Or do you want your tilemap file to use a filename plus a rectangle to identify a tile, not just a filename?  And since both of those seem fairly straightforward to me, what is the exact step you don't know how to do?

I'm wondering if you need to just play with your code for a while until you've figured things out in more detail and have a clear, specific question you can ask here.

[Chay Hawk]

It's not SFGUI I'm having trouble with its linking to the libraries that i need to use it. Also I did ask on their forums and the guy helped me get it built with Cmake but then told me to figure out how to link to it on my own, which pissed me off because it took me 3 days to build it right and now i cant even use it.

Basically what I want to do is load the entire tilesheet then when i go over it with my mouse and click, I want it to copy that tile texture and replace whatever one is in tileTexture texture. that way I can get rid of a lot of these if statements near the bottom. Since i have to just slap my tile sheet in my window next to my grid, i'll just copy whatever is within a 32x32 area under my mouse.  I am unsure how to just put this in code form. I was thinking i could use an sf::Image and then copy what's under the mouse and then put it in a texture then set it but i'm not sure how to go about doing it.

[Ixrec]

I don't know anything about Code::Blocks or SFGUI building, so all I can suggest is looking at the Code::Blocks tutorial for SFML.  If you know what libraries you need to link, then the actual act of linking is strictly a question of how to use your chosen toolchain, so the SFML tutorial should answer that question.  And I doubt you'll ever find a better "getting started" tutorial for Code::Blocks than the SFML one (almost every build problem people ever have is their own failure to read those tutorials properly).

For the tile copying thing, it sounds like you need to think about it more.  That description simply isn't precise enough for me to tell what you actually need help with, and that's probably why you can't "put it in code form" yet.  I think we've hit the point where I just have to tell you to work on it by yourself for a while.  Incidentally, there are functions to copy an sf::Image to or from an sf::Texture, which can easily be found in the API documentation.

[Chay Hawk]

Alright I'll give that code blocks tutorial in a little bit, as for the copying tile thing, I wrote it down step by step of what i need to do and i think it will work so i'll work on it for a while and see what i come up with.

[Chay Hawk]

I think I almost got it, It gives me a tile on the spritesheet but it gives me 2 different halfs of a sprite in one grid. Sometimes it even makes it's own textures... I've been at this for hours, please help, I tried as hard as I could.

#include <SFML/Graphics.hpp>
#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;
    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);

    sf::Vector2i pixel_pos = sf::Mouse::getPosition(window);
    sf::Vector2f coord_pos = window.mapPixelToCoords(pixel_pos, scrollScreen);
    tileTexture.create(floor(coord_pos.x / 32), floor(coord_pos.y / 32));

    //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 tile sheet in image
    sf::Image tileSheet;
    if(!tileSheet.loadFromFile("Resources/Tile Sheets/Outside_A5.png"))
    {
        cout << "Error" << endl;
    }

    //Set it in a sprite so i can see it on screen.
    sf::Texture drawTSheet;
    drawTSheet.loadFromImage(tileSheet);
    sf::Sprite spr;
    spr.setTexture(drawTSheet);

    spr.setPosition(352, 0);
    window.draw(spr);

    //Create another image to copy tile from position on tilesheet.
    sf::Image copyImg;
    //copyImg.create(32, 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))
        {
            //Copy tile from tilesheet at mouse position.
            copyImg.copy(tileSheet, floor(coord_pos.x / 32), floor(coord_pos.y / 32));
            tileTexture.loadFromImage(copyImg);
            //Grid[indexX][indexY].setTexture(tileTexture);
            window.draw(editSquareSprite);
        }
        else
        {
            cout << "Out of bounds" << endl;
        }
    }
    if(sf::Mouse::isButtonPressed(sf::Mouse::Right))
    {
        if((indexY < GridSizeY) && (indexY >= 0) && (indexX < GridSizeX) && (indexX >= 0))
        {
            //Set image to texture
            //tileTexture.create(floor(coord_pos.x / 32) * 32 + 16, floor(coord_pos.y / 32) * 32 + 16);

            //Set texture to grid
            Grid[indexX][indexY].setTexture(tileTexture);
            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"));

        for(int x = 0; x < Grid.size(); x++)
        {
            for(int y = 0; y < Grid[x].size(); y++)
            {

            }
        }
    }


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

    return 0;
}
 

[Ixrec]

Unfortunately I don't have my toolchain set up these days so I can't debug your code directly.  Even if I could, I'd probably still tell you that you have to figure this out yourself, since this is what programming is all about.  But after browsing your new code for a minute, I think at least part of the problem is with this line:

copyImg.copy(tileSheet, floor(coord_pos.x / 32), floor(coord_pos.y / 32));

So if the user clicks on tile (1,2), then we expect this to turn into copyImg.copy(tileSheet, 1, 2);  This doesn't look right to me, because pixel (1,2) is not the same thing as tile (1,2), and I'm pretty sure these functions take pixels, not clayHawkGridTileIndices.  Plus, the documentation says the 2nd and 3rd parameters are the *destination* x and y, not the source.  And it would probably be a good idea to given an explicit value for the sourceRect parameter.

P.S. Be aware that sf::Image::copy() is slow.  Not sure if it's a problem here, but when moving pixels around it's important to know what operations are fast and slow even if they aren't causing trouble yet.