- Home /
How to make vector monitor graphics in Unity?
Hello! I am making a game for the A Game by it's Cover contest, which requires you to make a game based off of a fake cover. I chose this one. I need to reproduce the old school wireframe arcade vector look on the box, but I'm not sure how to achieve this. I tried applying the Barycentric wireframe shader, but I wasn't sure what it meant by mesh.uv1, and I'm not sure if I have to use one of the scripts or both. I've also seen this question on here, which asks a similar question, but there wasn't a clear solution other than the aforementioned shader. So, do any of you know how to achieve this look in Unity? Here's the image of the look I have to recreate, if you didn't feel like clicking the link:
Answer by DaveA · Jun 27, 2012 at 10:35 PM
mesh.uv1 looks to me like a typo. I would think he means mesh.uv The C# script has a routine to make a simple set of uv's, looks like. You'd probably want to copy/paste that function into your script (convert to javascript if needed), then call like
myMesh.uv = GetBarycentricFixed();
The other script is a shader, so create new shader (like you would a script) and paste that in. And thanks Unity for changing the shader language around. So you probably need to fix the syntax on that shader. Then use that shader on your material for whatever objects you want rendered with it.
Better examples and a screenshot would have been nice.
Thanks! I did this, it worked, but the edges were tris not quads (image here: http://i.imgur.com/yp$$anonymous$$Dg.png). Is this because of the way Unity creates meshs? I know in Blender it creates them with quad faces, which is what I'm looking for. I'm about to create a quick sphere in Blender and import it and see what happens, thank you!
I don't know enough about shaders to comment on that. But warning: this will probably just draw triangles, not quads or polys, which you may want for the look of what you're doing. Vectrosity draws quads.
It's not possible for meshes to use anything other than triangles, that's how the hardware works. The quads in Blender are a convenience made with software, but are still actually internally converted to triangles for display (even in Blender).
(However, you can use the Line$$anonymous$$aker utility in Vectrosity to design vector shapes with quads, or in fact any arbitrary number of sides, *cough*
. ;) )
this baricentric shader is actually a bit strange, it can only draw lines between
[0,0] and [0,1],
[0,0] and [1,0],
[0,0] and [1,1]
The first "if" in the fragment shader will handle the first two cases. The second "if" will draw the third case. However with those coordinates you can't form a triangle or any other "shape". Every line starts (or ends) at 0,0. I would say the shader is wrong ;) The actual condition should be that at least one of the two components (x or y) need to be either in range [0.0 to linewidth] or [1.0-linewidth to 1.0].
So the fail condition would be
if ((x > lineWidth && x < 1.0-lineWidth) && (y > lineWidth && y < 1.0-lineWidth))
return _GridColor;
else
return _LineColor;
if i'm not mistaken ;)
Answer by Mortoc · Jun 27, 2012 at 06:59 PM
I've been using Vectrosity from the asset store, it's really well done. If you're willing to spend $30, it can save you a lot of time.
$25 on my site. ;) http://www.starscenesoftware.com/vectrosity.html
thanks, but I don't really have any money to spend on this.
First and best $25 I spent on a Unity add-on. Well worth it. Comes with vector BattleZone tank game.
Answer by Bunny83 · Jun 28, 2012 at 01:47 AM
Ok, i've taken a look at the shader and changed it so it actually works ;) The original shader used the second texture channel (TEXCOORD1) I changed it to the first / main texture channel TEXCOORD0.
I've created a package with some shader variations (transparent, "quad-mode", transparent with backface culling). Here's a test webplayer.
This is the transparent shader without backface culling. Keep in mind that without zwrite and backfaces, it only works as some kind of cutout shader and only with solid colors, otherwise you get weird results since the z-order is random.
As you can see the cylinder looks strange, that's because it is unwrapped to one texture. this shader needs every triangle to be mapped to the "whole texture". So only coordinates of 0 or 1. The big problem are shared vertices. Depending on the topology the coordinates can't be shared in all cases. If you have another premade model, the easiest way to use this shader is to remove all shared vertices and create single triangles. If it's a quite big mesh this can of course exceed the vertex limit, so keep that in mind.
Shader "WireFrameTransparent"
{
Properties
{
_LineColor ("Line Color", Color) = (1,1,1,1)
_GridColor ("Grid Color", Color) = (0,0,0,0)
_LineWidth ("Line Width", float) = 0.05
}
SubShader
{
Pass
{
Blend SrcAlpha OneMinusSrcAlpha
Cull Off
ZWrite Off
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
uniform float4 _LineColor;
uniform float4 _GridColor;
uniform float _LineWidth;
// vertex input: position, uv1, uv2
struct appdata {
float4 vertex : POSITION;
float4 texcoord1 : TEXCOORD0;
float4 color : COLOR;
};
struct v2f {
float4 pos : POSITION;
float4 texcoord1 : TEXCOORD0;
float4 color : COLOR;
};
v2f vert (appdata v) {
v2f o;
o.pos = mul( UNITY_MATRIX_MVP, v.vertex);
o.texcoord1 = v.texcoord1;
o.color = v.color;
return o;
}
float4 frag(v2f i ) : COLOR
{
float2 uv = i.texcoord1;
float d = uv.x - uv.y;
if (uv.x < _LineWidth) // 0,0 to 1,0
return _LineColor;
else if(uv.x > 1 - _LineWidth) // 1,0 to 1,1
return _LineColor;
else if(uv.y < _LineWidth) // 0,0 to 0,1
return _LineColor;
else if(uv.y > 1 - _LineWidth) // 0,1 to 1,1
return _LineColor;
else if(d < _LineWidth && d > -_LineWidth) // 0,0 to 1,1
return _LineColor;
else
return _GridColor;
}
ENDCG
}
}
Fallback "Vertex Colored", 1
}