#unity tutorial

✨This is a BIG ONE✨

My start-to-finish game asset workflow tutorial is now public 🎊

One of the easiest ways to add combat into your top down games!

This video shows both melee and ranged combat implementation in a quick, clean and easy way!

In this Unity C# scripting tutorial you understand; the Trigonometric functions Sine and Cosine visually, How to Create Circular Movement with Sin and Cos Function in C#, How to move a game object Left and Right with Sin Function in C#, How to move a game object Up and Down with Cos Function in C#, How to move a game object in Sine wave and Cos wave with C# etc.

Watch Now: https://bit.ly/3ATgKQY

Dithering, specifically Ordered Dithering, is a way of displaying images, and was used back when computers only had about 16 colours to choose from, often they were completely monochromatic. Now it's more of a stylistic choice, and a similar effect was used in indie smash hit, Return of the Obra Dinn.

I wanted to create this effect in Unity,  because it seems pretty cool and I want to learn more about post  processing, and writing my own post processing scripts.

Initially I tried to posterise the view, like in Photoshop, and use  each layer as a mask to show a different dithery texture, but decided  that was just too messy. And it turns out that a dithering algorithm is  available online, so it just made sense to use that and adapt it for  what I need.

Post Processing Script

This script just passes the view from the camera to the material  specified, which will use our shader. By using ExecuteInEditMode we can  see the effect without pressing play

using UnityEngine; [ExecuteInEditMode] public class PostProcess : MonoBehaviour { public Material material; void OnRenderImage (RenderTexture source, RenderTexture destination) { Graphics.Blit(source, destination, material); } }

Dithering Shader

Our shader only needs three properties, the MainTex, which comes from the camera, and the two colours to dither between

_MainTex("Texture", 2D) = "white" {} _BackgroundCol("Background", color) = (0,0,0,0) _ForegroundCol("Foreground", color) = (0,0,0,0)

Now at this point, if we just return the texture, we'll get our normal scene view

float4 frag(v2f_img input) : COLOR {    float4 base = tex2D(_MainTex, input.uv);    return base; }

So we want to now pass that texture through the dithering algorithm. And that works by getting each of the rgb channels and seeing how close they are to 0 and passing back a 1 or 0 accordingly. You can read more about it here.

float4 frag(v2f_img input) : COLOR {    uint matSize = 4;    float4x4 mat = { 1, 8, 2,10,                    12,4,14, 6,                    3, 11, 1,9,                    15, 7 ,13,5                    };    mat = mat / (matSize * matSize);    int pxIndex = input.pos.x; //x index of texel    int pyIndex = input.pos.y; //y index of texel    float4 base = tex2D(_MainTex, input.uv);    //get which index of dithering matrix texel corresponds to    int mati = pxIndex % matSize;    int matj = pyIndex % matSize;        //quantization    if (base.r > mat[mati][matj]) { base.r = 1; }        else { base.r = 0; }    if (base.g > mat[mati][matj]) { base.g = 1; }        else { base.g = 0; }    if (base.b > mat[mati][matj]) { base.b = 1; }        else { base.b = 0; }    return base; }

Now this does dither the image. But I want to change this so that it only uses two colours.

So I added another line underneath base. This takes all three channels and adds them together, dividing by three to make it greyscale. It's not enough to just use one channel.

float c = (base.r + base.g + base.b)/3;

I can also delete all those if else statements at the end and replace with this one:

if (c > mat[mati][matj]) { c = 1; } else { c = 0; } return c;

This will return a black and white dithered image!

And to add our colours in, we change the return line to make it a lerp. Now the black and white will be replaced with our two colours!

return lerp(_BackgroundCol, _ForegroundCol, c);

Scaling the Dither

I felt that the pixels here were too small. I wanted more retro chunky pixels. Originally I had a RenderTexture attached to the camera, which I stuck on a canvas. I could control the size of the RenderTexture, making the resolution smaller and the pixels bigger. But my friend pointed out that I was just doing the same thing twice in different ways, and making two RenderTextures.

So instead I looked at editing the RenderTexture I had already created.

I added a scale variable to the PostProcess script, using a Range attribute so I don't accidentally divide by 0.

[Range(1,10)] public int scale;

Inside the OnRenderImage I set up a temporary RenderTexture, which we will blit to, and then blit from that to the destination. We set the dimensions to the scale. Create a temp texture and set the filtermode to Point. This ensures that the dithers stay crisp. Otherwise they're all blurry and just don't look good.

int width = source.width / scale; int height = source.height / scale; RenderTextureFormat format = source.format; RenderTexture r = RenderTexture.GetTemporary(width, height, 0, format); r.filterMode = FilterMode.Point;

I found that I add to edit the shader to make this look better too, so I set the scale of the shader based on this scale too. We'll assign this in a minute.

material.SetFloat("_Scale", 1f/scale);

Then we blit the source texture to our temporary one, then the temporary to the material and finally release it.

Graphics.Blit(source, r); Graphics.Blit(r, destination, material); RenderTexture.ReleaseTemporary(r);

Back in the shader script, add "_Scale" to the properties. And multiply the x and y by it.

int pxIndex = input.pos.x*_Scale; int pyIndex = input.pos.y*_Scale;

Now when I move the scale slider up and down the pixels get bigger and smaller, and I can set them to be as chunky as I want

This gif looks really bad, go check out the demo to see it work!

Unity Tutorial #1: Run with Dust~

Add satisfying flair to your game’s movement by having little dust clouds puff out of your players as they run! 

Step 0: Observe how other games’ particle effects work.

Think about what is common or what is different across several games to determine what kind of artistic liberties you can take with your particle effects + what kind of behaviour your particle effects should have. 

Observations

Animal Crossing New Horizons

Dust cloud sprites are realistic

Dust cloud starts small and increases in size.

Dust is spreading and dissipating.

Dust clouds appear close to feet of player character.

Dust clouds fade in quickly then out slowly.

Overcooked 2

Dust cloud sprites are cartoonish and round.

Dust cloud start big and decrease in size.

Dust clouds appear behind the player character.

Dust clouds appear suddenly, then dissipate into smaller clouds.

Step 1: Draw some cartoonish clouds!

3 of around the same size will do. Arrange them in the same file, equidistant to one another. This is your cloud sprite sheet.

Step 2: Open Unity and create a material.

We’re using the Standard 3D pipeline for this tutorial.

Right-click the Assets window and navigate to Create > Material. Change the material’s shader to Particles/Standard Unlit. Change the rendering mode to ‘Fade and the Color Mode to ‘Multiply’.

Import the cloud spritesheet made in step 1 into Unity and set it as the material’s albedo.

Step 3: Create a particle system. Assign the material to it.

Right-click the Hierarchy window and navigate to Create > Effects > Particle System. Drag and drop the material from step 2 onto the particle system in the Hierarchy window.

Step 4: Check all the relevant particle effect properties.

Select the particle system in the Hierarchy window and view its properties in the Inspector window. Check all the properties shown below.

Step 5: Adjust the numbers as depicted.

Step 6: Attach the particle system to your character! 

Put it slightly behind the character’s feet. The character we are using here is Mix And Jam’s mascot!

If you want to control the lifespan of a GameObject, a simple way is to use the not-so-well-known optional parameter of Destroy() which takes an amount of time to wait before actually destroying the object:

private void Start() { Destroy(gameObject, 2.0f); }

Simple enough. Now the GameObject this script is attached to will self-destruct after two seconds. Perfect for projectiles that have travelled too far or one off visual fx.

However, sometimes you want to reuse the object, not destroy it. The muzzle flashes pictured above, for example, are a great candidate for this behaviour. It would be an awful waste to continuously create and destroy new flashes every quarter second.

So here's a reusable script that allows you to choose whether the GameObject is deactivated or destroyed after a specific amount of time: