Pseudo-3D Dungeon View

#1 @James, there is the adventure kit, which uses artwork designed to look like it's at a perspective view ... there's also a number of free art resources online (RPG Maker websites, for example) which have artwork that is also rendered at a perspective angle ... which simulates the "pseudo-3d dungeon view" you speak of ... however, generically speaking, I believe the term your looking for is "isometric", which I believe a resource for such a thing is also being worked on and may actually be out shortly ... though I'm not 100% sure ...

#2 Hi Dave. Thanks for responding. But that's not the dungeon view I'm looking for. I guess I wasn't too clear on what I was asking for. :( It's an old style look that was replaced with true 3D engines. It's not isometric. Here is a screenshot I found of the original Bard's tale that was put out in 1987:


I hope that helps. Thanks again!

#3 That view is not really possible with TGB 'out of the box', you could probably accomplish it, but my understanding is that that 'view' was actually a series of very well put together artwork that was just swapped out as time progressed ... which, would more or less prevent you from being able to use the Level Builder in TGB to design your levels --

I've a few ideas for pulling this off though ... one uses a tile-layer with 'placement' artwork that describes your 'dungeon' look ...

You move your character 'on the tile layer', in the background, so it's not really seen (ie; just keep track of your characters position using 2D coordinates like "4,4") -- when the character moves, you simply look at the tile-layer and determine what should be drawn, then display it ...

You would still require a series of very well designed artwork to pull this off ...

Take for example the screenshot you posted, you basically see the face of 3 different buildings, the ground and the sky ...

Now, the ground and the sky in that screenshot are fairly 'generic' ... you could just use a static 'grey' image and use alpha-blending to change the colors (would help simulate 'time of day' for example)

For the buildings, if you have say ... the three building faces in that screenshot, you would make them all at the same size, like 512w, 256h for example ... but when you draw the two buildings in the 'background' you actually draw them at a scaled size so that the far-left edge is the same height as the far-right edge of the building "in front" of it ...

You could do this for say ... maybe up to 4 rooms in the distance ... you could also, with the right artwork, replace the 'sky' with a nice ceiling for a 'dungeon' look ... doing the same 'size' concepts.

Now, there'd be quite a bit of math involved in getting everything just right ... but I think it would be a fairly entertaining project to work on, personally ...

Best of luck, and if you have any questions, just let me know ... I can try to rephrase anything I've said to make it more clear, if it was not.

#4 99 Berserkers and 99 Berserkers and 99 Berserkers and 99 Berserkers. MIBL, MIBL, MIBL, MIBL.

You would have to calculate your view-perspective to figure out your skewing and scaling of images and layering them correctly from back to front. You can have four squares of view distance (three in front and the one you are standing in) to view a good number of the squares. I like being able to see the square I'm in as well as the ones in front of me.

#5 This can be done with Game Maker. I believe they have tutorial on this.

#6 @David Higgins: I was speaking to a designer who worked on Stonekeep many moons ago and he gave me a basic run down. It is mostly simulated with artwork. There is an odd set of slices of artwork that make up the view. 1 square center and 2 thin slices on either side. What image you display depends on what your map looks like and which direction you are facing.

I was just hoping to find a bit more info on how to make the artwork so that they mesh properly and see if it is possible to make more complex looking slices. But it may not be as complex as I think. I might just give it a whirl and see if I can come up with an idea.

@David Blake: 2 Arch Mages and 1 very drunk bard with a flame horn usually worked for me. ;)

@Fucifer: I asked over there too but I haven't heard back. I'll try searching their tutorial forum.

Thanks, everyone!

#7 @James, I just whipped together a really quick semi-working concept of the drawing routines needed ... took a simple wall texture for a 3d model, photoshopped it and dropped it into TGB with the following code:

function drawScene()
{
   %sg = sceneWindow2D.getSceneGraph();
   
   %size = "16 64";
   %pos = "32 0";
 
   for(%x = 0; %x < 4; %x++)
   {
      echo("SIZE: " @ %size);
      echo("POS : " @ %pos);
      %l_wall = new t2dStaticSprite()
      {
         imageMap = "x512_brick6ImageMap";
         size = t2dVectorSub(%size, t2dVectorSub(%size, %size));
         position = t2dVectorSub(t2dVectorSub(%pos, %pos), %pos);
         sceneGraph = %sg;
      };

      %r_wall = new t2dStaticSprite()
      {
         imageMap = "x512_brick6ImageMap";
         size = %size;
         position = %pos;
         sceneGraph = %sg;
         flipx = 1;
      };

      %posx = getWord(%pos, 0);
      %posy = getWord(%pos, 1);
      
      %posx = %posx - getWord(%size, 0);
      %pos = %posx SPC %posy;
      %size = scaleVector(%size, 47.375);
   }
}

function scaleVector(%vector, %scale)
{
   %p = %scale / 100;
   return t2dVectorScale(%vector, %p);
}

Granted ... this is not really 'finished' code, but basically ... it works ... there's some scaling issues and a few minor positioning issues ... but wrapped together with a tile-layer that tells this code what to draw based on the wall-type ...


The scaling and positioning could probably be resolved by finding a good scalable image size to work with ... the image I was using was 128w and 512h ... on an 800x600 screen ... the odd '47.375' is because of the whacked perspective I created ... had I spent more time working on it, I could have made it so that the scale was an event number to work with, which would probably fix the positioning and scale problems in TGB ... not really sure, I think TGB has an issue with large floating point values, and that 47.375 generates a fairly large floating poing value ... toward the end ...

Anyhow, hope this helps ...

I'm thinking of possibly continuing with this code base and making a working 'dungeon builder' resource ... sounds fun ... though, I don't know ... *shrug*

#8 Thanks, David! You didn't have to do all that. But I appreciate it. I'll try to figure out what you did and see what I can do to setup something similar. Thanks again!

#9 Hey James!

Actually I have planned on doing the same type of game with TGB for a while now and I had a prototype running(which I deleted..).. I had no problems getting this to work in TGB but I am too busy to make all the wall textures lately... do you know of a system/generator for this by any chance?

I tried writing JavaScripts for Photoshop but you cant script free transforms sadly...

#10 @Oliver: Sadly, I don't. The only program that I can think of that might come close is World Creator (www.inet2inet.com/) It looks to be able to make perspective tiles fairly easily.

I think I understand the basic concepts as to how to make the perspective but, being new to TGB, I'm not sure how to translate that into Torque Script. I wish I had a template for the artwork as well. What I figure I'll do is generate a template by rendering an image of this view in Poser with each square being a different color. That will help me identify each slice and form an alpha channel to slice up other renders. It's going to take an aweful lot of tweaking to get it right. But that's my next experiment since there isn't much info on it. The other option is to hack a game like Lands of Lore and study how their artwork was put together.

#11 @James, the method I used seemed to work fairly well.

What I did was start with a generic wall texture, originally designed to be the face of a surface on a real 3D wall in TGE --

I then used the Edit->Transform->Perspective option in Photoshop, gave it some perspective, then I took the 512x512 image and resized it to 128x512 to give the feel of 'looking downward'.

I believe with some well cared for time, you could very easily create a generic 'process' for yourself to take static flat 2D images (512x512 for example) and then quickly convert them into perspectives with photoshop -- now, granted, if you have a ton of artwork to do this too, you may want to look for a more programmatic way of handling it ... for which, scripting ImageMagick may be useful ...

Basically, the generic concept is that a front-on view of a wall ... convertered to perspective requires the following ...

1) Squish the top-right and bottom-right corners closer together, making the top and bottom edges form a nice angle between the top-left and bottom-left (left and right can be interchanged, as well as top and bottom, so long as there interchanged all the way around).

2) You then squeeze the artwork on it's horizontal axis (change the width, forcing it to resize non-proportionally).


This gives a fairly decent looking 'perspective' look ...

In TGB, you then simply have to determine what size the left edge of the graphic must be to match the right size of the graphic in front of it ...

One side note: I used a wall-texture, not an entire 'image' (such as a picture of a shop, as seen in your above posts screenshot) -- the photoshop technique i mention worked well with the wall-texture (in this case, it was a brick wall texture)

#12 @David: Thanks for the instructions. I'll give it a shot.

#13 Small update to the code I posted, for anyone whose lurking in the background with intentions to try to implement it -- the size/position issues have been resolved.

I re-photoshopped my wall texture, took the 512x512 wall texture, set ruler marks at 128 and 384, performed the Perspective size like I mentioned above, and locked it at the 128/386 locations -- making the next tile be 50% shorter then the current -- then I shrunk the image width to 128 ... making it non-proportional (as mentioned above).

I then had a 128x512 image, and changed my 47.475 percent to 50 ... simplified the math quite a bit for testing (though more complex equations can be performed, if you want your tiles to look different.

I then fixed the positioning by changing the following line:

%posx = %posx - getWord(%size, 0);

to the following:

%posx = %posx - getWord(%size, 0) + (getWord(%size, 0) / 4);

You'll notice I am subtracting the width of the current tile and then adding 25% of it back ..

This could also be noted as:

%posx = %posx - ((getWord(%size, 0) /4) * 3);

NOTE: For the sake of performance, I am using the latter change as it does not requiring an additional call to getWord()

This little concept is quite interesting, so I'm probably going to continue working on it, and will write my progress in this thread ... and maybe a .plan at a later date when I've actually "got something" :)

#14 The Dungeon Concept Diagram:

A quick two-room pre-fab made in level-builder

This is actually 6-rooms (your standing in one of them, 5 rooms in front of you)

The last image is actually 'rendered' using data from a tile-layer ... where as the second image was actually created by piecing the artwork together in the Level Builder the right way ...

If you look closely enough, you'll notice the last room in the hallway is missing a 'right wall texture', this is because there is no wall there, it is actually the start of a hall-way ...

I've not yet rendered the ceiling, but the ceiling is just a matter of flipping the floor code upside down (literally, just reverse the values)

After the ceiling code is written, then I have to work on rendering hallways, which actually shouldn't be too complicated of a process to do ...

From there ... it's a matter of rendering objects inside of rooms, like people or monsters ...

then, I believe the code would be ready for a test-run .... :)

#15 Go higgins, go go go higgins.

#16 @Matt, haha ...


On a serious note though, keeping everything ordered properly is quite the pain ...

#17 Ok ... here's another one ... this time with properly drawn 'end cap' textures (walls in front of you) ...

However, the only part of this that is 'faked' is the hallway portion ... I haven't gotten that just right yet ... when I enable that code, it still draws things in really weird places and at goofed angles ... but otherwise ... it's progressing fairly nicely ...

#18 OMG! That's totally awesome! I'm just dumbstruck at how fast you put it together. That's amazing!

#19 You know...this is totally sweet. Really, really sweet!

#20 Thanks -- I always appreciate positive feedback, just makes me work twice as hard/fast ... ;)

Once I get the basic 'render engine' complete, I'm going to think about how best to layout things like the sprite sheets that are used to draw the images --

Right now, as you can see, I'm just using two images ... and flipping them on there X or Y axis and smacking them together ...

Once I get the basics working (such as moving around) ... I'll work on being able to customize the images being drawn ..

Oh and, check this ... rotating the players view, such as to look right to start moving down the hallway you see in the next room in the image above ... is literally just a matter of making X become Y and Y become X ...

Yep, in the code, you just flip the X/Y coordinates, for the most part ...

My current system uses a tile-layer, and I keep track of the 'player' by storing a currentTile and currentDirection field;

if(!isObject(Player))
{
  new ScriptObject(Player)
  {
    currentTile = "0 0";
    currentDirection = $DIRECTION_NORTH;
  };
}

Since I don't need a sprite for my player, I just use a script object ... which also allows for quick 'save player state' functionality ... ;)

Hopefully, this doesn't take much longer before it's a working 'demo' of the prototype ...