I was wondering if there's a possibility to render a retro-pixel-like graphics from 3d model in real time?

I'm talking about the Starfarer-like graphics. I know it's hand drawn, and it's 2d. But if I need a 3d objects with the same aesthetics?

I'm currently working with Flash. But I don't need any ready-solutions, I just want to understand the principle from any other platform if there is one. So if anybody met anything like this I would appreciate your help. (If it's not possible to do in real time, I could at least pre-render a sequence of sprites. It would be much better than creating hundreds of hand-drawn ones)

| improve this question | | | | |
  • \$\begingroup\$ Shaders for sure, I saw something like this on screenshotsaturday.com from twitter user @aladameh. Check out the before and after images. \$\endgroup\$ – MichaelHouse Apr 2 '12 at 17:45
  • \$\begingroup\$ The starfarer graphics don't really look like retro pixel graphics to me. When I read that I think about something like the old NES games... \$\endgroup\$ – bummzack Apr 2 '12 at 17:58
  • \$\begingroup\$ Guess it depends on how old the OP is... kids these days :). I agree with @bummzack. \$\endgroup\$ – MichaelHouse Apr 2 '12 at 19:48
  • \$\begingroup\$ Wow, I just watched one of the videos from Starfarer. The graphics actually look really good. \$\endgroup\$ – MichaelHouse Apr 2 '12 at 20:02
  • \$\begingroup\$ Yes, I may have made myself sound a little bit missguiding. I was not talking about the very old pixel graphics, but with the one that has a sort-of-retro look-and-feel. It's just very sharp 2d. I actually don't know how it should be called properly, but it's definetely a highly popular standart in gamedev. I would also link the classic flash hit "Dogfight 2" ( rocksolidarcade.com/games/dogfight2 ) which had the same aesthetics. \$\endgroup\$ – momijigari Apr 2 '12 at 21:18

In 3D those kind of aesthetic effects can be done via a combination of shaders and textures. From the photos you provided, you could probably replicate the effect in 3D using cel-shading (essentially a toon-shader). Cel-shading basically defines hard-cutoffs for colors when computing lighting, giving the object a hand-drawn look. Here's a few examples.. The most important part of getting the effect you're looking for though would be in the texturing of the models. I would say texture them with the same art style and it would look great.

Definitely something you can do in real-time :)

| improve this answer | | | | |
  • \$\begingroup\$ Thank you sir! That's a very useful information. I don't know if I'll be able to port toon shading to Flash. But at least I could pre-reander sprites! Thanks again. \$\endgroup\$ – momijigari Apr 2 '12 at 18:42

Firstly the main thing would be to render them at a lower resolution and scale them up without anti-aliasing for the pixelated effect. Old dos style games where often at resolutions like 320x240. 640x480 would have been fairly high res back then. Just doing that would give you a Quake 1 played on a 486DX graphics style. I would recommend doing them at 1/2, 1/4, 1/8 or whatever the resolution of the final screen to ensure that pixels are doubled exactly so you don't end up with any half pixels. Otherwise you can just choose an old dos resolution and scale it up, you might get some half pixels but since you are dealing with the whole screen it shouldn't matter.

The rest of it will depend how 3D your game needs to be and exactly what retro effect you want. Exactly what movements/rotations you will be supporting for your objects/world, full 3D? restricted 3D? or just 2D (in which case why bother with 3D at all). Also it will depend on your game content, are you creating it from scratch in which case you can ensure your models are built for the retro style graphics you want or are you trying to process normal models.

Another way would be to limit the colour pallet to something like 256 colors. Some games used index colour pallets where they could pick any RGB color they wanted but could only draw 256 unique colours on the screen at once. The problem with doing that automatically is it tends to give ugly results and since the pallet is for everything that could possibly be on the screen at once generating it live would mess up the chosen colors. Maybe if you specify the pallet manually but let the programming pick the best available color. If you know your ship is beige then you would force you pallet to have 2 or 3 possible beige colours and hope that your algorithm picks the correct beige based on the shading. Or course you don't have to actually restrict yourself to a pallet like that, you could just try faking it with toon shading.

Lighting will also be an issue. For pixel art it's generally artists interpretation of lighting. It can involve ray-traced like effects such as soft shading, soft shadows, light scattering, light reflection and so on. Or perhaps no lighting at all. For the Starfarer-like effect the best choice would be to look at SSAO to get that soft shading. You would need to combine that with shadows.

In retro games lights might rotate with the object as you only have 1 sprite that gets rotated (although it would probably be better to leave off that and light them properly since you can).

Fix your objects to pixel positions, stop 'half' pixels. Don't draw an object at pixel coordinates 539.4 x 480.0. Force it to be at either 540x420 for 539x420. Try and ensure that your 3D model's vertex coordinates are snapped to a grid.

Objects would have been made up from a sheet of sprites. Since they are hand crafted and memory was limited the number of positions and object could be in would have been fairly limited. When you rotate the sprites, maybe rotate them and specific fixed rotations so they jump from 1 rotation to the next rather than a smooth rotation. For example allow only 8 possible directions (maybe more directions depending on how good you want your graphics. An older top down game might have only included 2 images for all possible rotations vertial/horizontal and a diagonal.

If you require depth you will have to do something similar with objects effectively jumping from 1 depth level to the next, objects coming closer would have originally either been the original image redrawn by hand to get bigger over multiple frames or possibly just the original image scaled up. Animation would be yet another example with jumping between different keyframes rather than a smooth transition from 1 state to the next.

That kind of thing will stop pixel 'twinkling' and 'popping' into existence as some threshold is passed, making it look less like you took 3d content and ran it through some kind of pixelation filter and more like the retro games. As your sprite moves across the screen it should be pixel by pixel identical for each position it is in. Perhaps pre-render your objects into 2D sprites.

Depending on your game style, Try and turn off or limit any kind of perspective transformation too. If you have a top down of a guy running down a corridor you will either want the sides of the walls to not be visible or isometric walls (in which case you might do perspective but with specific angles (ie 45° angles and ensuring that pixels at the top of a wall are on the same pixel grid at the bottom. Or maybe you will just get flat front facing walls).

You might want to have outlines around things (for example the detailed components of the ships in the linked images such as the weapons/engine pipes seemed to). They could be soft or hard. There are various shaders that give outline effects. I would recommend manually tagging the bits of your mesh that will be outlined. Some of it seems to be done to give an appearance of depth (which as a pipe going under another) it does seem like there should be a way to do it based on the sudden change in depth, I would recommend looking at applying a sobel edge filter to your Z-Buffer.

| improve this answer | | | | |

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.