Allegro.cc - Online Community

Allegro.cc Forums » Game Design & Concepts » Isometric tile engine- sprites

This thread is locked; no one can reply to it. rss feed Print
Isometric tile engine- sprites
Ariesnl
Member #2,902
November 2002
avatar

Hi everyone,
What is the best (or a good) way to implement the sprites(characters) in a isometric tile engine. I want them to move smoothly from tile to tile over time, so it looks more natural. I did this once in a topview tileengine, but in a isometric tile engine things are different.
In my engine tiles can be stacked so there is a true height. and it's a staggered engine.. the map looks like a rectangle

I remember there was once a good Iso-engine tutorial on the web, but that link has gone broken since a long time. ( a lot of info about tile engines seems to have disapeared.

Before I'm gonna implement sprites I would like to see several techniques and tutorials.

any directions ? :)

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

Audric
Member #907
January 2001

Ariesnl said:

that link has gone broken

Have you tried archive.org ? I've found it pretty powerful to recover some tutorials.

GullRaDriel
Member #3,861
September 2003
avatar

Neil Walker
Member #210
April 2000
avatar

Full Allegro source code is here, along with some graphics and a couple of demos. Extract what you might need. It also include the fix for the overlapping blocks I mentioned earlier:

http://retrospec.sgn.net/users/ignacio/downloads/Isomot_v1.zip

only drawback is the variable names/'private' functions are in Spanish.

Neil.
MAME Cabinet Blog / AXL LIBRARY (a games framework) / AXL Documentation and Tutorial

wii:0356-1384-6687-2022, kart:3308-4806-6002. XBOX:chucklepie

Audric
Member #907
January 2001

The docs for Isomot are also online.
Another limitation is the non-commercial license, so no part of code can be used in GPL context.

Neil Walker
Member #210
April 2000
avatar

I doubt he'd hold anyone to the 'non-commercial' bit, he probably just stuck it in there. But I only posted the code in case he wanted to look for the bit on moving around the grid. But I think he's using a different system anyway. Isomot uses a diamond and I think I read the OP was using staggered not diamond.

In that case, the simple maths is explained at www.tilemap.co.uk, if you download the code.

Neil.
MAME Cabinet Blog / AXL LIBRARY (a games framework) / AXL Documentation and Tutorial

wii:0356-1384-6687-2022, kart:3308-4806-6002. XBOX:chucklepie

Ariesnl
Member #2,902
November 2002
avatar

Yes I'm using a staggered tilermap.
Right now I'm trying to figure out how to convert screen coords to tilemap coords..
I saw some code but it's not documented well. I want to understand how it works so I can port it to my own engine. I know it has something to do with gettingn the square tiles and cheching wether the mouse is inside the "ground" diamond or outside and at wich side...

any tips are most welcome ;)

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

Neil Walker
Member #210
April 2000
avatar

If you visit here,
http://tilemap.co.uk/mappy.php

download the library you are familiar with and all the staggered isometric code is in there.

A quick snippet from the document:

Quote:

Moving anywhere on a staggered row isometric map
This is more complex to understand than a rotated map, but you can use a function like this to make it as easy (and pretty much the same) as using a rotated style map, just copy and paste into your source:

void IsoMove (int ew, int ns, int * x, int * y)
// ew = negative is west movement, positive is east
// ns = negative is north movement, positive is south
// x and y are coords to modify
{
int a = ew-ns;
if (a>0) a++;
y[0] += ew+ns;
x[0] += a/2;
if ((y[0]&1) && ((ew+ns)&1)) x[0]--;
}

So, I can use this bit of example code to move 4 squares northward (as in the direction shown in the comparison diagram above) and 3 squares east:

int myx = 7; //start at block at 7, 7
int myy = 7;
IsoMove (3, -4, &myx, &myy); // negative values are north or west, positive south or east

Neil.
MAME Cabinet Blog / AXL LIBRARY (a games framework) / AXL Documentation and Tutorial

wii:0356-1384-6687-2022, kart:3308-4806-6002. XBOX:chucklepie

GullRaDriel
Member #3,861
September 2003
avatar

Ariesln, all I can do is posting the code I use for ScreenToMap. I use a staggered map in my iso engine too.

#SelectExpand
1/*!\fn ScreenToMap( int mx, int my, int *Tilex,int *Tiley,BITMAP *mousemap) 2 * 3 *\brief Convert screen coordinate to map coordinate 4 * 5 *\param mx The 'x' coordinate in pixel 6 *\param my The 'y' coordinate in pixel 7 *\param Tilex Output for the generated Tilex 8 *\param Tiley Output for the generated Tiley 9 *\param mousemap A mousemap with colors for one tile 10 * 11 *\return TRUE 12 */ 13 14int ScreenToMap( int mx, int my, int *Tilex, int *Tiley, BITMAP *mousemap ) 15 { 16 17 /* SCREEN TO MAP VARIABLES */ 18 int RegionX, RegionY, 19 RegionDX = 0, RegionDY = 0, 20 MouseMapX, MouseMapY, 21 MouseMapWidth, MouseMapHeight, c; 22 23 MouseMapWidth = mousemap -> w; 24 MouseMapHeight = mousemap -> h; 25 26 /* First step find out where we are on the mousemap */ 27 RegionX = ( mx / MouseMapWidth ); 28 RegionY = ( my / MouseMapHeight ) << 1; /* The multiplying by two is very important */ 29 30 31 /* Second Step: Find out WHERE in the mousemap our mouse is, by finding MouseMapX and MouseMapY. */ 32 33 MouseMapX = mx % MouseMapWidth; 34 MouseMapY = my % MouseMapHeight; 35 36 /* third step: Find the color in the mouse map */ 37 c = getpixel( mousemap, MouseMapX, MouseMapY ); 38 39 if ( c == makecol( 255, 0, 0 ) ) { 40 RegionDX = -1; 41 RegionDY = -1; 42 } 43 44 if ( c == makecol( 255, 255, 0 ) ) { 45 RegionDX = 0; 46 RegionDY = -1; 47 } 48 49 if ( c == makecol( 255, 255, 255 ) ) { 50 RegionDX = 0; 51 RegionDY = 0; 52 } 53 54 if ( c == makecol( 0, 255, 0 ) ) { 55 RegionDX = -1; 56 RegionDY = 1; 57 } 58 59 if ( c == makecol( 0, 0, 255 ) ) { 60 RegionDX = 0; 61 RegionDY = 1; 62 } 63 64 *Tilex = ( RegionDX + RegionX ); 65 *Tiley = ( RegionDY + RegionY ); 66 67 68 return TRUE; 69 70 } /* ScreenToMap( ... ) */ 71 72 73 74/*!\fn camera_to_scr( MAP **map , int x , int y ) 75 * 76 *\brief Center Map on given screen coordinate 77 * 78 *\param map A MAP *map to center on x,y 79 *\param x the X coordinate (in pixel) to center on; 80 *\param y the Y coordintae (in pixel) to center on; 81 * 82 *\return TRUE 83 */ 84 85int camera_to_scr( MAP **map , int x , int y ) 86 { 87 if ( x < 0 ) 88 x = 0; 89 90 if ( y < 0 ) 91 y = 0; 92 93 ( *map ) -> X = x % ( *map ) ->TILEW; 94 95 ( *map ) -> Y = y % ( *map ) ->TILEH; 96 97 ( *map ) -> ptanchorY = y / ( ( *map ) ->TILEH >> 1 ); 98 99 ( *map ) -> ptanchorY = ( *map ) -> ptanchorY >> 1; 100 101 ( *map ) -> ptanchorY = ( *map ) -> ptanchorY << 1; 102 103 ( *map ) -> ptanchorX = ( x + ( ( *map ) -> ptanchorY & 1 ) * ( ( *map ) ->TILEW >> 1 ) ) / ( *map ) ->TILEW; 104 105 return TRUE; 106 107 } /* camera_to_scr( ... )*/

The mousemap BITMAP is drawn like this:

/* drawing mousemap */
    line( ( *map ) -> mousemap , 0 , ( TILEH >> 1 ) - 2 , ( TILEW >> 1 ) - 3 , 0 , makecol( 255, 0, 0 ) );
    floodfill( ( *map ) -> mousemap , 1 , 1 , makecol( 255, 0, 0 ) );

    line( ( *map ) -> mousemap , ( TILEW >> 1 ) - 3 , TILEH - 1 , 0 , ( TILEH >> 1 ) + 1 , makecol( 0 , 255 , 0 ) );
    floodfill( ( *map ) -> mousemap , 1 , TILEH - 2 , makecol( 0, 255, 0 ) );

    line( ( *map ) -> mousemap , ( TILEW >> 1 ) + 2 , TILEH - 1 , TILEW - 1 , ( TILEH >> 1 ) + 1 , makecol( 0, 0, 255 ) );
    floodfill( ( *map ) -> mousemap , TILEW - 2 , TILEH - 1 , makecol( 0, 0, 255 ) );

    line( ( *map ) -> mousemap , ( TILEW >> 1 ) + 2 , 0 , TILEW - 1 , ( TILEH >> 1 ) - 2 , makecol( 255, 255 , 0 ) );
    floodfill( ( *map ) -> mousemap , TILEW - 1 , 0 , makecol( 255, 255, 0 ) );

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

Go to: