Uniformly transparent silhouette in Unity (game engine)

Creating an opaque silhouette is not a problem; rendering a mesh, you want to have a silhouette of, with a fragment shader that returns the color of choice, and a ZTest set to Greater with writing to depth buffer disabled will do the trick.
Screen001In layman’s terms…
When the 2D image that you see on your games screen is rendered from the 3D models, those 3D models are drawn one by one.
Those models are drown in their entirety, and as the new models get drawn they overlap, or end up behind, the models that are already drawn.
Every time a pixel  is drawn to the screen it’s depth is compared to the pixel that is already on the same position, if there is one.
By the default, you want to draw the pixel only if it’s depth value is smaller, if it is closer to the “camera”, than the previous one; so that objects that are closer get drawn over the objects that are behind them, and vice versa.
If you flip that test, so that you draw when the pixel that is already at the same position is closer to the camera than the one that is trying to get drawn, and only change the color without touching the depth value, you’ll get the silhouette effect.

But that is the simple part of this problem, more complicated one is the transparency.
So if this silhouette is a model, as any other, standard alpha blending will do the trick?
Not really.
Since drawing to the depth buffer is disabled, and the model is drawn in its entirety, pixels will overlap.
Final result for such attempt is disappointing.
Screen002My solution is not that complicated.
I’m rendering the opaque silhouette with the objects that can hide, in this case, main player character into a separate buffer.
Everything except the silhouette is unlit and white; I’m rendering it black, since the final result looks most natural, but it can be any color or texture.
This is how that buffer looks.
After I have it, I combine the main frame buffer with the silhouette one.
Everything that’s white gets ignored through the pixel shader, and the colored parts are added with transparency level of my choice.
The final result is a perfectly good looking silhouette, without any overlaps.

You can leave your opinion in the comment section of this post

You can subscribe to this blog via e-mail, by click this Subscribe link; or you can follow FrozenPixel on facebook/twitter.

Silhouette or hole? That is the question

Recently, I ran into a problem: “What to do when the player gets hidden by another object?”
Moving the camera, or zooming it in, is out of the question; that’s way too distracting.

My first idea was to draw a silhouette over the object that’s hiding the player, this is how that looks:


Silhouette is the most subtle way, but it looks weird sometimes; and you don’t see anything around the player.

Another solution was to make a hole on the object that is hiding the player, that would allow for a bit more visibility, and it looks better in my opinion; but, it’s not as subtle as a silhouette.
(Hole is following the player, and it is only there when the player is hidden by the object. )


My question to you is: Which one do you prefer? 
You can leave your opinion in the comment section of this post

You can subscribe to this blog via e-mail, by click this Subscribe link; or you can follow FrozenPixel on facebook/twitter..

Beginnings of an imaginary village

If you read the last post, I’ve talked about the first building in the Chacko-Mauwa village.
Well, it has undergone some visual changes; most noticeable ones are the new frames, and windows made out of crystals.
I’ve also mentioned that our main character can enter the building, so here is how that looks; and a closer look at the window.


You may notice that image is distorted, as it would be in real life.
Villagers do not possess the technology to make glass, or bake bricks, but they are skillful with material processing. (Sanding, cutting, etc..)

Villagers live in the buildings and buildings live in the village. ;)
So I’ve started drafting its shape. Even though it’s design will be driven by the gameplay needs, my goal is to make it look like someone lives there; with a lot of detail, and imperfections.


There is one more building that’s almost finished, but you’ll have to wait for the next post to see that one.
That’s all for today.
If you have any questions or opinions, feel free to leave them in the comment section.
You can subscribe to this blog via e-mail, by click this Subscribe link; Or you can follow FrozenPixel on facebook/twitter.
You can expect the next post, hopefully, tomorrow. ;)

Beginnings of the Chacko-Mauwan architecture

The adventure of our main character begins in his home village of Chacko-Mauwa.
In the last post I’ve mentioned that I’ve started working on the first actual level, and that is the Chacko-Mauwa village.
Today I’ll show you the first, work in progress, house.

Everything in the Chacko-Mauwa region is created out of wood, rope and different types of stones.
This is the simplest example of the house, but it’s missing the doors, and some other details.
Windows are transparent, so you’ll be able to see inside, and enter if the doors are unlocked.

That’s all for today.
If you have any questions or opinions, feel free to leave them in the comment section.
You can subscribe to this blog via e-mail, by click this Subscribe link; Or you can follow FrozenPixel on facebook/twitter.
You can expect the next post, hopefully, tomorrow ;)

Attracting stuff with the tongue

From our development diaries you know that Gorf can grab stuff with his tongue, and drag it towards himself.
He did use it to gain some extra velocity, but never to drag himself for a longer period of time.
That’s the latest addition, he can now grab the fence for example, and quickly glide towards the grab point.
It’s much faster than swimming, but it can only be done if there is something to grab :)
His tongue is very strong, he will be able to grab something in movement and let it drag him around.

In addition, I fixed the precision bug.
I was using Gorfs head normal to determine the direction of tongue throwing, and since the head was moving, he would always grab a slightly different place on the fence; for example.
That may sound awesome, but it isn’t good for the gameplay.
As mentioned, my goal is to make the controls absolutely tight and precise.
This week I’m creating an actual level, to test how all of these implemented mechanics work in practice. :)
I will use the gathered knowledge to perfect the current implementations.

That’s all for today.
If you have any questions or opinions, feel free to leave them in the comment section.
You can subscribe to this blog via e-mail, by click this Subscribe link; Or you can follow FrozenPixel on facebook/twitter.
You can expect the next post, hopefully, tomorrow ;)

Procedurally generated mesh and animation, in Unity 3D

When I started working on the tongue for the first time, back in 2013., I was thinking about how to make the grabbing look awesome.
Even tho the frogs from the planet Earth, from whom our main character was inspired, do an amazing job with their tongues; It doesn’t look so good without the slow motion. (Don’t blink, or you’ll miss it)
Fly, or whatever else they are catching, just sticks to their tongue.

My idea was that the tongue makes a loop around the object, and then it ties itself.
When think about the solution for that, I quickly realized that I’ll have to generate the tongue from code, since making the model and animation for every grabbable shape would take too much time.
Today i got back to the problem, and finished it.
Since the tongue is generated procedurally, I can determine various factors from the code.
In the screenshot above, you can see three different loop-around counts. (6,3,1), and in the screenshot bellow I played with the distances from the loop-arounds.


How does it work?

The loop he makes around the object has been explained in my previous few posts, so go read those first.
Now for the “knot” itself, solution is pretty simple.
The points are placed around the tongue, from the EnvironmentCurve end point, towards the player character.
To arrange points in circle, I’ve used sin and cos functions.
To make the spiral I’ve added a slight position shift in the direction of the EndPoint->Player vector, to every new point created.


For tongue to spawn out of nowhere would look weird, so the animation had to be implemented.
Since the tongue is procedurally generated, animation had to be as well.
Animation can be split in three phases, and its mainly done with linear interpolation.
First phase is the movement towards the EnvironmentCurve, second phase is looping around the EnvironmentCurve with a bigger radius, and the final state is tightening.
When releasing, first phase is done backwards.Tongue_Three

That’s all for today.
If you have any questions or opinions, feel free to leave them in the comment section.
You can subscribe to this blog via e-mail, by click this Subscribe link; Or you can follow FrozenPixel on facebook/twitter.
You can expect the next post, hopefully, tomorrow ;)

Curve Episode III: Revenge of the Tongue

Wait, isn’t this the fourth post to mention Curve?
Yes it is, but the last post was set in the future ;)

The only thing to do from yesterday was to use the data provided by the new editor “toys”.
So I did some simple math, to be precise, I’ve extended the Vector3 (Unity Class) to support ClosestPointOnLine(a,b).
I used the similar thing in a different class, so it was natural to make this global.
I could explain the math, but I think it makes no point since it is so basic.
The only thing left to do is to show you the result.
It felt good to play with this after it was implemented.
I just have to make the tongue look a bit more natural at the grabbing point, and it will be perfect.

That’s all for today.
If you have any questions or opinions, feel free to leave them in the comment section.
You can expect the next post, hopefully, tomorrow ;)

Moving Vectors with transform tools in Unity Editor

The question is how to do it?
Since I already moved my curve around, which you may know if you read my last post, I must know the answer.
Well I do, and today I expanded on the solution.

I was talking about moving the curve, and my solution to that was to use a path, so curve will move on the path.
From the tip of the tongue, I’ll get the nearest point on the path and that’s where curve should be. Perfect, I can describe any shape with that.
Now, that means that I will have to move more points, an array, within the editor? Yes, that’s the most convenient way.

So Unity editor can move Vectors from an array? Well, no. Not right away, at least.
I created a EnvironmentPoint class that is a MonoBehaviour (not directly inherited from it, you’ll understand, just continue riding ;) )so that I can attach it to a GameObject.
But the beauty is in the Editor.

Unity Editor allows you to create a visual interpretation of a specific Class in the Inspector.
So to save myself some time, I’ve created a base class for all data I want to transform in editor (Inherited from MonoBehaviour), and for the editor class. (Inherited from Editor)
MonoBehavioru inherited class holds the transformation data (position, rotation, scale), and the Editor inherited class does all the magic :)

It provides a Transform button, that will create a child GameObject.
Created GameObject will have the same script as the parent, or in the case of the Vector3 my own class EnvironmentPoint.
This is the magical part. MonoBehaviour inherited class holds one more information, and that is a bool to check if it is a creator, or created GameObject that has the component on it.
In the case of created, it will render a Done button. Once the button is pressed, object will be destroyed and the transform data will be sent to the parent.
This is how the EnvironmentPointEditor looks like.

TransformStart happens when the Transform button is pressed.
TransformUpdate, on every Inspector render frame. I can add any data to the Inspector window.

TonsformDone once the Done button is pressed.

I could even use this to move every point of the Environment curve.
Current points you are seeing are those of the Path, for now I’ll use a fixed two points “path”; But I prepared everything for the extension.
Curve and Path
The only thing to do is to use that data with the tongue. :)
Before I end this one, it is worthy to note that you can now subscribe to this blog via e-mail. :D
I’ll continue the tongue grabbing saga tomorrow.

The beauty is in the detail

Let’s continue our EnvironmentCurve saga, shall we? :D
Before that, I will show you the new mockup for the Chacko Mauwa (Gorf’s home village, I already feel like we’ll need a Wiki to explain all this) fence model.
This one provides a nice place for his legs and arms when doing a push off.
This is a frame from the PushOffIdle animation, that’s the time to select the desired push off direction. (You can read more about that in my last post)
It’s also nice for tongue grabbing. :)GorfFence
Fence model is the one I’ve created today, and I’ll use it to show you the updates on the EnvironmentCurve Unity Editor script.
I’ve added a new precision field, and now I’ll show you how it influences the curve. As I said in the last post, it’s used to adjust the number of points used to generate the curve.Precision
I’ve also applied for the scaling, so it is saved into the curve data, but not for the rotation;
Rotation isn’t required right now, but It will probably be in the future, so I plan to implement that a.s.a.p. since it will not require a lot of effort.
Now that that is done, let’s see the final result. Final
There is one more thing mising, and that is to allow for the curve to “move”. What? Yes, to “move”. How?
Well, right now the curve is fixed in place, and that isn’t good. I want the tongue to wrap around the exact point you’ve selected, and not always around the center of the fence.
And that will be a relevant piece for the gameplay.
So, in the example of this fence, curve should move from the one pillar to another.
Freedom of translation is something that I’ll add to the EnvironmentCurve Unity Editor script, hopefully tomorrow, and that is whan you can expect a new post.

If you have any questions, or you don’t understand something, please let me know in the comment section. :)

To boldly go, where no man has gone before

Yey! The first actual blog post :)
For the past few weeks I’ve been working on the push off mechanic, and that’s done right now. I do have some polishing to do, and maybe a quick version of it, but that’ll have to wait.

What is a push off mechanic? Well, Gorf (Development name for the main character) can push off various things. Pushing off gives you a lot of velocity, and can be used at places where regular swimming is too slow. It can also be used to quickly change direction.
Right now, you press a push off button near an object that Gorf can be pushed off, you select the direction using your mouse (Or analog stick on a Gamepad), you release the push off button and Gorf flies in the direction of your wishing.
You can press the push off button again, while gorf is “flying”, to link few push offs.
I am considering a quick push off, which will skip the direction selection part, but that will have to be testet to see if it will work in the game.
Current push off mechanic works really nice. (You’ll be able to see it in the next development diary)

Fast forward to the present.
I’m working on the EnvironmentCurve Unity Editor script. Confused? Don’t be, I’ll explain everything.
Unity Editor allows for the extensions in a form of “Editor Scripts“. Unity Editor scripts can be used to extend the Unity editor in any way you desire.

What is an EnvironmentCurve? EnvironmentCurve is a special class developed for Nucleotide, it holds data that describes a curve in space.
It’s a Unity MonoBehaviour component that is attached to an GameObject. Example of use is for Gorfs tongue to properly wrap around any object.

Now, I needed a way to create those curves in editor, so that I can wrap them around object precisely.
So what did I do? Once I attach the component to the Object, I see an edit button.
When I click the Edit button, i can Move/Rotate/Scale the curve with regular Unity Editor tools. (The object that curve is attached to does not move, only curve moves :) )

EnvirnomentCurve Move

Once I click the Done button, transformation will be saved in a form of a curve, array of dots.
Right now I’m missing a precision field, that will allow me to increase or decrease number of dots used to describe the curve.
The field you see underneath the Done button is for the radius of the circle.
This feature will allow for the different shapes of curves, so, that’s why it isn’t called a EnvironmentCircle.
There are few tiny things to do here, like apply for scaling, and adding few fields.
That will be done tomorrow, when you can expect a new blog post.

Tell me what you think, and leave all your questions in the comment section.