Detecting mouseover on isometric map

Detecting mouseover on isometric map

Some_Guy

Member #14,362

June 2012

Here we go with another newbie question

I'm rendering my map with 2 nested for loops.
It looks like this:

Quote:

.. .. 01 .. ..
.. 02 06 ..
.. 03 07 11 ..
04 08 12 16
05 09 13 17 21
10 14 18 22
.. 15 19 23 ..
.. 20 24 ..
.. .. 25 .. ..

Now, I've been working in an algorithm that can detect the tile where the cursor is, but failed miserably.
I think the problem is I'm storing the tiles in a way that doesn't help at all.
Currently this is what I have:

#SelectExpand
      for(int i = 0;i < this->total_tiles;i++) // rows
      {
              for(int j = this->total_tiles;j >= 0; j--) // columns
              {
  5
                      // ...the rendering part works just fine
  7
                      // I guess this is what i'm doing wrong                                                                                                                                                                    
                      this->tiles[this->current_tile][0] = j; // column
                      this->tiles[this->current_tile][1] = i; // row
                      this->tiles[this->current_tile][2] = 1; // the ID of the image                         
              }
      }

How would you guys do this?

Thomas Fjellstrom

Member #476

June 2000

I based my design on something I read on one gamedev site that I'm not sure still has the article.

But basically, I had a couple lookup tables. something like the following:

#SelectExpand
  1// assuming our tiles are 8x8 pixels
  2int tile_map_table[8][8] = {
  3   { 1, 1, 1, 0, 0, 2, 2, 2 },
  4   { 1, 1, 0, 0, 0, 0, 2, 2 },
  5   { 1, 0  0, 0, 0, 0, 0, 2 },
  6   { 0, 0, 0, 0, 0, 0, 0, 0 },
  7   { 0, 0, 0, 0, 0, 0, 0, 0 },
  8   { 3, 0, 0, 0, 0, 0, 0, 4 },
  9   { 3, 3, 0, 0, 0, 0, 4, 4 },
 10   { 3, 3, 3, 0, 0, 4, 4, 4 },
 11};
 12
 13int tile_loc_map[5][2] = { { 0, 0 }, { -1, -1 }, { 1, -1 }, { -1, 1 }, { 1, 1 } };
 14
 15int mouse_x = 100, mouse_y = 100;
 16int tile_x = mouse_x / 8;
 17int tile_y = mouse_y / 8;
 18int loc_tile_x = mouse_x & 7;
 19int loc_tile_y = mouse_y & 7;
 20int iso_tile_x = tile_x + tile_loc_map[tile_map_table[loc_tile_y][loc_tile_x]][0];
 21int iso_tile_y = tile_y + tile_loc_map[tile_map_table[loc_tile_y][loc_tile_x]][1];

It's something like that anyhow. iso_tile_x and iso_tile_y is the coords of the selected tile.

I'd have pulled out my old iso engine code, but Its all stuck on a backup CD somewhere.

Hope that helps.

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

Aikei_c

Member #14,871

January 2013

Another way would be to use transformations.
Edit: I could elaborate further on that if you showed me your tile.
Edit: On wikipedia there is an article on how to do that without transformations: http://en.wikipedia.org/wiki/Video_games_with_isometric_graphics#Mapping_screen_to_world_coordinates

Some_Guy

Member #14,362

June 2012

@Thomas
In your example are you filling the array pixel by pixel?

@Aike
So far I've been working with 32x32 tiles.
Based on what is explained in your link I made this

// tiles are 32x32
// map is 30x30 

int virtualTileX = x / 32;
int virtualTileY = y / 32;

int numberOfTilesInX = 30;

int isoTileX = virtualTileX - (numberOfTilesInX / 2);
int isoTileY = virtualTileX - (numberOfTilesInX / 2);

It doesn't work 100% but the pattern is there.
It just takes as 0,0 the tile #2 in the picture, instead the one in the top corner.

(My map is 30x30, this one is just an example)

{"name":"11392040083_c62b99616a_o.jpg","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/8\/6\/86cd6d81989d9344399b4313512f240b.jpg","w":700,"h":369,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/8\/6\/86cd6d81989d9344399b4313512f240b"}

I guess I just need to figure how to make that correction and it will be working.

EDIT: mmm now I check better the 0 in the X axis is not exactly in the middle of the row, but int the tile #13.

Thomas Fjellstrom

Member #476

June 2000

Some_Guy said:

@Thomas
In your example are you filling the array pixel by pixel?

Yes. tile_map_table is a map of each pixel in a tile to the offset needed to adjust the tile index location.

just doing a division and modulo of the mouse position only works for square tiles. You need to adjust those positions based on where the point is on the diamond shape.

Aikei_c

Member #14,871

January 2013

If you use 32x32 tiles, they must be just 45 degrees rotated squares, right? In this case you just need to apply rotational transformation.

ALLEGRO_TRANSFORM transform;
al_identity_transform(&transform);
al_rotate_transform(&transform,ALLEGRO_PI/4);

//later
float isox=mousex;
float isoy=mousey;
al_transform_coordinates(&trans,&isox,&isoy);

But that would be pure coordinates, if you need tile coordinates, you would need to divide that by your tile size in isometry, which in your case should be about 22.6272:

int tilex = isox/22.6272;
int tiley = isoy/22.6272;

This should probably work. There might be some inconsistencies since your world coordinate grid and screen coordinate grid do not start at the same point.

Some_Guy

Member #14,362

June 2012

Can you please explain how to do it in A4?

Aikei_c

Member #14,871

January 2013

I'm not sure, but I believe you do it like this:

float isox = (cos(PI/4)*mousex)+(sin(PI/4)*mousey);
float isoy = (-sin(PI/4)*mousex)+(cos(PI/4)*mousey);

Or you could just use Thomas's method. You do this by just dividing your map into squares by dividing mouse coordinates by tile size (32), in this square one isometric tile is in the center and four others are in the corners. You need to figure out which one is in the center, this will depend on where your coordinate grid starts. And then compare the (mousex/32; mousey/32) with the tile map table. This approach should be less computation intensitive, I think I heared that it mattered in the past but shouldn't matter now.

Ariesnl

Member #2,902

November 2002

This can be done much easier..
when the mouse ison the map, hide the mouse and enable a special tile selector.
place the tile selector on the tile closest to the mouse.

then move the tile selector according to the delta mouse movement

Perhaps one day we will find that the human factor is more complicated than space and time (Jean luc Picard)
Current project: [Star Trek Project ] Join if you want ;-)

Some_Guy

Member #14,362

June 2012

Ariesnl said:

place the tile selector on the tile closest to the mouse.

Am I missing something or I would be facing exactly the same problem than now?

l j

Member #10,584

January 2009

http://stackoverflow.com/questions/6915555/how-to-transform-mouse-location-in-isometric-tiling-map

A way to transform coordinates to tile is given here in the accepted answer. I think it may be helpful.

Some_Guy

Member #14,362

June 2012

I don't know what is the problem but nothing seems to work for me.
Tried what your guys suggested plus everything in the first 6 or 7 google pages, I disabled everything cameras related to keep it simpler, but still can't get it working.
I will try to extract the relevant part of the code and post it here.

GullRaDriel

Member #3,861

September 2003

I use the following function wich works if you give it the right mousemap for your tiles.

#SelectExpand
  1/*!\fn ScreenToMap( int mx, int my, int *Tilex,int *Tiley,BITMAP *mousemap)
*
*\brief Convert screen coordinate to map coordinate
*
*\param mx The 'x' coordinate in pixel
*\param my The 'y' coordinate in pixel
*\param Tilex Output for the generated Tilex
*\param Tiley Output for the generated Tiley
*\param mousemap A mousemap with colors for one tile
*
*\return TRUE
*/
 13
 14int ScreenToMap( int mx, int my, int *Tilex, int *Tiley, BITMAP *mousemap )
  {
 16
  /* SCREEN TO MAP VARIABLES */
  int RegionX, RegionY,
  RegionDX = 0, RegionDY = 0,
                           MouseMapX, MouseMapY,
                           MouseMapWidth, MouseMapHeight, c;
 22
  MouseMapWidth = mousemap -> w;
  MouseMapHeight = mousemap -> h;
 25
  /* First step find out where we are on the mousemap */
  RegionX = ( mx / MouseMapWidth );
  RegionY = ( my / MouseMapHeight ) << 1; /* The multiplying by two is very important */
 29
 30
  /* Second Step: Find out WHERE in the mousemap our mouse is, by finding MouseMapX and MouseMapY. */
 32
  MouseMapX = mx % MouseMapWidth;
  MouseMapY = my % MouseMapHeight;
 35
  /* third step: Find the color in the mouse map */
  c = getpixel( mousemap, MouseMapX, MouseMapY );
 38
  if ( c == makecol( 255, 0, 0 ) ) {
          RegionDX = -1;
          RegionDY = -1;
          }
 43
  if ( c == makecol( 255, 255, 0 ) ) {
          RegionDX = 0;
          RegionDY = -1;
          }
 48
  if ( c == makecol( 255, 255, 255 ) ) {
          RegionDX = 0;
          RegionDY = 0;
          }
 53
  if ( c == makecol( 0, 255, 0 ) ) {
          RegionDX = -1;
          RegionDY = 1;
          }
 58
  if ( c == makecol( 0, 0, 255 ) ) {
          RegionDX = 0;
          RegionDY = 1;
          }
 63
  *Tilex = ( RegionDX + RegionX );
  *Tiley = ( RegionDY + RegionY );
 66
 67
  return TRUE;
 69
  } /* ScreenToMap( ... ) */

Here is some code for drawing the needed mousemap:

#SelectExpand
  1/* Drawing the mousemap */
  2    ( *map ) -> mousemap = create_bitmap( ( *map ) -> TILEW , ( *map ) -> TILEH );
  3    ( *map ) -> colortile = create_bitmap( ( *map ) -> TILEW , ( *map ) -> TILEH );
  4
  5    clear_to_color( ( *map ) -> mousemap , makecol( 255 , 255 , 255 ) );
  6    clear_to_color( ( *map ) -> colortile , ( *map ) -> bgcolor );
  7
  8    /* drawing mousemap */
  9    line( ( *map ) -> mousemap , 0 , ( TILEH >> 1 ) - 2 , ( TILEW >> 1 ) - 3 , 0 , makecol( 255, 0, 0 ) );
 10    floodfill( ( *map ) -> mousemap , 1 , 1 , makecol( 255, 0, 0 ) );
 11
 12    line( ( *map ) -> mousemap , ( TILEW >> 1 ) - 3 , TILEH - 1 , 0 , ( TILEH >> 1 ) + 1 , makecol( 0 , 255 , 0 ) );
 13    floodfill( ( *map ) -> mousemap , 1 , TILEH - 2 , makecol( 0, 255, 0 ) );
 14
 15    line( ( *map ) -> mousemap , ( TILEW >> 1 ) + 2 , TILEH - 1 , TILEW - 1 , ( TILEH >> 1 ) + 1 , makecol( 0, 0, 255 ) );
 16    floodfill( ( *map ) -> mousemap , TILEW - 2 , TILEH - 1 , makecol( 0, 0, 255 ) );
 17
 18    line( ( *map ) -> mousemap , ( TILEW >> 1 ) + 2 , 0 , TILEW - 1 , ( TILEH >> 1 ) - 2 , makecol( 255, 255 , 0 ) );
 19    floodfill( ( *map ) -> mousemap , TILEW - 1 , 0 , makecol( 255, 255, 0 ) );

Please note that you only need to preload mousemap bitmap one time.

In the code when I need to know which tile I'm on, I'm just doing this (considering it also has scrolling):

ScreenToMap( mouse_x - (buffer -> w - mapbuffer -> w ) + ( map->TILEW ) + map->X, 
mouse_y - (buffer -> h - mapbuffer -> h ) + ( map->TILEH >> 1 ) + map->Y, 
&a , &b , map -> mousemap );

I coded this from some gamedev articles:
http://archive.gamedev.net/archive/reference/list56f4.html?categoryid=198

particularly:
http://archive.gamedev.net/archive/reference/articles/article747.html
http://archive.gamedev.net/archive/reference/articles/article748.html

"Code is like shit - it only smells if it is not yours"
Allegro Wiki, full of examples and articles !!

Some_Guy

Member #14,362

June 2012

Thank you GullRaDriel, I will try it next, but I would like to show you guys what I have right now.

According http://stackoverflow.com/questions/6915555/how-to-transform-mouse-location-in-isometric-tiling-map/13838164#13838164

Quote:

{"name":"B0TVn.png","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/c\/b\/cbec5f1fbb7b29c55bcb7d0cf1363225.png","w":390,"h":202,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/c\/b\/cbec5f1fbb7b29c55bcb7d0cf1363225"}

I rendered the tiles like above.

the sollution is VERY simple!

first thing:

my Tile width and height are both = 32 this means that in isometric view, the width = 32 and height = 16! Mapheight in this case is 5 (max. Y value)

y_iso & x_iso == 0 when y_mouse=MapHeight/tilewidth/2 and x_mouse = 0

when x_mouse +=1, y_iso -=1

so first of all I calculate the "per-pixel transformation"

TileY = ((y_mouse*2)-((MapHeight*tilewidth)/2)+x_mouse)/2;

TileX = x_mouse-TileY;

to find the tile coordinates I just devide both by tilewidth

TileY = TileY/32; TileX = TileX/32;

DONE!! never had any problems!

My code

int r_y = ((mouse_y*2)-((29*32)/2)+mouse_x)/2;
int r_x = mouse_x - r_y;
r_y = (r_y) / 32;
r_x = (r_x) / 32;

My tiles are 32x32 same as in the example, but they don't change the width/height relation.

This is how I'm rendering them (30x30 map)

for(int i = 0;i < this->total_tiles;i++) 
{
    for(int j = 0;j < this->total_tiles;j++) 
    {
        this->tile_x = (j * (this->tile_w / 2)) + (i * (this->tile_w / 2)); 
        this->tile_y = (i * (this->tile_h / 2)) - (j * (this->tile_h / 2)); 
    }

    draw_sprite(this->buffer, this->tile1, this->tile_x, this->tile_y);
}

And this is what I get
{"name":"11411734803_b0a23afc7a_o.jpg","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/4\/54b523d1eae42e58b4f65f4651730062.jpg","w":973,"h":610,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/4\/54b523d1eae42e58b4f65f4651730062"}

Screen to map conversion isn't working.
At 0,0 gives me 7,-7.

Edgar Reynaldo

Major Reynaldo

May 2007

This should not be that hard.

This can be solved with simple linear equations, transformations, and inequalities. First decide where on your map the isometric coordinate (0.0,0.0) is. For arbitrariness's sake make the positive x-axis going up and to the right, and the positive y axis going up and to the left in isometric space.

These coordinates will be known as isomap_world_x, and isomap_world_y in world space. We need to first change from screen space to world space, and then from world space to iso space.

A brief explanation of the method used - first find the equation of the line of the iso x-axis in real space. (y = (H/W)*x). Replace y by the expression (y - N*H) where N is the x coord in iso space and then solve for N. Repeat for the equation of the line of the iso y-axis in real space. Once you have both solved, combine them and then solve for the xy coords from the iso coords.

#SelectExpand
  1float mousex = ev.mouse.x;
  2float mousey = ev.mouse.y;
  3
  4// change from screen space to world space
  5mousex -= camerax;
  6mousey -= cameray;
  7
  8// Make mouse position relative to iso 0,0
  9mousex -= isomap_world_x;
 10mousey -= isomap_world_y;
 11
 12// invert mouse so it matches iso space
 13mousey *= -1;
 14
 15// mouse space is now +y up and +x right, and relative to iso 0,0
 16
 17// now convert to iso using these formulas :
 18mouseisox = mousex/ISO_TILE_WIDTH + mousey/ISO_TILE_HEIGHT;
 19mouseisoy = mousey/ISO_TILE_HEIGHT - mousex/ISO_TILE_WIDTH;

The tricky part is converting back from iso to screen space, but easy enough if you figure out the equations for iso space from screen space.

mousex = (ISO_TILE_WIDTH/2.0f)*(isox - isoy);
mousey = (ISO_TILE_HEIGHT/2.0f)*(isox + isoy));

mousey *= -1;

mousex += isomap_world_x;
mousey += isomap_world_y;

mousex += camerax;
mousey += cameray;

I wanted to solve this so bad I made an example proggie. Here ya go!

IsoMap.7z Binary, source, and data. 7-zip (archiver program for 7z files).

Obligatory screenie :
{"name":"608177","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/7\/c\/7c55485273d058cca25e2de1b1af8b16.png","w":812,"h":632,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/7\/c\/7c55485273d058cca25e2de1b1af8b16"}

And the full source code :

#SelectExpand
   1
   2#include <allegro5/allegro.h>
   3#include <allegro5/allegro_image.h>
   4#include <allegro5/allegro_primitives.h>
   5#include <allegro5/allegro_font.h>
   6#include <allegro5/allegro_ttf.h>
   7
   8#include <cstdio>
   9#include <cmath>
  10#include <exception>
  11
  12using std::exception;
  13///typedef std::exception GameException;
  14
  15class GameException : public exception {
 const char* str;
  17public :
 GameException(const char* s) : str(s) {}
 
 const char* what() {return str;}
  21};
  22
  23class POINT {
  24public :
 float x;
 float y;
 
 POINT() : x(0.0f) , y(0.0f) {}
 POINT(float xpos , float ypos) : x(xpos) , y(ypos) {}
 
 POINT& SetPoint(float xpos , float ypos) {
    x = xpos;
    y = ypos;
    return *this;
 }
 
 POINT operator-() {
    POINT r;
    r.x = -x;
    r.y = -y;
    return r;
 }
 POINT operator+(POINT& p) {
    POINT r = *this;
    r.x += p.x;
    r.y += p.y;
    return r;
 }
 POINT& operator+=(POINT& p) {
    *this = *this + p;
    return *this;
 }
 POINT operator-(POINT& p) {
    POINT r = *this;
    r.x -= p.x;
    r.y -= p.y;
    return r;
 }
 POINT& operator-=(POINT& p) {
    *this = *this - p;
    return *this;
 }
 
 friend bool OnSameTile(POINT p1 , POINT p2);
  65};
  66
  67bool OnSameTile(POINT p1 , POINT p2) {
 return ((floor(p1.x) == floor(p2.x)) && (floor(p1.y) == floor(p2.y)));
  69}
  70
  71class IsometricWorld {
 
  73private :
 ALLEGRO_DISPLAY* display;
 
 ALLEGRO_EVENT_QUEUE* queue;
 ALLEGRO_TIMER* timer;
 
 ALLEGRO_FONT* font;
 
 ALLEGRO_BITMAP* tile1;
 ALLEGRO_BITMAP* tile2;
 
 float SCREENWIDTH;
 float SCREENHEIGHT;
 
 float NUMTILESWIDE;
 float NUMTILESTALL;
 
 float ISOTILEWIDTH;
 float ISOTILEHEIGHT;
 
 POINT l,r,t,b,c;
 
 POINT camPos;
 POINT isoWorldPos;
 
 POINT msPos;
 
 
 101public :
 
 IsometricWorld() :
       display(0),
       queue(0),
       timer(0),
       font(0),
       tile1(0),
       tile2(0),
       SCREENWIDTH(800),
       SCREENHEIGHT(600),
       NUMTILESWIDE(4),
       NUMTILESTALL(4),
       ISOTILEWIDTH(SCREENWIDTH/NUMTILESWIDE),
       ISOTILEHEIGHT(SCREENHEIGHT/NUMTILESTALL),
       l(),r(),t(),b(),c(),
       camPos(0.0f , 0.0f),
       isoWorldPos(SCREENWIDTH/2.0f , SCREENHEIGHT)
 {
    if (!al_init())                   {throw GameException("Failed to initialize allegro 5.");}
    if (!al_init_image_addon())       {throw GameException("Failed to init image addon.");}
    if (!al_init_primitives_addon())  {throw GameException("Failed to init primitives addon.");}
    if (!al_init_font_addon())        {throw GameException("Failed to init font addon.");}
    if (!al_init_ttf_addon())         {throw GameException("Failed to init ttf addon.");}
    if (!al_install_keyboard())       {throw GameException("Failed to install keyboard.");}
    if (!al_install_mouse())          {throw GameException("Failed to install mouse.");}
    
    al_set_new_display_flags(ALLEGRO_OPENGL | ALLEGRO_WINDOWED);
    display = al_create_display(SCREENWIDTH , SCREENHEIGHT);
    
    if (!display) {throw GameException("Failed to create display.");}
    
    al_clear_to_color(al_map_rgb(0,0,0));
    al_flip_display();
    
    timer = al_create_timer(1.0/60.0);
    if (!timer) {throw GameException("Failed to create timer.");}
    
    queue = al_create_event_queue();
    if (!queue) {throw GameException("Failed to create event queue.");}
    
    al_register_event_source(queue , al_get_display_event_source(display));
    al_register_event_source(queue , al_get_keyboard_event_source());
    al_register_event_source(queue , al_get_mouse_event_source());
    
    font = al_load_ttf_font("verdana.ttf" , 24 , 0);
    if (!font) {throw GameException("Failed to load font.");}
    
    tile1 = al_create_bitmap(ISOTILEWIDTH , ISOTILEHEIGHT);
    tile2 = al_create_bitmap(ISOTILEWIDTH , ISOTILEHEIGHT);
    
    l.SetPoint(0.0f , ISOTILEHEIGHT/2.0f);
    r.SetPoint(ISOTILEWIDTH , ISOTILEHEIGHT/2.0f);
    t.SetPoint(ISOTILEWIDTH/2.0f , 0.0f);
    b.SetPoint(ISOTILEWIDTH/2.0f , ISOTILEHEIGHT);
    c.SetPoint(ISOTILEWIDTH/2.0f , ISOTILEHEIGHT/2.0f);
    
    
    ALLEGRO_COLOR c1 = al_map_rgb(255,192,0);
    ALLEGRO_COLOR c2 = al_map_rgb(0,64,255);
    float thickness = 10.0;
    
    al_set_target_bitmap(tile1);
    
    al_clear_to_color(al_map_rgba(0,0,0,0));
    al_draw_line(l.x , l.y , t.x , t.y , c1 , thickness);
    al_draw_line(l.x , l.y , b.x , b.y , c1 , thickness);
    al_draw_line(r.x , r.y , t.x , t.y , c1 , thickness);
    al_draw_line(r.x , r.y , b.x , b.y , c1 , thickness);
    
    al_set_target_bitmap(tile2);
    
    al_clear_to_color(al_map_rgba(0,0,0,0));
    al_draw_line(l.x , l.y , t.x , t.y , c1 , thickness);
    al_draw_line(l.x , l.y , b.x , b.y , c1 , thickness);
    al_draw_line(r.x , r.y , t.x , t.y , c1 , thickness);
    al_draw_line(r.x , r.y , b.x , b.y , c1 , thickness);
    al_draw_filled_triangle(l.x , l.y , t.x , t.y , c.x , c.y , c2);
    al_draw_filled_triangle(r.x , r.y , t.x , t.y , c.x , c.y , c2);
    al_draw_filled_triangle(l.x , l.y , b.x , b.y , c.x , c.y , c2);
    al_draw_filled_triangle(r.x , r.y , b.x , b.y , c.x , c.y , c2);
    
    al_set_target_bitmap(al_get_backbuffer(display));
 }
 
 void DrawBitmapCenteredOn(ALLEGRO_BITMAP* bmp , POINT p) {
    p.x -= al_get_bitmap_width(bmp)/2.0f;
    p.y -= al_get_bitmap_height(bmp)/2.0f;
    
    al_draw_bitmap(bmp , p.x , p.y , 0);
 }
 
 void Run() {
    al_start_timer(timer);
    bool redraw = true;
    
    while(1) {
       if (redraw) {
          al_clear_to_color(al_map_rgb(0,0,0));
          POINT isoMsPos = ScreenCoordsToIsoCoords(msPos);
          for (unsigned int tiley = 0 ; tiley < NUMTILESTALL ; ++tiley) {
             for (unsigned int tilex = 0 ; tilex < NUMTILESWIDE ; ++tilex) {
                POINT isoPt((float)tilex + 0.5f , (float)tiley + 0.5f);
                POINT worldPt = IsoCoordsToScreenCoords(isoPt);
                
                if (OnSameTile(isoPt , isoMsPos)) {
                   DrawBitmapCenteredOn(tile2 , worldPt);
                }
                else {
                   DrawBitmapCenteredOn(tile1 , worldPt);
                }
             }
          }
          
          al_draw_textf(font , al_map_rgb(255,255,255) , 10 , 10 , 0 , "   msPos = %3.1f , %3.1f" , msPos.x , msPos.y);
          al_draw_textf(font , al_map_rgb(255,255,255) , 10 , 50 , 0 , "isoMsPos = %3.1f , %3.1f" , isoMsPos.x , isoMsPos.y);
          
          al_flip_display();
          redraw = false;
       }
       
       do {
          ALLEGRO_EVENT ev;
          al_wait_for_event(queue , &ev);
          if (ev.type == ALLEGRO_EVENT_DISPLAY_CLOSE) {return;}
          
          if (ev.type == ALLEGRO_EVENT_MOUSE_AXES) {
             msPos.SetPoint(ev.mouse.x , ev.mouse.y);
             redraw = true;
          }
          else if (ev.type == ALLEGRO_EVENT_TIMER) {
             redraw = true;
          }
          
          
          if (ev.type == ALLEGRO_EVENT_KEY_DOWN) {
             if (ev.keyboard.keycode == ALLEGRO_KEY_ESCAPE) {return;}
             switch (ev.keyboard.keycode) {
                case ALLEGRO_KEY_UP :
                   
                   break;
                case ALLEGRO_KEY_DOWN :
                   
                   break;
                case ALLEGRO_KEY_LEFT :
                   
                   break;
                case ALLEGRO_KEY_RIGHT :
                   
                   break;
                default :
                   
                   break;
             }
          }
          
       } while (!al_is_event_queue_empty(queue));
    }
 }
 
 261///   POINT ScreenCoordsToIsoCoords(POINT p);
 262///   POINT IsoCoordsToScreenCoords(POINT p);
 POINT ScreenCoordsToIsoCoords(POINT scr) {
    scr -= isoWorldPos;
    scr.y = -scr.y;
    POINT iso;
    iso.x = scr.x/ISOTILEWIDTH + scr.y/ISOTILEHEIGHT;
    iso.y = scr.y/ISOTILEHEIGHT - scr.x/ISOTILEWIDTH;
    return iso;
 }
 POINT IsoCoordsToScreenCoords(POINT iso) {
    POINT scr;
    scr.x = (ISOTILEWIDTH/2.0f)*(iso.x - iso.y);
    scr.y = (ISOTILEHEIGHT/2.0f)*(iso.x + iso.y);
    scr.y = -scr.y;
    scr += isoWorldPos;
    return scr;
 }
 279};
 280
 281int main(int argc , char** argv) {
 IsometricWorld* world = 0;
 
 try {
    world = new IsometricWorld();
    world->Run();
 }
 catch (GameException e) {
    printf("Error - %s\n" , e.what());
 }
 
 return 0;
 293}

Eagle and Allegro 5 binaries | Older Allegro 4 and 5 binaries | Allegro 5 compile guide
King Piccolo will make it so Then I could just flip it with some sweet, sweet matrix math. In either case, I’ll ride this wagon until the wheels fall off. Thanks to those that keep it running

Aikei_c

Member #14,871

January 2013

Some_Guy said:

At 0,0 gives me 7,-7.

Well, judging from the picture, (0,0) on the screen does seem likely to be at (7; -7) in isometry...
If you draw it like this:

    for(int j = 0;j < this->total_tiles;j++) 
    {
        this->tile_x = (j * (this->tile_w / 2)) + (i * (this->tile_w / 2)); 
        this->tile_y = (i * (this->tile_h / 2)) - (j * (this->tile_h / 2)) - this->tile_h/2; 
    }

(0; 0) should show (0; 0) for you...

Some_Guy

Member #14,362

June 2012

@Edgar, Thank you! Will check it with more time tonight.

@Aikei_c thanks but it still gives me 7,-7

Edgar Reynaldo

Major Reynaldo

May 2007

I cleaned it up a bit and changed the dimensions and added in a camera with the arrow buttons.

~~Here's an updated exe and src (Needs the data and dlls from the earlier attachment)~~

Here's an updated exe and src (Needs the data and dlls from the earlier attachment)

{"name":"608181","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/7\/1\/71cf32f7b6d8da2604b3d5371e28862d.png","w":812,"h":632,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/7\/1\/71cf32f7b6d8da2604b3d5371e28862d"}

Some_Guy

Member #14,362

June 2012

Edgar, the problem is your code is A5 and mine A4, thank you anyway.

I give up for now, eventually I will start everything from scratch in A5

Thanks everyone.

l j

Member #10,584

January 2009

The logic should still remain the same, doesn't matter if it's allegro 4 or 5. Regardless, going with allegro 5 instead of 4 is a good idea.

Edgar Reynaldo

Major Reynaldo

May 2007

The formulas and conversion are the same. I never meant to suggest you had to switch to A5. Don't you already have something working in A4? Feel free to continue it.

I really only wrote the demo to demonstrate that my system works.

Aikei_c

Member #14,871

January 2013

I'm afraid you must be trying to just paste our code into your project, while you need to understand what is going on under the hood. Try to understand what people here told you, maybe do some drawings (and calculations) on paper to help you understand what's going on. That will be so much better than just taking someone else's code literally and hoping it's gonna work.

Some_Guy

Member #14,362

June 2012

Aikei_c said:

It's exactly the other way around, I don't have any interest on get the code working without understand its logic.
Otherwise I would take Edgar's code and start my project from there.

Edgar Reynaldo

Major Reynaldo

May 2007

One thing I didn't say is that you could probably realign 0,0 on the map to be in the top middle. You would have to redo the calculations a bit but then you wouldn't have to invert the y.

What part are you having trouble with? Here are the formulas again, for reference. (This is after having aligned with 0,0 on your iso map).

$<math>isox = \frac{x}{w} + \frac{y}{h}</math>$
$<math>isoy = \frac{y}{h} - \frac{x}{w}</math>$

$<math>x = \frac{w}{2}*(isox - isoy)</math>$
$<math>y = \frac{h}{2}*(isox + isoy)</math>$

Some_Guy

Member #14,362

June 2012

Edgar, there is something else besides a map positioning / camera issue.
Even when I tried a lot of different approach the isometric numbers never match with the amount of tiles per row/column.
Got busy with something else right now, but when I have some time I will start it from scratch in A5, then I will look again at your code and will let you know.

Thank you.