koobas.hobune.stream
how to create 2d and pseudo 2d lines and shapes in 3d space?
Basically, I was taking a look at the game Splice. Specifically the gameplay, where you go about splicing and re-arranging molecules of sorts:
And I'm wondering in Unity how would one go about creating: (by 0.17 you get a good look at what I'm talking about)
The bigger circle around the root molecule
The dotted lines that connect each molecule.
That is, if you rotate the perspective around a bit, you'll notice these outlines / shapes seem to be like on their own plane. I'm not talking about the capsules themselves, but rather the white circle and capsule outlines.
I'm trying to wrap my head around how could this technique be achieved. For instance, are the outlines textures on planes? ( I don't think so since the circle for instance can get bigger and smaller without noticeable mipmapping -- it seems almost vector-like). Are they projectors onto planes? A line shader? (not the unity line renderer, I mean their own line shader, more like a wireframe shader).
Just wondering what peoples' approach to this would be.
Vectrosity is pretty much perfect for that. The LineRenderer can't do it; too many limitations (basically impossible to do the dotted lines correctly, to start with).
Yeah I don't know that the line renderer might be enough. First, it billboards the stroke which is not what I want (I want strokes / lines to stay in perspective) and like Eric5h5 said, it'd be a hack to try and pull off the dotted lines. Vectrosity seems viable, though I think I'm leaning more towards a geometry / fragment shader.
A geometry shader would only work for PC/DX11 though. Vectrosity would be properly cross platform.
really? why? I mean let's say I'm targeting win, os x and iOS. But is it a Unity limitation? (I'm new to Unity), cause I've written glsl shaders for iOS and os x before with no problem. GL ES 2.0 has geometry and fragment in the programmable pipeline (and Win and OS X obviously have all the way to tessellation and whatnot).
try "dynamic circles" on asset store
So here's an example of the "2D sprite that you allow to rotate on the Y axis in 3D" look.
http://www.filedropper.com/swingers
try it on your retina iPad
(incidentally the "file dropper" service there seems great, it's so hard to find somewhere to easily post files, assuming it's not some sort of scam. notice the cool URL you get!)
By the way I'm crippled by being unable to draw a capsule in Illustrator, heh!!
Don't hesitate to substitute a better one - try different thickness for the look you want. A thinner line would probably look better.
So, it could be that the white capsule outlines are "a PNG" but, when you tilt your iPad they rotate backwards in to the scene - you know, a 2D sprite but you allow it to move in 3D for that cool, err, "2D sprite moving in 3D" look. Perhaps? (Notice the fellow on the page linked, mentions having looked at "2DToolkit".) the filled-in black "capsule" looking things appear to be just 3D objects, nicely lit and so on, which again slightly rotate on Y. regarding the Awesome Fuzzy Background, i have no idea how it is done. It could be that a skilled artist drew an Awesome Fuzzy Background in photoshop, and you are seeing it there rotating on Z. Regarding the out of focus look of the "small mysterious objects" which swing around in eth background, perhaps that is done with a shader? Regaring the bounce that connects the white-outline or black-3D capsules, you could write your own spring physics or possibly use Unity's
wow! thanks for the example!. I'm in San Francisco and it's 1.16am here already... and I'm burnt from work and have to work tomorrow too. So I'll wait till tomorrow to take a look at it, but I'll definitely try your approach, and I'm also planning on trying Vectrocity, Dynamic Circles and the shader approach.
it's nothing really it took me maybe 4 hours (just joking) to "draw the capsule" in Illustrator because I am not an Illustrator,
and it took maybe 3 $$anonymous$$utes to make the demo in Unity3D. Google found the apparently amazing new "file dropper" service and it uploade in 2 $$anonymous$$utes.
So it's been a while but here are my two cents so far:
First off, my whole asking was cause I'm doing a game / demo of sorts as project to teach myself unity. So obviously, I'm not cloning the game I based my example on. It's just that what I'm working on has similar aesthetics. So my test is really like so:
being able to click anywhere on the screen and have a circle silhouette / non-filled circle instantiated. The circle then starts emanating a pulsating version of itself. That is, a second circumference starting at the same scale and size scales up in x and y as it also fades out. This repeats for ever, giving the pulse / radiance effect.
if I click on the circle and drag, a line follows the mouse and when I release, a new circle is created and so the circles are connected thru the line.
That being said, at this point I tried two approaches
A
Making the shapes with Dynamic Circles. So each of these circles is really two. One that stays put and another that I animate via a script.
Making the line that joins the circles with the line renderer.
B
Making the shapes (the circle and the pulsating aura) in Flash and then merely importing them in Unity with UniSWF. I then animate by actually writing a script where I make the flash animation jump from frame to frame and loop over different ranges.
Making the line that joins the circles with the line renderer.
Right now I'm not making dotted lines. Which is why I'm getting away with the line renderer. I also got a copy of Vectrocity but didn't try it yet. Though then I could replace the line renderer and do dotted lines for instance. Vectrocity also takes me to think that another way about the whole thing would be:
C
Everything in Vectrocity.
And I don't know that Cipher Prime did this, but certainly another possibility is:
D
Doing (almost) everything in either UniSWF or Scaleform.
After all, when you couple the UI / menus with the gameplay itself, it seems it lends itself pretty well to making 80% of it in Flash and then staging it in Unity.
Now, as far as the two approaches I tried, between A and B the quality difference seems negligible; I tested zooming in and out as far as I'd want to for this game and the quality is pretty much the same. I am now wondering which approach would be more efficient if I had, say, 10 of these circles connected by 9 or more lines (assuming a circle can connect to more than one circle).
The trade off seems to be:
Dynamic Circles:
2n shapes of t triangles each, since each shape is made up of the circle itself plus the pulsing one.
animation code inside Update() (the pulsating circles for instance, scaling up and down).
An interesting note, the meshes don't have normals. Instead, the DC shader turns backface culling off. I wonder if this is more efficient than using a shared normal. It also means without tweaking the script that generates the shapes, I can't really assign other materials to the DC shapes.
UniSWF:
At first glance 1 quad per shape, regardless of the pulsating effect or anything else I add.
The Unity script boils down to handling a few state changes and that's it. No color.a or transform.localScale tweaking in Update().
However, as far as I understand, each shape which animates in the swf is really rasterized to a texture per frame. So I'm really loading in and out as many textures as I have frames in the whole animation for all states of the shape. And I'm not sure if behind the scenes the thing is smart enough to realize the n shapes are the same so it can share the textures across all of them.
Also potentially I really have a bunch (and not just one, even though it all shows up in a single quad) of proprietary (to put it somehow) UniSWF objects inside each flashObject / quad, depending on me exporting them from flash or not. And for what I understand, if I wanted to control the pulsating circle independently from the fixed circle, I'd have to export them separately in the swf file.
The easy way is to make a plane with the texture you want, attach it to the target game object, and put a "SmoothLookAt" script on it. You will have to set the target to the main camera from another script, but then you have a circle that is in 3d space but is looking at the camera. An even simpler method would involve a simple billboarding script that always looks at the main camera. Or you could just get Vectrosity as already suggested.
I'll definitely get vectrocity and give it a try over the weekend. But still, I want to try and pull it off myself from scratch for the sake of learning, which is why I figured I could use suggestions from a few people more experienced with Unity than myself :)
well.. actually, no. Or at least not right now. Or what the heck, I'll select your answer. Not trying to be a douche, so here's the deal: for this question, there really isn't a right or wrong answer; folks just gave a lot of suggestions. And I'm definitely grateful to everyone who chipped in.
Also, I've been super busy with work so I haven't had time to check out all suggestions fully. What I did do is get a copy of Unity Pro to play with the shaders and render to texture, I got a copy of Dynamic Circles too and tried that, and played a bit with Vectrocity too. If you ask me at this point, I think a viable answer is : use Dynamic Circles modified code for the outlines + either Unity's line renderer (if you are lazy or don't need too much control or don't care about ) or Vectrocity for the connecting lines. Finally use shaders on top of that for the green / red offsetting, depth of field,etc.
Another approach would be to make the outlines directly in shader code (think a toon shader type; classic edge detection might show uneven edges depending on the camera angle).
So your official answer is not really what I ended up going for. However, I definitely did take your advice from comments, including Dynamic Circles. If you want, you could post those suggestions as another answer and I'll mark that one?
