imagination XD

realizing dream


2 Comments

[Research] Noise, Sepia, & Vignetting Effect for Unity Indie

NOISE

This is really easy to make, but i don’t know how to make a noise pattern with Photoshop. I’m trying to add Render > Clouds and then press Noise > Add Noise > Monochromatic. But i have no idea to make it to PNG.

UPDATE : I forgot that Unity has Alpha from grayscale option. After you finished making the noise texture, save it as JPG, Import it to Unity, and turn on Alpha from Grayscale. REMEMBER to set it as GUI texture type.

If you want to add Noise in your game but you don’t have Unity Pro, you just need to make at least 10 PNG Noise Pattern in Photoshop @ 1920 x 1080 (mine is 1360×768). You need to (photoshop)

  • Use Render > Clouds to make a random pattern
  • Use Noise > Add Noise > Monochromatic to make a noise
  • Vignetting Layer (the Radial Gradient of Black and white (white in center)). To make it, use Circle Selection Tool and set the feather to 30 or 40. Drag it to your screen (don’t cross the border). On Noise Layer, Press Delete.
  • Save it as PNG.
  • Repeat until you satisfied.

Now go to Unity, make a new Javascript with whatever you want name (mine is Noiser.js)

var noisePatterns : Texture[];
private var fade : GameObject;

function Awake(){
var fadeTexture = new Texture2D(1,1);
fadeTexture.SetPixel(0,0,Color.white);
fadeTexture.Apply();

fade = new GameObject("Noisia");
fade.AddComponent(GUITexture);
fade.transform.position = Vector3(0.5,0.5,1000);
fade.guiTexture.texture = noisePatterns[Random.Range(0,noisePatterns.length)];

}

function Update(){
fade.guiTexture.texture = noisePatterns[Random.Range(0,noisePatterns.length)];
}

SEPIA

For sepia effect, you can use Ambient Light or Script above. Just set the ambient light to chocolate or orange. And if you want to use the FadeTexture (above script) effect, just make a new javascript

function Awake(){
var col = Color(128,75,20);
var fadeTexture = new Texture2D(1,1);
col.a = 0.6;
fadeTexture.SetPixel(0,0,col);
fadeTexture.Apply();

fade = new GameObject("Seipa");
fade.AddComponent(GUITexture);
fade.transform.position = Vector3(0.5,0.5,1000);
fade.guiTexture.texture = fadeTexture;

}

VIGNETTING

Now it’s the easiest one. Just make a PNG from Photoshop.

  • Create a new document with 1920×1080
  • Click Circle Selection tool, and set the feather to 30 or 40. Drag it to the screen.
  • Press CTRL + ALT + I to Invert Selection.
  • Make sure your color is black and white. If not, press D
  • Press CTRL + Backspace to fill color.
  • If it’s black save it as PNG. if not CTRL + I to invert color

Import to unity and make a javascript

var vignette : Texture;

function Awake(){
var fadeTexture = new Texture2D(1,1);
fadeTexture.SetPixel(0,0,Color.black);
fadeTexture.Apply();

fade = new GameObject("Seipa");
fade.AddComponent(GUITexture);
fade.transform.position = Vector3(0.5,0.5,1000);
fade.guiTexture.texture = vignette;

}