Hello.

I made a little game some time ago (a 2d shooter, like a Worms game but in real time, for a school project), and now I want to make another game, but this time, isometric.

I don't know where to begin with the isometric thing. The "problem" is that I have no idea how to make a 16/9 ratio isometric map, all the games and tuts about isometric I see use just a diamond shape, and not a rectangular one. How could I implement this in a simple way ? (Or complex way if there isn't any simple !)

PS: For my first game, I used the SFML graphics engine, and made pixel art sprites, but I want to try vectors graphics, do you know how can I do it with SFML ? Else which engine would you recommend me ?

Thanks for your time!

Hope you can help me here.

(English isn't my native language, I'm sorry if I made some mistakes, I tried to write the best as possible.)

Well, it is a big question, but I assume that you are having problem things such as how to draw the tile map.

Like any grid based game, you can store the tile data inside an array (data including for example which sprite to use).

So, to draw a typical 2d square tile map you'd use a formula such as

 
for(int y = 0; y < TILESY; ++y)
{
    for(int x = 0; x < TILESX; ++x)
    {
        DrawTile(sprite, x * TILESIZEX, y * TILESIZEY);
    }
}
 

To draw a orthographic map you'll just transform the positions a little bit

 

for(int y = 0; y < TILESY; ++y)
{
   for(int x = 0; x < TILESX; ++x)
   {
        float PositionX = x * HALFTILESIZEX - y * HALFTILESIZEX;
        float PositionY = y * HALFTILESIZEY + x * HALFTILESIZEY;
        DrawTile(sprite, PositionX, PositionY);
   }
}

 

Hope this makes sense.

Cheers!

Thanks for replying.

I think you misunderstood what I wanted to do, or I didn't say it correctly.

What I want to get is this type of map :

But what I get is something like : (what I call a diamond shape)

So with what I want, I can fill the entire screen, with the diamond shape, I'd have to make it larger then the windows and draw something that is out of the window (the camera will be fix, that's why I just want the necessary tiles, and no others out of the camera view).

I hope someone will have an answer for this!

Well that's a question of rethinking the drawing algorithm if it is not acceptable that some tiles are out of the screen.

So again, let's start with a grid structure - drawing the first kind of map is even easier that the "diamond"

for(int y = 0; y < TILESY; ++y)
{
    for(int x = 0; x < TILESX; ++x)
    {
       float Odd_OffsetY = (x & 1) ? HALFTILESIZEY : 0.0f;

       DrawTile(sprite, x * HALFTILESIZEX, y * HALFTILESIZEY + Odd_OffsetY);
    }
}

Pratically what this code does is that even odd numbered tile is offset half a tile downwards. It should do the trick.

Cheers!

[edit] If you want exactly the output you are presented - you'll have to draw one less tile in Y direction for the odd columns.

I think it's: x * FULL tile width (with (y * half height) + offset for odd rows), but I'm too lazy to verify.

For my first game, I used the SFML graphics engine, and made pixel art sprites, but I want to try vectors graphics, do you know how can I do it with SFML ?

SFML isn't an engine, it's an API (the definition of an 'engine' isn't really set in stone, but SFML isn't one).

SFML also doesn't directly support 'vector art', though you can add it to SFML yourself - by using OpenGL directly to draw it, or by using OpenVG (which I've never tried before - not sure how well-supported that is).

OpenGL doesn't directly support vector graphics, but you could build vector support on top of it. There's an implementation of OpenVG built over OpenGL, so that'd likely work with SFML since SFML is also built over OpenGL.

You could also try getting Cairo to work with SFML, though you may run into performance issues - Cairo is software-based I think. It may work fine, depending on the complexity of your game, but I'd try something built over OpenGL to begin with.

You can (and should) still use SFML for creating your window, receiving input events (mouse presses, keypresses, etc...), and managing the OpenGL context for you. SFML is a great library.

Else which engine would you recommend me ?

I'd stick with SFML.

<opinion>

For 2D games, I don't recommend bespoke engines (engines made for a specific narrowly-defined genre of games) unless your game falls into a really specific category, because 2D games vary so much from each other that engines would be more likely to constrain freedom of design. 3D games are more complex (thus increasing the benefits of pre-built engines), and less varied (thus decreasing the detriments), so engines for 3D games make sense.

</opinion>

(English isn't my native language, I'm sorry if I made some mistakes, I tried to write the best as possible.)

Your english is fine (better than fine). As far as the general level of internet grammar and spelling goes, yours is definitely above-average, even for native speakers. I didn't realize you weren't a native speaker until you mentioned it. It's not perfect, but it's more than clear enough for communication, and above-average in quality internet-wise; though you'll still want to get a native speaker for actual published text - like your studio's website (when you get that far) and in-game dialog.

x * FULL tile width

With respect I must say that I disagree - if you look at the images, the tile centers are half a tile apart (in x and y directions).

Cheers!

SFML isn't an engine, it's an API (the definition of an 'engine' isn't really set in stone, but SFML isn't one).

Yeah that's what I was thinking, didn't use the good term though.

Again, thanks for the answers, but I managed to do it myself, the correct algorithm was : (edit: atleast one correct algorithm)

while (i < tile_x)
        {
            j = 0;
            while (j < tile_y)
            {
                if (j % 2 == 0)
                {
                    tmp.x = i * tile_width;
                    tmp.y = j * tile_height / 2;
                }
                else
                {
                    tmp.x = i * tile_width + tile_width / 2;
                    tmp.y = (j - 1) * tile_height / 2 + tile_height / 2;
                }
                sprite.setPosition(tmp);
                app.draw(sprite);
                ++j;
            }
            ++i;
        }

[edit] If you want exactly the output you are presented - you'll have to draw one less tile in Y direction for the odd columns.

No, no need for this, it'll be simpler to have all rows with the same width.

SFML also doesn't directly support 'vector art', though you can add it to SFML yourself - by using OpenGL directly to draw it, or by using OpenVG (which I've never tried before - not sure how well-supported that is).

OpenGL doesn't directly support vector graphics, but you could build vector support on top of it. There's an implementation of OpenVG built over OpenGL, so that'd likely work with SFML since SFML is also built over OpenGL.

You could also try getting Cairo to work with SFML, though you may run into performance issues - Cairo is software-based I think. It may work fine, depending on the complexity of your game, but I'd try something built over OpenGL to begin with.

You can (and should) still use SFML for creating your window, receiving input events (mouse presses, keypresses, etc...), and managing the OpenGL context for you. SFML is a great library.

Thanks for all the precisions, this'll be really helpful!

Your english is fine (better than fine). As far as the general level of internet grammar and spelling goes, yours is definitely above-average, even for native speakers. I didn't realize you weren't a native speaker until you mentioned it. It's not perfect, but it's more than clear enough for communication, and above-average in quality internet-wise;

Glad to hear it!

though you'll still want to get a native speaker for actual published text - like your studio's website (when you get that far) and in-game dialog.

Yes, but for now it's just a personnal project! I sure hope I can make it playable or sellable or something like that but for now it's just for fun.

<opinion>

For 2D games, I don't recommend bespoke engines (engines made for a specific narrowly-defined genre of games) unless your game falls into a really specific category, because 2D games vary so much from each other that engines would be more likely to constrain freedom of design. 3D games are more complex (thus increasing the benefits of pre-built engines), and less varied (thus decreasing the detriments), so engines for 3D games make sense.

</opinion>

Yes, I'm on your side with this, I don't want to use something that already made all the work for me, what's the fun in programming if you don't program?

Again, thank you everyone, GameDev.net really is a great community!

x * FULL tile width

With respect I must say that I disagree - if you look at the images, the tile centers are half a tile apart (in x and y directions).

Oops, didn't see you were staggering every other tile, I thought you were staggering every other row:

float Odd_OffsetY = (y & 1) ? HALFTILESIZEY : 0.0f; //Staggering on row (y & 1)...
DrawTile(sprite, x * FULLTILESIZEX, y * HALFTILESIZEY + Odd_OffsetY); //...requires full tile width.

My mistake!