x


How do I mask off specific parts from a plane or cube?

I've been messing around with various methods to create an energymeter-like GUI-element.

This is what I would like to generate:

alt text

As I see it, I have two options:

  • Create a sprite for each level the blue bar could be at.

  • Create the blue bar using a plane/cube inside Unity that I scale along the Y-axis, with the grey lines in front of the blue bar, and the "empty" texture as the bottom-layer.

Solution #2 would be the best in my opinion, but how should i do this? I've tried to do this with this culling-shader, but that only generates this result:

alt text

In other words; the masking isn't happening dynamically - as when I scale it, the culling texture is scaled as well.

Can anyone help me out? Am I trying to solve this in all the wrong ways?

Thank you for your time.

more ▼

asked Dec 03, 2009 at 01:36 PM

eMilk gravatar image

eMilk
55 9 6 11

(comments are locked)
10|3000 characters needed characters left

3 answers: sort oldest

You could create a custom mesh of a plane, and adjust the UVs to only show the relevant parts of the texture. Then you can draw that, either manually, using Graphics.DrawMeshNow, or using a normal MeshRenderer component.

more ▼

answered Dec 03, 2009 at 01:57 PM

jonas echterhoff gravatar image

jonas echterhoff ♦♦
10.4k 8 31 114

(comments are locked)
10|3000 characters needed characters left

You could use the masking shader you linked to with success, but the mask texture would have to contain a ramp from white to black and you would be controlling the status (the energy percentage or whatnot) by setting the _Cutoff property of the material from a script.

Or you can forget the ramp texture and use the shader pasted below instead. :)

To use it, create a material using that shader, drop it on a quad (with good UVs of course) and assign the texture of the blue bar to it (the texture's alpha channel will be nicely taken into account as well). You can now take a look at the material in the inspector and slide the "Progress" slider to see what happens.

From a script you would control the meter by calling:

renderer.material.SetFloat("_Progress", myCurrentEnergyLevelBetween0and1);

And here's the shader:

Shader "Custom/ProgressBar" {

Properties {
    _Color ("Color", Color) = (1,1,1,1)
    _MainTex ("Main Tex (RGBA)", 2D) = "white" {}
    _Progress ("Progress", Range(0.0,1.0)) = 0.0
}

SubShader {
    	Tags { "Queue"="Overlay+1" }
    	ZTest Always
    	Blend SrcAlpha OneMinusSrcAlpha
        Pass {

CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

uniform sampler2D _MainTex;
uniform float4 _Color;
uniform float _Progress;

struct v2f {
    float4 pos : POSITION;
    float2 uv : TEXCOORD0;
};

v2f vert (appdata_base v)
{
    v2f o;
    o.pos = mul (glstate.matrix.mvp, v.vertex);
    o.uv = TRANSFORM_UV(0);

    return o;
}

half4 frag( v2f i ) : COLOR
{
    half4 color = tex2D( _MainTex, i.uv);
    color.a *= i.uv.x < _Progress;
    return color*_Color;
}

ENDCG

    }
}

}
more ▼

answered Dec 03, 2009 at 04:25 PM

robert gravatar image

robert ♦
1.1k 5 9 31

It works very well but i'm using this on a 3d plane in-game and it gets drawn on over everything, and doesn't take other objects into account. Is it possible for you to revise this so it doesn't get on top?

Jun 13, 2011 at 10:54 AM Talemon

Works great! Thank you :) @Talemon: like Peppercat says: "you have to replace the word "Overlay+1" in the shader with "Transparent"

Nov 08, 2012 at 12:12 AM chelnok

Awesome! This is exactly what I've been looking for! Well, almost. This makes the bar go from right to left. For anyone interested, to make it go from left to right, change "color.a *= i.uv.x < _Progress;" to "color.a *= i.uv.x > (1.0 - _Progress);"

May 30, 2013 at 10:24 PM homer_3
(comments are locked)
10|3000 characters needed characters left

Hi Talemon! Maybe my answer it's a little late, but you have to replace the word "Overlay+1" in the shader with "Transparent", so your plane respect its position in the render. I hope this helps! :)

An thanks, Robert, for the shader, it's working perfectly :3

more ▼

answered Oct 23, 2012 at 08:04 PM

Peppercat gravatar image

Peppercat
31 6 6 7

Thank you Peppercat for the tip!

Nov 08, 2012 at 12:10 AM chelnok
(comments are locked)
10|3000 characters needed characters left
Your answer
toggle preview:

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Topics:

x5767
x4827

asked: Dec 03, 2009 at 01:36 PM

Seen: 6921 times

Last Updated: May 30, 2013 at 10:24 PM