Java-Gaming.org    
Featured games (79)
games approved by the League of Dukes
Games in Showcase (477)
Games in Android Showcase (107)
games submitted by our members
Games in WIP (536)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Tile Map Distortion? Or just general screen distortion?  (Read 1542 times)
0 Members and 1 Guest are viewing this topic.
Offline SkyAphid
« Posted 2012-01-30 20:03:27 »

I need to distort my environments in large city areas, to make scenes like this possible:



It's like in TWEWY, the buildings will bend left and right as you move, but my engine uses tile maps for it's own simplicity, it consists of Isometrics and Orthos where it's necessary.

Anyway, the distortion needs to paint my tile map onto a polygon so it can bend it accordingly, but the main problem is how to translate the tile map to the polygon. I've considering finding a way to distort the whole screen, but this would lead to problems as the environment will have unstatic npcs walking left and right across the side walk.

 Another idea was to take a screenshot and render it in front of the tile map, but that'd would be even harder to keep from lagging the game so immensely. My final idea was to just draw the image separate from the tile map, but this led to a lot of collision syncing problems, as the tile map I've built can't slide the collision maps left and right, and are static (Set Polygons) because of the need for platform physics in other parts of the game. Now, I was thinking I could slide the image left and right instead, and I haven't explored this yet.

Anyway, give me your opinions on the subject, the question really is, "How do I distort the image above to slide the buildings left and right accordingly as seen in games such as TWEWY, without using 3d?"

Here's gameplay of TWEWY, it shows what I mean, just watch the buildings.
http://www.youtube.com/watch?v=uhwDlMR1plI&feature=results_video&playnext=1&list=PL15BFB27290E6E7A9

“Life is pretty simple: You do some stuff. Most fails. Some works. You do more of what works. If it works big, others quickly copy it. Then you do something else. The trick is the doing something else.” ~Leonardo da Vinci
Offline Waterwolf

Junior Member


Medals: 3



« Reply #1 - Posted 2012-01-30 21:25:59 »

Do you use lwjgl, slick or java2d? Shaders would probably do the job.
Offline SkyAphid
« Reply #2 - Posted 2012-01-30 21:38:01 »

Do you use lwjgl, slick or java2d? Shaders would probably do the job.

I use Slick2d. What do you mean with Shaders?

“Life is pretty simple: You do some stuff. Most fails. Some works. You do more of what works. If it works big, others quickly copy it. Then you do something else. The trick is the doing something else.” ~Leonardo da Vinci
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline sproingie

JGO Kernel


Medals: 202



« Reply #3 - Posted 2012-01-30 22:03:08 »

Looks like simple trapezoid distortion.  A little googling around should turn up an affine transform matrix that will do the trick.
Offline SkyAphid
« Reply #4 - Posted 2012-01-30 22:06:16 »

Looks like simple trapezoid distortion.  A little googling around should turn up an affine transform matrix that will do the trick.


Well, the point of the question was how to do this with my Tile map if possible with modifying anything else in the process?
I mean, if it really is impossible I can make a static background not connected to the tile map.

“Life is pretty simple: You do some stuff. Most fails. Some works. You do more of what works. If it works big, others quickly copy it. Then you do something else. The trick is the doing something else.” ~Leonardo da Vinci
Offline sproingie

JGO Kernel


Medals: 202



« Reply #5 - Posted 2012-01-30 22:10:05 »

If you apply the affine transform to the vertices of your tiles, it should distort the whole tile grid, which should render with the same distortion.  You can always stop applying the transform when you get to ground level, if you don't want those tiles distorted, though I'd probably just do it as a separate layer in front of the (distorted) background.  Hard to say more without knowing how your tile engine is implemented.

Offline SkyAphid
« Reply #6 - Posted 2012-01-31 02:37:21 »

If you apply the affine transform to the vertices of your tiles, it should distort the whole tile grid, which should render with the same distortion.  You can always stop applying the transform when you get to ground level, if you don't want those tiles distorted, though I'd probably just do it as a separate layer in front of the (distorted) background.  Hard to say more without knowing how your tile engine is implemented.


Well, it uses Slicks in engine ortho implementation, and my own for isometrics. But, I don't use isometrics much, and the in-engine tiled implementation has worked fine up until here, so I'd rather not go back and rebuild it.

“Life is pretty simple: You do some stuff. Most fails. Some works. You do more of what works. If it works big, others quickly copy it. Then you do something else. The trick is the doing something else.” ~Leonardo da Vinci
Offline SkyAphid
« Reply #7 - Posted 2012-02-01 04:11:19 »

Bump! I still need help! If there's nothing that can be done, let me know, and I'll go ahead and find a way around it!

“Life is pretty simple: You do some stuff. Most fails. Some works. You do more of what works. If it works big, others quickly copy it. Then you do something else. The trick is the doing something else.” ~Leonardo da Vinci
Offline theagentd
« Reply #8 - Posted 2012-02-01 08:39:40 »

Okay, the simplest solution to this is to simply draw the shape you want with quads or triangles. For example you could calculate how much each vertex deviates from the screen center and distort the x coordinate based on the y-value (assuming y=0 is the screen bottom):
1  
2  
3  
4  
private float getNewX(float x, float y){
    float deviation = x - camera.getX(); //Assuming camera.getX() returns the center of the screen
   return deviation * y * DISTORTION_CONSTANT;
}

Doing that for every vertex (corner of each sprite) would produce something similar to what you want, but there's a huge catch:


That's what happens when you texture a trapezoid. It completely destroys the continuity of the texture and looks like crap.

I think what you really want to do is to render things in 3D. If the GPU has access to depth values it can do perspective correct texture mapping, which solves the above problem. You'd obviously get the perspective "distortions" for free since it's 3D.

Also the game you posted just looks like it has static background images. I didn't see any realtime perspective in the video you posted, or did I miss something? It was just heavily styled...

Also

Myomyomyo.
Offline sproingie

JGO Kernel


Medals: 202



« Reply #9 - Posted 2012-02-01 17:41:53 »

Texture a quad with the trapezoid distortion and it might not look so bad.  The line-art style of TWEWY also lends itself to being distorted more freely.  But it also looks like some of the buildings are being simply rotated, while the big building that covers the whole screen is more trapezoid-distorted.  I suspect there's more than one effect going on, and that they just hand-crafted a lot of it to fit.
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

CogWheelz (15 views)
2014-07-30 21:08:39

Riven (21 views)
2014-07-29 18:09:19

Riven (14 views)
2014-07-29 18:08:52

Dwinin (12 views)
2014-07-29 10:59:34

E.R. Fleming (32 views)
2014-07-29 03:07:13

E.R. Fleming (12 views)
2014-07-29 03:06:25

pw (42 views)
2014-07-24 01:59:36

Riven (42 views)
2014-07-23 21:16:32

Riven (30 views)
2014-07-23 21:07:15

Riven (31 views)
2014-07-23 20:56:16
HotSpot Options
by dleskov
2014-07-08 03:59:08

Java and Game Development Tutorials
by SwordsMiner
2014-06-14 00:58:24

Java and Game Development Tutorials
by SwordsMiner
2014-06-14 00:47:22

How do I start Java Game Development?
by ra4king
2014-05-17 11:13:37

HotSpot Options
by Roquen
2014-05-15 09:59:54

HotSpot Options
by Roquen
2014-05-06 15:03:10

Escape Analysis
by Roquen
2014-04-29 22:16:43

Experimental Toys
by Roquen
2014-04-28 13:24:22
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!