Wednesday, September 21, 2022
HomeGame Developmentshaders - The best way to emulate the look of loading ZX...

shaders – The best way to emulate the look of loading ZX Spectrum title screens in Unity


We will write a shader that shows blocks of 1 texture over one other, one thing like this:

Shader "Unlit/ZXLoad"
{
    Properties
    {
        _MainTex ("Loading Texture", 2D) = "white" {}
        _UnderTex ("Underlying Texture", 2D) = "black" {}
        _RowCount ("Rows", int) = 16
        _ColCount ("Columns", int) = 32
        _Progress ("Load Progress", Vary(0, 1)) = 0.5
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Cross
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #embrace "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            sampler2D _UnderTex;
            float4 _MainTex_ST;
            int _RowCount;
            int _ColCount;
            half _Progress;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);                
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // Quantity every block within the grid 
                // from 0 to _RowCount*_ColCount - 1,
                // and discover which block this pixel is in.
                float block = flooring(i.uv.x * _ColCount) 
                            + flooring((1.0f - i.uv.y) * _RowCount) * _ColCount;

                // If it is an "Early" block, already loaded by the
                // time we attain _Progress, pattern the principle texture.
                if (block < _Progress * _RowCount * _ColCount) {
                    return tex2D( _MainTex, i.uv);

                // In any other case, pattern the underlying texture.
                return tex2D( _UnderTex, i.uv);
            }
            ENDCG
        }
    }
}

You should utilize this to make a fabric that accepts two textures: one to point out beneath and one on prime, with a “Load Progress” slider you’ll be able to dial backwards and forwards to point out kind of of the feel being “loaded”. You should utilize this materials on a quad or UI picture/uncooked picture part to show your pseudo-loading output.

Animation of adjusting "Load Progress" slider in Material Inspector

You’ll be able to animate this any approach you need in your C# script, utilizing Materials.SetFloat("_Progress", loadAmount) (or the integer model, for higher efficiency) to animate the progress counter ahead.

You should utilize a digicam that writes its output to a RenderTexture to seize the photographs you need to show for every “body”, and use these textures because the loading / underlying textures of this materials, swapping between them (and swapping their order within the materials) on alternate renders.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments