Mobile fog

Hi, I’m currently working on isometric mobile game.

I already made an pretty primitive setup by using some quads and an gradient texture with vertexlit blended alpha to get the fog effect. It look like this:

I don’t know if there is an performance issue by using this method. I used 4 quads to get this effect, but I want to know if there is some better method to get fog that is not very expensive in performance.

Ketchapp games use an very nice fog effect in their games and I don’t think they’re using quads to get it.

Thanks in advance and have a nice day !

I’m trying to find what games you’re talking about, I’m looking at them at the moment.

This is how I would do it.

I see “Spiral”. To mimic that effect, create a background image with a vertical gradient, say color X at the top and color Y and the bottom. Create another image with a vertical gradient, full transparency at the top and match color Y at the bottom. It seems to be offset towards the bottom a bit. Just put it in your UI canvas, behind your UI elements, if you’re using unity GUI.

As for “The Pit”, same deal. It’s a static sprite between the UI and the game elements. It’s designed to match the ramp’s angle.

I’m looking at “Versus Run”, I think it’s a gradient on the blocks, color X at top to color Y at bottom, and the camera color is matching color Y.

Generally transparency is not so good on mobile. For the cases where you can trick fog by creating fully opaque gradients with your background color as the top color, you should. That being said, if you game is similar to most Ketchapp games, you should get away just fine with a layer of transparency.