Notifications
Article
HyperTube
Updated 9 months ago
339
0
Endless runner
HyperTube is endless runner game for mobile devices made in retro wave, synthpop, neon style inspired by music and pictures from 80-s. I starred it as an environment project for Neon challenge, I was keeping traveling across the scene and come up with the idea to make a game from it. It still WIP, and there is a lot of work from the gameplay point of view, but from the visual side it's ready for submission.

Preperation

I begin from collecting references, just to have starting point. I didn't intended to create exact copy of pictures that i found, I was searching patterns that give this stylish retro wave look. The first of all it is wireframes, secondary bloom effect, color palette, nice and smooth gradients, and finally good music. That is 5 main components that gives this incredible style.
So I made gradients, color pallet, and wireframed objects separately. For the opaque objects I used only one diffuse texture, and for the transparent I use special shader.
After that I started to investigate how to combine them together, keeping performanceсe in mind. In order to do that I went to Unity asset store trying to find project with similar art. Immediately I found the project that satisfied my expectations it was Hyperbit Arsenal I took this, look how it was done, and understood that I can push this visual style even further without loosing the fps, using the post processing effects. My test device was Galaxy s8, and fps never dropped lower than 50 fps giving me 60 fps most of the time.

Making of

The most challenging thing was to made this gradient and colorful fog. If we use standard fog with custom SkyBox, we get really strange result, and we need customize the fog. Because of Unity doesn't have this customization out of the box so I couldn't do that using standard fog, I wrote my own. The idea was to sample SkyBox color by Depth Buffer, and interpolate the values.

This is the result of sampling. And it is perfectly fine until you wouldn't try to add transparent objects. Objects textured with alpha not drawn in Depth Buffer, so you simple wouldn't see that object only if it is not in front of opaque object that has DepthBuffer. The easiest work around was using [ImageEffectOpaque] attribute, so any Image Effect with this attribute will be rendered after opaque geometry but before transparent geometry.

Ok, so now we can see transparent objects, but the new problem is that Fog doesn't interact with them at all, so they all keep visible all the time from any point of the scene, because they have been drawn on the screen after the fog has already been applied and doesn't hide them. The solution was to write a small script, that control Alpha values from 0 to 1 depending on camera distance. So if the object too far away from the camera, the alpha value is 0 and object is invisible.
This is shot how everything looks like together without fog.




Fog turned on, and the picture already looks grate, but we need final touch. Add Bloom post effect. I took it from Keijiro Takahashi github. The fps slightly dropped, but it 100% worth it, because the bloom effect give the amazing result.


On of the biggest advantage of retro wave style, is that it is not only looks cool but colors, and textures can be easily changed to make new variations almost for free.
In the end I'm satisfied with the result. I will keep update gameplay part to bring this game to life. Keep tracking if you are interested in. Feel free to ask any question. Thanks!

Comments