by date
Interleaved tile rendering in t2dTileMap
Interleaved tile rendering in t2dTileMap
| Name: | Neo Binedell |  |
|---|---|---|
| Date Posted: | Jul 30, 2005 | |
| Rating: |  4.3 out of 5 | |
| Public: | YES | |
| Comments: | YES | |
| RSS Feed: |  or Subscribe with  . | |
| Profile Page: | View profile page for Neo Binedell |
Blog post
This resource is outdated and will not be updated any further as I have started a brand new iso pack from scratch.
You can read more here
~neo
in the beginning...
One of the first things I did when I got T2D was to play with ideas for isometric tiles, etc.
I won't bore you with all the other things I tried but skip to the first (and then last) idea:
I've extended t2dTileMap and t2dTileLayer to provide built-in interleaved offsetting. I chose to do it by
deriving 2 classes nxIsoTileMap and nxIsoTileLayer from their respective T2D counterparts and only overriding
the specific methods that deal with rendering and picking of tiles. Although this could be integrated quite easily into
t2dTileLayer I preferred to do it this way as it is a lot cleaner and we don't have to keep patching the source
each time we update from cvs. It also makes it super easy to intergrate, simply drop the source files in your project
and add a lil something to the tile editor GUI and you're in the game.
If you're not too clear on what all this means lemme throw some pics at ya:
A normal grid with isometric tiles looks like this:
[note: will add images later, in the meantime enjoy the ascii version ;p]
But what we want is to offset each alternate row of tiles so it fits snugly in between the row above and the row below,
which you can fake with two overlapping layers with tiles in alternate positions:
If you step through the layout of the tiles you'll find the following:
We start as normal with row 0: X = 0, Y = 0
We tile that row as usual by adding TileWidth to X each time
For the next row, we want to interleave the tiles so we first
offset X by half a TileWidth, and we increment Y by TileHeight / 2,
then just tile the row again by adding TileWidth to X
Rinse and repeat.
Note that we ONLY offset the output coords... basically we are mapping the normal tile grid to an
interleaved output grid. Also this really has nothing to do with the isometric part of the deal
beyond allowing interleaving tiles, you can choose what view angle you want by choosing
the appropriate tile height and width ratio.
So the only render code that really had to change was the part where we incremented the output X and Y coords.
Oh yes, and the grid overlay drawing which I also changed, I wont go into the details of that just yet but I'll post
a piccy of it in the tile editor to show u what I mean as soon as I get time to put it up.
As it stands at the moment to use it you do this:
Everything else works exactly the same from there on ;p
Next I tackled the pickTile() part which is basically just mapping the world coords to the correct position on
our new interleaved grid layout which I'll wax lyrically about later.
Other things I will be tackling is of course the all important depth-sorting issues for rendering things correctly.
I plan on posting a little demo app once its ready which will hopefully help anyone trying to do isometric stuff in
T2D.
Just goes to show you can do anything in T2D ;p
For now here's some pics to give you an idea:
In the beginning:
And then there was stuff:
And he said let there be height:
Hide that pesky grid:
As you can see I've added arbitrary height to the tile renderer, which allows
you to have things like tall walls and towers, etc. This basically just lets us draw
"up" from the tile base.
Gotta love experimenting with arb stuff heheh...
update 2005-08-25:
Back from another holiday and before I get stuck in again I'll explain a bit about the tile picking.
Here's an excerpt from the comments I have in the source:
I created a little flash app to test and implement my theory and you can have a squiz at it here
Love using flash for prototyping stuff quickly and it was rather easy to integrate into C++ thereafter.
Next on my list is sorting out the artifacts I get in the editor when moving the layer, layer independent sorting, etc.
I had an idea for an lazy way to solve the depth sorting issue, i.e. don't sort at all.
Instead of drawing each layer one after another, we interleave the drawing so we draw one row from each iso layer (as well as sprite layers). This should automagically hide objects by overdraw.
After looking at the way the scenegraph works I realized that we cant really do that as each object gets asked to do its rendering and thats that. I wouldn't want to start hacking at that level just for the iso stuff though (it would be tacky ;),
so I thought perhaps create a container object that houses all the isolayers, which could then forward the render calls and split them
up per row or whatever I finally decide on. I've also started thinking that iso layers (being view dependent) might benefit from
not being derived from normal tile layers (or even scene objects) at all as we don't need to rotate them or apply physics to them,
etc. Hmmm. Perhaps an t2dISOSceneGraph ;p Let's see what my trusty code rifle brings down then ;p
Will keep you posted.
[update 2006-04-04]
I've updated the code for 1.1. but will only upload once I go over everything.
[/update]
~neo
You can read more here
~neo
One of the first things I did when I got T2D was to play with ideas for isometric tiles, etc.
I won't bore you with all the other things I tried but skip to the first (and then last) idea:
I've extended t2dTileMap and t2dTileLayer to provide built-in interleaved offsetting. I chose to do it by
deriving 2 classes nxIsoTileMap and nxIsoTileLayer from their respective T2D counterparts and only overriding
the specific methods that deal with rendering and picking of tiles. Although this could be integrated quite easily into
t2dTileLayer I preferred to do it this way as it is a lot cleaner and we don't have to keep patching the source
each time we update from cvs. It also makes it super easy to intergrate, simply drop the source files in your project
and add a lil something to the tile editor GUI and you're in the game.
If you're not too clear on what all this means lemme throw some pics at ya:
A normal grid with isometric tiles looks like this:
[note: will add images later, in the meantime enjoy the ascii version ;p]
/\/\/\/\ ___ row 0
\/\/\/\/
/\/\/\/\ ___ row 1
\/\/\/\/
But what we want is to offset each alternate row of tiles so it fits snugly in between the row above and the row below,
which you can fake with two overlapping layers with tiles in alternate positions:
/\/\/\/\ ___ row 0
\/\/\/\/\ ___ row 1
\/\/\/\/
If you step through the layout of the tiles you'll find the following:
We start as normal with row 0: X = 0, Y = 0
We tile that row as usual by adding TileWidth to X each time
For the next row, we want to interleave the tiles so we first
offset X by half a TileWidth, and we increment Y by TileHeight / 2,
then just tile the row again by adding TileWidth to X
Rinse and repeat.
for( all tiles in Y )
{
if( Y % 2 ) // is this an odd row?
offsetX = TileWidth / 2
else
offsetX = 0
for( all tiles in X )
{
draw tile at XY
X += TileWidth
}
Y += TileHeight / 2
}
Note that we ONLY offset the output coords... basically we are mapping the normal tile grid to an
interleaved output grid. Also this really has nothing to do with the isometric part of the deal
beyond allowing interleaving tiles, you can choose what view angle you want by choosing
the appropriate tile height and width ratio.
So the only render code that really had to change was the part where we incremented the output X and Y coords.
Oh yes, and the grid overlay drawing which I also changed, I wont go into the details of that just yet but I'll post
a piccy of it in the tile editor to show u what I mean as soon as I get time to put it up.
As it stands at the moment to use it you do this:
%map = new nxIsoTileMap(){ scenegraph = t2dScene; }
%layer = %map.createTileLayer( "16 16 32 16" );Everything else works exactly the same from there on ;p
Next I tackled the pickTile() part which is basically just mapping the world coords to the correct position on
our new interleaved grid layout which I'll wax lyrically about later.
Other things I will be tackling is of course the all important depth-sorting issues for rendering things correctly.
I plan on posting a little demo app once its ready which will hopefully help anyone trying to do isometric stuff in
T2D.
Just goes to show you can do anything in T2D ;p
For now here's some pics to give you an idea:
In the beginning:
And then there was stuff:
And he said let there be height:
Hide that pesky grid:
As you can see I've added arbitrary height to the tile renderer, which allows
you to have things like tall walls and towers, etc. This basically just lets us draw
"up" from the tile base.
Gotta love experimenting with arb stuff heheh...
update 2005-08-25:
Back from another holiday and before I get stuck in again I'll explain a bit about the tile picking.
Here's an excerpt from the comments I have in the source:
* Due to the interleaved nature of the the tessellation we cant just pick
// a specific tile by using a simple formula. What we do know however is that
// every alternate tile falls withing the rectangular grid. So first we pick
// the rectangular grid area the point is in, then find out if it hit the actual
// "diamond" in the "center" of that grid tile. If not it has to fall in one of the
// four quadrants topleft,topright,bottomleft or bottomright of the diamond. We find
// that by offsetting the local origin to the center of the tile and simply testing
// which side of the center "diamond" edges the point falls by comparing against the
// slope of that edge using one of the standard forms of the line equation:
//
// Y = MX + C
//
// where:
// M = slope (Y/X)
// X = X value of pick point to plug in
// C = Y intercept (where line crosses Y)
//
// |a/\b|
// |/ \|
// |\ /|
// |c\/d|
//
// So if our point fell in a we'd pick the tile to the top left of this rectangular grid tile, etc, etc.
I created a little flash app to test and implement my theory and you can have a squiz at it here
Love using flash for prototyping stuff quickly and it was rather easy to integrate into C++ thereafter.
Next on my list is sorting out the artifacts I get in the editor when moving the layer, layer independent sorting, etc.
I had an idea for an lazy way to solve the depth sorting issue, i.e. don't sort at all.
Instead of drawing each layer one after another, we interleave the drawing so we draw one row from each iso layer (as well as sprite layers). This should automagically hide objects by overdraw.
After looking at the way the scenegraph works I realized that we cant really do that as each object gets asked to do its rendering and thats that. I wouldn't want to start hacking at that level just for the iso stuff though (it would be tacky ;),
so I thought perhaps create a container object that houses all the isolayers, which could then forward the render calls and split them
up per row or whatever I finally decide on. I've also started thinking that iso layers (being view dependent) might benefit from
not being derived from normal tile layers (or even scene objects) at all as we don't need to rotate them or apply physics to them,
etc. Hmmm. Perhaps an t2dISOSceneGraph ;p Let's see what my trusty code rifle brings down then ;p
Will keep you posted.
[update 2006-04-04]
I've updated the code for 1.1. but will only upload once I go over everything.
[/update]
~neo
Recent Blog Posts
| List: | 03/05/08 - Iso-phagus 11/12/07 - Theora Video Seek, Loop And Callback Support 06/17/07 - FX Composer 2 - Public Beta Released 04/27/07 - TGB Isometric Add-On Pack - Part 6: nxAnimator! 02/20/07 - TGB Isometric Add-On Pack - Part 5 11/23/06 - TGB Isometric Add-On Pack - Part 4 08/16/06 - TGB Isometric Add-On Pack - Part 3 06/14/06 - TGB Isometric Add-On Pack - Part 2 - Cont. |
|---|
Submit your own resources!| Chris Newman (Jul 30, 2005 at 23:09 GMT) |
Im about to start some iso code myself soon, and this would give me a good start :)
| Neo Binedell (Jul 30, 2005 at 23:18 GMT) |
will post stuff as soon as I can ;p
~neo
| Chris Newman (Jul 30, 2005 at 23:21 GMT) |
ok ill wait.
I give you a minute or 2! :)
| Edo Broekman (Jul 31, 2005 at 02:51 GMT) |
- Edo.
| Neo Binedell (Jul 31, 2005 at 03:51 GMT) |
Quote:
which you can fake with two overlapping layers with tiles in alternate positions:
It just gets unwieldly tracking two layers for every "virtual" layer you want.
I initially did it that way. I changed the editor code to allow offsetting a layer and link it to another layer, etc.
However once I started piling on the layers it quickly became unmanageable and besides it didn't feel "right" to me
I'm a bit of a purist when it comes to stuff like this I suppose. ;p
This is more of a experiment for me to find the limitations (and possible improvements) for the T2D engine as
well as getting my hands dirty with the underlying code.
It starts quite simple and leads to other ideas like allowing tiles to scale outside of their cliprects in say -Y to
allow for arbitrary "heights" of walls, etc, but generalized into discreet functionality that enhances the engine.
Having a clean interface that takes care of all these things implicitely in code instead of having to fake it
in script seems to me the best way to go.
Obviously YMMV.
~neo
| Edo Broekman (Jul 31, 2005 at 06:30 GMT) |
| Josh Williams (Jul 31, 2005 at 19:52 GMT) |
Btw, you've been doing some really cool stuff already. Liked your Atlas terrain GUI too. :)
Edited on Jul 31, 2005 19:56 GMT
| Neo Binedell (Aug 01, 2005 at 19:20 GMT) |
Well these are just rendering coords... nothing really to do with how you define X,Y(and Z) coords in the "virtual" map. The tile map is then mapped to and from that coord system. I do agree that accessing the map that way (basically north is top right) is more
intuitive and it is basically the "standard" way of doing things. I will play with some further ideas I have about this.
Also something else to consider re: using overlapped layers (which I forgot to mention in my previous post) is that you get overlapped pick coords for each square tile, while my solution provides correct tile picking.
@Josh:
Thanks for the kind comments ;p
| Neo Binedell (Aug 02, 2005 at 00:02 GMT) |
the tiles to hide it; should give better depth perception etc.
~neo
| Chris Newman (Aug 02, 2005 at 00:07 GMT) |
Gotta get my Animation Datablock Tool done, so i give your iso code a try!!!!
Come on man, im like a lil kid waiting for Sponge Bob Square Pants to come on......
:)
| Neo Binedell (Aug 02, 2005 at 00:14 GMT) |
~neo
| Chris Newman (Aug 02, 2005 at 00:23 GMT) |
Faster, faster! No food or sleep till the code is done!!!
Its sweet that some of the T2D community is helping to fill in the uncompleted areas.
Keep up the great work man!
Edited on Aug 02, 2005 00:29 GMT
| Edo Broekman (Aug 02, 2005 at 05:13 GMT) |
| Matt Huston (Aug 03, 2005 at 08:21 GMT) Resource Rating: 4 |
| Nanomid (Aug 10, 2005 at 06:15 GMT) Resource Rating: 5 |
| Neo Binedell (Aug 11, 2005 at 15:39 GMT) |
Back now so will update soon.
~neo
| Matt Huston (Aug 17, 2005 at 17:39 GMT) Resource Rating: 4 |
| Neo Binedell (Aug 25, 2005 at 18:29 GMT) |
Will be getting back to this shortly and start sharing...
Some issues with the underlying stuff (artifacts if grid is moved, etc) I still have to tackle
as I don't want to post stuff I feel is not ready. Anyone interested though just pop me
a mail and I'll send some of the stuff I'm working on for you to take a squiz at.
~neo
| Chris "Tricky" Cowherd (Aug 26, 2005 at 17:57 GMT) |
Do you know if there are plans on putting ISO stuff into the T2D build?
| Neo Binedell (Aug 26, 2005 at 18:10 GMT) |
a big "Use at own risk and if this molests yer dog, it aint my fault, etc".
And yes youre right its always good to get people throwing ideas around when they're
all looking at the same thing.
I will package it up and post it tomorrow (Sat) when i get a chance, and ego be damned ;p
~neo
ps: are plans public and I should post a resource instead or post it in the private forums, how does it work?
| Matthew Langley (Aug 29, 2005 at 15:22 GMT) |
| Neo Binedell (Aug 29, 2005 at 15:53 GMT) |
Can they?
I'd like to do it the best practice way if anyone can steer me in the right direction ;p
~neo
| Matthew Langley (Aug 29, 2005 at 15:59 GMT) |
| Neo Binedell (Aug 30, 2005 at 00:51 GMT) |
~neo
| Neo Binedell (Sep 01, 2005 at 19:53 GMT) |
strange...
Resubmitted it, you can find it here
~neo
Edited on Sep 03, 2005 11:05 GMT
| Nanomid (Sep 02, 2005 at 02:27 GMT) Resource Rating: 5 |
| Neo Binedell (Sep 02, 2005 at 11:30 GMT) |
I've posted it on the private forums in the mean time.
~neo
Edited on Sep 02, 2005 12:23 GMT
| Jason Swearingen (Sep 03, 2005 at 08:47 GMT) Resource Rating: 5 |
the reason: you surround your URL with quotes. dont do that. ex:
[ur|=www.yahoo.com]do you yahoo[/ur|]
NOT:
[ur|="www.yahoo.com"]this doesnt work[/ur|]
| Neo Binedell (Sep 03, 2005 at 11:04 GMT) |
They will not work if A) You don't have access to a forum or B) the resource has not been approved yet.
Or I'm seeing a totally different site than everybody else ;p
[edit]
Ok I missed one... thought I had changed it... or something... spooky...
[/edit]
~neo
Edited on Sep 03, 2005 11:07 GMT
| Hugeone (Oct 18, 2005 at 03:31 GMT) Resource Rating: 5 |
I thank you at first, that you provide the package.
I have some questions about it's usage:
(1) I modified the project following your direction. I can edit the isometric tilemap. But I cannot display the same tilemap when I close the T2D program and open it again.
(2)Do you need to extend the class of "nxIsoTileMap", functions for "loadTileMap(...),saveTileMap(...)" to realize the isometric effect.
(3)I use the class following this:
%map = new nxIsoTileMap(){ scenegraph = t2dSceneGraph };
But I failed to draw the isometric tilemap.
Can you try it again follwing my questions ?
Please give me a help, thanks a lot.
| Neo Binedell (Oct 18, 2005 at 12:51 GMT) |
The way to go would be to override the streaming and write a header or flag to say that it is an iso map and then
let super class stream as usual. I wanted to wait until the new T2D file formats was released before getting into it.
Just remember that this is not so much a "package" as basic code to show how one could display iso maps, and as such
the onus is on each developer to use it as a base or learning tool and extend it.
A quick fix to display loaded iso tile maps on default load:
set $loadIsoMap = true on about line 16 of editorScreen.cs in the /tileeditor directory
note that this will always use the nxIsoTileMap even when loading non-iso maps.
When loading an iso tile map remember to make sure "isometric" checkbox is checked so that is knows to create an
nxIsoTileMap instead of fxTileMap.
as for 3) here is an example from the editor script:
$editorTileMap = new nxIsoTileMap() { scenegraph = tileEditorSceneGraph2D; };so looks ok to me, are you calling loadTileMap() on the object etc?
~neo
| Hugeone (Oct 18, 2005 at 14:54 GMT) Resource Rating: 5 |
I edit the ISO tilemap again following with your viewpoint.
I list my "editorScreen.cs" file as : www.bihua360.com/t2d/editorScreen.cs
Step 1:
I edit the tilemap, the picture as:
www.bihua360.com/t2d/iso1018_001.jpg
It looks very well.
When I close the current tilemap file. I load it again from the current T2D program, the picture as:
www.bihua360.com/t2d/iso1018_002.jpg
In the progress, I donnot modify the "editorScreen.cs" file.
Why not ?
What can I do for it?
Thanks.
| Neo Binedell (Oct 18, 2005 at 17:31 GMT) |
I will have a look at it and update the resource...
~neo
| Neo Binedell (Oct 18, 2005 at 18:10 GMT) |
Redownload the resource and recompile and you will be in bussiness ;p
~neo
| Hugeone (Oct 19, 2005 at 01:26 GMT) Resource Rating: 5 |
Ok, it's ok. You are wonderful. lol
Usage:
Quote:
$mapLayer = new ScriptObject();
$mapLayer.map = new nxIsoTileMap() { scenegraph = t2dSceneGraph; };
$mapLayer.map.loadTileMap( "~/client/maps/test_iso1018.map" );
$mapLayer.tileLayer = $mapLayer.map.getTileLayer( 0 );
$mapLayer.tileLayer.setTileSize( "32 32" );
$mapLayer.tileLayer.setPosition( "0 0" );
$mapLayer.tileLayer.setLayer( 31 );
$mapLayer.tileLayer.setGroup( 31 );
It can be showed in the running of T2D project. But the tilemap's moving, collision, shielding etc... have some matter. I will research the codes, please give me a suggestion or a help. Thanks a lot.
My aim is to make an ISO rpg game using the T2D engine. Thanks.
~HugeOne
| Hugeone (Oct 26, 2005 at 13:54 GMT) Resource Rating: 5 |
About the effect:
I want to know how to define the data struction, using the class "fxImageMapDatablock2D".
And then the how edit the tile object.
When we edit the tilemap, the tile's placement can have a height view. How to get the effect ?
Thanks you in advance..
~ HugeOne
| Hugeone (Oct 30, 2005 at 08:02 GMT) Resource Rating: 5 |
When I use the tilemap using the isometric mode, it will show in the running T2D an isometric game map. But when I scroll the tilemap, the tilemap will have some jags in the process of moving.
It may be draw the tile when its half exceeds the edge. lol
An other question:
A sprite in the tilemap, can move around. Now ,how to shield each other with the other sprites, other bricks or objects etc.
Can you tell me how to do it?
Thanks.
Edited on Oct 30, 2005 08:09 GMT
| Hugeone (Feb 08, 2006 at 05:43 GMT) Resource Rating: 5 |
support it.
You must be a member and be logged in to either append comments or rate this resource.
