Making a 2D-Tilemap look like a 3D-Map

[Accname]

Hi guys, i am having some trouble right now trying to make the 2D tilemap in my current project look like its a 3D map.
So what i am doing right now is placing a shadow on top of the terrain texture to make it look like slopes and different levels of height.
Here is an example:

If we assume a lightsource coming from the south you can see that i am trying to make the illusion of a hill by adding shadow to the northern, western and eastern slopes of the hill and lighting the southern side up.
Problem is: i dont know if this will really look that good in the actual finished game and if there is a better way to do this.
Keep in mind, there will be many different kinds of terrain in the end, grass, dirt, desert, snow, swamp, etc.
And the map would be quite big and possibly filled with high hills/mountains and deep chasms and canyons.
Do you think this would look good?
How could i improve it?

Thank you guys.

 

[KaerfNomekop]

The one example looks good, and if you can execute the shadows properly, I believe the finished product will too. Would it be possible to add smoother gradients, though?

 

[Varine]

That's how it's normally done. In general it's still obvious that the game is 2D, but it's a nice graphical feature. You might consider extending the shadows onto the ground beyond it too, but that might look weird. But it all depends on the artistic style you want.

I would just make them how you are for a while to build a little map and see how that looks. If it looks good, it's good. Should be fine the way it is.

 

[FireCat]

Not bad overall But the walls looks a "little bit too thick"

 

[Accname]

Here it is, a first test program.

It would be nice if all of you could download the attached .zip-file, extract it and run the .jar file.
I testet the program on Windows7 and WindowsXP but theoretically it should run on any plattform which supports java.
So especially if any of you with a Mac or Linux pc could check it out i would be very thankful.

This is nothing big though, its just a tilemap test which allows you to raise/lower the terrain by leftclicking/rightclicking.
I want your honest opinions about how it looks like, personally i dont think its enough. If you share this opinion i would really like any advice you could give me on how to improve it.

The auto-tiling might not work absolutely perfect right now. Its not thoroughly tested.
if errors occur with the auto-tiling it would be great if you can do a screenshot and upload it for me.

The program runs with a fixed windowed 800x600 display and VSync enabled.

Hope i get many volunteers.

 

[DrEvil]

So I don't know if I've done something wrong.
But I double click the .jar and well.. Nothing happens

 

[Accname]

So I don't know if I've done something wrong.
But I double click the .jar and well.. Nothing happens

What is your operating system?
I just checked the download, it works for me.

Have you java installed?

 

[DrEvil]

Re downloaded and extracted and it works now... Weird...
I'm still not sure which is a hole and which is a hill xD

Also when scrolled outwards the map position when clicked has not been scaled according to map size.
e.g. if you scroll out and try to click somewhere on the scrolled out version the position of the effected tile will be where it was at full scale.

 

[Accname]

Re downloaded and extracted and it works now... Weird...
I'm still not sure which is a hole and which is a hill xD

Also when scrolled outwards the map position when clicked has not been scaled according to map size.
e.g. if you scroll out and try to click somewhere on the scrolled out version the position of the effected tile will be where it was at full scale.

Yes i know, scrolling is not taken into account when clicking.
Its not really a bug, i just didnt feel like it was really needed...

And i know, the difference between a hill and a chasm is hard to tell. Thats the main problem i have with the current design as well.
I am really open to advice how i could improve it without making it ridiculously hard to create those graphics. ( i suck at making graphics)

 

[tom_mai78101]

The way I see it:

• If your game is based on top-down view, and nothing else, it's practically applicable in its current situation.
• You can actually go up 2 levels, and go down 1 level, and make a pretty flat terrain after lots of clicking in one spot.
• You can't be sure if the terrain your mouse is at is below or above a certain level. It needs to give something that makes us realize, we're going too far down or too far up. Currently, there are no limits on how far you can go.
• This is 2D tilemap, therefore there's no need to worry about 3D, shaders, light occlusions, etc.
• Your TileMap PNG needs to be categorized, so that you are able to easily re-design some of the textures you have in place. But, I'm not in the authority to tell you that. It's just my opinion.
• I wondered what are the red, yellow, and blue boxes for? I do not see any uses when I tested the program out. It's not obvious to me.
• Since you are creating something in 2D, I do not think you will need to use LWJGL at the moment. But, if you are planning on something that may involve 3D, my guess is that the first thing that pops in my mind would be some indications of terrain height, using subtle changes with the lighting.

That's it, I guess.

 

[Accname]

[...]

• You can't be sure if the terrain your mouse is at is below or above a certain level. It needs to give something that makes us realize, we're going too far down or too far up. Currently, there are no limits on how far you can go.

Yes i know, that is my problem all along, you can hardly tell how high the ground currently is if it is very hilly. I just dont know how to improve the graphics in a way it will become easier to tell apart chasms, canyons and mountains.
About a limit how far up/down you can go: i actually dont want to put too many restrictions into it, but i think the edges of the map will always have a fixed height and you cannot lower/raise them so the height will be fixed depending on the size of the map.

[...]

• Your TileMap PNG needs to be categorized, so that you are able to easily re-design some of the textures you have in place. But, I'm not in the authority to tell you that. It's just my opinion.

Its just a test, the final tileset is not going to look that way at all.
I was just trying what would be the best auto-tiling algorithm. Also i wanted to see how the graphics would look like.

• I wondered what are the red, yellow, and blue boxes for? I do not see any uses when I tested the program out. It's not obvious to me.

These are the icons for the window, they are all of different size. 16x16 and 32x32 is being used by windows and linux, the 128x128 is used by mac. They are just placeholders to test the system.

• Since you are creating something in 2D, I do not think you will need to use LWJGL at the moment. But, if you are planning on something that may involve 3D, my guess is that the first thing that pops in my mind would be some indications of terrain height, using subtle changes with the lighting.

I wanted to keep my options open for the future. Maybe I will later decide i want to make the map true 3D and have 2D sprites (like popolous the beginning, etc).
Furthermore lwjgl has many useful libraries like OpenGL, OpenAL, OpenCL and mouse/keyboard/joystick/gamepad inputs. When you are coding with java you need some kind of interface for those functions since they are not build in.

Thank you alot for your feedback.

 

[tom_mai78101]

I think I'm so used to Android, that I'm starting for forget some obvious Java obstacles...

EDIT:
As for the lighting, if you wanted to go with the Populus dev path, you could try some of those isometric angular lighting points. (Not sure what they are called...)

 

[Varine]

Are you limited to an overhead camera angle?

 

[Accname]

Are you limited to an overhead camera angle?

Since OpenGL is mainly for 3D graphics and i am just misusing it for 2D i am not limited in the "camera department" at all.
The map, however is a tile based 2D map so a 3D camera would look pretty aweful i guess.

Was thinking every now and then about maybe switching to a true 3D map, but with 2D Sprites this would be a hell of a work. Making 2D sprites look good in a 3D enviroment is such a pain.

 

[Varine]

I was thinking you were using some weird little engine of sorts.

You could try an isometric view. It requires more sprites and it's more complex altogether, but you could also integrate 3D models in a prerendered background. But that is now getting, graphically, far above what you were intending I think....

 

[Accname]

I was thinking you were using some weird little engine of sorts.

You could try an isometric view. It requires more sprites and it's more complex altogether, but you could also integrate 3D models in a prerendered background. But that is now getting, graphically, far above what you were intending I think....

Yeah, i am definitely absolutely not good at making graphics. I just pick together what i can get for free all over the internet, and while i am at it i try to avoid a mixture of different looking graphics and have them fit each other. Thats pretty hard.

 

[tom_mai78101]

You should stick to one perspective, and then work from there. It will eventually become easier in the long run.

 

[Accname]

Okay, this idea has been discarded.
I will postpone this project for now and focus on something else.
Afterwards i will try to work on a more complex heightmap model using shaders and dynamic tile sizing.