Game Dev Tutorial : Create A Fog Effect on a Game Screen Background Image
Game Dev -All Game Dev Tutorials

App Project Name: Fog Effect

In this tutorial we are going to add a background forest image, and add some special effects to it. With Libgdx you can create Fog Effects by using the included Shader Program class code. Two things are required to do this, you need to have a Fragment Shader, and the Vertex Shader. These are two individual files that contain the text relevant to the fog creation. These two files are added to our game assets folder in the same manner that we add images to the assets folder. Once these are added to the 'assets' folder of our app project - Fog Effect, we simply load the two files into the game code. Once loaded, we declare them to our ShaderProgram class member - with the variable named shader, and from that, we can create and then render our Fog Effect to the game screen.


All code for this tutorial is at the Example Code section on this page. At App Shot you can view the game screen and some example shots of the fog effect.

FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here

Create our Game App Screen

We are creating a new app for this tutorial. First, we must create our new mobile game app, so in AIDE, at the AppProject file hierachy, Choose Create New Project, select Mobile Game, and New Mobile Game; then add the App name, Fog_Effect(Note: no spaces in the app name(can use _ ), or you can add spaces after you create it; Just Goto: the 'AppProject' folder; just select the App Name, and then select rename). Next, add the package name, 'com.aac.fog_effect_example'.

Click Create; Fog_Effect game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.


For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.

---

App Shot - Portrait 5.8" Game Screen
Fog Effect

Code For This Tutorial

For this Fog Effect example tutorial, we will require imports, a game class, class members(with variables), create method, render method, dispose method. And, we also must code 2 files; fog.frag, and, default.vert. These two files represent: fragment shader, and vertex shader. They contain the code required to create our fog effect.

These two files are placed in the 'assets' folder of our app project - Fog Effect. This is the folder where we also put our game images. So, the 'backgroundForest.png', image will also be put into that same 'assets' folder. The image is at the Example code section on this page. Copy the code for each fog effect file; and name them as shown: fog.frag, and default.vert. Then copy and paste, each file into the 'assets' folder. Save the game image, and copy paste it into that folder also.

Imports and Game Class - For imports, we require the ApplicationAdapter import for the game class we are using here, and the ExtendViewport, and OrthographicCamera import also. And, we also must include import for Texture, Spritebatch, and ShaderProgram. Shader Program import is necessary as it is what lets us implement the Fog Effect.

Variables - Add class members for the code we are going to use; Spritebatch and named variable for it - batch, Texture and named variable - background; OrthographicCamera and named variable for it - camera; ExtendViewport and named variable for it - viewport; ShaderProgram and named variable for it - shader. The variable names you can name as you want.

Create - At create, we load our game background image and the two Shader Program files - fog.frag, and, default.vert. The background image is loaded with new texture code call; the two Shader Program files are loaded with - Gdx.files.internal code call. Both these code calls will load the game background png, and the shader files from the assets folder.

Spritebatch, Texture, Viewport, Camera, are all created. And, for the ShaderProgram, we must use a string function to access the two required files - default.vert, and, fog.frag. And, to get the text from each file we use the 'read.string' function. The information from these two files then gets passed to the shader variable, to be used in the creation of the fog effect. We create the new shader variable with this code:
shader = new ShaderProgram(vertexShader, fragmentShader);

For our background image - first we load it with this code:
background = new Texture("backgroundForest.png");

And, for the backgroundForest.png, we want to position it so it covers all the game screen area, so we use this code:
viewport = new ExtendViewport(550,980,camera);
the 550,980 values will position the image to the screen so that all areas are covered with the background. This is based on our screen device size of 5.8" in portrait mode. We draw the background to screen in the Render method.

Render - First at render method, we clear the screen, and then update the camera and set the projection matrix. Then we code: batch.begin(); so we can begin to draw our game background image, and draw the fog effect over the background image. To draw the background we use:
batch.draw(background,0,0)
The 0,0 will draw the image at the left bottom corner of the game screen. You can set this as you want.

To draw the fog effect, we use:
batch.setShader(shader);
The shader is our game variable we created from our class member - ShaderProgram, so all info was declared to this variable,(the string and read.string) and, here in the render method, that info gets passed to the batch so it can draw the fog to the game screen. Also important, that we include batch.end() when we are done drawing our fog and background image.

Fragment Shader
You can change the number values in the file; fog.frag,(the fragment file) and get various fog results; we've included some examples in the App Shot gif. As you adjust the coordinate numbers you see the fog will change its' position, and appearance.

These two lines in the fog.frag file are where you can change the fog number values.

float fogPosition = v_texCoords.y - 0.1;(try - 0.2,0.3,0.4...)
float fog = sin(u_time + v_texCoords.y * 13.0) * 0.1;(try - 14.0,15.0,0,16.0...and/or 0.2,0.3...)
By tweaking the number values from these two lines, you can get different fog results.

Dispose - At dispose method, we dispose of the game assets with the batch,dispose(), shader.dispose(), and, background.dispose(), code calls.

Summary

In this tutorial, we learned how to implement a Fog Effect, by using the Shader Program of Libgdx. By simply tweaking the values in the Fragment file, we can create various fog effects over our game background image. You don't have to create separate files for your Fragment Shader and Vertex Shader code; the code in them can also be coded directly in your game code. However, by keeping them in separate files we can easily load them from the 'assets' folder of the app project, with the same code call we use to load our game images.

More reading on Libgdx Shaders here

EXAMPLE CODE - Code For This Tutorial.

JUST copy and paste to update your code.

To Select all Code, with Notations
CLick here
Project Name: Fog Effect App Package Name:com.acc.fog_effect_example __________________________________ MyGdxGame.java package com.aac.example_fog_effect; import com.badlogic.gdx.*; import com.badlogic.gdx.graphics.*; import com.badlogic.gdx.graphics.g2d.*; import com.badlogic.gdx.ApplicationAdapter; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.OrthographicCamera; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.glutils.ShaderProgram;//include the shader import import com.badlogic.gdx.utils.viewport.*; import com.badlogic.gdx.utils.viewport.ExtendViewport; public class MyGdxGame extends ApplicationAdapter { private SpriteBatch batch; private Texture background; private ShaderProgram shader;//include shader class member private OrthographicCamera camera; private ExtendViewport viewport; @Override public void create() { batch = new SpriteBatch(); //load the background image background = new Texture("backgroundForest.png"); //load the 2 files for the fog effect String vertexShader = Gdx.files.internal("default.vert").readString(); String fragmentShader = Gdx.files.internal("fog.frag").readString(); //declare the variable for the shaderprogram - shader shader = new ShaderProgram(vertexShader, fragmentShader); if (!shader.isCompiled()) { Gdx.app.error("Shader", "Compilation failed:\n" + shader.getLog()); } //create new camera and viewport camera = new OrthographicCamera(); //set the viewport resolution viewport = new ExtendViewport(550,980,camera); } @Override public void resize(int width,int height) { viewport.update(width,height,true); } @Override public void render() { Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); //update camera code and projection matrix camera.update(); batch.setProjectionMatrix(camera.combined); //draw background image and fog to game screen batch.begin(); batch.setShader(shader); shader.setUniformf("u_time", Gdx.graphics.getDeltaTime()); batch.draw(background, 0, 0); batch.end(); } //dispose of all assets @Override public void dispose() { batch.dispose(); background.dispose(); shader.dispose(); } } _____________ fog.frag, and default.vert, at assets put these 2 files _______ fog.frag #ifdef GL_ES precision mediump float; #endif uniform float u_time; varying vec2 v_texCoords; uniform sampler2D u_texture; void main() { vec4 color = texture2D(u_texture, v_texCoords); //add fog pos at middle screen or bg image float fogPosition = v_texCoords.y - 0.1; float fog = sin(u_time + v_texCoords.y * 13.0) * 0.1; gl_FragColor = mix(color, vec4(6.0, 6.0, 6.0, 1.0), fog); } _______ default.vert attribute vec4 a_position; attribute vec2 a_texCoord0; uniform mat4 u_projTrans; varying vec2 v_texCoords; void main() { v_texCoords = a_texCoord0; gl_Position = u_projTrans * a_position; } end of app code,app built - Fog Effect
App Project Images;(one image - background image)
backgroundForest.png
Save this image: backgroundForest.png,(1024x1024) and add to 'assets' folder of the app project; Fog Effect, at:
AppProjects/FogEffect/Gdx-game-android/assets/backgroundForest.png