3
\$\begingroup\$

I just wondered how to create a 3D effect similar to Pokemon White/Black? It seems to be not polygon based, but created just with sprites. If the perspective changes the sprites stay sharp and don't get blurred. How can I archive this?

Source: https://www.youtube.com/watch?v=fZEPUPYOnRc&feature=youtube_gdata_player

Edit: Wow, two downvotes because I used a video instead of screenshots? Don't get me wrong, I thank you, because you want to help me, but the 3D effect can be better understood in motion. Anyway, here is a screenshot: http://wearearcade.com/wp-content/uploads/2011/03/pokemon-black-white-starter-town.jpg

So, if this is a hardware limitation, how can I archive this o na different hardware, e.g. a HTML5 game? Thank you.

\$\endgroup\$
  • 2
    \$\begingroup\$ Can you add screenshots for those of us who can't view the YouTube video? \$\endgroup\$ – dlras2 Oct 23 '13 at 19:12
  • 5
    \$\begingroup\$ Or add them just so we know which parts of the video you're referring to? \$\endgroup\$ – Sean Middleditch Oct 23 '13 at 19:30
  • \$\begingroup\$ You're probably referring to Nearest-neighbor/bilinear/trilinear filtering. They are still making use of polygons I assume. But you simply change the filter settings for your texture. Also that's Nintendo DS limitation. It's not an effect, in fact it's the lack thereof. \$\endgroup\$ – Sidar Oct 23 '13 at 21:04
  • 3
    \$\begingroup\$ About the downvotes: I think it's people not spending time understanding the question and assuming this is another "how does game X do Y" question, which is bad because it's specific to a game and not helpful otherwise. I don't think this question is of that kind; if anyone knows better they should edit the question to make it more generic or use the correct terminology. \$\endgroup\$ – congusbongus Oct 24 '13 at 7:08
  • 2
    \$\begingroup\$ Do not add video links to your questions. Use short animated gif if you need to. I clicked the video now, erm, 11 minutes. Can't be bothered. I guess others are not as forgiving. Moreover all links are prone to link rot, especially youtube. Animated gif will stay here. \$\endgroup\$ – sm4 Oct 24 '13 at 11:35
4
\$\begingroup\$

The surrounding is definitely polygon-based. You can tell by the way the perspective of the buildings changes when the player walks through the town. The polygon-count seems to be really low, but it works because the whole look of the game is quite retro. The fixed view-angle also allows them to put most of the geometric detail into the textures, because they only need to look good when viewed from a single direction.

The characters seem to be billboards (polygons which always face the viewer) inserted into the 3d scene. This, too, only works well because the perspective doesn't change much. When the surrounding would be able to rotate fluently but the sprites in it could not, they would immediately start to stand out.

The video quality is too bad to tell how the sprites filter when they zoom. But one way to prevent sprites from blurring too much on zooming in is to use nearest-neighbor interpolation which causes a "pixely" retro-look on close-ups. To prevent them from losing detail when zooming out is to draw them in a much lower resolution than they appear on the screen. This makes sure no pixel gets "swallowed" when zooming out.

To answer your question about how to do this in a HTML5 game: I would recommend you to take a look at WebGL. When 3d programming math (like matrix multiplication) is too complex for you to grasp, there are also various libraries and frameworks like Three.js available to make using WebGL easier.

\$\endgroup\$
  • \$\begingroup\$ Thank you all, this helps me understand this technique better. \$\endgroup\$ – Pipo Oct 24 '13 at 7:55
  • \$\begingroup\$ @Pipo To answer your question about how to do this in a HTML5 game: I would recommend you to take a look at WebGL. \$\endgroup\$ – Philipp Oct 24 '13 at 8:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.